Scribd
Importer
2 vues2 pages

Module 3 Suite

Ce document présente les objectifs d'apprentissage pour la conception d'interfaces utilisateur (UI), en distinguant clairement l'UI de l'expérience utilisateur (UX) et en introduisant la méthodologie de l'Atomic Design. Il aborde également les principes de structuration des pages web, l'importance de l'accessibilité numérique, et les éléments clés de l'interface visuelle tels que la grille, la typographie, et la couleur. Enfin, il inclut un questionnaire d'ouverture pour stimuler la réflexion critique des étudiants sur les interfaces qu'ils utilisent.

Transféré par

zhn8y4zcrr
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues2 pages

Module 3 Suite

Ce document présente les objectifs d'apprentissage pour la conception d'interfaces utilisateur (UI), en distinguant clairement l'UI de l'expérience utilisateur (UX) et en introduisant la méthodologie de l'Atomic Design. Il aborde également les principes de structuration des pages web, l'importance de l'accessibilité numérique, et les éléments clés de l'interface visuelle tels que la grille, la typographie, et la couleur. Enfin, il inclut un questionnaire d'ouverture pour stimuler la réflexion critique des étudiants sur les interfaces qu'ils utilisent.

Transféré par

zhn8y4zcrr
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

PARTIE II : CONCEPTION DES INTERFACES UTILITAIRES (UI)

OBJECTIFS SPÉCIFIQUES :

À la fin de cette séquence, l'étudiant sera capable de :

• Distinguer clairement l'UI (Interface Utilisateur) de l'UX (Expérience Utilisateur).


• Appliquer la méthodologie de l'Atomic Design pour créer des interfaces modulaires.
• Structurer une page web ou mobile en utilisant un système de grille (12 colonnes).
• Respecter les normes d'accessibilité numérique (contraste des couleurs, lisibilité
typographique).
• Mettre en œuvre le processus de création complet : du Wireframe à la Maquette haute
fidélité (Mockup) sur un outil professionnel.

QUESTIONNAIRE D'OUVERTURE (PRÉ-TEST & TRANSITION)

Objectif pédagogique : Faire le pont entre la création du logo (Partie I) et son application sur
écran (Partie II), et éveiller l'esprit critique des étudiants sur les interfaces qu'ils utilisent tous les
jours.

Déroulement : Consultez la page d'accueil d'un site web très connu (comme Amazon ou
Facebook ou autres sites connu de vous) et répondez à ces questions.

1. Question : Où se trouve le logo sur cet écran, et selon vous, pourquoi est-il placé
là ?
2. Question : Si vous avez créé un logo avec 4 couleurs différentes pour un client,
allez-vous utiliser ces 4 couleurs en quantités égales sur son site web ?
3. Question : Quelle est la différence entre un site web "beau" et un site web "facile
à utiliser" ?

1. Introduction à l'UI Design (User Interface)

• Définition : L'UI est le pont visuel entre l'homme et la machine. C'est l'habillage
graphique qui rend l'expérience agréable et intuitive.
• Différence UI vs UX : L'UX (User Experience) est le squelette et la logique ; l'UI est la
peau et l'émotion.
• Le rôle de l'infographiste : Créer de la cohérence visuelle, hiérarchiser l'information et
guider l'œil de l'utilisateur.

2. L'Atomic Design (Méthodologie de construction)

Pour ne pas créer des pages "au hasard", on utilise une méthode scientifique.

• Atomes : Les plus petits éléments (Couleurs, Polices, Icônes).


• Molécules : Assemblage d'atomes (Un bouton = Couleur de fond + Texte + Forme).
• Organismes : Assemblage de molécules (Une barre de navigation = Logo + Menu +
Bouton Recherche).
• Templates (Gabarits) : La mise en page sans le contenu réel.
• Pages : L'interface finale avec le contenu réel.

3. Les Piliers de l'Interface Visuelle

A. La Grille (Grid System)

Rien ne se pose au hasard. Tout est aligné.

• La Grille 12 Colonnes : Standard du web (Bootstrap). Elle permet d'organiser le contenu


de manière flexible.
• Les Gouttières (Gutters) : L'espace blanc entre les colonnes qui laisse respirer le design.
• Les Marges : L'espace extérieur qui cadre le contenu.

B. La Typographie en UI

On ne lit pas sur un écran comme sur un livre.

• Hiérarchie : H1 (Titre principal), H2 (Sous-titre), Body (Paragraphe), Caption


(Légende).
• Lisibilité : Choix de polices "Sans-Serif" (Arial, Roboto, Inter) pour les interfaces
digitales car elles sont plus lisibles sur écran.

C. La Couleur et l'Accessibilité

• La règle du 60-30-10 : 60% couleur dominante (neutre), 30% couleur secondaire


(marque), 10% couleur d'accent (Call to Action).
• Contraste : Vérifier que le texte est lisible sur le fond (Normes WCAG). Un bouton
jaune avec un texte blanc est illisible et interdit en UI pro.

D. Les Composants (UI Kits)

L'étudiant doit savoir dessiner les éléments interactifs :

• Les Boutons (CTA - Call To Action) : Primaire (Action principale), Secondaire


(Annuler/Retour).
• Les Champs de formulaire (Inputs) : État vide, état rempli, état d'erreur (rouge).
• Les Cartes (Cards) : Conteneurs d'information (Image + Titre + Extrait).

NB : A IMPRIMER. LIRE ATTENTIVEMENT ET REPONDRE AUX QUESTIONS.

Vous aimerez peut-être aussi