« design » n'est pas un gros mot
DESCRIPTION
La vidéo de la présentation complète ici : http://paris2013.drupalcamp.fr/session/design-nest-gros-motTRANSCRIPT
![Page 1: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/1.jpg)
DRUPALCAMP
PARIS 2013
« Design » n’est pas un gros mot.
Philippe Gervaise
open WEB solutions
![Page 2: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/2.jpg)
Philippe Gervaise
• Designer
• Design web depuis 1996
• Drupal depuis la version 4.6 (2005)
• « elv » dans la communauté Drupal
• Thémeur
![Page 3: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/3.jpg)
Design ?
• Définition ?
• Évolution du sens qui suit celle de la société
![Page 4: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/4.jpg)
« Design »
• Latin « designare »
• Italien « Disegno »
• Moyen français « desseigner », projeter, « dessein »
• 1750 : « dessin » et « dessein »
![Page 5: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/5.jpg)
Révolution industrielle
• 1730 – 1840
• L’industrie remplace l’artisanat
• Production de masse, fabrication peu coûteuse pour vendre plus
![Page 6: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/6.jpg)
1851
• Exposition Universelle de Londres
• Crystal Palace
![Page 7: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/7.jpg)
1851
• Exposition Universelle de Londres
• Crystal Palace
![Page 8: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/8.jpg)
1859
• Chaise Thonet N° 14
![Page 9: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/9.jpg)
1859
• Chaise Thonet N° 14
![Page 10: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/10.jpg)
1908
• Peter Behrens
• AEG
• Design global
![Page 11: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/11.jpg)
1908
• Peter Behrens
• AEG
• Design global
![Page 12: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/12.jpg)
1908
• Peter Behrens
• AEG
• Design global
![Page 13: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/13.jpg)
1908
• Peter Behrens
• AEG
• Design global
![Page 14: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/14.jpg)
1919 – 1933
• Bauhaus
![Page 15: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/15.jpg)
1919 – 1933
• Bauhaus
![Page 16: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/16.jpg)
1919 – 1933
• Bauhaus
![Page 17: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/17.jpg)
Modernisme
• Approche rationnelle
• La forme suit la fonction
• La richesse de l’objet vient de sa pureté, pas de l’ornementation
![Page 18: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/18.jpg)
1955 – 1968
• Hochschule für Gestaltung, École d’Ulm
• Braun
• Dieter Rams
![Page 19: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/19.jpg)
1955 – 1968
• Hochschule für Gestaltung, École d’Ulm
• Braun
• Dieter Rams
![Page 20: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/20.jpg)
Autour de 1970
• Début du postmodernisme
• Critique du fonctionnalisme
![Page 21: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/21.jpg)
1965 – 1985
• Design italien
![Page 22: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/22.jpg)
1965 – 1985
• Design italien
![Page 23: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/23.jpg)
1990 – 2000
• Ère numérique
• Le design donne du sens
![Page 24: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/24.jpg)
Design moderne
• Design global
• Stratégique
• Rôle social, responsabilité
![Page 25: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/25.jpg)
Web
• 1989 – 1993, création par Tim Berners-Lee
![Page 26: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/26.jpg)
Design et web
• Esthétique di"cile, typographie primitive
• Flash
![Page 27: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/27.jpg)
Design et web
• Esthétique di"cile, typographie primitive
• Flash
![Page 28: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/28.jpg)
Design et web
• Esthétique di"cile, typographie primitive
• Flash
![Page 29: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/29.jpg)
Design web = Graphisme ?
• Pas industriel
• Graphisme : 1 dimension. Signe
• Web : 3 autres dimensions
• Information
• Fonction
• Interaction
![Page 30: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/30.jpg)
Modèle « classique »
1. Brief, expression des besoins
2. Specifications : fonction
3. Architecture de l’info / UX : information/interaction
4. Développement
5. Design, maquettes haute-fidélité : signe
![Page 31: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/31.jpg)
Wireframes
![Page 32: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/32.jpg)
Processus figé
• « Ça fonctionne pour nous »
• Oui mais…
![Page 33: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/33.jpg)
Responsive Web Design
R W D
![Page 34: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/34.jpg)
Responsive Web Design
R WD
![Page 35: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/35.jpg)
Responsive Web Design
RWD
![Page 36: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/36.jpg)
Problèmes
• RWD accepté, évident, mais…
• Wireframes x 5 ?
• Maquettes x 5 ?
• Dev et front end x 2
• RWD à prendre en compte dès le début
![Page 37: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/37.jpg)
Consensus
• Réduire l’importance des wireframes
• Réduire le nombre de maquettes
• Itérations plus fréquentes
![Page 38: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/38.jpg)
Nouveau modèle1. Brief
2. UX haut niveau + Itérations
3. Specs
4. Langage visuel + itérations
5. Prototype
6. (Maquette)
7. Développement
![Page 39: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/39.jpg)
Changements : design
• Processus de design similaire, mais public
• Débute plus tôt : moodboards, style tiles
• finit plus tard : détails dans le navigateur
• Éviter le « big reveal »
![Page 40: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/40.jpg)
WIP
![Page 41: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/41.jpg)
Changement : clients
• Adoption de cette nouvelle approche ?
• C’est pas gagné
• Culte de la spec
• Approche progressive di"cile
![Page 42: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/42.jpg)
Changement collectif
• Web design bloqué aux principes du Bauhaus
• Autres disciplines ont évolué : design produit, architecture…
• Pourquoi pas nous ?
![Page 44: « Design » n'est pas un gros mot](https://reader033.vdocuments.pub/reader033/viewer/2022052622/558fd0ad1a28ab2f1b8b46ca/html5/thumbnails/44.jpg)
DRUPALCAMP
PARIS 2013
« Design » n’est pas un gros mot.
Philippe Gervaise
open WEB solutions