SlideShare uma empresa Scribd logo
1 de 142
Webdesign
visual design
Février 2013
a RITAteaching
Relax In The Air
4
lois de la gestalt
most powerful tool
Even more than Arnold
“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
psychologie
Objectivité VS Subjectivité
George What else?
psychologie
Les lois de la Gestalt sont innées
Rio the movie
• 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
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
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
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
distinction fond figure
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
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.
webdesign www.duoh.com
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
similitude de
couleur
taille
forme
texture
orientation...
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
peu de cohérence
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
exploiter la taille
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
similitude de couleur /forte
similitude
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
webdesigner
Le travail du webdesigner est de fournir des
indices visuels pour montrer les éléments
d'interface liés les uns aux autres
webdesigner
L’utilisateur final peut rapidement percevoir
l'organisation pour savoir comment utiliser ou
interagir avec ce qu’il voit
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
comportement cohérent
uxmag.com
“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
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
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
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
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
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
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
webdesign
connectivité?
Y a une drôle
d’odeur...
Ouhla ça va
sentir. Crotte.
Me sens pas
bien...
lignes de connection
Ouhla ça va
sentir. Crotte.Y a une drôle
d’odeur...
Me sens pas
bien...
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
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
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
bonne continuité unitinteractive.com
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
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.
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
destin commun
Gestalt
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
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...)
destin commun
Quand un véhicule rompt le flux, il capte notre
attention, nous permettant de réagir de façon
appropriée
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
webdesigner
Il est logique que les designers profitent de ce
fait et exploitent ce principe dans le travail de
conception. Comment?
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
webdesigner serialcut.com
webdesigner serialcut.com
webdesigner serialcut.com
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
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
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
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
exemple
Cours de Web Design part.4
conclusion
Gestalt
• 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
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
liens utiles
www.bestwebgallery.com
www.boagworld.com
www.thinkvitamin.com
www.webdesignfile.com
fondamentaux
____________________
David Aaker
A company’s brand is the primary source of its
competitive advantage and a valuable
strategic advantage.
the visual interface is your brand
pixel
Picture
element
This is a pixel
Cours de Web Design part.4
résolution
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
Pixels par pouce / DPI
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
standard web: 72dpi / 96dpi
impression: 300dpi
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
retina
326 dpi
résolution
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
800x600
1024x768
1280x960
résolution
fondamentaux
1024x736
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
basse résolution
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4
haute résolution
taille
taille
____________________
Anne-Sophie Fradier
La page web a des dimensions et un format
imprévisibles, une longueur illimitée.
Elle est interprétée par le navigateur et
soumise au contrôle de l’utilisateur.
960< de droite à gauche >
taille
fondamentaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
< Navigation >
< Call to action >
< Informations >
960
Relax In The Air
taille
fondamentaux
Février 2013
Copyright© 2013 Relax In The Air
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
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
vimeo.com/50071857
cool link
touch / mobile
Cours de Web Design part.4
44px
44px
320 X 480
iphone 3
640 X 960
iphone 4
RETINAATTENTION à LA TAILLE DES TYPOS
640 x 1136en 326 dpi
iPhone 4
640 x 960
iPhone 5 HD
640 x 1136
• 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
TESTEZTESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ
Cours de Web Design part.4
ligne de flottaison
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
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
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
grille
____________________
Anne-Sophie Fradier
Le choix de la grille dépend du contenu que
l’on doit organiser.
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
Organiser visuellement.
organise l’espace à l’intérieur du design.
Faciliter l’usability et la lecture.
grille
fondameNtaux
Relax In The Air
Février 2013
Copyright© 2013 Relax In The Air
Cours de Web Design part.4
grille
fondameNtaux
Relax In The Air
colonne
Février 2013
Copyright© 2013 Relax In The Air
Cours de Web Design part.4
3
colonnes
30
colonnes
grille
fondameNtaux
Relax In The Air
marges
Février 2013
Copyright© 2013 Relax In The Air
Cours de Web Design part.4
grille
fondameNtaux
Relax In The Air
gouttière
Février 2013
Copyright© 2013 Relax In The Air
Cours de Web Design part.4
grille
bases graphiques
champs
Cours de Web Design part.4
Cours de Web Design part.4
http://methodandcraft.com/videos/extensible-baseline-grids
grille
bases graphiques
outil
liens utiles
http://madebymany.com/blog/the-tyranny-of-the-grid
http://www.slideshare.net/Leursism/grid-systems
http://www.slideshare.net/markboultondesign/designing-grid-systems-media2010
anatomie de page
____________________
MC Casal
Le rôle du designer est de comprendre les
habitudes de l’utilisateur et les conventions.
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
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
Cours de Web Design part.4
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
Cours de Web Design part.4
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
Cours de Web Design part.4
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
Cours de Web Design part.4
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
Cours de Web Design part.4
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
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4
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.
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4
Cours de Web Design part.4

Mais conteúdo relacionado

Cours de Web Design part.4

  • 1. Webdesign visual design Février 2013 a RITAteaching Relax In The Air 4
  • 2. lois de la gestalt
  • 3. most powerful tool Even more than Arnold
  • 4. “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
  • 6. psychologie Les lois de la Gestalt sont innées Rio the movie
  • 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
  • 11. 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
  • 15. similitude de couleur taille forme texture orientation... similitude Gestalt Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
  • 16. peu de cohérence similitude Gestalt Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
  • 17. exploiter la taille 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
  • 20. webdesigner L’utilisateur final peut rapidement percevoir l'organisation pour savoir comment utiliser ou interagir avec ce qu’il voit
  • 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
  • 31. connectivité? Y a une drôle d’odeur... Ouhla ça va sentir. Crotte. Me sens pas bien...
  • 32. lignes de connection Ouhla ça va sentir. Crotte.Y a une drôle d’odeur... Me sens pas bien...
  • 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
  • 40. 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
  • 60. ____________________ David Aaker A company’s brand is the primary source of its competitive advantage and a valuable strategic advantage.
  • 61. the visual interface is your brand
  • 62. pixel
  • 64. This is a pixel
  • 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
  • 70. retina 326 dpi résolution fondamentaux Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
  • 71. 800x600 1024x768 1280x960 résolution fondamentaux 1024x736 Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
  • 78. taille ____________________ Anne-Sophie Fradier La page web a des dimensions et un format imprévisibles, une longueur illimitée. Elle est interprétée par le navigateur et soumise au contrôle de l’utilisateur.
  • 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
  • 86. 44px
  • 87. 44px
  • 90. RETINAATTENTION à LA TAILLE DES TYPOS
  • 91. 640 x 1136en 326 dpi
  • 92. iPhone 4 640 x 960 iPhone 5 HD 640 x 1136
  • 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
  • 94. TESTEZTESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ
  • 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
  • 100. grille
  • 101. ____________________ Anne-Sophie Fradier Le choix de la grille dépend du contenu que l’on doit organiser.
  • 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
  • 103. Organiser visuellement. organise l’espace à l’intérieur du design. Faciliter l’usability et la lecture. grille fondameNtaux Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
  • 105. grille fondameNtaux Relax In The Air colonne Février 2013 Copyright© 2013 Relax In The Air
  • 109. grille fondameNtaux Relax In The Air marges Février 2013 Copyright© 2013 Relax In The Air
  • 111. grille fondameNtaux Relax In The Air gouttière Février 2013 Copyright© 2013 Relax In The Air
  • 120. ____________________ MC Casal Le rôle du designer est de comprendre les habitudes de l’utilisateur et les conventions.
  • 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.