Février 2013a RITAteachingRelax In The Air4UX / Webdesign/ visual design
lois de la gestalt
most powerful toolEven more than Arnold
“C’est une théorie, une école de pensée, qui étudiecomment l’être humain perçoit les choses qui l’entourent.Les lois de la...
psychologieObjectivité VS SubjectivitéGeorge What else?
psychologieLes lois de la Gestalt sont innéesRio the movie
• distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• ClôtureGestaltRe...
Les éléments sont perçus autant comme desfigures (éléments distincts) que comme fond(background ou paysage sur lequel repo...
Processus vital pour l’humain etprobablement sa base de lévolution dans ladétection des menaces.distinction fond figureGes...
Prioriser nos yeux pour ne pas ignorerquelque chose de proximité immédiate etd’importance.organiser ce que nous voyons par...
distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
webdesignAide à distinguer le contenu de la structure dansun milieu à 2 dimensions.Un concepteur peut utiliser un grand no...
webdesign www.duoh.com
des choses qui sont similaires sont perçuescomme étant plus liées que les choses quisont dissemblables.similitudeGestaltRe...
similitude decouleurtailleformetextureorientation...similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In ...
peu de cohérencesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
exploiter la taillesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
similitude de couleur /fortesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns au...
webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’...
cette règle peut s’appliquer aux liens sur unepage, cela permet alors à l’utilisateur derapidement identifier les zones cl...
comportement cohérentuxmag.com
“Ne croyez pas que l’intérêt des fondamentauxconsiste à conserver le design simpliste.Leur but est de s’ouvrir, grâce à le...
les choses qui sont proches les unes desautres sont perçues comme étant plus liéesque les choses qui sont plus espacées.pr...
Ces éléments sont perçuscomme un groupe et donc enrelation les uns avec les autres.On perçoit deux groupes etcomprenons qu...
Ces groupes sont séparés par lacouleur.La proximité reste le signal dedistinction le plus fort.proximité + similaritéGesta...
webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à e...
les éléments qui sont reliés par despropriétés visuelles uniformes sont perçuscomme étant plus liés que les éléments qui n...
Même si la proximité, la taille et la couleur sont lesmêmes, les figures entourées paraissent plus liéesque les autres.con...
webdesign
connectivité?Y a une drôled’odeur...Ouhla ça vasentir. Crotte.Me sens pasbien...
lignes de connectionOuhla ça vasentir. Crotte.Y a une drôled’odeur...Me sens pasbien...
des éléments disposés sur une ligne ou unecourbe sont perçus comme étant plus liés quedes éléments séparés.bonne continuit...
Le fait que les mots dans ce paragraphe soientsur une ligne nous aide à comprendre quilssont liés les uns aux autres et pa...
Plus facile à lire car il suggèreune ligne continue.Nombre defollowerssur TwitterL’information est plus difficile àdiscern...
bonne continuité unitinteractive.com
Use the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use therid Use the grid Use the grid Use the gr...
jlern.combons usagesProximité, connectivité uniforme et bonnecontinuité sont des fondamentaux de la Gestalt. Lesprincipes ...
les objets tendent à apparaître groupéslorsqu’ils présentent un mouvement dans lemême sens, avec la même vitesse.destin co...
destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
destin communVous et les autres conducteurs qui allez dans lemême sens, êtes liés par un sort commun etcollectif (façon de...
destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
Les humains sont programmés pourreconnaître les mouvements contrastés plusfacilement et fortement que la couleur, lecontra...
webdesignerIl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Co...
En vous inscrivant,vous profiterez detous les avantagesde la plateformeEn vous donnant,vous faciliterez ledéveloppement dup...
webdesigner serialcut.com
webdesigner serialcut.com
webdesigner serialcut.com
Lorsque l’humain regarde un arrangementcomplexe déléments individuels, il a tendancea ré-interpréter l’ensemble pour créer...
Nous n’avons presque jamais un tableaucomplet de ce qui nous entoure. le principe defermeture est alors au cœur de presque...
pour utiliser la clôture de façon efficace,vous devez simplifier la fermeture de lafigure.clôtureGestaltRelax In The AirFé...
VIIBLESinVIIBLESIci la clôture est facilité. Lemessage est clair.Cet exemple demande tropd’effort et l’information risqued...
exemple
conclusionGestalt
• structure de la page• taille des éléments• liens entre les éléments• équilibre entre les éléments• espaces• comportement...
GestaltRelax In The Airconclusionfaciliter la lecture, la compréhension etl’accès à l’information à l’utilisateur.Février ...
liens utileswww.bestwebgallery.comwww.boagworld.comwww.thinkvitamin.comwww.webdesignfile.com
fondamentaux
____________________David AakerA company’s brand is the primary source of itscompetitive advantage and a valuablestrategic...
the visual interface is your brand
pixel
Pictureelement
This is a pixel
résolution
Travailler pour le plus grand nombre.S’adapter aux statistiques de votre marché.La norme l’emporte.Rentrer dans le moule.N...
Pixels par pouce / DPIrésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
standard web: 72dpi / 96dpiimpression: 300dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In Th...
retina326 dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
800x6001024x7681280x960résolutionfondamentaux1024x736Relax In The AirFévrier 2013Copyright© 2013 Relax In The Air
basse résolution
haute résolution
taille
taille____________________Anne-Sophie FradierLa page web a des dimensions et un formatimprévisibles, une longueur illimité...
960< de droite à gauche >taillefondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
< Navigation >< Call to action >< Informations >960Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In ...
Mon site du bichon frisé960 pixels That’s right baby!Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax I...
Mon site du bichon frisé+ que 960 pixels Bichon frisé looks really freakyRelax In The AirtaillefondamentauxFévrier 2013Cop...
vimeo.com/50071857cool link
touch / mobile
44px
44px
320 X 480iphone 3
640 X 960iphone 4
RETINAATTENTION à LA TAILLE DES TYPOS
640 x 1136en 326 dpi
iPhone 4640 x 960iPhone 5 HD640 x 1136
• Exporter en double résolution (72dpi+326dpi)• travaillez sur le plus grand canevas• travaillez pour la lisibilité• teste...
TESTEZTESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ
ligne de flottaison
Limite de visibilité verticaleCall to action.Information importantes.Montrer qu’il y a une vie sous la ligne deflottaison....
Mon site de Angelina JolieFeels like something is missingligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyri...
Mon sitedeAngelinaJolie600plus ou moins>>Je suis invisible si je ne scroll pasligne de flottaisonfondameNtauxRelax In The ...
grille
____________________Anne-Sophie FradierLe choix de la grille dépend du contenu quel’on doit organiser.
Pattern de lignes horizontales et verticalesrégulièrement espacéesPlus beau > Plus lisible > Plus facile d’utilisationgril...
Organiser visuellement.organise l’espace à l’intérieur du design.Faciliter l’usability et la lecture.grillefondameNtauxRel...
grillefondameNtauxRelax In The AircolonneFévrier 2013Copyright© 2013 Relax In The Air
3colonnes
30colonnes
grillefondameNtauxRelax In The AirmargesFévrier 2013Copyright© 2013 Relax In The Air
grillefondameNtauxRelax In The AirgouttièreFévrier 2013Copyright© 2013 Relax In The Air
grillebases graphiqueschamps
http://methodandcraft.com/videos/extensible-baseline-grids
grillebases graphiquesoutil
liens utileshttp://madebymany.com/blog/the-tyranny-of-the-gridhttp://www.slideshare.net/Leursism/grid-systemshttp://www.sl...
anatomie de page
____________________MC CasalLe rôle du designer est de comprendre leshabitudes de l’utilisateur et les conventions.
anatomie de pagefondameNtauxRelax In The Air1.2.3.4.5.6.7.1. Header2. Navigation3. Focus4. Body / Contenu5. Sidebar6. Foot...
anatomie de pagefondameNtauxRelax In The Air1.Reste relativement constanttout au long du site.Le code du header contientdu...
anatomie de pagefondameNtauxRelax In The Air2.Doit se trouver au dessus dela ligne de flottaison.Doit rester constante dan...
anatomie de pagefondameNtauxRelax In The Air3.Zone d’attraction qui doitêtre perçue rapidement.Crée la hiérarchie dans lap...
anatomie de pagefondameNtauxRelax In The Air4.Permet des entrées multiplessur le site.Doit être une zone très lisibleet or...
anatomie de pagefondameNtauxRelax In The Air5.Zone d’informationssecondaires.Espace publicitaire.Ne doit visuellement pasp...
anatomie de pagefondameNtauxRelax In The Air6.Utile pour le SEO.Peut-être utilisé commesitemap ou toutesinformations dispo...
anatomie de pagefondameNtauxRelax In The AirSeptembre 2012Copyright© 2012 Relax In The AirCréer de la profondeur et dela d...
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Webdesign, UX et UCD #4
Upcoming SlideShare
Loading in...5
×

Webdesign, UX et UCD #4

1,009

Published on

Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

Published in: Design

Transcript of "Webdesign, UX et UCD #4"

  1. 1. Février 2013a RITAteachingRelax In The Air4UX / Webdesign/ visual design
  2. 2. lois de la gestalt
  3. 3. most powerful toolEven more than Arnold
  4. 4. “C’est une théorie, une école de pensée, qui étudiecomment l’être humain perçoit les choses qui l’entourent.Les lois de la Gestalt rendent claires les questions dedistribution des éléments dans l’espace, quand et commentgrouper des objets... etc.Quand vous connaîtrez ces lois, tout deviendra simplecomme un croque-monsieur.”MC casal
  5. 5. psychologieObjectivité VS SubjectivitéGeorge What else?
  6. 6. psychologieLes lois de la Gestalt sont innéesRio the movie
  7. 7. • distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• ClôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  8. 8. Les éléments sont perçus autant comme desfigures (éléments distincts) que comme fond(background ou paysage sur lequel repose lafigure)distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  9. 9. Processus vital pour l’humain etprobablement sa base de lévolution dans ladétection des menaces.distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  10. 10. Prioriser nos yeux pour ne pas ignorerquelque chose de proximité immédiate etd’importance.organiser ce que nous voyons par la façondont chaque objet se rapporte à dautres.distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  11. 11. distinction fond figureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  12. 12. webdesignAide à distinguer le contenu de la structure dansun milieu à 2 dimensions.Un concepteur peut utiliser un grand nombre demécanismes visuels et des traitements de styleafin de communiquer des indices importants pourétablir des relations figure-fond.
  13. 13. webdesign www.duoh.com
  14. 14. des choses qui sont similaires sont perçuescomme étant plus liées que les choses quisont dissemblables.similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  15. 15. similitude decouleurtailleformetextureorientation...similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  16. 16. peu de cohérencesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  17. 17. exploiter la taillesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  18. 18. similitude de couleur /fortesimilitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  19. 19. webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns aux autres
  20. 20. webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’il voit
  21. 21. cette règle peut s’appliquer aux liens sur unepage, cela permet alors à l’utilisateur derapidement identifier les zones cliquablessoit par la couleur soit par une différence deforme, soit par un soulignement.similitudeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  22. 22. comportement cohérentuxmag.com
  23. 23. “Ne croyez pas que l’intérêt des fondamentauxconsiste à conserver le design simpliste.Leur but est de s’ouvrir, grâce à leur maîtrise,plus largement à des subtilités qui se trouventau-delà.”anyone
  24. 24. les choses qui sont proches les unes desautres sont perçues comme étant plus liéesque les choses qui sont plus espacées.proximitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  25. 25. Ces éléments sont perçuscomme un groupe et donc enrelation les uns avec les autres.On perçoit deux groupes etcomprenons qu’il y a desdifférences entre eux.proximitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  26. 26. Ces groupes sont séparés par lacouleur.La proximité reste le signal dedistinction le plus fort.proximité + similaritéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  27. 27. webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à exploiter dans une situation X
  28. 28. les éléments qui sont reliés par despropriétés visuelles uniformes sont perçuscomme étant plus liés que les éléments qui nesont pas connectés.connectivité uniformeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  29. 29. Même si la proximité, la taille et la couleur sont lesmêmes, les figures entourées paraissent plus liéesque les autres.connectivité uniformeGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  30. 30. webdesign
  31. 31. connectivité?Y a une drôled’odeur...Ouhla ça vasentir. Crotte.Me sens pasbien...
  32. 32. lignes de connectionOuhla ça vasentir. Crotte.Y a une drôled’odeur...Me sens pasbien...
  33. 33. des éléments disposés sur une ligne ou unecourbe sont perçus comme étant plus liés quedes éléments séparés.bonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  34. 34. Le fait que les mots dans ce paragraphe soientsur une ligne nous aide à comprendre quilssont liés les uns aux autres et par conséquentqu’ils forment une phrase... (cqfd)bonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  35. 35. Plus facile à lire car il suggèreune ligne continue.Nombre defollowerssur TwitterL’information est plus difficile àdiscerner.Max Anne Paul Otto Max AnnePaul Ottobonne continuitéGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  36. 36. bonne continuité unitinteractive.com
  37. 37. Use the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use therid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use therid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Ushe grid Use the grid Use the grid Use the
  38. 38. jlern.combons usagesProximité, connectivité uniforme et bonnecontinuité sont des fondamentaux de la Gestalt. Lesprincipes de la Gestalt doivent être utilisés commemécanisme de base, mais la conception doittoujours être élégante et invisible.
  39. 39. les objets tendent à apparaître groupéslorsqu’ils présentent un mouvement dans lemême sens, avec la même vitesse.destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  40. 40. destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  41. 41. destin communVous et les autres conducteurs qui allez dans lemême sens, êtes liés par un sort commun etcollectif (façon de parler...)
  42. 42. destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
  43. 43. Les humains sont programmés pourreconnaître les mouvements contrastés plusfacilement et fortement que la couleur, lecontraste, la taille ou tout autre stimulivisuel.destin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  44. 44. webdesignerIl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Comment?
  45. 45. En vous inscrivant,vous profiterez detous les avantagesde la plateformeEn vous donnant,vous faciliterez ledéveloppement duproduitSign indonnezSlide-out menudestin communGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  46. 46. webdesigner serialcut.com
  47. 47. webdesigner serialcut.com
  48. 48. webdesigner serialcut.com
  49. 49. Lorsque l’humain regarde un arrangementcomplexe déléments individuels, il a tendancea ré-interpréter l’ensemble pour créer un seulmotif reconnaissable.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  50. 50. Nous n’avons presque jamais un tableaucomplet de ce qui nous entoure. le principe defermeture est alors au cœur de presquetoutes les décisions que nous prenons.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  51. 51. pour utiliser la clôture de façon efficace,vous devez simplifier la fermeture de lafigure.clôtureGestaltRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  52. 52. VIIBLESinVIIBLESIci la clôture est facilité. Lemessage est clair.Cet exemple demande tropd’effort et l’information risqued’être perdue.clôtureGestaltRelax In The AirexempleFévrier 2013Copyright© 2013 Relax In The Air
  53. 53. exemple
  54. 54. conclusionGestalt
  55. 55. • 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• texturesGestaltRelax In The AirconclusionFévrier 2013Copyright© 2013 Relax In The Air
  56. 56. GestaltRelax In The Airconclusionfaciliter la lecture, la compréhension etl’accès à l’information à l’utilisateur.Février 2013Copyright© 2013 Relax In The Air
  57. 57. liens utileswww.bestwebgallery.comwww.boagworld.comwww.thinkvitamin.comwww.webdesignfile.com
  58. 58. fondamentaux
  59. 59. ____________________David AakerA company’s brand is the primary source of itscompetitive advantage and a valuablestrategic advantage.
  60. 60. the visual interface is your brand
  61. 61. pixel
  62. 62. Pictureelement
  63. 63. This is a pixel
  64. 64. résolution
  65. 65. 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ésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  66. 66. Pixels par pouce / DPIrésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  67. 67. standard web: 72dpi / 96dpiimpression: 300dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  68. 68. retina326 dpirésolutionfondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  69. 69. 800x6001024x7681280x960résolutionfondamentaux1024x736Relax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  70. 70. basse résolution
  71. 71. haute résolution
  72. 72. taille
  73. 73. taille____________________Anne-Sophie FradierLa page web a des dimensions et un formatimprévisibles, une longueur illimitée.Elle est interprétée par le navigateur etsoumise au contrôle de l’utilisateur.
  74. 74. 960< de droite à gauche >taillefondamentauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  75. 75. < Navigation >< Call to action >< Informations >960Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  76. 76. Mon site du bichon frisé960 pixels That’s right baby!Relax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  77. 77. Mon site du bichon frisé+ que 960 pixels Bichon frisé looks really freakyRelax In The AirtaillefondamentauxFévrier 2013Copyright© 2013 Relax In The Air
  78. 78. vimeo.com/50071857cool link
  79. 79. touch / mobile
  80. 80. 44px
  81. 81. 44px
  82. 82. 320 X 480iphone 3
  83. 83. 640 X 960iphone 4
  84. 84. RETINAATTENTION à LA TAILLE DES TYPOS
  85. 85. 640 x 1136en 326 dpi
  86. 86. iPhone 4640 x 960iPhone 5 HD640 x 1136
  87. 87. • 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érentssmartphones• utilisez des medias queriesretinatouch / mobilefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  88. 88. TESTEZTESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ TESTEZ
  89. 89. ligne de flottaison
  90. 90. Limite de visibilité verticaleCall to action.Information importantes.Montrer qu’il y a une vie sous la ligne deflottaison.ligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  91. 91. Mon site de Angelina JolieFeels like something is missingligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  92. 92. Mon sitedeAngelinaJolie600plus ou moins>>Je suis invisible si je ne scroll pasligne de flottaisonfondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  93. 93. grille
  94. 94. ____________________Anne-Sophie FradierLe choix de la grille dépend du contenu quel’on doit organiser.
  95. 95. Pattern de lignes horizontales et verticalesrégulièrement espacéesPlus beau > Plus lisible > Plus facile d’utilisationgrillefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  96. 96. Organiser visuellement.organise l’espace à l’intérieur du design.Faciliter l’usability et la lecture.grillefondameNtauxRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  97. 97. grillefondameNtauxRelax In The AircolonneFévrier 2013Copyright© 2013 Relax In The Air
  98. 98. 3colonnes
  99. 99. 30colonnes
  100. 100. grillefondameNtauxRelax In The AirmargesFévrier 2013Copyright© 2013 Relax In The Air
  101. 101. grillefondameNtauxRelax In The AirgouttièreFévrier 2013Copyright© 2013 Relax In The Air
  102. 102. grillebases graphiqueschamps
  103. 103. http://methodandcraft.com/videos/extensible-baseline-grids
  104. 104. grillebases graphiquesoutil
  105. 105. liens utileshttp://madebymany.com/blog/the-tyranny-of-the-gridhttp://www.slideshare.net/Leursism/grid-systemshttp://www.slideshare.net/markboultondesign/designing-grid-systems-media2010
  106. 106. anatomie de page
  107. 107. ____________________MC CasalLe rôle du designer est de comprendre leshabitudes de l’utilisateur et les conventions.
  108. 108. anatomie de pagefondameNtauxRelax In The Air1.2.3.4.5.6.7.1. Header2. Navigation3. Focus4. Body / Contenu5. Sidebar6. Footer7. Fond de page /BackgroundFévrier 2013Copyright© 2013 Relax In The Air
  109. 109. anatomie de pagefondameNtauxRelax In The Air1.Reste relativement constanttout au long du site.Le code du header contientdu code vital pour le SEO.Sert à identifier la marquerapidement.headerFévrier 2013Copyright© 2013 Relax In The Air
  110. 110. anatomie de pagefondameNtauxRelax In The Air2.Doit se trouver au dessus dela ligne de flottaison.Doit rester constante dansson aspect et sescomportements.navigationFévrier 2013Copyright© 2013 Relax In The Air
  111. 111. anatomie de pagefondameNtauxRelax In The Air3.Zone d’attraction qui doitêtre perçue rapidement.Crée la hiérarchie dans lapage.Plus fort en couleur ettypographie.focusFévrier 2013Copyright© 2013 Relax In The Air
  112. 112. anatomie de pagefondameNtauxRelax In The Air4.Permet des entrées multiplessur le site.Doit être une zone très lisibleet organisée.Zone de scan de l’oeil.bodyFévrier 2013Copyright© 2013 Relax In The Air
  113. 113. anatomie de pagefondameNtauxRelax In The Air5.Zone d’informationssecondaires.Espace publicitaire.Ne doit visuellement pasprendre le dessus sur le restede la page.sidebarFévrier 2013Copyright© 2013 Relax In The Air
  114. 114. anatomie de pagefondameNtauxRelax In The Air6.Utile pour le SEO.Peut-être utilisé commesitemap ou toutesinformations disponible toutau long du site.Zone de copyright.footerFévrier 2013Copyright© 2013 Relax In The Air
  115. 115. anatomie de pagefondameNtauxRelax In The AirSeptembre 2012Copyright© 2012 Relax In The AirCréer de la profondeur et dela dimension.Apporte de la richesse entexture.Agrandit l’image de lamarque au-delà des limitesde la page.background7.

×