Concepteur designer graphique - concevoir un design d'interface utilisateur - Conception de sites durables, performants et responsables

Objectifs pédagogiques généraux
o Comprendre les fondements de l'éco-conception appliquée au design d'interface.
o Participer à la définition d'un projet de design d'interface en collaboration avec les parties prenantes.
o Concevoir la structure logique et fonctionnelle d'un site éco-conçu.
o Produire des maquettes graphiques et interactives accessibles et cohérentes avec l'identité visuelle du projet.
o Appliquer les bonnes pratiques de l'éco-conception dans toutes les étapes du projet.
o Formaliser et présenter un projet complet de design d'interface utilisateur éco-conçu certifiable.

Compétences visées
o Participer à la définition de l'interface utilisateur en collaboration avec les différentes parties prenantes (commanditaire, directeur artistique, équipes fonctionnelles, techniques, etc.).
o Concevoir la structure de l'interface utilisateur, en définissant et positionnant les différentes zones fonctionnelles de la page (zoning) ainsi qu'en détaillant les contenus de ces dernières (wire framing), en vue de faire valider l'organisation générale des pages du projet et leur aspect fonctionnel.
o Elaborer les maquettes graphiques et interactives de l'interface utilisateur en adéquation avec l'identité visuelle du projet, en réalisant l'ensemble des éléments visuels dans le respect des règles de confort, de navigation, d'éco-conception et d'accessibilité, afin de soumettre au commanditaire une représentation détaillée de l'apparence de l'interface.

MODULE 1 : Aperçu de l'architecture d'une interface utilisateur éco-conçu
. Introduction à l'éco-conception web
. Connaître les impacts environnementaux d'un site web
- Analyse de l'empreinte énergétique d'un site : données, bande passante, consommation des ressources et outils d'analyse.
- Directives et normes à connaître.

MODULE 2 : Définir l'interface utilisateur d'une création web éco-conçue
. Participer à la définition de l'interface utilisateur en collaboration avec les différentes parties prenantes en créant le cahier des charges d'un web design éco-conçu.
. Clarifier les objectifs spécifiques de chaque écran en fonction des fonctionnalités prioritaires, des contenus majeurs et du parcours utilisateur attendu :
- Limiter les pages à créer, les lister et les hiérarchiser afin de créer l'arborescence.
. Guider la conception de l'interface en élaborant une arborescence flexible, et un parcours utilisateur (user journey), permettant une navigation fluide sur différents formats (responsive design).
. Prioriser les informations à intégrer dans chaque écran en lien avec les exigences techniques, ergonomiques et graphiques du projet.

MODULE 3 : Concevoir la structure de l'interface utilisateur éco-conçu (8h)
. Définir et positionner un zoning clair et hiérarchisé en répartissant visuellement les zones fonctionnelles de chaque page.
. Détailler le contenu de chaque zone dans des wireframes illustrant les fonctionnalités essentielles et la logique d'agencement des éléments.
. Préparer un livrable structuré (zoning + wireframes) permettant de faire valider l'organisation générale des pages du projet et leur aspect fonctionnel auprès des parties prenantes.
. Intégrer les bonnes pratiques en design inclusif et en écoresponsabilité dans la structuration des pages et la navigation proposée.

MODULE 4 : Réalisation des maquettes graphiques et interactives d'une l'interface utilisateur éco-conçue et accessible (10h)
. Élaborer les maquettes graphiques et interactives de l'interface utilisateur en adéquation avec l'identité visuelle du projet.
. Réaliser l'ensemble des éléments visuels de l'interface.
. Appliquer de manière uniforme les éléments graphiques (couleurs, typographies, icônes, styles) conformément à la charte graphique du projet.
. Respecter les règles de confort d'usage lors de la conception graphique.
. Appliquer les règles de navigation.
. Intégrer les principes d'éco-conception dans le design des maquettes
. Soumettre au commanditaire une représentation détaillée de l'apparence de l'interface éco-conçue.