Une interface équilibrée et compréhensible se doit de respecter certaines règles basiques de mise en page. C’est le métier du designer, pas celui du développeur.
Et pourtant, pour qu’une maquette soit correctement intégrée (et pour éviter ainsi à chacun de longues et pénibles heures de recette graphique), il est primordial que le designer et le développeur puissent se comprendre et parler le même langage.
5. La mise en page aide à comprendre
l’écran
Une interface équilibrée et hiérarchisée
guidera l’utilisateur vers ce qu’il doit
faire et ce qu’il est venu chercher.
Pas juste à « faire joli »
“Design is not just what it looks like and
feels like. Design is how it works.”
Steve Jobs
6. “On se souvient de la qualité bien plus
longtemps que du prix.”
Gucci
Augmenter la qualité
La qualité globale d’un produit
se cache dans ses détails.
Les alignements, les espaces, l’équilibre
visuel d’un écran… sont autant de
paramètres qui vont permettent de
garantir la qualité générale de
l’application.
7. Votre rôle dans tout ça ?
Développeurs
Vous êtes aussi les garants de
l’expérience utilisateur et de la
qualité de l’application !
C’est vous qui êtes en contact avec le
produit fini, c’est votre travail que
l’utilisateur aura entre les doigts
10. Les grilles
Les grilles servent à
structurer l’écran.
Le designer doit partager sa
grille avec le développeur et
chacun doit comprendre la
façon dont l’autre construit
son écran.
13. Les alignements
Les alignements forment
une ligne directrice pour
l’oeil.
Afin de vérifier si un
élément est aligné avec un
autre, le développeur
peut utiliser une feuille de
papier, posée directement
sur l’écran.
14. Ferré ou centré ?
Un texte “ferré” est un
texte dont l’axe
d’alignement est à
gauche ou à droite.
Les textes courants sont
le plus souvent ferrés
à gauche car c’est ce qui
est le plus lisible.
Ferré à gauche - Axe d’alignement
15. Ferré ou centré ?
L’axe d’alignement d’un
texte “centré” est donc au
centre.
Les textes centrés sont
souvent utilisés pour une
mise en avant ou lorsque le
texte est associé à une
illustration, elle aussi
centrée.
Texte centré - Axe d’alignement
18. Les marges
Les marges (ou blancs
tournants) permettent à la
mise en page de
« respirer » et au texte
d’être plus lisible.
Les marges (padding) sont
souvent égales entre haut-
bas et/ou gauche-droite.
20. Les espaces
Lorsque des éléments
différents sont trop
proches les uns des autres,
l’œil n’arrive plus à les
rattacher à un groupe.
→ Par exemple ici, quel
prix correspond à quelle
chaussure ?
21. Les espaces
Les éléments qui vont
ensemble doivent avoir une
proximité physique.
Les éléments qui forment un
autre groupe doivent être
bien séparés des autres.
Le développeur doit
comprendre le contenu de
ce qu’il intègre et les grands
“blocs visuels” de l’écran.
23. Hiérarchie typo
Pour une question de
confort de lecture, il est
important d’avoir des
rapports hiérarchiques
marqués entre les titres,
sous-titres et paragraphes.
24. Majuscule ou
minuscule ?
Un texte en minuscule est
plus lisible qu’un texte en
majuscule. On évitera donc
d’écrire de gros pavés de
textes en majuscules.
Les Majuscules sont par
contre plus visibles. Elles
peuvent être utilisées pour
des titres ou des textes très
courts à mettre en avant.
25. Des composants
dynamiques
Chaque composant doit
être pensé de manière
“responsive”, par le
designer comme par le
développeur.
Il est important de se
mettre d’accord ensemble
sur les comportements
avant et en cours de
développement.
27. La Check List du développeur
Ce sont les 5 points à vérifier :
- Avant le développement (quand on
prend connaissance de la maquette)
- Pendant le développement (quand
l’écran est terminé, vérifier que ces
points ont bien été respectés)
- Après le développement (en phase de
recette graphique par exemple)