M2 IDEMM 2020 — Création d’interface utilisateur

Quand les élèves te font de la pub …

Nombre d’étudiants : 24 | Nombre d’heures de cours : 5h | Lieu : Université de Lille

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

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.

Cet article vous a plu ?
Partagez-le sur vos réseaux 😃

Commenter

En soumettant ce formulaire, vous acceptez que votre Nom et votre Email soient utilisées par Noctaupüs! pour répondre à votre commentaire. Pour plus d'informations, lisez la Politique de confidentialité.

Vos réactions m’aident à identifier les sujets qui vous intéressent pour vous en proposer d’autres à l’avenir. Cet article n'a pas encore de commentaires. Soyez le premier ;)

Cacher les commentaires
PartagerTw.Fb.Pin.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!

ut commodo lectus libero dapibus Donec ante. Donec eleifend neque. ut id