Généralités
Mis à jour leLa 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 ~~Vous devez être inscris pour voir le contenu complet de cette section (196 mots supplémentaires ).
Types de design
Mis à jour leMê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 ~~Vous devez être inscris pour voir le contenu complet de cette section (194 mots supplémentaires ).
Material design
Mis à jour leIl 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 ~~Vous devez être inscris pour voir le contenu complet de cette section (-9 mots supplémentaires ).
Disposition
Mis à jour leEn terme de disposition, la grille est devenue un standard. Voir le cours sur Bootstrap.
Vous devez être inscris pour voir le contenu complet de cette section (-17 mots supplémentaires ).
Couleurs
Mis à jour leLe 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 ~~Vous devez être inscris pour voir le contenu complet de cette section (609 mots supplémentaires ).
Profondeur et ombres
Mis à jour leUne 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 ~~Vous devez être inscris pour voir le contenu complet de cette section (-17 mots supplémentaires ).
Texte et typo
Mis à jour lepolice, style d'écriture (titrage, ponctuation, etc...), alignement, etc..
L'outils de fonts de Google : https://fonts.google.com/
Vous devez être inscris pour voir le contenu complet de cette section (-17 mots supplémentaires ).
Mouvements et animations
Mis à jour leVous 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…
Vous devez être inscris pour voir le contenu complet de cette section (227 mots supplémentaires ).
Images
Mis à jour leles 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...)
Vous devez être inscris pour voir le contenu complet de cette section (-15 mots supplémentaires ).
Les composants d'interfaces
Mis à jour lebreadcrumbs, dropdow, button, etc....
Vous devez être inscris pour voir le contenu complet de cette section (-17 mots supplémentaires ).
Sons
Mis à jour lehttps://material.io/design/sound/sound-resources.html#resources
Vous devez être inscris pour voir le contenu complet de cette section (-17 mots supplémentaires ).