Web site pattern
& le design en mode solution
Bonjour !
3règles de mon
manifeste
10Web site
patterns
Être designer
ne se réduit pas
à être un spécialiste
de l’esthétique.
C’est un spécialiste
en résolution de problèmes
de communication.
La couleur
Banane Féminin
RafraîchissantÉcologique
La Typographie
Classique
Retro vintage
Rococo
La photographie
Alfred Eisenstaedt
Eddie Adams, The Associated Press
La composition
Piet Mondrian Anna Blume,
Dichtungen, 1919
C’est un spécialiste
en résolution de problèmes
de communication.
C’est un spécialiste
en résolution de problèmes
de communication.
?
Sans problèmes,
il ne peut y avoir
de solutions.
1
Il faut trouver les bons
PROBLÈMES
afin d’avoir les bonnes
SOLUTIONS.
Loremipsumdolor
sitamet,consectetur
adipiscingelit ?
Quelle est l’influence du
lorem ipsum sur le travail
de conception ?
La couleur
La Typographie
Lorem
Dolor Amet
Ipsum
La photographie
Alfred Eisenstaedt
Eddie Adams, The Associated Press
La composition
Piet Mondrian Anna Blume,
Dichtungen, 1919
Loremipsumdolor
sitamet,consectetur
adipiscingelit ?
« Je vais ajuster les
textes en fonction
du design. »
« Je vais pouvoir changer
les textes dans le CMS. »
« Je vais remettre les textes
lorsqu’ils seront finaux. »
Textesou
Design
ou
2
Parlez-vous
& défiez-vous.
La communication
donne toujours
de meilleurs résultats.
Designers, rédacteurs,
concepteurs et clients,
vous devez trouver les problèmes
de communication à résoudre.
Designers
Intégrateurs
UX / UI
Infographistes
Photographes
Créateurs
decontenu
Rédacteurs
Concepteurs
Clients
Stratèges
La...
3
Être
TENDANCE
c’est bien.
Être
INTELLIGENT
c’est mieux.
Couleur
Typographie
Photo
Imagedemarque
Technologie
contenu
&
composition
Les objectifs
La clientèle
La nature des textes
La longueur des textes
La navigation
La composition
Classique
Navigation principal
Navigation
secondaire
Titre de la page
Lorem ipsum
letype
classique •	 Versatile
•	 Efficace
•	 Fonctionnel
•	 Rassurant
Classique
?
Web site pattern
Des règles qui orientent
la création d’un projet.
4,473,900+ articles*
en anglais seulement
http://en.wikipedia.org/wiki/Wikipedia:Size_of_Wikipedia
Accueil
x 41 425
Comment mettre en page une
quantitéphénoménaled’articles
de naturesdifférentes ?
•	 Grille liquide–Parfait pour toutes
les résolutions d’écran
•	 Majoritairement texte
•	 Images à l’appui
•	 Navigation :...
wikipedia.org
Encyclopédique
Comment expliquer
unconcept ou uneidée ?
Présentation
•	 100 % de l’écran
•	 Navigation progressive
•	 Textes courts
•	 Débute par une page couverture
•	 Termine par les contac...
quebecnumerique.com
quebecnumerique.com
1 2 3
4 5 6
quebecnumerique.com
kickstarter.com/year/2013 thecharlesnyc.com/annual_report/2013/
Mettre en parallèle des
informations de même nature ?
Comparatif
•	 100 % de l’écran
•	 Longueur des textes similaires
•	 Constance graphique entre
les diapositives
•	 Navigation par ordr...
flatguitars.com
flatguitars.com
flatguitars.com
flatguitars.com
flatguitars.com
cyclemon.com evanshalshaw.com/bondcars/
Comment conserverl’attention
lorsque l’on traite d’unsujet
complexe ?
Histoirefantastique
•	 Structuré comme une histoire
•	 Navigation continue
•	 Éléments de composition
intimement reliés
letype
histoirefantast...
Ilétaitunefois...
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Développement
dangersoffracking.com
Dénouement
dangersoffracking.com
http://www.earthworksaction.org/issues/detail/hydraulic_fracturing_101#.UyoHVa1dXzU
lostworldsfairs.com/atlantis inception-explained.com
Comment convaincre
mes actionnaires de la qualité
de leur investissement ?
Rapportannuel
letype
encyclopédique •	 Mot du président
•	 Chiffres
•	 Événements importants de l’année
•	 Chiffres
•	 Cartes
•	 Chiffre...
ge.com/ar2013/#/letter
Lamission QuinoussommesIntercalaire
Deschiffres PlusdechiffresUnecarte
thecharlesnyc.com
thecharlesnyc.com
thecharlesnyc.com
frankandoak.com/annualreport/2013 sailthru.com/annual
Comment présenter plusieurs
nouvellesdefaçonneutre
&objective ?
Journal
letype
encyclopédique •	 Grande quantité d’éléments
à présenter
•	 Typographie importante
•	 Sans artifice inutile
•	 Gril...
nytimes.com
nytimes.com
nytimes.com
nytimes.com
nymag.com nytimes.com/skimmer
Comment présenter plusieurs
nouvellessansêtreneutre
&objective ?
Magazine
letype
magazine •	 Grande photo de couverture
•	 Variation de la grille selon
le contenu
•	 Beaucoup d’images de qualités
...
gqmagazine.fr
gqmagazine.fr
esquire.co.uk vanityfair.fr
Comment faire vivre
uneémotion en utilisant
le concept d’immersion ?
Onrail
letype
onrail •	 Immersion narrative
•	 Navigation continue
•	 Conception sous forme d’un scénario
•	 Utilisation de la vi...
6millionsdemorts.com
6millionsdemorts.com
6millionsdemorts.com
6millionsdemorts.com
diesel.com/collection-diesel-home promo.vitra-russia.ru/promise
Ces patterns ne sont pas
des solutions, ce sont des
réponses à des problèmes.
+ +
1
Trouvons des solutions
3
Soyons intelligents
2
Parlons-nous
Merci
jsdaigle.com     |     bonjour@jsdaigle.com     |    @jsdaigle
Web site pattern –  le design en mode solution
Web site pattern –  le design en mode solution
Web site pattern –  le design en mode solution
Web site pattern –  le design en mode solution
Web site pattern –  le design en mode solution
Prochain SlideShare
Chargement dans…5
×

Web site pattern – le design en mode solution

437 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
437
Sur SlideShare
0
Issues des intégrations
0
Intégrations
10
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

×