De la ligne claire à la forme ronde

Deux tendances fortes dans le design Web

Alain-Marie Carron

27 Novembre 2006

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

La ligne claire

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

maîtrise de la disposition textes images

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

As i said...

la ligne claire au service du texte

humain, simple et élégant

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

La ligne ronde

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

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

la ligne ronde et accueillante, rassurante, simple à comprendre

Clarté, lisibilité, architecture simple

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

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

Netvibes, autre classique du web 2.0

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

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

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

Les outils

Calrté du message, disposition, importance du blanc

quand l’utilitaire rejoint la BD

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

Un mush up site montréalais

Un bon outil de recherche -

Pour sa barre de navigation horizontale en style acier brossé

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

Des outils très Web 2.0

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

un menu déroulant stable et clair

Commentaire : un menu déroulant lisible et assez stable