2 tid conception-projet-cours1

2
t
copyright: CNN
conception
de projet - 1

é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

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

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/

2tid
11
la longue traîne
la crème le ventre mou les autres: la longue traîne
adéquationàlaformationdwm
les étudiants dwm

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.

14
Travaille. Beaucoup. Tout le temps. L'école doit être
ta priorité absolue toute l'année.
!
Tu es ton meilleur professeur.

15
lis.
!
!
http://dwm.re/lectures-conseillees/

16
Regarde.
!
!
Apprends à voir. Pas comme un
consommateur, mais comme un créateur.
Décortique ce que tu trouves "beau". Tous les jours.

17
70% de ce qu'il te faut ne se trouve pas à l'école.

18
Input
Organise-toi.
Améliore sans cesse ta méthode de travail.
Deviens une usine.
Output

20
Input
une usine à créer.
Output

20
Input
une usine à créer.
Output
briefings
Livrables,
acquisition de maitrise
technique et
conceptuelle

Qu'est-ce qu'il te
faut pour
réaliser un
projet?
21

22
thunes connaissances compétences outils tempsorganisation

22
thunes connaissances compétences outils tempsorganisation
l'amour de ce que tu fais.

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

28
impact du designer
source: http://consumeconsume.com/post/31018082728

A ton avis, sur une échelle de 100, quelle est
ta force créative?
!
Note-le sur un papier.
29

A présent, sur une échelle de 100, évalue
ton sens de l'organisation.
!
Note-le sur un papier.
30

Effectue ce calcul:
!
Créativité x sens de l'organisation = ?
31

Le résultat obtenu, c'est ton potentiel d'impact.
32

{ interlude }
!
qui es-tu?
d'où viens-tu?
quel est ton impact ?
Pourquoi DWM?
!
33

{ interlude 2}
!
Envoye un tweet avec le hashtag #iamdwm et 3 choses à
dire sur toi. "3 random facts à propos de moi:"
!
34

37
au départ, il y a une demande.

38
Ensuite, à ton avis?
au départ, il y a une demande.

Schéma de la création digitale, vision globale.
39
conception du projet
développement
produit

39
développement
produitmesure
analyse des données
Apprendre

mesure
analyse des données
Apprendre
40
développement
produit
Contentons-nous de ceci pour l'instant

41
développement
produit
Processus = série d'étapes.
!
Selon toi, par quelles étapes
passent la création d'un projet
web ?

processus créatif
42
Demande
METHODE "WATERFALL"

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"

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
de sa demande?
METHODE "WATERFALL"

processus créatif
42
- mockups
de sa demande?
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)

processus créatif
42
- mockups
de sa demande?
Développement web livraison
METHODE "WATERFALL"
compression gzip)

processus créatif
42
- mockups
de sa demande?
Validation
METHODE "WATERFALL"
compression gzip)

processus créatif
42
- mockups
de sa demande?
Validation Validation
METHODE "WATERFALL"
compression gzip)

processus créatif
42
- mockups
de sa demande?
Validation Validation Validation
METHODE "WATERFALL"
compression gzip)

processus créatif
43
- prototypage
de sa demande?
Validation Validation Validation
METHODE "WATERFALL" _ EN REALITE

44
LES METHODES ITERATIVES / "SPIRALE" et "AGILE"

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.

46
COMMENCER CONCEVOIR PRODUIRE FINIR
demande
commande
problème
solution
virtuel
réel
efforts
récompense
gestion commerciale

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

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

connais ton médium
contenus connectés, interfaces, interactions
50

Interconnected
networks
le réseau des réseaux
INTERNET ?

Interconnected
networks
URL ?
INTERNET ?

Interconnected
networks
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file.ext
INTERNET ?

Interconnected
networks
URL ?
UNIFORM
RESOURCE
LOCATOR
TLD ?
INTERNET ?

Interconnected
networks
URL ?
UNIFORM
RESOURCE
LOCATOR
TLD ?
TOP
LEVEL
DOMAIN
INTERNET ?

Interconnected
networks
URL ?
UNIFORM
RESOURCE
LOCATOR
TLD ?
TOP
LEVEL
DOMAIN
PORT par défaut d’un serveur web ?
INTERNET ?

Interconnected
networks
URL ?
UNIFORM
RESOURCE
LOCATOR
TLD ?
TOP
LEVEL
DOMAIN
PORT par défaut d’un serveur web ?
http://subdomain.domain.tld:80/folder/file.ext
INTERNET ?

"URL" est lié à la "résolution DNS"
!
Quelqu'un sait ce que cela signifie?
52

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»

client
www.lesoir.be = ?
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Etape 1

client
www.lesoir.be = ?
I.S.P
195.13.15.25
serveur DNS de l’ISP
Etape 1

client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
I.S.P
195.13.15.25
Etape 1

client
www.lesoir.be = ?
I.S.P
195.13.15.25
Etape 1
Etape 2

client
www.lesoir.be = ?
serveur web
81.246.2.9
I.S.P
195.13.15.25
Etape 1
Etape 2

client
www.lesoir.be = ?
serveur web
81.246.2.9
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
Etape 1
Etape 2

client
www.lesoir.be = ?
serveur web
81.246.2.9
195.13.15.25
Les voici!
Etape 1
Etape 2

client
www.lesoir.be = ?
serveur web
81.246.2.9
195.13.15.25
Les voici!
Etape 1
Etape 2
.js.html
.css .mp3
.png .jpg
.avi

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

Quelles sont les qualités
d’un «bon site web"?
57

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

Thousand-armed Kannon
(buddha de la compassion)
!
Japon, 934 apr. J-C

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

briefing
62
TLT
Tisse La toile

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

Tisse la toile
65
Vous recevez
!
un mot
clef
déclencheur
différent

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
?

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.

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

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

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.

2 tid conception-projet-cours1

Contenu connexe

Similaire à 2 tid conception-projet-cours1

2 tid conception-projet-cours1