Etude de la demande !

Tisse La Toile

72

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

Pour aujourd'hui, tu devais aussi reformuler le briefing. !

Qui l'a fait?

74

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

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

éq

ua

tio

n à

la

fo

rma

tio

n d

wm

les étudiants dwm

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

TLT & wordpress

78

<digression> Wordpress…

79

Wordpress est un ?

80

CMS !

Content

Management

System

81

opensource

82

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

une architecture simple & flexible !

Natascha Harra-Frischkorn (www)

84

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/

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.

Wordpress </fin digression>

87

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

Une fois connecté, >"Modifier mon profil" en haut à droite

!

Remplis chaque champ, autant que tu p/veux.

90

Ensuite >"Mes sites" > "tisse la toile"

91

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

chapitre en cours 93

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

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

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

Qui se porte volontaire pour le prochain cours? (après le workshop)

97

Mise en pratique.

98

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

Voici des visuels !

!1.QUOI 2.COULEURS 3.TRAITS 4.TYPO

!!

100

quel est le système graphique

de cette série?

101

INTERNATIONAL YEAR OF ASTRONOMYhttp://excites.co.uk/#313160/Futurism

102

103

104

105

106

107

108

109

110

111

112

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

Tu connais ce type? Il apparait dès qu’il n’y a pas de système graphique cohérent.

114

chapitre en cours

115

la créature a alors tendance à se retourner sur son créateur.

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.

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

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

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

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/

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

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 stylistiquehistoire/message

dans quelle position placer le lecteur

pertinence concision, rythme orthographe, vocabulaire Comment sont les traits? Tension, proportions, distances

use your eyescontraste 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»

réductionnisme

123

réductionnisme

124

réductionnisme

125

réductionnisme

126

Au commencement, il n’y avait rien.

127

réductionnisme

128

129

Apparut alors un contenu.

réductionnisme

130(illustration by fuckin' genius videogramo)

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

132

partir à la recherche du sens

réductionnisme

133

partir à la recherche de l'essens/iel

réductionnisme

134

L'essentiel est ton métier.

réductionnisme

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.

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.

137helmut schmid: design is attitude (dispo. à la bibliothèque)

138helmut schmid: design is attitude / democracy hypocrisy

139Josef Müller-Brockmann

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

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

142

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

réductionnisme = !

épurer jusqu'à revenir à l'essentiel, sans dénaturer la valeur.

143

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/

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.

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, ...

tout ce qui suit a été créé par le bureau EXERGIAN (Vienne, at)

http://www.exergian.com

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

179

180

181

182

184

185

186

187

300Senterre Maxime

188

189

190

191

192

193

de Nobrega dos Santos Alexandre 2TiD2

Dexter

194