2 tid conception-projet-cours2

204 vues

Publié le

Conception de projets - cours 2

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

2 tid conception-projet-cours2

  1. 1. Etude de la demande ! Tisse La Toile 72
  2. 2. cas1: 68/86 étudiants ont envoyé l'email à temps. cas2: 14 étudiants ont envoyé l'email en retard. cas3: 4 étudiants n'ont pas envoyé l'email. ! Quelle sera la perception du client dans chacun des cas? 73
  3. 3. Pour aujourd'hui, tu devais aussi reformuler le briefing. ! Qui l'a fait? 74
  4. 4. cas 1: Des étudiants ont fait leur propre briefing. cas 2: Des étudiants n'ont pas fait leur propre briefing. cas 3: Des étudiants n'ont pas pris connaissance du briefing. ! Quels étudiants peuvent vérifier avec le client s'ils ont bien cerné la demande? 75
  5. 5. 2tid 76 Sur base de ces premiers gestes, où te place ton comportement? la crème le ventre mou les autres: la longue traîne adéquationàlaformationdwm les étudiants dwm
  6. 6. 20" ! Les étudiants qui ont reformulé leur briefing se mettent ensemble, comparent, complètent. ! Les étudiants qui n'ont pas reformulé leur briefing le font maintenant. (continue chez toi). 77
  7. 7. TLT & wordpress 78
  8. 8. <digression> Wordpress… 79
  9. 9. Wordpress est un ? 80
  10. 10. CMS ! Content Management System 81
  11. 11. opensource 82
  12. 12. Wordpress est un CMS opensource ! A l'origine, destiné aux blogs ! Aujourd'hui, on peut en faire ce qu'on veut grâce à son architecture simple & flexible. 83
  13. 13. une architecture simple & flexible ! Natascha Harra-Frischkorn (www) 84
  14. 14. 85 1 "Thème" ("theme") 1 ou + "Extensions" ("plugins") Look 'n Feel Fonctionnalités Exemples ! - gestion d'inscriptions à une newsletter - e-shop ("woocommerce") - obfuscation des adresses email - antispam - … Exemples ! tous les sites sur dwm.re sont en fait une seule installation de Wordpress. Chaque "sous-site" a son propre thème, qui répond aux besoins spécifiques du projet dont il est l'objet. https://wordpress.org/plugins/https://wordpress.org/themes/
  15. 15. 86 1 "Thème" ("theme") Thème = Frontend Pleins de gens proposent des thèmes gratuits ou payant. ! Expérimente avec si tu veux dans le cadre de ta prise en main de Wordpress, mais à un moment donné, tu voudras faire tes thèmes toi-même. Les technologies requises sont: html, css, javascript et php, principalement les tags de wordpress, mais pas que. ! En troisième, on verra ensemble comment faire ton premier thème.
  16. 16. Wordpress </fin digression> 87
  17. 17. Va sur ! http://dwm.re/tisse-la-toile/wp-admin/ ! Si tu n'as pas de login, crée-toi un compte. 
 (tu auras besoin de vérifier tes emails) 89
  18. 18. Une fois connecté, >"Modifier mon profil" en haut à droite ! Remplis chaque champ, autant que tu p/veux. 90
  19. 19. Ensuite >"Mes sites" > "tisse la toile" 91
  20. 20. Ensuite >"Articles" > "ajouter" ! ! Crée l'article dont ton MCD est le titre. Mets le contenu que tu as, en l'état. Ce n'est pas bon, ce n'est pas grave (pour l'instant). ! Indique déjà un "mot-clef", qui caractérise ton MCD par rapport à l'histoire du web. ! Sur la Toile, ce mot-clef reliera la node centrale "Histoire du Web" à ton MCD. 92
  21. 21. chapitre en cours 93
  22. 22. ET SI ON ESSAYAIT DE T'APPRENDRE À REGARDER? 94 Albrecht DURER, Le Portillon, 1525, gravure où l'œil du peintre cherche à connaître l'origine du monde
  23. 23. Apprendre à voir AU DÉBUT DE CHAQUE COURS, UN(E) VOLONTAIRE • Pour venir présenter un JOG ("Joli Objet Graphique") rencontré et collecté. • Pour se porter volontaire, m'envoyer un email quelques jours auparavant, avec l'image en bonne résolution (projection se fait en 1280x 800) • 1 minute ou 2 maximum. Relax. • Analyser à chaque fois: • ce que le visuel raconte • les couleurs employées, et leur nombre • type et épaisseur des traits • tenter d'identifier la police de caractères et compter le nombre de variations de style typographique • Examiner la profondeur (fond et figures) la mise en espace… • S'il n'y a pas de volontaire, alors j'amène les images, mais c'est triste, et alors je pleure. 95
  24. 24. CRÉE UN DOSSIER DANS TA DROPBOX INTITULÉ "JOLIS OBJETS GRAPHIQUES GLANES DE ÇI, DE LÀ" ! ET NOURRIS-LA JUSQU'À TA MORT. ! C'EST SUPER UTILE, TU VERRAS. ET CELA TE DISCIPLINERA À GARDER L'OEIL OUVERT. ! IL N'Y A PAS D'APPRENTISSAGE SANS DISCIPLINE. ! (SANS RÉBELLION NON PLUS) 96
  25. 25. Qui se porte volontaire pour le prochain cours? (après le workshop) 97
  26. 26. Mise en pratique. 98
  27. 27. Voici des visuels ! Analyse à chaque fois: 1.QUOI ce que le visuel raconte 2.COULEURS identification des couleurs et leur nombre 3.TRAITS type et épaisseur des traits 4.TYPO tenter d'identifier la police de caractères et compter le nombre de variations de style typographique ! = déconstruire leur "système graphique" 99
  28. 28. Voici des visuels ! ! 1.QUOI 2.COULEURS 3.TRAITS 4.TYPO ! ! 100
  29. 29. quel est le système graphique de cette série? 101
  30. 30. INTERNATIONAL YEAR OF ASTRONOMY http://excites.co.uk/#313160/Futurism 102
  31. 31. 103
  32. 32. 104
  33. 33. 105
  34. 34. 106
  35. 35. 107
  36. 36. 108
  37. 37. 109
  38. 38. 110
  39. 39. 111
  40. 40. 112
  41. 41. Un système quoi? SYSTÈME GRAPHIQUE • ensemble d’éléments conçus pour fonctionner ensemble à l’accomplissement d’un objectif commun: captiver une audience en lui racontant une histoire. • pour raconter une histoire correctement, il faut un narrateur (pas deux) • pour n’avoir qu’un seul narrateur, il faut une voix unique (pas deux) • pour avoir une voix unique, il faut un vocabulaire graphique cohérent ! Sinon.... 113
  42. 42. Tu connais ce type? Il apparait dès qu’il n’y a pas de système graphique cohérent. 114
  43. 43. chapitre en cours 115 la créature a alors tendance à se retourner sur son créateur.
  44. 44. chapitre en cours 116 Attention. La cohérence n’est pas gage d’élégance. Evite le sucre et les matières grasses. La surenchère d'effets graphiques, quoi.
  45. 45. système graphique DONC, RÉFLÉCHIR À LA "VOIX" AVANT DE PRODUIRE • est d’effectuer une recherche spécifique aboutissant à ce vocabulaire graphique cohérent et homogène, avant de se mettre à dessiner des interfaces complètes. • on réfléchit donc d’abord à la voix du site (pense à la voix que tu entends lorsque tu lis un texte), ce qui permettra de réfléchir à la bonne manière de la décliner visuellement pour qu’elle «sonne» ainsi dans la tête du lecteur. 117
  46. 46. désarticulation systémique UN SYSTÈME GRAPHIQUE PEUT COMPRENDRE... • une grille • une bibliothèque d’icônes (faites sur une base systémique également) • un jeu de polices de caractères • 1 ou 2 polices, quelques variantes de graisse et de taille. Max. 8 variante. • une palette de couleurs, chacune associée à une fonction • Dans le web, typiquement, une couleur correspond à l’état hover des liens/boutons, une couleur pour le fond du texte, une couleur pour le texte non clicable. • Des schémas d’écran voire des Templates 118
  47. 47. ce slide est incompréhensible si tu n'étais pas au cours CONSTRUCTION GRAPHIQUE DU SENS • Choix du registre en fonction du message à faire passer, et à quel public • L’espace • le fond: motif répétitif (pattern) / image / noir / blanc / couleur / composition • le layout - organisation spatiale: la grille • Le cadrage = le point de vue du spectateur (vis-à-vis, perspective, globale…) Comment place-t-on le spectateur? (nb: si médium interactif, spectateur = acteur) • L’assortiment des couleurs • la composition graphique = la figure = l’avant plan • le point focal - par où doit commencer le regard? • points, lignes, surfaces : épaisseur des traits, régularité du trait, type d’angles • gestion du vide (ou espace négatif) > n’ayez pas peur du vide, lui vous adore! • Le contenu • texte: le moins de mots possibles Concision! • typographie • choix de la police en fonction du registre, du contenu et de son histoire, lisibilité • relation texte / image 119
  48. 48. système graphique DOCUMENTS PRODUITS • (anciennement: des chartes graphiques) • GEL: Global Experience Language _ http://www.bbc.co.uk/gel • style tiles _ http://styletil.es/ 120 Voir absolument http://voiceandtone.com/
  49. 49. Traduction spatiale de la voix. ! ou je tente de cartographier les notions graphiques qui participent à cette alchimie visuelle, transformant du son et du sens en paramètres visuels. 121
  50. 50. construire le sens: terminologie du graphisme 122 le registre / ton = LA VOIX DU SITE typographie l’avant plan (la figure) l’espace négatif la grille l’arrière plan couleur registre de langage point, ligne, surface perspective réflexion spatialeréflexion stylistique histoire/message dans quelle position placer le lecteur pertinence concision, rythme orthographe, vocabulaire Comment sont les traits? Tension, proportions, distances use your eyes contraste lisibilité luminosité température feuille A3, écran mobile/ desktop / laptop le canvas du peintre... STYLE ESPACE le texte couches techniques par ex: «Langage soutenu, juridique, pour des avocats, doit transpirer l’expertise, la maîtrise totale du sujet»
  51. 51. réductionnisme 123
  52. 52. réductionnisme 124
  53. 53. réductionnisme 125
  54. 54. réductionnisme 126
  55. 55. Au commencement, il n’y avait rien. 127 réductionnisme
  56. 56. 128
  57. 57. 129 Apparut alors un contenu. réductionnisme
  58. 58. 130(illustration by fuckin' genius videogramo)
  59. 59. 131 ce contenu, potentiellement très intéressant pour son public-cible, est la plupart du temps verbeux, gonflé, grossis, ronflant, écrit pour faire sérieux ou destiné à la lecture longue. Pas adapté au web. ! Néanmoins, il est porteur de sens. Ce sens, c'est notre graal. réductionnisme
  60. 60. 132 partir à la recherche du sens réductionnisme
  61. 61. 133 partir à la recherche de l'essens/iel réductionnisme
  62. 62. 134 L'essentiel est ton métier. réductionnisme
  63. 63. chapitre en cours 135 on met les curseurs à zéro. Texte en taille 10pt. pas de gras, d’italique. notepad mode. On cherche à enlever le gras, le décoratif. On va en quête de l' Essentiel.
  64. 64. 136 une fois l’essentiel posé, on augmente si nécessaire, l’un ou l’autre curseur. Le minimum nécessaire. Souvent, juste l’espacement et le positionnement des zones de texte suffit.
  65. 65. 137 helmut schmid: design is attitude (dispo. à la bibliothèque)
  66. 66. 138 helmut schmid: design is attitude / democracy hypocrisy
  67. 67. 139 Josef Müller-Brockmann
  68. 68. 140 James Brook - Typography Hierarchy ( http://jamesbrookdesign.blogspot.be )
  69. 69. 141 Mallarmé - Un Coup De Dés Jamais N’abolira le Hasard (1897)
  70. 70. 142 I-Ching 2800 av. J-C http://en.wikipedia.org/wiki/I_Ching
  71. 71. réductionnisme = ! épurer jusqu'à revenir à l'essentiel, sans dénaturer la valeur. 143
  72. 72. pourquoi le design graphique réductionniste? pourquoi le «réductionnisme»? 144 • Moins il y a à charger, plus rapide le site est perçu ! • Notre public a le cerveau bombardé d'informations. Il appréciera les informations claires, simples et sans effet visuel purement décoratif. ! • Un site est plus portable, plus facile à tenir à jour et à maintenir (futureproof) si il n’utilise pas les dernières techniques à la mode, qui ne fonctionne que dans la dernière version du dernier Chrome. ! • La plupart du temps, le visiteur ne va pas sur un site pour admirer l’interface, mais pour accéder à son contenu: "content first". • Le réductionnisme permet l'usage du SVG, utile à cette époque d'écrans retina ++ ! • Lorsque c'est bien fichu, c'est vachement élégant et original. ! • pas convaincu? lire http://sixrevisions.com/web_design/ reductionism-in-web-design/
  73. 73. 145 La sonde Pioneer est équipée d'une plaque à destination d'éventuelles vies intelligentes, porteuse d'un message : l'humanité existe, voici où elle se trouve et à quoi elle ressemble.
  74. 74. recette du minimal graphic design recette du réductionnisme 146 Se mettre des contraintes fortes Faire le plus avec le moins possible ! Séparer l'essentiel, ce qui signifie, du décoratif, qui n'est que du bruit et "encombre" la communication. ! Exploiter l'espace négatif (le vide) pour clarifier, exprimer • le «contenu d’abord» • Vise un système graphique permettant à l’utilisateur de comprendre le fonctionnement de ton interface sans devoir lire un manuel d'utilisation. • Vises une cohérence rigoureuse d’un écran à l’autre au niveau de • la hiérarchie de l'information • la position et le fonctionnement des éléments structurels de l'interface • le système typographique: titres, texte de corps, liens, ...
  75. 75. tout ce qui suit a été créé par le bureau EXERGIAN (Vienne, at) http://www.exergian.com 147
  76. 76. 148
  77. 77. 149
  78. 78. 150
  79. 79. 151
  80. 80. 152
  81. 81. 153
  82. 82. 154
  83. 83. 155
  84. 84. 156
  85. 85. 157
  86. 86. 158
  87. 87. 159
  88. 88. 160
  89. 89. 161
  90. 90. 162
  91. 91. 163
  92. 92. 164
  93. 93. 165
  94. 94. 166
  95. 95. 167
  96. 96. 168
  97. 97. 169
  98. 98. 170
  99. 99. 171
  100. 100. 172
  101. 101. 173
  102. 102. 174
  103. 103. 175
  104. 104. 176
  105. 105. 177
  106. 106. 179
  107. 107. 180
  108. 108. 181
  109. 109. 182
  110. 110. 184
  111. 111. 185
  112. 112. 186
  113. 113. 187 300 Senterre Maxime
  114. 114. 188
  115. 115. 189
  116. 116. 190
  117. 117. 191
  118. 118. 192
  119. 119. 193 de Nobrega dos Santos Alexandre 2TiD2 Dexter
  120. 120. 194

×