Deux tendances dans le designe Web : de la ligne claire à la forme ronde (2006)

1. Deux tendances fortes dans le design Web
De la ligne claire à la forme ronde
Alain-Marie Carron
27 Novembre 2006

2. Introduction
Il y a 7 ou 8 ans, la page d’accueil du New York Times s’étalait sur 8 ou 9
écrans
Il y a 3 ou 4 ans, MSNBC fonctionnait avec environ 120 menus déroulants,
sous-menus et sous-sous-menus déroulants sur sa page d’accueil
www.canoe.qc.ca a installé durablement au Québec la formule des pages
d’accueil surchargées, comportant 80 entrées ou plus
Le temps passe. Jakon Nielsen, Donald Norman (Emotional design), Alan
Cooper (The inmates are running the asylum), mais surtout Steve Krug (Don’t
make me think 1 et 2) et Jesse James Garrett (The user experience), Jeff
Johnson aussi (Web Bloopers) ont mis l’internaute au centre du projet Web et
introduit un peu de bon sens dans la maison
Le design se fait plus simple, plus intuitif. Les différentes industries
développent “un air de famille” dans leur traitement graphique
Deux grandes tendances aujourd’hui : la “ligne claire” pour les sites “sérieux”
et la “ligne ronde” pour les sites inspirés de la vague Web 2.0
L’usage accru du blanc tend à lier les deux

3. La ligne claire

4. Le dosage exact de typo (fontes et couleurs) de blanc, d’images, d’icônes

5. maîtrise de la disposition textes images

6. maîtrise des blancs circulants, dépouillement qui rend la page un peu fragile. La maquette s’est
un peu densifiée depuis cet exemple pris au début de la nouvelle formule du site

7. As i said...

8. la ligne claire au service du texte

9. humain, simple et élégant

10. on n’est plus très éloigné du design Web 2.0

11. La ligne ronde

13. exemple archi-célèbre de user generated content

14. le premier comparateur de prix dans le domaine du tourisme aux E.U. Classé 2 fois par
Newsweek dans les 10 meilleurs sites

15. la ligne ronde et accueillante, rassurante, simple à comprendre

16. Clarté, lisibilité, architecture simple

17. Une des caractéristiques des pages de style Web 2, est que ce sur quoi l’internaute peut cliquer
est toujours trés visible, assez, gros, simple et limité en nombre

20. Globalement, la tendance Web 2.0 montre que Web a appris (enfin) à servir le texte

23. Netvibes, autre classique du web 2.0

24. le design web 2.0 se développe en parallèle avec le phénomène des blogs et des fonctions
d’aggrégation de contenus. Tout cela est inclus dans la tendance au user generated content. Ici on a
un peu de tout cela

25. On n’a même pas encore commencé avec le Web 2.0 et eux...

26. le diaporama des meilleurs sites Web.20... 1400 exemples

27. Les outils

28. Calrté du message, disposition, importance du blanc

29. quand l’utilitaire rejoint la BD

30. mush up site : ici au service d’un site culturel

31. Un mush up site montréalais

32. Un bon outil de recherche -

34. Pour sa barre de navigation horizontale en style acier brossé

35. Pop up d’information : à petite dose, cela peut être utile

36. Des outils très Web 2.0

37. nouvel design des outils liés au texte sur le site de Libération

38. un menu déroulant stable et clair

39. Commentaire : un menu déroulant lisible et assez stable