3. évaluation
évaluation
• TJ: 30%
TP + Remises Workshops + participation aux cours
• TFA : 70%
• le chemin est plus important à mes yeux que l’objectif. De workshop en workshop,
je vais tâcher de voir si tu évolues (Mais tu es nombreux, donc rend toi visible).
3
4. TOC
table des matières
• Cours «normaux»
• théorie
• processus de création
• gestion commerciale d’un projet
• Apprendre à voir
• Raconte le web : TP Tisse La Toile
• L’approche graphique réductionniste: «content first»
• Workshops
• storytelling
• interaction design
• data visualisation
• TFA
4
5. alexandre plennevaux
5
• web designer/developer depuis 1998 (pixeline.be)
• parle anglais, français, espagnol (diplômé en traduction)
• enseigne depuis 2009
• dort peu mais rêve beaucoup, sait se taire et écouter. Parle trop vite (le ralentir au
besoin).
• adore les citations: http://pixeline.be/quotes/
9. 2tid
11
la longue traîne
la crème le ventre mou les autres: la longue traîne
adéquationàlaformationdwm
les étudiants dwm
10. 12
2013-14: réussite
étudiants DWM: 121
réussite 1ère session: 11 9,090909091%
réussite 2ème session: 28 23,140495868%
Taux de réussite 32,231404959%
Conclusion
Moins de 1 étudiant sur 3 est arrivé en 3ème l'année dernière.
Pourquoi?
Parce que la première est nulle et cela ne risque pas de changer.
Parce que tu n'as pas de culture visuelle.
Parce que tu bosses le moins possible.
Parce que tu es mal organisé.
Parce que nous sommes exigeants, et qu'il n'y a qu'un an pour acquérir beaucoup de compétences et connaissances.
Parce que c'est un métier complexe.
23. 23
t’as pas un euro?
Tu aurais une
minute pour moi?
putain la dèche,
man.
Si seulement je m’y
connaissais mieux en
…
Suis trop
crevé, ferai cela
demain.
ces ressources sont rares…
25. 25
Mes outils - UX
- prototypage: Axure RP Pro ou Balsamiq Mockups
- graphisme: sketch http://bohemiancoding.com/sketch/ + photoshop
- développement: coda 2 + Sublime text + Dash (documentation), Mamp pro: serveur web local + github
- virtualbox (pour émuler windows)
!
- social : tweetdeck, pratique pour suivre plusieurs hashtags
!
- prise de note: evernote ou google docs
- email: Gmail
- agenda: Google Calendar
- gestion des fichiers: dropbox.com . Tous mes projets en cours sont dans dropbox. Je ne crains rien.
!
- avec mes clients: Bugs ( http://pixeline.github.io/bugs/ )
- facturation: Totals ( http://www.kedisoft.com/totals/ )
!
- une voiture et un scooter
- un imac 21", un macbook pro, un iphone 4, un wiko cink peak (android 4.2), un ipad mini
27. 27
organisation - Gmail à la place du webmail de l’école (voir tutoriel sur le forum)
- Get Things Done. J'utilise google Agenda constamment pour gérer mes deadlines et mon temps.
- "under promise, over deliver". Le client attend le respect des échéances. Sois pessimiste dans ton calcul,
et tant mieux si tu livres plus tôt.
- le temps, c'est de l'argent. Réfléchis avant d'agir sur la meilleure manière d'arriver du point A au point B.
- pas de sentiments, des arguments. Analyse coûts/bénéfices ftw.
43. Schéma de la création digitale, vision globale.
41
conception du projet
développement
produit
Processus = série d'étapes.
!
Selon toi, par quelles étapes
passent la création d'un projet
web ?
45. processus créatif
42
Demande Etude de la demande
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
METHODE "WATERFALL"
conception du projet
46. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
METHODE "WATERFALL"
conception du projet
47. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web
METHODE "WATERFALL"
- mockups > templates html/css/js
- frontend development
- fucking IE is fucking you
- Responsive web design
- backend development
- optimisation des sources
( minification, combinaison,
compression gzip)
conception du projet
48. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web livraison
METHODE "WATERFALL"
- mockups > templates html/css/js
- frontend development
- fucking IE is fucking you
- Responsive web design
- backend development
- optimisation des sources
( minification, combinaison,
compression gzip)
conception du projet
49. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web livraison
Validation
METHODE "WATERFALL"
- mockups > templates html/css/js
- frontend development
- fucking IE is fucking you
- Responsive web design
- backend development
- optimisation des sources
( minification, combinaison,
compression gzip)
conception du projet
50. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web livraison
Validation Validation
METHODE "WATERFALL"
- mockups > templates html/css/js
- frontend development
- fucking IE is fucking you
- Responsive web design
- backend development
- optimisation des sources
( minification, combinaison,
compression gzip)
conception du projet
51. processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- Direction artistique / storytelling
- constitution des contenus
- IA (Architecture de l'Information)
- prototypage de l' UX
- tests et itérations
- conception de l'univers visuel
- mockups
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web livraison
Validation Validation Validation
METHODE "WATERFALL"
- mockups > templates html/css/js
- frontend development
- fucking IE is fucking you
- Responsive web design
- backend development
- optimisation des sources
( minification, combinaison,
compression gzip)
conception du projet
52. processus créatif
43
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (personas)
- constitution des contenus
- prototypage
- conception de l'univers visuel
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle, à l'origine
de sa demande?
- quels sont ses objectifs?
Développement web livraison
Validation Validation Validation
METHODE "WATERFALL" _ EN REALITE
conception du projet
54. BA/ba de la gestion commerciale
45
!
Les étapes de gestion commerciale d’un projet, et les documents associés.
Comprenez et mémorisez ce processus, retenez les noms de ces documents.
56. PRODUIRE
47
Besoin / Désir
Demande
Commanditaire Fournisseur
Offre : étude de la demande,
proposition de la solution + budget nécessaire
Commande
Contrat + Facture 1/3
COMMENCER
Contrat signé et Facture 1/3 réglée
Conception du projet
Etudes: Direction artistique /
storytelling, UX, graphique,
ergonomique, concurrentielle,...
Planning et Cahier des charges
CONCEVOIR
Validation de l’étude, du planning et du cahier des charges
57. Planning et Cahier des charges
PRODUIRE
constitution des contenus
création des interfaces
tests ergonomiques
....
le site réalisé (beta)
Réception Provisoire + facture 2/3
FINIR
Règlement facture 2/3,
RP signée,
feedback final
Réception Définitive + facture 3/3
débuggage
Règlement facture 3/3,
RD signée
Documentation, formation,
Contrat de maintenance....
Validation de l’étude, du planning et du cahier des charges
65. Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file.ext
TLD ?
TOP
LEVEL
DOMAIN
INTERNET ?
66. Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file.ext
TLD ?
TOP
LEVEL
DOMAIN
PORT par défaut d’un serveur web ?
INTERNET ?
67. Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file.ext
TLD ?
TOP
LEVEL
DOMAIN
PORT par défaut d’un serveur web ?
http://subdomain.domain.tld:80/folder/file.ext
INTERNET ?
68. "URL" est lié à la "résolution DNS"
!
Quelqu'un sait ce que cela signifie?
52
69. Structure de l’URL
URL = Uniform Resource Locator
(= «adresse web»)
53
•
Ex: http://blogs.lesoir.be/exclusif/roi-philippe-est-une-fille.html
http:// = le protocole (idem: ftp:// , file://, mailto: )
( http = hypertext transfer protocol, ftp = file transfer protocol)
ensuite, de droite à gauche jusqu’au premier «slash» (/)
(du général au particulier)
.be = Top Level Domain
lesoir = domain name (nom de domaine)
blogs = sous-domaine
Cet URL correspond à dire à la machine:
«va chercher le fichier roi-philippe-est-une-fille.html se trouvant dans le
dossier « /exclusif/» sur l’ordinateur be.lesoir.blogs via le protocole http»
73. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
74. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
75. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
Etape 2
76. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
Etape 2
77. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
Etape 2
78. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Salut! Sers-moi le fichier prince-
philippe-est-une-fille.html se trouvant
dans le dossier « /exclusif/» et ses
fichiers associés.I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1
Etape 2
79. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Salut! Sers-moi le fichier prince-
philippe-est-une-fille.html se trouvant
dans le dossier « /exclusif/» et ses
fichiers associés.I.S.P
195.13.15.25
serveur DNS de l’ISP
Les voici!
Etape 1
Etape 2
80. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Salut! Sers-moi le fichier prince-
philippe-est-une-fille.html se trouvant
dans le dossier « /exclusif/» et ses
fichiers associés.I.S.P
195.13.15.25
serveur DNS de l’ISP
Les voici!
Etape 1
Etape 2
81. client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Salut! Sers-moi le fichier prince-
philippe-est-une-fille.html se trouvant
dans le dossier « /exclusif/» et ses
fichiers associés.I.S.P
195.13.15.25
serveur DNS de l’ISP
Les voici!
Etape 1
Etape 2
.js.html
.css .mp3
.png .jpg
.avi
82. un site internet
pour mettre du contenu en ligne
• Que faut-il?
★ un nom de domaine chez un enregistreur de domaines
(«name registrar»)
★ un espace sur un serveur pour héberger ses fichiers
(un «hébergeur»)
★ les fichiers constituant le site en lui-même.
56
85. un «bon» site web
réponses
• chargement rapide, réactif
• pas d’erreur (404)
• "esthétique", simple à utiliser, lisible,
s’adapte aux différents devices, aux
différentes plates-formes, cohérence
forme-contenu, bien hiérarchisé, on sait
où l’on est et ce que l’on peut faire
• contenu de qualité, dans du html
sémantique
• SEO
• futureproof
• voir codex
59
87. faire un «bon» site, c’est difficile.
conclusion
•
Faire un «bon» site web, c’est compliqué. Cela exige de faire
attention à la forme, au fond, tenir compte des contextes d’utilisation, connaître
plusieurs langages de présentation et/ou de programmation, comprendre, au
moins de manière basique, les bases de la connectique (RJ45 quelqu’un ?),
protocole TCP/IP, etc.
• Métier comparable à l’architecture.
• Cela prend du temps. On commence tous par faire des sites nuls.
• Se remettre sans cesse en question, se tenir au courant, expérimenter.
• sur le plan de la conception graphique: pertinence du réductionnisme
61
89. PREMIER PROJET: TISSE LA TOILE
site du projet: http://dwm.re/tisse-la-toile/
briefing: http://dwm.re/tisse-la-toile/briefing/
objectifs: projet collaboratif – apprendre l'histoire de ton médium – apprendre à raconter en
face à face – utiliser Wordpress – pratiquer le réductionnisme
63
91. Tisse la toile
66
Tu/vous/chacun effectue
!
une recherche exhaustive
!
à propos de son MCD et de sa relation au web
!
wikipedia, vimeo, twitter, youtube…
!
Fais des relations, écarte-toi du sujet,
approprie-toi la recherche, digresse,
développe ton propre point de vue.
!
Ramasse beaucoup d'informations.
Du texte bien sûr, du visuel aussi.
!
Explore et catalogue l'univers visuel de ton MCD
?
92. Tisse la toile
67
De ces informations
!
Tire une histoire que tu
nous raconteras
oralement
!
de manière
captivante,
!
ta première UXP
!
en 1 à 3 minutes et 20 slides minimum.
93. Déroulement de TLT
!
• Semaine 1:
• tu reçois un mot-clef déclencheur
• tu déclenches ta recherche personnelle
• Semaine 2 (en labos): premier encodage sur le site TLT
• Semaine 3+4+5: storyshop
• Semaine 5:
• préparation de la présentation: des slides réductionnistes. (Un briefing le
précisera)
• Mise à jour de la publication sur TLT
• Semaine 6: présentations devant la classe. Evaluation 1/2
• Semaine 7: publication finale sur TLT. Démarrage de la phase "maintenance corrective"
• Semaine 13: évaluation de la publication sur TLT. Evaluation 2/2
• Système graphique réductionniste et cohérent.
68
94. POUR VENDREDI SOIR
!
envoye un email à
!
alexandre.plennevaux@prof.heaj.be
!
sujet: TLT - quel est mon MCD ?
!
message: Quel est mon MCD ?
!
Tu recevras en retour d'ici DIMANCHE SOIR ton mot-clef.
Tu peux alors débuter ta recherche.
(pour certains, ambigus, j'ajoute une indication entre parenthèses)
69
95. MAINTENANT et jusque dimanche soir:
!
tu étudies la demande.
!
Le briefing est détaillé ici:
http://dwm.re/tisse-la-toile/briefing/
!
Si tu as des questions, publie-les sur http://dwm.re/pond/
70
TU RÉDIGES UN BRIEFING PERSONNEL, A TA SAUCE.
Cela t'aidera à t'approprier le projet.