Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Généralités

Mis à jour le

La conception d'interface utilisateur est très importante lorsque l'on travail en tant que développeur front-end. C'est par ce biais que l'utilisateur va interagir avec votre application, est donc va se sentir assez à l'aise pour continuer à s'en servir, ou bien va aller voir comment ça se passe chez la…

~~ Fin de l'extrait ~~

Types de design

Mis à jour le

Même si vous êtes techniquement "libre" d'implémenter le design de votre choix, il y a tout de même différentes grande famille de conception d'interface (voir ce lien pour des exemples : https://99designs.fr/blog/conseils-design/types-design-graphique/)

En tant que développeur, on se cantonnera à la partie technique d'une interface. Nous laisserons le choix des…

~~ Fin de l'extrait ~~

Material design

Mis à jour le

Il existe un framework CSS qui colle parfaitement aux règles du material design, c'est Materialize : https://materializecss.com/

(image visible sur la plateforme de formation)

Pour la mise en pratique, nous nous réferrerons au cours sur Bootstrap pour ceux qui ne connaissent pas, mais…

~~ Fin de l'extrait ~~

Disposition

Mis à jour le

En terme de disposition, la grille est devenue un standard. Voir le cours sur Bootstrap.

Couleurs

Mis à jour le

Le choix des couleurs est un élément primordial lorsque l'on conçoit une interface graphique. Ce sont elles qui vont "donner le ton" général de votre application, et de sa clarté. Le choix des couleurs, même si il ne vous appartient pas, peut déterminer plusieurs ressentis important du point de vue…

~~ Fin de l'extrait ~~

Profondeur et ombres

Mis à jour le

Une des grandes spécificités du Material Design, c'est qu'il joue sur les ombres pour simuler une profondeur impossible à avoir sur un écran plat. https://material.io/design/environment/elevation.html

~~ Fin de l'extrait ~~

Texte et typo

Mis à jour le

police, style d'écriture (titrage, ponctuation, etc...), alignement, etc..


L'outils de fonts de Google : https://fonts.google.com/

Mouvements et animations

Mis à jour le

Vous serez très souvent emmené à animer vos pages avec différents effets. Cela est très bien, mais c'est à utiliser avec parcimonie, car trop d'effet tue l'effet. Un effet se doit d'être :

  • utile (il doit réellement emmener quelque chose à l'utilisateur)
  • léger (pas d'effet "disruptif" ou trop long)
  • ne pas impacter les…
~~ Fin de l'extrait ~~

Images

Mis à jour le

les icônes (icônes systèmes, taille minimal pour les mobile)

Les images (photos et illustrations) (à utiliser avec modération, doit générer une émotion, etc...)


Les composants d'interfaces

Mis à jour le

breadcrumbs, dropdow, button, etc....

Sons

Mis à jour le

https://material.io/design/sound/sound-resources.html#resources