Une approche progressive des fondations de l’UI Design
Quelle est la meilleure façon d’apprendre l’UI Design ? Faut-il d’abord parler des couleurs ? De mise en page ? De comment faire un bouton ?
Une façon d’aborder efficacement un nouveau domaine pour mieux le comprendre, est de le désassembler jusqu’à atteindre ses parties élémentaires et indivisibles, qu’on peut alors étudier plus facilement dans un ordre logique et progressif.
Si je prends par exemple une maison ou un bâtiment, aux premiers abords c’est une structure complexe, composée d’une multitude de parties avec leurs règles qui s’emboitent et fonctionnent bien ensemble.
Maintenant, si à mon tour je veux designer une maison, il sera préférable d’étudier comment elle a été construite en remontant le temps, la déconstruire pour mieux comprendre toutes les parties qui la composent et leurs ordres d’assemblages, pour pouvoir ainsi refaire quelque chose de similaire.
Je découvrirai, entre autres, qu’il y a d’abord toute une procédure légale, une étude du terrain et que je devrai commencer par étudier le rôle des fondations et comment en faire des solides plutôt que de commencer par la décoration intérieure, et ainsi de suite.
Avec l’UI Design c’est la même chose, et pour répondre à la question du début, il nous faut extraire les parties fondamentales d’un design UI.
Si par exemple on prend ce design :
Dans l’ordre, on peut extraire les différentes parties qui le composent comme ceci, et ça marcherait pour n’importe quel design :
On a donc un design qui est fait de flows, qui sont faits de templates, eux-mêmes faits de composants qui sont un assemblage d’éléments de base, le tout, affiché sur des écrans et donc soumis à leurs contraintes.
Et si on continue, on se rend compte que derrière l’assemblage des composants et des templates, on a aussi des règles de mise en page générales comme la création de groupes clairs, les élévations, aligner les éléments, gérer le design responsive, etc.
Puis on a aussi des bonnes pratiques communes comme le fait de mettre la navigation en bas sur une app mobile, structurer un formulaire d’une certaine manière, etc.
Puis enfin, on a les styles qui vont dépendre de l’image du produit (dont les styles des designs natifs des OS comme iOS ou Android).
Tout cela en prenant en compte les spécificités des utilisateurs, comme le daltonisme, l’acuité visuelle ou encore leurs conditions lumineuses.
Ce qui nous donne en détail :
- Les supports, en particulier les écrans sur lesquels le design va s’afficher.
- Les éléments de base comme les couleurs ou les polices de caractères, influencés par les caractéristiques des écrans, telles que la résolution, la densité, l’espace colorimétrique, etc.
- Des composants qui sont des assemblages des éléments de base selon certaines règles générales de mise en page, ainsi que des bonnes pratiques communes et certains styles.
- Des templates qui sont des assemblages de composants selon les mêmes règles générales de mise en page, ainsi que des bonnes pratiques communes et certains styles.
- Des flows qui sont des actions concrètes comme “se connecter” ou “ajouter au panier”, souvent composés de plusieurs templates et qui ont aussi certaines bonnes pratiques communes.
Enfin, tout cela peut être organisé dans un design system pour faciliter la création et l’évolution d’un projet UI.
Notez également qu’il y a l’usabilité (dont l’accessibilité) mais qui comme on va le voir dans le livre, font partie des points des fondations comme le fait d’avoir des bons contrastes.
Ce que couvre ce livre
Avec les parties définies ci-dessus, voici le chemin d’apprentissage d’UI Design dans l’ordre que je conseille, dont ce que couvre le livre :
(* Apps de design : le livre parle de leurs choix et de la configuration de base comme les espaces colorimétriques, mais pas comment utiliser en détail une app comme Figma ou Sketch.)
Ces six parties sont ce que je considère comme les fondations de l’UI Design.
C’est un ordre logique car mieux vaut d’abord voir les caractéristiques des écrans avant de passer par exemple aux choix des couleurs ou encore les tailles des polices, car ces caractéristiques les influencent fortement.
Et en pratique lors d’un projet, c’est aussi plus ou moins l’ordre que je conseille. Par exemple avant de passer à la mise en page, comme on le verra dans le livre, il vaudra mieux avoir une palette avec des couleurs et des polices de base, voire aussi des icônes selon les cas.
Vous pouvez voir que ce livre ne couvre pas tout le domaine de l’UI Design, comme mentionné avant, il se concentre sur les fondations car c’est d’après moi ce qui manque parmi les livres et guides actuels.
Cependant, à la fin du livre, vous trouverez des liens vers des ressources pour approfondir les trois derniers points.
