Un développeur sachant DesignerLes bases de la mise en page

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

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

A quoi sert une bonne mise en page ?

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

“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.

Votre rôle dans tout ça ?

DéveloppeursVous ê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

Les bases à connaître

Les grilles

Les grillesLes 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.

Les alignements

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

Les alignementsLes 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.

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

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

Les marges

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

Les margesLes 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.

Les espaces (loi de proximité)

Les espacesLorsque 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 ?

Les espacesLes é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.

Les hiérarchies

Hiérarchie typoPour une question de confort de lecture, il est important d’avoir des rapports hiérarchiques marqués entre les titres, sous-titres et paragraphes.

Majuscule ouminuscule ?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.

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.

La check list du développeur

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)

Le jeu des 7 erreurs

Cherchez les 7 erreurs

Maquette Écran à recetter

Solution

Maquette Écran à recetter

Ferré ou centré ?

Espace (margin)

Alignement

Alignement

Espaces (loi de proximité)

Espaces (loi de proximité)

Espace (margin)

Conclusion

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

www.backelite.com01 73 00 28 00

Document écrit par : Audrey Hacq