UI Design 1 – Carnet de composants UI

En vous inspirant de références en ligne, comme celles présentées ci-dessous, vous dessinerez dans votre carnet les composants d’interface utilisateur·trice standardisés.

En plus de l’illustration, chaque composant UI doit :

indiquer sa thématique (regions, covering panels, organize…)
indiquer son nom courant et ses appellations alternatives, en anglais
présenter / illustrer ses différents états
indiquer à quelle balise HTML il est associé – lorsqu’elle existe

Plusieurs composants peuvent être regroupés au sein de la même illustration, ou s’inviter dans un contexte différent de leurs voisins, pourvu que leur thématique soit indiquée.

Ce carnet sera complété progressivement durant la première année, et vous accompagnera durant votre formation. Il sera relevé et évalué régulièrement. Il vous servira aussi de support de travail lors d’évaluations et de projets.

<aside> <img src="/icons/calendar-month_yellow.svg" alt="/icons/calendar-month_yellow.svg" width="40px" /> Progression et suivi du carnet

lundi 5 octobre (semaine 6) : évaluation du carnet (remis en fin de cours). → Objectif : avoir complété jusqu’à la rubrique 5. Communication (incluse).
lundi 14 décembre (semaine 14) : évaluation du carnet (remis en fin de cours). → Objectif : avoir complété toute la première partie*.*
lundi 12 avril (semaine 26) : évaluation du carnet (remis en fin de cours). → Objectif : avoir complété toute la seconde partie*.*

Le carnet sera évalué selon les critères suivants :

Critère	Points max	Pondération
Exactitude des composants	5	30 %
Changement d’état des composants	5	15 %
Qualité et soin	5	25 %
Cohérence générale	5	30 %
Total		100 %
</aside>

première partie

Régions et composants d’interface

<aside> <img src="/icons/document_blue.svg" alt="/icons/document_blue.svg" width="40px" /> 1. Regions : information distribution

nom	nom alternatif	balise HTML
header		<header>
hero	jumbotron
content		<main>
card
footer		<footer>
</aside>

<aside> <img src="/icons/document_blue.svg" alt="/icons/document_blue.svg" width="40px" /> 2. Covering panels

nom	nom alternatif	états
side sheets	drawer, tray, flyout, side panel	fermé / ouvert
bottom sheets		fermé / ouvert
</aside>

<aside> <img src="/icons/document_blue.svg" alt="/icons/document_blue.svg" width="40px" /> 3. Organize

nom	nom alternatif	balise HTML
tag	label, chip
table		<table>
ordered list		<ol> + <li>
unordered list		<ul> + <li>
</aside>

<aside> <img src="/icons/document_blue.svg" alt="/icons/document_blue.svg" width="40px" /> 4. Buttons

nom	nom alternatif	états	balise HTML
button		défaut, survolé, désactivé	<button>
segmented button	button group, segmented control	défaut, survolé
floating action button	FAB
</aside>