Aperçu des sections

  • Généralités

    Tout replier Tout déplier

    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 concurrence... Une mauvaise interface ne donne pas envie d'utiliser un produit !

    En tant que développeur, vous allez le plus souvent vous baser sur des règles de conceptions déjà établies. A moins que vous ne vous sentiez l'âme d'un concepteur graphique, ce genre de choses sont très souvent déléguées à des gens dont c'est le métier, est bien souvent issu de l'univers du graphisme, de l'ergonomie ou du marketing.

    Par contre, en tant que dev, vous devez absolument maîtriser le jargon et les bonnes pratiques, et être capable d'intégrer rapidement et proprement des choix techniques dans l'interface une application. C'est pour cela que l'on se base bien souvent sur des bibliothèques, frameworks et autres outils afin de gagner en productivité.

    Voici quelques exemples :

    • Bootstrap (framework CSS)
    • Material Design (framework CSS)
    • Fontawesome (icônes)
    • Google font (polices)
    • Balsamiq, figma (outils de maquettage et de prototypage)
    • etc...



  • Types de design

    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 goûts et des couleurs aux artistes...


    Exemple d’interfaces utilisateur




    Il s'avère qu'aujourd'hui, la "norme" pour une interface graphique est le modèle "Material Design", dont les règles ont été édictées par Google. En comparaison, le "Flat Design" (supporté par Microsoft) tend à perdre du terrain.


    Flat design vs. Material Design


    Pour la suite du cours, nous verrons plutôt le Material Design.

  • Material design

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


    Pour la mise en pratique, nous nous réferrerons au cours sur Bootstrap pour ceux qui ne connaissent pas, mais vous pouvez essayer Materialize qui est assez similaire.

  • Disposition

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

  • Couleurs

    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 de l'utilisateur :

    • une couleur rose fluo sera mal vue pour un site qui se veut sérieux, mais bien pour un e-commerce de vêtement féminin (désolé pour les clichés)
    • trop de couleurs aura tendance à perdre l’utilisateur (sauf si vous bossez chez Desigual)
    • certaines couleurs ont un sens "innés" (rouge = danger, orange = attention, vert = ok)


    Choix des couleurs
    PAS BON


     

    		BON



    Bref, le choix des couleurs est tout, sauf anecdotique.

    En tant que dev, vous devrez veiller à ce qu'une couleur principale soit bien définie. Ce sera elle qui donnera le ton de votre application. Vous pouvez choisir une couleur secondaire pour éviter quelque chose de trop monochrome, mais cette couleur secondaire doit bien se marier avec la couleur principale.

    En revanche, vous pouvez utiliser les codes couleurs "universels" (comme rouge/orange/vert) sur des tous petits éléments, et avec parcimonie.

    Une fois que vous aurez choisie votre couleur principale et secondaire, vous pourrez utiliser différentes nuances (un peu plus claires ou un peu plus foncées) afin de bénéficier d'une palette plus large. Un peu comme avec un nuancier.


    Dans cet exemple, vous pourrez vous servir des différentes teintes pour égayer un peu votre design, mais en restant toujours sur la base de vos couleurs dominantes :



    Enfin, le noir, le blanc et toutes les nuances de gris n'étant pas vraiment des couleurs, vous pouvez les utiliser un peu comme vous voulez. Voici quelques règles bonnes pratiques :

    • jamais de "tout blanc" ou "tout noir". Visez plutôt le gris très foncé ou le gris très clair. C'est toujours plus agréable à l'oeil
    • tout ce qui est couleur de fond "(e grand espace vide autour de votre contenu principal), est généralement blanc (très clair)
    • on écrit du texte foncé sur un fond clair en général. Cela le rend plus facile à lire. Sauf, cas exceptionnels, ou l'on pourrait inverser cela (exemple : Netflix, ambiance salle de ciné)


    Voici un outils qui vous permet de trouver des couleurs qui vont bien entre elles : https://material.io/design/color/the-color-system.html#tools-for-picking-colors

    Et voici un autre outils qui vous permet d'expérimenter des choix de couleurs dans une interface de test : https://material.io/resources/color/#!/?view.left=0&view.right=0

  • Profondeur et ombres

    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

  • Texte et typo

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


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

  • Mouvements et animations

    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 performances techniques (ce qui peut être rapidement le cas sur des terminaux peu puissants)


    Les animations sont caractérisées par deux notions principales :

    • leur durée (en millisecondes ou en secondes)
    • leur courbe de easing (accélération)


    Voici quelques exemples de courbes de easing que vous retrouverez un peu partout lorsque vous devrez "calerez" vos animations :





    Vous remarquerez que certaines courbes procurent des effets que l'on pourrait décrire facilement, tel que le rebond par exemple (bounce). Ces courbes peuvent s'appliquer tout aussi bien à des mouvements qu'a d'autres types de transitions (transparence, etc...).

    Cliquez sur le menu burger en haut à gauche du Moodle pour constater l'utilité de ces courbes d’accélération.


    La version material => https://material.io/design/motion/understanding-motion.html#principles

  • Images

    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

    breadcrumbs, dropdow, button, etc....

  • Sons

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