workshop-TFA

“ Graphic design has just as much to do with words as it does with pictures, and a lot of my favorite designers come to design from the world of words instead of the world of pictures.”

– Franck Chimero (lien)

vendredi 11 mai 2012

http://blog.frankchimero.com/post/979706728

http://blog.frankchimero.com/post/979706728

faites des groupes de 4(on va jouer au poker)


Stefan Sagmeister (Bregenz, 1962)


Les lettres, le caractère écrit, est une arme.

Asela Pérez, 1978


les lettres sont des formes «magiques», des formes avec un son, et un sens.

et pourtant...



Et pourtant...

http://www.microsoft.com/switzerland/publicsector/de/pages/healthcare/healthcare_team.mspx

http://www.microsoft.com/switzerland/publicsector/de/pages/healthcare/healthcare_team.mspx


http://rdio.com

http://rdio.com


http://www.belstat.be/adduser.asp?userid=
































































L’accessibilité pour la région wallonne?

http://atlas.valid.wallonie.be/accessibility






pourquoi l’écrit est-il si maltraité?


parce qu’il demande du temps, et que nous sommes pressés.


Aujourd’hui, nous nous arrêtons.


ce qui est écrit n’est pas silencieux.


Quand je lis, j’entends quelqu’un me le dire.


Ce «quelqu’un» est une personnalité construite par le lecteur à partir d’éléments perçus.


typographiecouleurs

registre de langagechoix des mots

ponctuationconfort de lecture

espaces videsprésence de fautes d’orthographe

...Chaque détail compte.

Le designer est en charge de ces «détails».


toi/designer?toi faire attention

(sinon toi chi chi)


Stratégie du contenu Copywriting

Typographie

The Voicestorytelling

le choix du message le choix des mots

lisibilité, hiérarchie &dynamique


• ma cible

• ce que je veux lui dire

• je le dis

• je l’écris

• je l’évoque (= evocare : littéralement, donner une voix)

{{

{

content strategy

copywriting

typographie


content strategy / ma cible


communiquer


« je veux faire un stage chez toi »


qui est ce «toi» ?


persona

• on utilise un persona comme «memo» des personnes qui utiliseront le site.

• réalise le persona de la personne qui sera ton maître de stage en 3TID.



Geoffroy DifoolBrute Graphique SA 28 ans, 1 enfantDirecteur artistique

Sur Mac OS X, Laptop 13’’ + smartphone (iphone 3)

après 3 ans passés chez emakinette, Geoffroy, énervé par la vie de mandaï, démissionne, prenant son portefeuille de clients avec lui et 2 collègues avec lesquels il fonde Brute Graphique.

MotivationL’entreprise décolle bien et il a beaucoup de travail, mais pas suffisamment pour engager. Ils se répartissent donc la surcharge, jusqu’au jour où...

Scénario d’assouvissement7h48. Il vérifie ses emails. 3 propositions de stage aujourd’hui, c’est peu mais la journée ne fait que commencer.

La première: Un étudiant en journalisme de l’université de dakar. Poubelle...

La deuxième: ah, un graphiste web. Lire, lire, lire. Oufti! les fautes d’orthographe et le pâté de texte de 2km n’augurent rien de bon. Je vais tout de même voir son portfolio. Mmmh, quelle purée graphique. Nah, m’énerve déjà.

La 3ème demande de stage est mieux fagotée: un message tout court et direct avec un lien. J’ai cliqué sur un lien et cela m’emmène sur une page avec ma photo, sur laquelle je sers la main à ce jeune gars! Pas mal réalisé ceci dit. Le gars s’est donné la peine! Bon, je vais aller voir son portfolio. Mmh, sobre et contrôlé. Pas mal, bon un peu jeune et fou, mais je vais quand même le rencontrer, il semble avoir du potentiel et de la motivation.

GD cherche alors les infos de contact, voit un formulaire et un numéro de gsm, puis se dit finalement qu’il va répondre à son email, ainsi il garde une copie complète de la conversation dans ses emails. Il ne faut pas 1 heure pour qu’il reçoive une réponse: l’étudiant me propose plusieurs dates, orthographe parfaite et bonne formulation, un gars sérieux.

PUBLIC-CIBLE: PATRON D’AGENCE


«Why not the best ? »Slogan :


• choisis ta cible sur internet : société + personne de contact en charge du recrutement. A défaut, le boss.

• fais des recherches pour en savoir plus sur lui/elle

• rédige un persona le résumant: doit contenir: photo, nom, age, bio courte, motivations, scénario d’assouvissement

TU AS 20 minutes



concision


Descriptions are like skirts: they should be long enough to cover the subject, but short enough to keep things interesting.

GIDSY.COM


ponctuation



http://www.fort-de-tancremont.be/histoire.html

http://www.fort-de-tancremont.be/histoire.html

formuler

• 5 min (seul) _ le message : si ton persona était devant toi, que lui dirais-tu? Remplis une feuille avec des points.

• diviser une feuille en 2 colonnes:colonne 1: essentielcolonne 2: accessoire

• 5 min (seul): répartir les points du message entre essentiel et accessoire

• 15 minutes (seul): articuler les points essentiels dans une lettre adressée à ta Cible.

• 30 minutes: ITERATION DE GROUPELecture à voix haute devant le groupe. Le groupe dit franchement si cela sonne «juste» ou «ridicule», et propose des améliorations (ponctuation, choix des mots, musicalité, crédibilité, registre du langage...). Rincer, répéter.

• Au terme des 30 minutes, le groupe choisit le meilleur texte. Son auteur la lira à voix haute.

copywriting


typographie

lisibilité, hiérarchie & dynamique



http://aworkinglibrary.com/

http://aworkinglibrary.com/

Herbert Frederick Lubalintypogabor.com/herb-lubalin/index.html


Herbert Frederick Lubalin

typogabor.com/herb-lubalin/index.html



Herbert Frederick Lubalinvendredi 11 mai 2012

La Cantatrice Chauve d'Eugene Ionesco, mise en scène par Robert Massinhttp://www.typogabor.com/ionesco_massin/pages/Massin_Ionseco_06.html

typographie


http://www.typogabor.com/ionesco_massin/pages/Massin_Ionseco_06.html


La Cantatrice Chauve d'Eugene Ionesco, mise en scène par Robert Massinhttp://www.typogabor.com/ionesco_massin/pages/Massin_Ionseco_15.html

typographie




La C

anta

tric

e C

hauv

e d'

Euge

ne Io

nesc

o, m

ise

en s

cène

par

Rob

ert

Mas

sin

http

://w

ww

.typo

gabo

r.com

/ione

sco_

mas

sin/

page

s/M

assi

n_Io

nsec

o_19

.htm

l

typographie






formaliser

60 min pour

• sur une feuille A3 grillagée par vos soins, vous écrivez dessinez le texte proprement, en hiérarchisant / dynamisant le texte (taille et orientation des caractères)

• vous accrochez le dessin au mur.

typographie


TFA/ design process



http://www.atelierdesign.be

http://www.atelierdesign.be

dis-moi comment tu travailles, je te dirai si t’es sérieux

• présenter sa méthode de travail dans son TFA


design process

exemples


http://www.sagemedia.ca/process.php


http://www.jayhollywood.com.au/about-me/ - l’a rendu interactif, nice!


http://www.alexcarabi.com/about/


http://www.bythepond.co.uk/about


http://teixido.co/


http://www.gonzodesign.nl/


http://irontoiron.com/ - INTERACTIF ++


http://www.irontoiron.com/

http://www.irontoiron.com/

http://www.tonygeer.com/services/


http://www.pixelstadium.com/blog/20-inspiring-web-development-process-diagrams.html

encore?




instructions• Objectif

présenter sa méthode de travail dans son TFA

• Description1. Décrivez votre processus de travail depuis la réception d’une demande jusqu’ à la remise du résultat final de manière à ce que votre public-cible le comprenne et trouve votre présentation originale et intelligente.2. il sera réalisé en html + css (+ javascript si nécessaire)

• Délivrables

• le design process n’est pas une image. Il est réalisé en html + img, css, js, flash ou mov...) et est donc pour partie interactif.

• il est intégré au site et est donc accessible via le menu principal

• EchéanceJury du TFA

• Compétences évaluées

• intelligence de la synthèse: compréhensible, correcte

• originalité de la présentation: vocabulaire graphique

• qualité de la réalisation: rigueur, perfection, style, technique, grille


Questions sur le tfa


"Un formulaire de feedback relatif à 5 aspects du site".• un formulaire, pas forcément de contact, du type:

• avez-vous trouvé la navigation de mon site conviviale?

• Avez vous pu accéder à l'information que vous recherchiez? etc...


cet après-midi

tu vois un professeur avec tes questions.10 min. maximum par entretien

inscris-toi,

puis

en attendant ton tour:Travaille en partant de ton inventaire des contenus:vois comment le mélanger à ta colonne «messages

essentiels» pour décliner l’ensemble en une expérience sur 10 écrans (délivrable: wireframes).

CONTENU D’ABORD


workshop-TFA

Documents

Transcript of workshop-TFA