La vidéo de la présentation complète ici : http://paris2013.drupalcamp.fr/session/design-nest-gros-mot

1. DRUPALCAMP
PARIS 2013
« Design » n’est pas un gros mot.
Philippe Gervaise
open WEB solutions

2. Philippe Gervaise
• Designer
• Design web depuis 1996
• Drupal depuis la version 4.6 (2005)
• « elv » dans la communauté Drupal
• Thémeur

3. Design ?
• Définition ?
• Évolution du sens qui suit celle de la société

4. « Design »
• Latin « designare »
• Italien « Disegno »
• Moyen français « desseigner », projeter, « dessein »
• 1750 : « dessin » et « dessein »

5. Révolution industrielle
• 1730 – 1840
• L’industrie remplace l’artisanat
• Production de masse, fabrication peu coûteuse pour vendre
plus

6. 1851
• Exposition Universelle de
Londres
• Crystal Palace

7. 1851
• Exposition Universelle de
Londres
• Crystal Palace

8. 1859
• Chaise Thonet N° 14

9. 1859
• Chaise Thonet N° 14

10. 1908
• Peter Behrens
• AEG
• Design global

11. 1908
• Peter Behrens
• AEG
• Design global

12. 1908
• Peter Behrens
• AEG
• Design global

13. 1908
• Peter Behrens
• AEG
• Design global

14. 1919 – 1933
• Bauhaus

15. 1919 – 1933
• Bauhaus

16. 1919 – 1933
• Bauhaus

17. Modernisme
• Approche rationnelle
• La forme suit la fonction
• La richesse de l’objet vient de sa pureté, pas de
l’ornementation

18. 1955 – 1968
• Hochschule für Gestaltung,
École d’Ulm
• Braun
• Dieter Rams

19. 1955 – 1968
• Hochschule für Gestaltung,
École d’Ulm
• Braun
• Dieter Rams

20. Autour de 1970
• Début du postmodernisme
• Critique du fonctionnalisme

21. 1965 – 1985
• Design italien

22. 1965 – 1985
• Design italien

23. 1990 – 2000
• Ère numérique
• Le design donne du sens

24. Design moderne
• Design global
• Stratégique
• Rôle social, responsabilité

25. Web
• 1989 – 1993, création par Tim Berners-Lee

26. Design et web
• Esthétique difficile,
typographie primitive
• Flash

27. Design et web
• Esthétique difficile,
typographie primitive
• Flash

28. Design et web
• Esthétique difficile,
typographie primitive
• Flash

29. Design web = Graphisme ?
• Pas industriel
• Graphisme : 1 dimension. Signe
• Web : 3 autres dimensions
• Information
• Fonction
• Interaction

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

31. Wireframes

32. Processus figé
• « Ça fonctionne pour nous »
• Oui mais…

33. Responsive Web Design
R W D

34. Responsive Web Design
R W
D

35. Responsive Web Design
R
W
D

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

37. Consensus
• Réduire l’importance des wireframes
• Réduire le nombre de maquettes
• Itérations plus fréquentes

38. Nouveau modèle
1. Brief
2. UX haut niveau + Itérations
3. Specs
4. Langage visuel + itérations
5. Prototype
6. (Maquette)
7. Développement

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

40. WIP

41. Changement : clients
• Adoption de cette nouvelle approche ?
• C’est pas gagné
• Culte de la spec
• Approche progressive difficile

42. Changement collectif
• Web design bloqué aux principes du Bauhaus
• Autres disciplines ont évolué : design produit, architecture…
• Pourquoi pas nous ?

43. Philippe Gervaise
• philippe@malvese.com
• @malvese
• malvese.com

44. DRUPALCAMP
PARIS 2013
« Design » n’est pas un gros mot.
Philippe Gervaise
open WEB solutions