Aller au contenu

TP2 | Étape 1 - Planification

Comprendre le concept

Interface futuriste animée, interactive, complexe et attrayante. Aussi appelée HUD.

Ce genre d'interface est utilisée dans les films (Ironman), les téléséries (Altered Carbon) et les jeux vidéo (Cyberpunk 2077) pour impressionner, transmettre rapidement de l'information visuelle et renforcer l'immersion dans un univers de science-fiction.

Quelques éléments classiques :

  • Des animations dynamiques : graphiques en mouvement, transitions fluides, clignotements et effets lumineux.
  • Des données simulées : chiffres, courbes, coordonnées ou radars qui donnent l’impression de traiter de l’information complexe.
  • Une composition modulaire : plusieurs panneaux, cadrans et couches superposées qui évoquent un système multifonction.

Exemples d'esthétisme

Mots clés : Scifi HUD, Scifi dashboard, Scifi interface

Document de conception

  • Créer un document Word et l'enregistrer avec la nomenclature : "nomdefamille-prenom_TP2.docx"
  • Faire une page titre

Thématique

La thématique choisie permettra d'avoir une cohérence tout au long du projet.

  • Trouver une thématique de votre choix, mais elle doit être futuriste.
  • Valider son choix avec l'enseignant
    • Inscrire la thématique choisie dans le document de conception. Elle devrait s'écrire en une ou deux phrases maximum.

Exemples de thématique

  • Visière d'un cyborg à la recherche d'une proie
  • Interface de monitoring d'un réacteur nucléaire
  • Tableau de bord d'un vaisseau spatial
  • Interface du loadout dans le jeux vidéo Battlefield 6

Langue

Le contenu textuel du HUD peut être dans n'importe quelle langue (français, anglais, espagnol, japonais, code morse 🤷).

Le document de conception doit, pour sa part, être rédigé en français

  • Choisir une langue pour le HUD
    • Inscrire son choix dans le document de conception

Esthétisme et inspiration

  • Sur pinterest ou ailleurs, chercher des exemples qui vous plaisent. Vous pouvez utiliser les exemples données plus haut.
    • À la manière d'un moodboard, inscrire les urls d'inspiration comme référence dans le document de conception
  • Déterminer une palette de couleurs avec idéalement une couleur accent.
    Le noir et blanc fonctionne très bien aussi.
  • Trouver une ou plusieurs polices de caractères (Google Fonts, Dafont, etc.)
    • Inscrire ses choix dans le document de conception

Images

Il ne sera pas obligatoire d'utiliser des images pour le projet, mais pour créer un résultat convainquant, ça peut être très utile.

Wireframes

Quelques considérations importantes :

  • L'interface doit occuper l'entièreté de la page et devra toute être visible sans avoir à scroller.
  • La structure de page devra être faite en Grid CSS.

Avec le logiciel de votre choix (Ex. : Illustrator, Figma, Draw.io, Photoshop) :

  • Imaginez votre interface et dessiner sa grille.
  • Placer les différents éléments visuels dans la grille (voir plus bas)
  • Annoter les animations prévues dans le dossier de conception
  • Annoter l'interactivité prévue dans le dossier de conception

Exemples de grille

Une technique intéressante de travailler cette partie est de prendre une image existante et de dessiner sa grille par dessus pour se donner une idée.

Au besoin, voici des images de base : img1, img2, img3, img4, img5

Exemples de composantes à afficher

Exemples de données conceptuelles

Les données de l'interface peuvent être parfois difficiles à imaginer. Pour vous aider, vous pouvez réfléchir à des données cohérentes avec le concept choisi, mais fictives à la fois.

Exemple de données

Thème : Visière de cyborg

Informations sur la cible

  • Localisation sur une carte
  • Rose des vents
  • État de santé : fréquence cardiaque, température corporelle, tension artérielle
  • Données biométriques (visage, empreinte digitale, adn)
  • Profil psychologique (calme, stressé, agressif)
  • Activité détectée (« Entre dans un véhicule », puis «Sort du véhicule», puis «Se dirige vers xyz»)

Système du cyborg

  • État du système (CPU, RAM, température interne, énergie)
  • Diagnostic des capteurs (infrarouge, caméra, pression atmosphérique, température)
  • Module d'auto-réparation
  • Alertes système
  • État de la connexion XYZ
  • Objectifs, priorités et progression de la mission
  • Étapes accomplies et restantes
  • Temps estimé avant interception

Autres

  • Switch « activer vision thermique »
  • Bouton « verrouiller cible »
  • Switch « activer camouflage »
  • Bouton mode manuel/automatique
  • Carte tactique interactive
  • Décompte (en binaire, en hexadécimal)
  • Bouton d'autodestruction