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.

1. Un développeur sachant Designer
Les bases de la mise en page

2. 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.
INTRODUCTION
©Gal Shir - Dribbble

3. 1. A quoi sert une bonne mise en page ?
2. Les bases à connaître
3. La check list du développeur
4. Le jeu des 7 erreurs
5. Conclusion
SOMMAIRE

4. A quoi sert une bonne mise en page ?

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

8. Les bases à connaître

9. Les grilles

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.

11. Les alignements

12. Les alignements
Des textes non-alignés
au reste de la mise en
page seront plus
difficiles à lire.

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

16. Les marges

17. Les marges
Une mise en page sans
marge semblera
« chargée » et « étriquée".

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.

19. Les espaces (loi de proximité)

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.

22. Les hiérarchies

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.

26. La check list du développeur

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)

28. Le jeu des 7 erreurs

29. Cherchez les 7 erreurs
Maquette Écran à recetter

30. Solution
Maquette Écran à recetter
Ferré ou centré ?
Espace (margin)
Alignement
Alignement
Espaces (loi de proximité)
Espaces (loi de proximité)
Espace (margin)

31. Conclusion

32. On travaille toujours mieux quand on
comprend pourquoi on fait les choses.
Il faut donc que le designer prenne le
temps d’expliquer sa mise en page au
développeur et que le développeur de
son côté soit curieux des règles de mise
en page.
C’est sûr : on gagne énormément à
travailler les uns avec les autres et à
comprendre le métier et les contraintes
de l’autre !
CONCLUSION
©Gal Shir - Dribbble

33. www.backelite.com
01 73 00 28 00
Document écrit par : Audrey Hacq