2 tid conception-projet-cours2
-
Upload
alexandre-plennevaux -
Category
Design
-
view
61 -
download
0
Transcript of 2 tid conception-projet-cours2
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