Conception de projets - cours 2

1. Etude de la demande
!
Tisse La Toile
72

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. Pour aujourd'hui, tu devais aussi reformuler le briefing.
!
Qui l'a fait?
74

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. 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. 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. TLT & wordpress
78

8. <digression> Wordpress…
79

9. Wordpress est un ?
80

10. CMS
!
Content
Management
System
81

11. opensource
82

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. une architecture simple & flexible
!
Natascha Harra-Frischkorn (www)
84

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. 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. Wordpress </fin digression>
87

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. Une fois connecté,
>"Modifier mon profil" en haut à droite
!
Remplis chaque champ, autant que tu p/veux.
90

19. Ensuite
>"Mes sites" > "tisse la toile"
91

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. chapitre en cours
93

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. 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. 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. Qui se porte volontaire pour le prochain
cours? (après le workshop)
97

26. Mise en pratique.
98

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. Voici des visuels
!
!
1.QUOI
2.COULEURS
3.TRAITS
4.TYPO
!
!
100

29. quel est le
système graphique
de cette série?
101

30. INTERNATIONAL YEAR OF ASTRONOMY
http://excites.co.uk/#313160/Futurism
102

31. 103

32. 104

33. 105

34. 106

35. 107

36. 108

37. 109

38. 110

39. 111

40. 112

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. Tu connais ce type? Il apparait dès qu’il n’y a pas
de système graphique cohérent.
114

43. chapitre en cours
115
la créature a alors tendance à se retourner
sur son créateur.

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. 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. 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. 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. 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. 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. 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. réductionnisme
123

52. réductionnisme
124

53. réductionnisme
125

54. réductionnisme
126

55. Au commencement, il n’y avait rien.
127
réductionnisme

56. 128

57. 129
Apparut alors un contenu.
réductionnisme

58. 130(illustration by fuckin' genius videogramo)

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. 132
partir à la recherche du sens
réductionnisme

61. 133
partir à la recherche de l'essens/iel
réductionnisme

62. 134
L'essentiel est ton métier.
réductionnisme

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. 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. 137
helmut schmid: design is attitude (dispo. à la bibliothèque)

66. 138
helmut schmid: design is attitude / democracy hypocrisy

67. 139
Josef Müller-Brockmann

68. 140
James Brook - Typography Hierarchy ( http://jamesbrookdesign.blogspot.be )

69. 141
Mallarmé - Un Coup De Dés Jamais N’abolira le Hasard (1897)

70. 142
I-Ching
2800 av. J-C
http://en.wikipedia.org/wiki/I_Ching

71. réductionnisme =
!
épurer jusqu'à revenir à l'essentiel, sans dénaturer la
valeur.
143

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. 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. 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. tout ce qui suit a été créé par
le bureau EXERGIAN (Vienne, at)
http://www.exergian.com
147

76. 148

77. 149

78. 150

79. 151

80. 152

81. 153

82. 154

83. 155

84. 156

85. 157

86. 158

87. 159

88. 160

89. 161

90. 162

91. 163

92. 164

93. 165

94. 166

95. 167

96. 168

97. 169

98. 170

99. 171

100. 172

101. 173

102. 174

103. 175

104. 176

105. 177

106. 179

107. 180

108. 181

109. 182

110. 184

111. 185

112. 186

113. 187
300
Senterre
Maxime

114. 188

115. 189

116. 190

117. 191

118. 192

119. 193
de Nobrega dos Santos Alexandre 2TiD2
Dexter

120. 194