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/

http://pixeline.be

http://pixeline.be/quotes/

10

https://pixeline.be

https://pixeline.be

2tid

11

la longue traîne

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

12

2013-14: réussite

étudiants DWM: 121ré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.

13

un conseil?

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/

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

pas une usine à gaz.

19

20

Input

une usine à créer.

Output

20

Input

une usine à créer.

Output

briefingsLivrables, 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…

24

outils

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

http://bohemiancoding.com/sketch/

http://dropbox.com

http://pixeline.github.io/bugs/

http://www.kedisoft.com/totals/

26

organisation

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

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

CRÉER

36

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'originede 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




METHODE "WATERFALL"


processus créatif

42






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






Développement web livraison

METHODE "WATERFALL"






processus créatif

42







Validation

METHODE "WATERFALL"






processus créatif

42







Validation Validation

METHODE "WATERFALL"






processus créatif

42







Validation Validation Validation

METHODE "WATERFALL"






processus créatif

43


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



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

PRODUIREconstitution 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édiumcontenus connectés, interfaces, interactions

50

INTERNET ?

Interconnectednetworks

le réseau des réseaux

INTERNET ?



URL ?

INTERNET ?



URL ?

UNIFORMRESOURCELOCATOR

http://subdomain.domain.tld:port/folder/file.ext

INTERNET ?



URL ?



TLD ?

INTERNET ?



URL ?



TLD ?

TOPLEVELDOMAIN

INTERNET ?



URL ?



TLD ?

TOPLEVELDOMAIN

PORT par défaut d’un serveur web ?

INTERNET ?



URL ?



TLD ?

TOPLEVELDOMAIN

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

chapitre en cours

58

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

TLTTisse La toile

PREMIER PROJET: TISSE LA TOILEsite 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 à !

[email protected] !

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

Design

Transcript of 2 tid conception-projet-cours1