← Retour à l'accueil Projet 02 • Conception Web • HEH

Actor Studio

Conception d'une maquette web immersive dédiée à la filmographie de Jean Dujardin pour le cours de « Design Web ». Cet acteur incarne aussi bien les comédies populaires françaises que des rôles à reconnaissance internationale, à l'image du film muet multi-oscarisé The Artist de Michel Hazanavicius.

Catégorie UX Design, Prototypage, Conception Web
Rôle Lead UI/UX Designer
Date Décembre 2023
Outils Figma & Illustrator
Jean Dujardin recevant son Oscar du meilleur acteur pour The Artist

Le Contexte & l'analyse

Concevoir une structure d'information rigoureuse pour valoriser des genres cinématographiques variés au sein d'une même interface.

Pour ce cours de « Design Web », la problématique était de traduire graphiquement la diversité de la filmographie d'un acteur à travers un design système cohérent mais adaptable. Le choix s'est porté sur une figure emblématique du cinéma français et international, permettant d'explorer des ambiances allant de la comédie solaire au classicisme muet en noir et blanc.

Démarche Ergonomique & UI

La démarche s'est structurée autour de la conception d'un parcours utilisateur (User Journey) sans friction et d'une esthétique typographique forte :

  • Charte d'ergonomie (guidelines) : rédaction d'un rapport complet dictant les règles d'accessibilité (normes WCAG), de contrastes chromatiques et de taille des zones tactiles pour un confort de lecture optimal.
  • Design système typographique : adoption de la police Magneto Bold pour incarner le prestige du cinéma, combinée à la lisibilité de la police Futura condensed boldt italic pour les blocs de texte et les métadonnées.
  • Maquette responsive & sections déclinées : structuration en grilles asymétriques déclinées par registres : jaune vif texturé pour les comédies populaires, nuances de gris argenté et noir pour le cinéma muet d'époque, et clair-obscur sombre pour les drames.

Aperçu de la Maquette Web complète

Partie supérieure de la maquette Web Actor Studio Agrandir la maquette 🔎

Charte Graphique & Déclinaisons

Ci-dessous, le document complet de ma charte graphique et de mes guidelines :

Charte technique d'ergonomie et guidelines d'accessibilité

Aperçus des déclinaisons graphiques conçues pour valoriser chaque ambiance cinématographique au sein du design système.
En combinant recherches théoriques approfondies et intégration graphique propre, ce projet s'impose comme une réponse complète aux défis de l'ergonomie et du design système.