Design d'interfaces 1 - Fondamentaux design écran
Descriptif
Durant le premier semestre, les élèves apprennent les bases du design visuel.
Dans ce premier cours “Design d’interfaces”, le focus devra être mis sur la manière dont les principes fondamentaux du design s’appliquent pour les écrans.
Les exercices pratiques seront réalisés avec les logiciels métier du design pour les ecrans, principalement Figma.
Important: définir ce domaine professionnel, bien expliquer ce qu’est le “design d’interfaces”. La différence entre les termes (UI, UX…).
Contenus possibles
- Terminologie: UI, UX, wireframe, maquette, prototype, basse/haute fidélité, “pattern library”…
- Prise en main de l’interface Figma
- Principes de Gestalt (symétrie…) (cf Clarke 95)
- Contraste visuel
- Hiérarchie de l’information (cf Refactoring)
- Layout and spacing (cf Refactoring)
- Texte, typographie (cf Refactoring, Clarke 165)
- Couleur (cf Rf, Lupton 148)
Exemple de travaux pratiques
- Conception d’interface par exemple d’un site web, d’une newsletter ou d’une landing page.
Un exemple de structure de cours:
📚 Références
Références pour ce cours, en bibliothèque Eracom-EPSIC:
- Andy Clarke, Art Direction for The Web, Smashing Magazine, 2019. Disponible en bibliothèque Eracom-EPISC (004.03.03 CLA). Lien OneDrive.
- Adam Wathan & Steve Schoger, Refactoring UI, . Lien OneDrive.
- Ellen Lupton, Typo et design pour écran, Pyramyd, 2015. Disponible en bibliothèque Eracom-EPISC (655.26 LUP). Lien OneDrive
Pour info: Les élèves des classes ID412, ID411, ID311 ont acheté le livre de Lupton (Typo et design pour écran). Depuis la rentrée 2022 ce n’est plus un achat imposé.
Autres références:
- Les fondamentaux du design interactif, Gavin Ambrose & Michael Salmond, Pyramyd, 2013.
- UX Design et ergonomie des interfaces, Jean-François Nogier & Jules Leclerc, Dunod, 2016.
- Expérience utilisateur mobile, Amélie Boucher, Eyrolles, 2015.
Liens bibliographie:
Structure globale des cours
Pour situer ce cours dans le contexte de la formation: