Un développeur sachant Designer
Les 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...
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...
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 doi...
“On se souvient de la qualité bien plus
longtemps que du prix.”
Gucci
Augmenter la qualité
La qualité globale d’un produit...
Votre rôle dans tout ça ?
Développeurs
Vous êtes aussi les garants de
l’expérience utilisateur et de la
qualité de l’appli...
Les bases à connaître
Les grilles
Les grilles
Les grilles servent à
structurer l’écran.
Le designer doit partager sa
grille avec le développeur et
chacun do...
Les alignements
Les alignements
Des textes non-alignés
au reste de la mise en
page seront plus
difficiles à lire.
Les alignements
Les alignements forment
une ligne directrice pour
l’oeil.
Afin de vérifier si un
élément est aligné avec u...
Ferré ou centré ?
Un texte “ferré” est un
texte dont l’axe
d’alignement est à
gauche ou à droite.
Les textes courants sont...
Ferré ou centré ?
L’axe d’alignement d’un
texte “centré” est donc au
centre.
Les textes centrés sont
souvent utilisés pour...
Les marges
Les marges
Une mise en page sans
marge semblera
« chargée » et « étriquée".
Les marges
Les marges (ou blancs
tournants) permettent à la
mise en page de
« respirer » et au texte
d’être plus lisible.
...
Les espaces (loi de proximité)
Les espaces
Lorsque des éléments
différents sont trop
proches les uns des autres,
l’œil n’arrive plus à les
rattacher à un...
Les espaces
Les éléments qui vont
ensemble doivent avoir une
proximité physique.
Les éléments qui forment un
autre groupe ...
Les hiérarchies
Hiérarchie typo
Pour une question de
confort de lecture, il est
important d’avoir des
rapports hiérarchiques
marqués entre...
Majuscule ou
minuscule ?
Un texte en minuscule est
plus lisible qu’un texte en
majuscule. On évitera donc
d’écrire de gros...
Des composants
dynamiques
Chaque composant doit
être pensé de manière
“responsive”, par le
designer comme par le
développe...
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...
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é)
Espa...
Conclusion
On travaille toujours mieux quand on
comprend pourquoi on fait les choses.
Il faut donc que le designer prenne le
temps d’...
www.backelite.com
01 73 00 28 00
Document écrit par : Audrey Hacq
Prochain SlideShare
Chargement dans…5
×

Un développeur sachant designer par Audrey Hacq

473 vues

Publié le

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.

Publié dans : Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
473
Sur SlideShare
0
Issues des intégrations
0
Intégrations
0
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Un développeur sachant designer par Audrey Hacq

  1. 1. Un développeur sachant Designer Les bases de la mise en page
  2. 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. 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. 4. A quoi sert une bonne mise en page ?
  5. 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. 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. 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. 8. Les bases à connaître
  9. 9. Les grilles
  10. 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. 11. Les alignements
  12. 12. Les alignements Des textes non-alignés au reste de la mise en page seront plus difficiles à lire.
  13. 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. 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. 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. 16. Les marges
  17. 17. Les marges Une mise en page sans marge semblera « chargée » et « étriquée".
  18. 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. 19. Les espaces (loi de proximité)
  20. 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. 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. 22. Les hiérarchies
  23. 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. 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. 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. 26. La check list du développeur
  27. 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. 28. Le jeu des 7 erreurs
  29. 29. Cherchez les 7 erreurs Maquette Écran à recetter
  30. 30. Solution Maquette Écran à recetter Ferré ou centré ? Espace (margin) Alignement Alignement Espaces (loi de proximité) Espaces (loi de proximité) Espace (margin)
  31. 31. Conclusion
  32. 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. 33. www.backelite.com 01 73 00 28 00 Document écrit par : Audrey Hacq

×