Más contenido relacionado Cours de Web Design part.44. “C’est une théorie, une école de pensée, qui étudie
comment l’être humain perçoit les choses qui l’entourent.
Les lois de la Gestalt rendent claires les questions de
distribution des éléments dans l’espace, quand et comment
grouper des objets... etc.
Quand vous connaîtrez ces lois, tout deviendra simple
comme un croque-monsieur.”
MC casal
7. • distinction fond figure
• Similitude
• Proximité
• Bonne continuité
• connectivité uniforme
• Destin commun
• Clôture
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
8. Les éléments sont perçus autant comme des
figures (éléments distincts) que comme fond
(background ou paysage sur lequel repose la
figure)
distinction fond figure
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
9. Processus vital pour l’humain et
probablement sa base de l'évolution dans la
détection des menaces.
distinction fond figure
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
10. Prioriser nos yeux pour ne pas ignorer
quelque chose de proximité immédiate et
d’importance.
organiser ce que nous voyons par la façon
dont chaque objet se rapporte à d'autres.
distinction fond figure
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
12. webdesign
Aide à distinguer le contenu de la structure dans
un milieu à 2 dimensions.
Un concepteur peut utiliser un grand nombre de
mécanismes visuels et des traitements de style
afin de communiquer des indices importants pour
établir des relations figure-fond.
14. des choses qui sont similaires sont perçues
comme étant plus liées que les choses qui
sont dissemblables.
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
18. similitude de couleur /forte
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
19. webdesigner
Le travail du webdesigner est de fournir des
indices visuels pour montrer les éléments
d'interface liés les uns aux autres
21. cette règle peut s’appliquer aux liens sur une
page, cela permet alors à l’utilisateur de
rapidement identifier les zones cliquables
soit par la couleur soit par une différence de
forme, soit par un soulignement.
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
23. “Ne croyez pas que l’intérêt des fondamentaux
consiste à conserver le design simpliste.
Leur but est de s’ouvrir, grâce à leur maîtrise,
plus largement à des subtilités qui se trouvent
au-delà.”
anyone
24. les choses qui sont proches les unes des
autres sont perçues comme étant plus liées
que les choses qui sont plus espacées.
proximité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
25. Ces éléments sont perçus
comme un groupe et donc en
relation les uns avec les autres.
On perçoit deux groupes et
comprenons qu’il y a des
différences entre eux.
proximité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
26. Ces groupes sont séparés par la
couleur.
La proximité reste le signal de
distinction le plus fort.
proximité + similarité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
27. webdesigner
Le travail du webdesigner est de comprendre la
force relative de ces mécanismes afin de pouvoir
choisir celui à exploiter dans une situation X
28. les éléments qui sont reliés par des
propriétés visuelles uniformes sont perçus
comme étant plus liés que les éléments qui ne
sont pas connectés.
connectivité uniforme
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
29. Même si la proximité, la taille et la couleur sont les
mêmes, les figures entourées paraissent plus liées
que les autres.
connectivité uniforme
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
33. des éléments disposés sur une ligne ou une
courbe sont perçus comme étant plus liés que
des éléments séparés.
bonne continuité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
34. Le fait que les mots dans ce paragraphe soient
sur une ligne nous aide à comprendre qu'ils
sont liés les uns aux autres et par conséquent
qu’ils forment une phrase... (cqfd)
bonne continuité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
35. Plus facile à lire car il suggère
une ligne continue.
Nombre de
followers
sur Twitter
L’information est plus difficile à
discerner.
Max Anne Paul Otto Max AnnePaul Otto
bonne continuité
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
37. Use the grid Use the grid Use the grid Us
he grid Use the grid Use the grid Use the
rid Use the grid Use the grid Use the gri
Use the grid Use the grid Use the grid Us
he grid Use the grid Use the grid Use the
rid Use the grid Use the grid Use the gri
Use the grid Use the grid Use the grid Us
he grid Use the grid Use the grid Use the
38. jlern.com
bons usages
Proximité, connectivité uniforme et bonne
continuité sont des fondamentaux de la Gestalt. Les
principes de la Gestalt doivent être utilisés comme
mécanisme de base, mais la conception doit
toujours être élégante et invisible.
39. les objets tendent à apparaître groupés
lorsqu’ils présentent un mouvement dans le
même sens, avec la même vitesse.
destin commun
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
41. destin commun
Vous et les autres conducteurs qui allez dans le
même sens, êtes liés par un sort commun et
collectif (façon de parler...)
42. destin commun
Quand un véhicule rompt le flux, il capte notre
attention, nous permettant de réagir de façon
appropriée
43. Les humains sont programmés pour
reconnaître les mouvements contrastés plus
facilement et fortement que la couleur, le
contraste, la taille ou tout autre stimuli
visuel.
destin commun
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
44. webdesigner
Il est logique que les designers profitent de ce
fait et exploitent ce principe dans le travail de
conception. Comment?
45. En vous inscrivant,
vous profiterez de
tous les avantages
de la plateforme
En vous donnant,
vous faciliterez le
développement du
produit
Sign in
donnez
Slide-out menu
destin commun
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
49. Lorsque l’humain regarde un arrangement
complexe d'éléments individuels, il a tendance
a ré-interpréter l’ensemble pour créer un seul
motif reconnaissable.
clôture
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
50. Nous n’avons presque jamais un tableau
complet de ce qui nous entoure. le principe de
fermeture est alors au cœur de presque
toutes les décisions que nous prenons.
clôture
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
51. pour utiliser la clôture de façon efficace,
vous devez simplifier la fermeture de la
figure.
clôture
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
52. VIIBLESinVIIBLES
Ici la clôture est facilité. Le
message est clair.
Cet exemple demande trop
d’effort et l’information risque
d’être perdue.
clôture
Gestalt
Relax In The Air
exemple
Février 2013
Copyright© 2013 Relax In The Air
56. • structure de la page
• taille des éléments
• liens entre les éléments
• équilibre entre les éléments
• espaces
• comportement et construction de la grille
• rythme
• couleurs
• profondeur
• textures
Gestalt
Relax In The Air
conclusion
Février 2013
Copyright© 2013 Relax In The Air
57. Gestalt
Relax In The Air
conclusion
faciliter la lecture, la compréhension et
l’accès à l’information à l’utilisateur.
Février 2013
Copyright© 2013 Relax In The Air
67. Travailler pour le plus grand nombre.
S’adapter aux statistiques de votre marché.
La norme l’emporte.
Rentrer dans le moule.
N’imposez pas votre résolution d’écran.
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
68. Pixels par pouce / DPI
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
69. standard web: 72dpi / 96dpi
impression: 300dpi
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
79. 960< de droite à gauche >
taille
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
80. < Navigation >
< Call to action >
< Informations >
960
Relax In The Air
taille
fondamentaux
Février 2013
Copyright© 2013 Relax In The Air
81. Mon site du bichon frisé
960 pixels That’s right baby!
Relax In The Air
taille
fondamentaux
Février 2013
Copyright© 2013 Relax In The Air
82. Mon site du bichon frisé
+ que 960 pixels Bichon frisé looks really freaky
Relax In The Air
taille
fondamentaux
Février 2013
Copyright© 2013 Relax In The Air
93. • Exporter en double résolution (72dpi+326dpi)
• travaillez sur le plus grand canevas
• travaillez pour la lisibilité
• testez avec des images dans la bibliothèque
• utilisez de l’adaptatif pour les différents
smartphones
• utilisez des medias queries
retina
touch / mobile
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
97. Limite de visibilité verticale
Call to action.
Information importantes.
Montrer qu’il y a une vie sous la ligne de
flottaison.
ligne de flottaison
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
98. Mon site de Angelina Jolie
Feels like something is missing
ligne de flottaison
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
99. Mon sitedeAngelinaJolie
600plus ou moins
>
>
Je suis invisible si je ne scroll pas
ligne de flottaison
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
102. Pattern de lignes horizontales et verticales
régulièrement espacées
Plus beau > Plus lisible > Plus facile d’utilisation
grille
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
121. anatomie de page
fondameNtaux
Relax In The Air
1.
2.
3.
4.
5.
6.
7.
1. Header
2. Navigation
3. Focus
4. Body / Contenu
5. Sidebar
6. Footer
7. Fond de page /Background
Février 2013
Copyright© 2013 Relax In The Air
122. anatomie de page
fondameNtaux
Relax In The Air
1.
Reste relativement constant
tout au long du site.
Le code du header contient
du code vital pour le SEO.
Sert à identifier la marque
rapidement.
header
Février 2013
Copyright© 2013 Relax In The Air
124. anatomie de page
fondameNtaux
Relax In The Air
2.
Doit se trouver au dessus de
la ligne de flottaison.
Doit rester constante dans
son aspect et ses
comportements.
navigation
Février 2013
Copyright© 2013 Relax In The Air
126. anatomie de page
fondameNtaux
Relax In The Air
3.
Zone d’attraction qui doit
être perçue rapidement.
Crée la hiérarchie dans la
page.
Plus fort en couleur et
typographie.
focus
Février 2013
Copyright© 2013 Relax In The Air
128. anatomie de page
fondameNtaux
Relax In The Air
4.
Permet des entrées multiples
sur le site.
Doit être une zone très lisible
et organisée.
Zone de scan de l’oeil.
body
Février 2013
Copyright© 2013 Relax In The Air
130. anatomie de page
fondameNtaux
Relax In The Air
5.
Zone d’informations
secondaires.
Espace publicitaire.
Ne doit visuellement pas
prendre le dessus sur le reste
de la page.
sidebar
Février 2013
Copyright© 2013 Relax In The Air
132. anatomie de page
fondameNtaux
Relax In The Air
6.
Utile pour le SEO.
Peut-être utilisé comme
sitemap ou toutes
informations disponible tout
au long du site.
Zone de copyright.
footer
Février 2013
Copyright© 2013 Relax In The Air
138. anatomie de page
fondameNtaux
Relax In The Air
Septembre 2012
Copyright© 2012 Relax In The Air
Créer de la profondeur et de
la dimension.
Apporte de la richesse en
texture.
Agrandit l’image de la
marque au-delà des limites
de la page.
background
7.