Quand les élèves te font de la pub …
Grâce aux élèves du master GIDE qui ont parlé de moi, j’ai pu donner cours aux élèves du master IDEMM (Ingénierie de Documentation, Édition, Médiation et Multimédia). Le premier cours était programmé quelques jours après avoir été contacté, je devais donc faire au mieux avec le peu de connaissance que j’avais sur le niveau des élèves pour préparer ce cours rapidement.
Le premier cours : la théorie
Nombre d’étudiants : 24 | Nombre d’heures de cours : 5h | Lieu : Université de Lille
Afin de faire connaissance, j’ai commencé le cours par un tour de table pour savoir qui ils sont, connaitre leur niveau et le métier qu’ils visent. Puis, j’ai continué en questionnant les élèves sur leurs connaissances en design graphique. J’en ai profité pour parler des tendances graphiques qui ont marqué l’évolution du design d’interface utilisateur. Nous avons ensuite réfléchi aux étapes nécessaires à la création d’une interface utilisateur. Je me suis assuré que l’utilisation des logiciels de création graphique Photoshop, Illustrator et Indesign étaient claire pour tout le monde. Puisque les élèves avaient déjà eu une initiation à Photoshop, je leur ai proposé d’apprendre les bases d’Illustrator.
Deuxième cours : l’atomic design
Compte tenu du confinement (covid-19), j’ai proposé aux élèves de faire les prochains cours en visio. Pour ce faire, j’ai créé un sondage afin de m’assurer de la disponibilité des étudiants. Parallèlement, j’ai proposé de jeter un coup d’œil aux CVs des élèves n’ayant pas encore trouvé de stage pour, si besoin, leur donner des pistes d’améliorations.
Lors de ce premier cours en visio, nous avons vu comment créer une interface utilisateur grâce au design atomique (ou atomic design). Cette méthode créée par le designer web Brad Frost à de nombreux avantages.
- Elle facilite la création, la maintenance et l’évolution des interfaces
- Elle facilite la création d’interface en la découpant en briques réutilisables.
- Elle permet de concevoir plus facilement des interfaces responsives (qui s’adaptent aux tailles d’écran du périphérique utilisé)
- Elle permet de travailler de manière progressive (atome, molécule, organisme, gabarit, page)
- Elle sécurise la création de l’interface car chaque étape est validée avant de passer à la suivante
- Elle se rapproche de la manière dont sont codées les interfaces par les développeurs web
- Elle limite les frictions entre designers et développeurs
Une fois cette partie théorique abordée, nous avons fait le tour du logiciel Figma. Pendant cette séance les élèves ont appris :
- À utiliser les outils principaux de Figma
- À utiliser la méthode design atomique
- L’intérêt des styles de couleurs et de textes pour gagner en fluidité en assurant un univers graphique cohérent.
Troisième cours : techniques avancées
Avec ce cours, nous passons à la vitesse supérieure. Nous avons appris :
- À créer des composants réutilisables (Master)
- À assembler plusieurs composants pour en créer de plus complexe
- La différence entre master et instance
- À travailler de manière dynamique
- À utiliser une nomenclature précise pour créer des ensembles de style, d’état, …
- À personnaliser en quelques clics les instances : changer les couleurs, remplacer un bouton, changement état, …
- À utiliser les contraintes pour créer des composants flexibles.
Aujourd’hui encore en 2022, je continue de donner cours aux étudiants en pendant le premier-deuxième semestre sur une période de 20h