Evolution du Web Design 2.0

Mon premier article sera consacré à l’évolution du design web depuis le début de la période “2.0”.

Évoqué pour la première fois en 2003 cette évolution du Web marque la naissance du “web social” et l’utilisation de nouvelles techniques ( AJAX !) permet à l’utilisateur lambda de devenir acteur du net. Des applications en ligne commencent à émerger, le monde de l’internet devient dynamique et collaboratif et un des aspects non négligeable de cette (R)évolution 2.0 est l'apparition du Web Design.

J'ai trouvé intéressant le fait de pouvoir observer, comme dans le monde de la mode, l'apparition de tendances graphiques au fil des années.

Cet article fait une synthèse des principaux aspect graphiques du Web2.0 depuis sa naissance jusqu’à aujourd’hui ( et au delà.. ).

Si vous voulez en savoir plus sur l’évolution du web avant 2005/2006, voici une très belle page récapitulative ainsi qu'une infographie tout aussi instructive.

Une Réflexion autour du contenu

C’est en 2005/2006 que commence véritablement à s’opérer la transition vers le Web2.0. Le contenu prend de plus en plus d’importance et les concepteurs de site se doivent de transmettre l’information le plus efficacement possible. Avec l’arrivée du haut débit et l’augmentation du nombre d’internautes ( 480% en 10 ans! ), beaucoup de nouveaux sites, s’ils veulent être percutants, doivent être clair et bien conçu.

Less is More...

La structure des pages évolue. Un alignement centré et un contenu aéré inspire confiance et l’information devient plus clair. Une simplification drastique du design s’opère. Terminé les mises en pages par tableaux et l’utilisation abusive des gifs animés.** Place au ...vide.**

L’évolution du design de la page mozilla europe résume à elle seule cet article.

[caption id="attachment_73" align="alignleft" width="300" caption="2005"][/caption]

[caption id="attachment_74" align="alignleft" width="300" caption="2006"][/caption]

[caption id="attachment_75" align="alignleft" width="300" caption="2007"][/caption]

[caption id="attachment_76" align="alignleft" width="300" caption="2008"][/caption]

[caption id="attachment_77" align="alignleft" width="300" caption="2009"][/caption]

[caption id="attachment_78" align="alignleft" width="300" caption="2011"][/caption]

[caption id="attachment_79" align="aligncenter" width="300" caption="2012"][/caption]

La mode Web2.0, début des tendances dans le design Web

Le “Web2.0” est aussi le marqueur d’une évolution technique et d’une volonté d’innover. Identifier son site “Web2.0” c’est une façon de montrer qu'on est d'actualité. Une mode graphique née alors et lance le début des tendances dans le design Web. Elle fait appel à quelques éléments assez reconnaissables comme les badges et les hachures. En voici quelques uns :

Les Badges

C’est un des éléments les plus utilisés dans la mode 2.0. Parfois accompagnés de la mention beta, signe d’un produit nouveau et innovant, le petit effet com’ au passage.

Badge beta

Polices : grand format

On commence à utiliser de nouvelles polices qui font partie intégrante du design. Mais l’évolution vient surtout de l’augmentation de la taille des caractères. Les éléments importants tel que les titres sont mis en valeur, parfois surdimensionnés.

Des coins arrondis

Il suffit de regarder autour de nous, de nombreux objets ont des coins arrondis. Cet aspect fait appel au sens du toucher et incite à l’utilisation d’un produit. De nombreux sites et applications adoptent ce principe. Ce n’est que récemment que l’utilisation des bords ronds est accessible très simplement à partir de CSS ( pas de compatibilité sur internet explorer jusqu’à la version 9 ! )

Hachures et diagonales

Autre élément représentatif de cette mode, il apporte un petit coté “pro” et change de l’aspect uni des arrières plans. C’est le début des fonds texturés.

Les dégradés

Ils apportent une nouvelle dimension à un design en jouant sur l’effet de lumière d’un objet. C’est un peu la dernière ligne droite avant l’utilisation d’une texture. Souvent appliqué sur des arrières plans ou des boutons, cet effet est un plus non négligeable lorsqu’il est bien utilisé.

Effet miroir et surfaces laquées

Bel exemple de la mode 2.0, l’effet miroir ou de réflexion exploite la notion de profondeur.

Icônes

On fait de plus en plus appel aux icônes. Un élément visuel est souvent plus accrocheur et plus parlant que du texte et permet de fournir un maximum d’informations dans un minimum de place .

Au delà du cliché , vers un raffinement graphique et plus de réalisme

La mode du graphisme Web2.0 est le signe d’un changement en matière de design Web. Mais après s’être affiché parfois un peu trop, le design général va évoluer en suivant de nouvelles tendances.

L’idée est de casser cette apparence Web2.0 car à force d’être utilisés, certains éléments deviennent redondants ou démodés (comme toute mode finalement). Pour se démarquer à nouveau, les designers jouent sur plus de réalisme et font appel aux sens ( dégradés pour la lumière, bords rond et textures pour le toucher).

2007 : Mascottes et textures HD

Une des premières tendance de 2007 est d’utiliser des mascottes sous forme de cartoons qui apportent un effet fun avec leurs couleurs vives mais aussi un coté unique et personnel au site.

Terminé l’époque du simple fond coloré. Certains designers s’amusent à casser la rigidité des bords d’une page en les peuplant de fleurs et d’éclaboussures.

De plus en plus de sites utilisent des textures ou des images en haute définition.

[caption id="attachment_100" align="aligncenter" width="600" caption="Certains font le choix de textures plus organiques pour ajouter une touche de réalisme."][/caption]

2008 : Effet retro et fait main ( et fée internet...)

On s’éloigne encore un peu plus des effets glossy et techno du design Web2.0 avec l’apparition du style retro. En utilisant des textures adaptées et des couleurs chaudes, les designers s'amusent à recréer un rendu vintage.

[caption id="attachment_38" align="aligncenter" width="500" caption="Le grunge , variation de l’effet retro"][/caption]

[caption id="attachment_39" align="aligncenter" width="500" caption="Du trait au crayon.."][/caption]

[caption id="attachment_40" align="aligncenter" width="500" caption="...en passant par la peinture"][/caption]

[caption id="attachment_71" align="aligncenter" width="400" caption="Un petit clin d’œil au scrapbooking"][/caption]

2009 : De l’illustration aux détails

Les designers font de plus en plus attention aux détails. Le pixel perfect, technique qui consiste à obtenir un design propre, étudié au pixel près, fait sont entrée. C’est l’arrivée des illustrations grand format et des typographies évoluées (utilisation de polices directement au sein de Css avec @fontface ).

[caption id="attachment_108" align="aligncenter" width="439" caption="Larges illustrations"][/caption]

[caption id="attachment_60" align="aligncenter" width="300" caption="Gros titres et polices personnalisées"][/caption]

[caption id="attachment_62" align="aligncenter" width="500" caption="Un bel exemple de pixel perfect"][/caption]

La notion de transparence est aussi beaucoup utilisée. Le rendu donne une impression de relief et de texture intéressante.

D’un point de vue techno, la généralisation de librairies javascript tel que Jquery ou Mootools permet d’augmenter le dynamisme des sites. On voit apparaitre en page d’accueil des Carrousels, qui présentent des nouveautés, des articles ou des images.

Les interface riches proposent de plus en plus de fonctionnalités. On évoque régulièrement la notion de “cloud computing” qui apparait comme un changement de méthode de travail pour de nombreuses personnes. Des applications comme Google doc ou Dropbox sont un bel exemple de design d’application web.

[caption id="attachment_43" align="alignleft" width="300" caption="Le graphisme de la page d’accueil de Dropbox incarne parfaitement la notion du “Less is More”"][/caption]

2010 : plus de personnalité, plus de simplicité

L’influence du papier se fait sentir et de nouvelles dispositions de pages sont expérimentées. C’est l’apparition des grilles qui positionnent le contenu en plusieurs colonnes, des gros titres et des annotations de texte, inspirés directement par les magazines et les posters.

On assiste aussi à la tendance minimaliste qui va à l’extreme de la simplification du design et du contenu.

Du coté des technos, le HTML5 / CSS3 s’imposent comme les futurs standards. Les navigateurs évoluent dans ce sens ce qui permet d’aller toujours plus loin en matière de design en ajoutant des ombres, dégradés et des animations sans toucher à javascript ni photoshop ( ou gimp ).

2011 : L’ère du mobile

Déjà amorcé depuis quelques temps et largement boosté avec l’arrivée des "téléphones intelligents" et de l'internet mobile, le design doit s’adapter aux nouveaux supports que sont les smartphones et les tablettes.

Le responsive Design

Les designers vont être amener à travailler sur une gamme de résolutions beaucoup plus étendu qu’auparavant. Des appareils mobiles aux écrans HD, l’affichage et la manière de communiquer change. Il faut dorénavant adapter son site quelque soit le terminal. La propriété Css media-queries permet de changer à la volée certains paramètres en fonction de critères comme la taille de l'écran par exemple. On appel cette méthode le Responsive Design.

Quel chemin pour la suite ?

On l'a vu, le paysage visuel et technologique du Web a bien évolué en l'espace de 5 ans et l'arrivée d'une mise à jour des standard HTML et CSS y a surement largement contribué. D'autres facteurs comme la généralisation du haut débit et des appareils mobiles à achevé ce virage entamé avec le Web2.0.

HTML5 et CSS3 sont et seront d’actualité. Les navigateurs supportent presque entièrement tous ces nouveaux standards. Ils permettent une organisation sémantique plus propre, des libertés et une simplification de la conception du design.

HTML5 met aussi en avant de nouvelles possibilités en matière d’application web comme la géolocalisation, les websockets, l’audio, la vidéo et bien d'autres choses encore. Le développement d'une API est en cours chez Mozilla avec pour but une intégration des fonctions d'un mobile directement au sein d'une page Web.

La présence d’écrans tactiles influence de plus en plus la conception des sites internet que ce soit sur le placement des boutons ou la manière d'y accéder. Le nombre croissant des plates-formes mobiles, tablettes et autres smartphones fait que de nombreux logiciels sont ou deviennent des applications web. On voit par exemple le portage de la suite office de Microsoft en version Web : Office 365. La simplicité d’une application ne nécessitant pas d’installation, parfois gratuite et proposant souvent un stockage “dans le nuage” est certainement une des prochaines évolutions majeures de l’internet et même de l’informatique, portable ou non.

Pour ce qui est des prochaines tendances en matère de design, les animations CSS3 commencent à s'imposer pour apporter un peu de dynamisme sans nécessiter l'utilisation de flash ou de javascript. Les textures et polices importées font maintenant partie de la palette de base du webdesigner et vont continuer à évoluer pour toujours plus de subtilité.

Bravo si vous êtes arrivé jusqu'ici. J’espère que cet article (long) vous aura été instructif, c'était mon tout premier, alors soyez indulgents.

N’hésitez pas à faire un commentaire.

Au passage voici quelques sources qui m'ont servi d'inspiration :

http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide

http://modernl.com/article/2007-more-web-design-trends-and-cliches

2007

http://webdesignerwall.com/trends/best-of-css-design-2007

http://designinstruct.com/visual-inspiration/beautiful-textured-web-designs

2008

http://webdesignerwall.com/trends/2008-design-trends

http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design

2009