Descriptif

Ce deuxième cours de Design d’interfaces vise à approfondir les compétences de design pour les écrans. Les “livrables types” seront des maquettes pour des sites web, applications mobiles, ou autres interfaces numériques. Les exercices pratiques seront réalisés avec le logiciel Figma

pour plus de détail voir plan de formation

Objectifs du cours

Le but de ce cours est d’acquérir des connaissances approfondies sur la technique du logiciel de conception graphique Figma et le prototypage d’interfaces web.

Compétences à atteindre

• [x] Connaitre les bases de la mise en page pour écran : hiérarchie de texte, espacements et positionnement
• [x] Savoir utiliser une grille typographique simple, mettre en page du texte et des images à l’aide d’une grille.
• [x] Atteindre une bonne connaissance du logiciel Figma comme outil de prototypage. Savoir utiliser les composants.
• [x] Comprendre ce qu’est un site web ( pouvoir en donner une définitnion, pouvoir décrire l’anatomie d’un site, connaître les différentes techologies utilisées, la différence entre site statique et dynamique, CMS, )
• [x] Réaliser une maquettre web simple présentant son concept d’interface de manière claire.
• [x] Décrire et expliciter un concept d’interface interactive

Théorie

1. Les bases de la mise en page : construire une grille typographique → cours disponible ici
2. Design d’interface et site internet définition et anatomie → cours disponible ici
3. UI, UX et wireframe
   → cours disponible ici

Exercices

Exercice 1 : Digital Poster (1)

Connaissances/compétences à atteindre

• Comment construire et utiliser une grille typographique
• Reprendre/ré-interpréter les codes graphiques d’un visuel
• Mettre en page du texte et créer des hiérarchies de texte
• Créer un visuel animé ou/et interactif avec le logiciel Figma

Créer une mise-en-page web en adaptant un poster choisi parmi une séléction. Puis donner lui vie et proposer une version animée et/ou interactive de ce visuel.

Donnée de l’exercice :

Exercice : Digital Poster (1)

Liens avec cours :

Les bases de la mise en page pour écran (1)