Les étudiants doivent réaliser une carte vectorielle sur Illustrator, et interactive via Figma ou HTML/CSS/JS. Le thème est libre, mais la carte doit répondre à des contraintes design UX, être une création originale, et intégrer une signalétique complète (pictogrammes, légendes, infos/titres…).
Coordination projet : Nicolas GERVAIS / Cours & atelier : 15hrs
> Une carte réalisé par Noa Dufresne
Concept, UX
Pour ce projet, j’ai choisi VivaTech salon international consacré à l’innovation technologique, comme commanditaire fictif, et comme un évènement porteur des valeurs d’innovation, d’accessibilité et de pédagogie. Ma carte interactive devra être une représentation ordonnée des différents espaces thématiques, avec une double vocation : informative et interactive. La version interactive permet d’enrichir l’exploration grâce à une navigation dynamique, en phase avec les usages numériques de ce type d’événement.
Cette carte est réalisée au format A3 pour un affichage classique lors du festival VivaTech. Mais elle est aussi développée en HTML, CSS, JS, pour créer une version interactive qui fonctionne sur un grand écran ou une borne interactive…
> Dossier_VivaTech
Processus créatif, UX/UI
Le moodboard « fermé » illustre mon approche basée sur la perspective isométrique, avec des formes simples et géométriques pour suggérer relief et profondeur sans surcharge visuelle.
L’utilisation de couleurs unies, contrastées et harmonieuses, apporte une bonne lisibilité et confère une ambiance moderne et technologique.
Le traitement minimaliste favorise une compréhension immédiate des différents espaces, tout en conservant une esthétique élégante et fonctionnelle. Ce style graphique clair et dynamique correspond à l’identité innovante de VivaTech…
Prototypage / Croquis
Prototypage / Itérations
Prototypage / ItérationsLa carte a été modélisée sur Illustrator en vectoriel. Puis, je l’ai importée dans Photoshop pour ajouter quelques effets visuels et préparer le rendu final.
Ces itérations m’ont permis de clarifier mes intentions graphiques et de m’orienter vers une direction plus cohérente avec l’univers de VivaTech.
Version finale
Le design repose sur un système isométrique qui assure une bonne lisibilité à toutes les échelles / distances. La carte est structurée en quatre niveaux, chacun associé à une grande thématique de VivaTech… Le choix des couleurs s’inspire directement de l’identité visuelle de VivaTech. Enfin, la typographie utilisée est Stolzl; une linéale sobre, contemporaine et lisible en petit format…
Liens
> Prototype interactif codé : https://vivatech-one.vercel.app/
> Dossier projet : Dossier_VivaTech