Web site pattern – le design en mode solution

375 vues

Publié le

Contrairement à la pensée populaire, être designer ne se réduit pas à être un spécialiste de l’esthétique. C’est d’abord un spécialiste de la résolution problèmes de communications.

Avant même d’écrire une ligne de texte, d’ouvrir Photoshop ou de choisir une technologie, c’est la responsabilité du designer, du rédacteur, du concepteur, du client et de l’équipe technique de connaitre les problèmes de communication à résoudre.

Communiquer une idée? Comparer des informations? Véhiculer une émotion? Synthétiser l’information? Raconter une histoire? Il y a des objectifs que le texte, le design ou la technologie seuls ne peuvent atteindre.

Trouver les problèmes. Ensuite il sera possible de créer un projet qui communiquera ce dont vous avez besoin de manière optimale.

Une piste de solution. Certains s’expriment avec des mots ou même des lignes de code. Les designers, eux, s’expriment avec de la typographie, des grilles et des d’éléments graphiques. Bien que chaque projet doit être abordé différemment, il existe quelques pistes solutions récurrentes, les Web site pattern qui peuvent être utilisés pour établir des règles de création commune.

Donc ! Quels sont les problèmes à résoudre? Comment une cohésion texte / visuel peut-elle influencer un projet ? Et surtout, comment sortir des sentiers battus ?

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

Aucun téléchargement
Vues
Nombre de vues
375
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
6
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Web site pattern – le design en mode solution

  1. 1. Web site pattern & le design en mode solution
  2. 2. Bonjour !
  3. 3. 3règles de mon manifeste
  4. 4. 10Web site patterns
  5. 5. Être designer ne se réduit pas à être un spécialiste de l’esthétique.
  6. 6. C’est un spécialiste en résolution de problèmes de communication.
  7. 7. La couleur Banane Féminin RafraîchissantÉcologique
  8. 8. La Typographie Classique Retro vintage Rococo
  9. 9. La photographie Alfred Eisenstaedt Eddie Adams, The Associated Press
  10. 10. La composition Piet Mondrian Anna Blume, Dichtungen, 1919
  11. 11. C’est un spécialiste en résolution de problèmes de communication.
  12. 12. C’est un spécialiste en résolution de problèmes de communication.
  13. 13. ?
  14. 14. Sans problèmes, il ne peut y avoir de solutions.
  15. 15. 1 Il faut trouver les bons PROBLÈMES afin d’avoir les bonnes SOLUTIONS.
  16. 16. Loremipsumdolor sitamet,consectetur adipiscingelit ?
  17. 17. Quelle est l’influence du lorem ipsum sur le travail de conception ?
  18. 18. La couleur
  19. 19. La Typographie Lorem Dolor Amet Ipsum
  20. 20. La photographie Alfred Eisenstaedt Eddie Adams, The Associated Press
  21. 21. La composition Piet Mondrian Anna Blume, Dichtungen, 1919
  22. 22. Loremipsumdolor sitamet,consectetur adipiscingelit ?
  23. 23. « Je vais ajuster les textes en fonction du design. »
  24. 24. « Je vais pouvoir changer les textes dans le CMS. »
  25. 25. « Je vais remettre les textes lorsqu’ils seront finaux. »
  26. 26. Textesou Design
  27. 27. ou
  28. 28. 2 Parlez-vous & défiez-vous. La communication donne toujours de meilleurs résultats.
  29. 29. Designers, rédacteurs, concepteurs et clients, vous devez trouver les problèmes de communication à résoudre.
  30. 30. Designers Intégrateurs UX / UI Infographistes Photographes Créateurs decontenu Rédacteurs Concepteurs Clients Stratèges La conception
  31. 31. 3 Être TENDANCE c’est bien. Être INTELLIGENT c’est mieux.
  32. 32. Couleur Typographie Photo Imagedemarque Technologie
  33. 33. contenu & composition
  34. 34. Les objectifs La clientèle La nature des textes La longueur des textes La navigation La composition
  35. 35. Classique
  36. 36. Navigation principal Navigation secondaire Titre de la page Lorem ipsum
  37. 37. letype classique • Versatile • Efficace • Fonctionnel • Rassurant
  38. 38. Classique ?
  39. 39. Web site pattern
  40. 40. Des règles qui orientent la création d’un projet.
  41. 41. 4,473,900+ articles* en anglais seulement http://en.wikipedia.org/wiki/Wikipedia:Size_of_Wikipedia
  42. 42. Accueil x 41 425
  43. 43. Comment mettre en page une quantitéphénoménaled’articles de naturesdifférentes ?
  44. 44. • Grille liquide–Parfait pour toutes les résolutions d’écran • Majoritairement texte • Images à l’appui • Navigation : Moteur de recherche et hyperliens • Style graphique simple
  45. 45. wikipedia.org
  46. 46. Encyclopédique
  47. 47. Comment expliquer unconcept ou uneidée ?
  48. 48. Présentation
  49. 49. • 100 % de l’écran • Navigation progressive • Textes courts • Débute par une page couverture • Termine par les contacts et les réseaux sociaux • Variation graphique entre les diapositives letype présentation
  50. 50. quebecnumerique.com
  51. 51. quebecnumerique.com 1 2 3 4 5 6
  52. 52. quebecnumerique.com
  53. 53. kickstarter.com/year/2013 thecharlesnyc.com/annual_report/2013/
  54. 54. Mettre en parallèle des informations de même nature ?
  55. 55. Comparatif
  56. 56. • 100 % de l’écran • Longueur des textes similaires • Constance graphique entre les diapositives • Navigation par ordre  alphabétique,date,couleur,etc. letype comparatif
  57. 57. flatguitars.com
  58. 58. flatguitars.com
  59. 59. flatguitars.com
  60. 60. flatguitars.com
  61. 61. flatguitars.com
  62. 62. cyclemon.com evanshalshaw.com/bondcars/
  63. 63. Comment conserverl’attention lorsque l’on traite d’unsujet complexe ?
  64. 64. Histoirefantastique
  65. 65. • Structuré comme une histoire • Navigation continue • Éléments de composition intimement reliés letype histoirefantastique
  66. 66. Ilétaitunefois... dangersoffracking.com
  67. 67. Développement dangersoffracking.com
  68. 68. Développement dangersoffracking.com
  69. 69. Développement dangersoffracking.com
  70. 70. Développement dangersoffracking.com
  71. 71. Développement dangersoffracking.com
  72. 72. Dénouement dangersoffracking.com
  73. 73. http://www.earthworksaction.org/issues/detail/hydraulic_fracturing_101#.UyoHVa1dXzU
  74. 74. lostworldsfairs.com/atlantis inception-explained.com
  75. 75. Comment convaincre mes actionnaires de la qualité de leur investissement ?
  76. 76. Rapportannuel
  77. 77. letype encyclopédique • Mot du président • Chiffres • Événements importants de l’année • Chiffres • Cartes • Chiffres • Diagrammes
  78. 78. ge.com/ar2013/#/letter
  79. 79. Lamission QuinoussommesIntercalaire Deschiffres PlusdechiffresUnecarte thecharlesnyc.com
  80. 80. thecharlesnyc.com
  81. 81. thecharlesnyc.com
  82. 82. frankandoak.com/annualreport/2013 sailthru.com/annual
  83. 83. Comment présenter plusieurs nouvellesdefaçonneutre &objective ?
  84. 84. Journal
  85. 85. letype encyclopédique • Grande quantité d’éléments à présenter • Typographie importante • Sans artifice inutile • Grille stable
  86. 86. nytimes.com
  87. 87. nytimes.com
  88. 88. nytimes.com
  89. 89. nytimes.com
  90. 90. nymag.com nytimes.com/skimmer
  91. 91. Comment présenter plusieurs nouvellessansêtreneutre &objective ?
  92. 92. Magazine
  93. 93. letype magazine • Grande photo de couverture • Variation de la grille selon le contenu • Beaucoup d’images de qualités • Division du contenu en champ d’intérêt
  94. 94. gqmagazine.fr
  95. 95. gqmagazine.fr
  96. 96. esquire.co.uk vanityfair.fr
  97. 97. Comment faire vivre uneémotion en utilisant le concept d’immersion ?
  98. 98. Onrail
  99. 99. letype onrail • Immersion narrative • Navigation continue • Conception sous forme d’un scénario • Utilisation de la vidéo et de l’audio
  100. 100. 6millionsdemorts.com
  101. 101. 6millionsdemorts.com
  102. 102. 6millionsdemorts.com
  103. 103. 6millionsdemorts.com
  104. 104. diesel.com/collection-diesel-home promo.vitra-russia.ru/promise
  105. 105. Ces patterns ne sont pas des solutions, ce sont des réponses à des problèmes.
  106. 106. + +
  107. 107. 1 Trouvons des solutions 3 Soyons intelligents 2 Parlons-nous
  108. 108. Merci
  109. 109. jsdaigle.com     |     bonjour@jsdaigle.com     |    @jsdaigle

×