Détail Formation a travaillé avec Tommy Ferlatte et son équipe en 2008 pour la refonte de son site Web. Reconnu entre autres pour son expertise en design Web, Tommy a récemment rédigé un article sur cette évolution et les tendances 2012.

_____

Le design web a connu une évolution marquante depuis le premier site lancé par Tim Berners-Lee, il y a plus de 20 ans.

Contrairement aux autres catégories de design, le web design doit son évolution, parfois forcée, à la technologie. Parfois contraignante à la créativité et d’autres fois plus propice. J’ai choisi d’analyser cette évolution marquante, parce qu’elle est très présente dans ma profession de designer web, mais aussi afin de bien comprendre si la prochaine année sera réellement marquante dans notre industrie. Je me suis replongé dans des sites, des blogues et des livres de designers web afin de dresser un portrait global.

La première partie sera consacrée à la période de 1992-99. Suivra, en second lieu, le début du nouveau millénaire. Dans la troisième partie, je vous exposerai la période de 2009-11 et dans la quatrième partie, nous terminerons sur les grandes tendances de cette année.

 

Chapitre I

 

LA BELLE ÉPOQUE

Le présent chapitre traite des débuts du design Web, plus précisément la période entre 1992 et 1995. Au départ, les premiers designs Web ne possédaient pas de grille graphique, le contenu s’étendait sur une seule colonne et le tout n’était pas très bien structuré. En fait, le design était pensé en fonction de ce que permettait le HTML. Au milieu des années 90, les tables deviennent l’outil par excellence de mise en page et offrent la possibilité de créer des designs à plusieurs colonnes.

Un peu plus tard, entre 1996 et 1998, arrive la période du « M’as-tu vu ». À travers tous les sites consultés on ne parle que d’un envahissement de « GIF animés », « applet Java », balises typographiques telles que marquee et blink. Le constat, beaucoup d’interfaces Web n’étaient qu’éléments dansants partout sur la page et les créateurs donnaient toute leur attention à une nouveauté, un compteur en bas de page.

 

Ce dernier paragraphe me rappelle énormément un épisode de la série « les Simpson », où Homer se créé son premier site Web, constitué uniquement de « GIF animés ». Homer se concentre sur son compteur qu’il aimerait bien voir passer de 00000 à 00001. Un fait intéressant que Matt Groening, créateur de la série, se moque de cette période où nous, futurs designers web, découvrions de nouvelles façons de faire. Les pionniers se rappellent des Angelfire, Tripod et Geocities, permettant aux internautes de se créer leur propre site Internet gratuitement.

Nous étions plutôt sur buzz de tester tout ce que ce nouveau médium pouvait nous apporter. Ce qui donnait souvent des sites pleins de gadgets, mais sans contenu.

Une nouvelle technologie est introduite à la fin des années 90 et créera une petite révolution. Le logiciel Flash de Macromedia viendra nous permettre d’animer des parties de nos interfaces Web comme jamais auparavant. Par contre, avec l’abus d’une majorité, les interfaces graphiques de ces sites deviennent rapidement des contenants amusants sans contenu. Un personnage marqua cette période, Hillman Curtis, pionnier du Web design et artiste passionné, décédé il y a quelques jours. Il réalisa le design des sites Adobe et Yahoo et publia le livre « Flash Web Design » à plus de 100,000 copies. http://hillmancurtis.com

 

Chapitre II

 

DÉBUT D’UN NOUVEAU MILLÉNAIRE, QUASI SANS BOGUE

La technologie CSS apparaît dès le début du millénaire, mais ne sera que réellement utilisée vers 2005. Elle permettra aux designers de penser autrement leur grille graphique et de mettre à jour les éléments plus efficacement. La navigation redevient en texte, elle qui était sur la majorité des sites, écrasée en images. Les débuts du Web étaient un véritable casse-tête pour les designers, ils ne pouvaient tout simplement pas arriver au résultat voulu avec les technologies en place. Ils devaient faire constamment des choix. L’arrivée de la haute vitesse dans les foyers québécois aida particulièrement l’évolution dans leur travail.

Une grille, comme dans TRON, ou presque!

Le design de grille est l’un des aspects du travail fondamental du designer. Comprendre les relations de proportions, les espaces blancs et la composition sont des éléments vitaux dans la construction de grilles pour n’importe quel projet, qu’il soit Web ou imprimé.

Visionnez la bande-annonce suivante:
https://www.facebook.com/photo.php?v=330473194777

Les tendances :
– la navigation à l’aide de menu déroulant;
– la montée du JavaScript pour la mise en page et l’animation d’éléments graphiques;
– 2005 en deux mots : Ergonomie et homogénéité!

L’ergonomie est née pendant la Deuxième Guerre mondiale, mais c’est seulement en 2000 que les designers Web ont commencé à se poser des questions sur l’emplacement des éléments graphique pour ainsi faciliter la lecture à l’écran.

L’espace blanc : sobre, élégant et sophistiqué!
En imprimé, le papier a une valeur et les clients veulent utiliser chaque pouce carré. Du même coup, être généreux sur l’espace blanc peut en dire long sur votre marque. Du côté Web, même constat, vous dîtes que votre contenu est plus important. Vous pouvez vous permettre de sacrifier cet espace afin de mieux présenter votre message.

Les marques de luxe utilisent ce concept pour donner une image plus sophistiquée et élégante. On doit beaucoup à Apple pour cette tendance épurée. La compagnie nous présentait en 1998 un site sous ce style graphique avec beaucoup d’espaces blancs, du contenu simple et bien organisé.
Un autre point qui marqua le milieu de cette décennie, c’est la conception graphique centrée sur l’utilisateur. Cela arrive à point, car à la même période, le Web 2.0 fait son entrée officiellement sur la toile. Et si ce n’était pas un défi assez grand pour les concepteurs graphiques, le mobile arrive dans le décor et oblige à repenser les designs pour les mobinautes. Autre tendance, les effets de dégradés et de réflexions apportés avec la sortie du iPod.

Est-ce une plus forte évolution du design web ou plutôt la tendance qui se repend plus rapidement? Grâce aux blogues, les techniques simples peuvent facilement circuler entre les concepteurs afin de reproduire les effets les plus populaires.

 

Chapitre III
TROIS ANS DÉJÀ

 

2009 / En-têtes et logos surdimensionnés
L’en-tête d’un site est le premier élément vu par l’utilisateur, il doit capter son attention et le séduire, il doit donc être particulièrement soigné! Le danger avec un en-tête de trop grande taille est de perdre l’espace vital du message. Les designers doivent garder en tête que le but du design web est de facilité la lecture du contenu, et ce, dès la première page-écran. Une autre tendance est l’utilisation de grandes icônes. Cette tendance unique, semi-originale, provient de la popularité des icônes de Mac OS X.

2010 / Une page, une affiche!
Une des tendances qu’à apporter le langage JavaScript, c’est les designs de type une page/une affiche. Voici un exemple : http://elevatorstudios.com

La deuxième tendance est le contenu utilisateur. L’utilisateur est de plus en plus créateur de contenu et invité à le partager avec le reste du monde. Le design web doit être pensé afin d’accueillir son contenu.

2011 / Les barres latérales
Après l’explosion massive des menus horizontaux dans l’en-tête des sites web, les designers se tournent tranquillement vers de nouvelles barres verticales pour porter le menu de navigation principal et le logo.

Chapitre IV
LES GRANDES TENDANCES 2012

Les tendances des dernières années tendent à faire évoluer le web de manière commune. Ces tendances poussent le niveau général de compétences toujours un peu plus loin. Nous basant sur le Web actuel et les avis de talentueux designers du web, nous pouvons apercevoir clairement sept tendances marquantes qui continueront à évoluer au cours de cette année.

Le Responsive Webdesign
Cette façon de faire, assez nouvelle, est sûrement la plus importante à garder en tête lors de la création d’un design web. Elle est basée sur une mise en page adaptable à toutes les résolutions. Dans le livre Responsive Web Design, Ethan Marcotte signale que «Plutôt que de créer des designs déconnectés, conçus chacun pour un appareil ou un navigateur particulier, nous devrions les traiter comme les facettes d’une même expérience. Il est possible de créer des sites plus flexibles, s’adaptant aux supports. »

Voici un très bel exemple de Responsive webdesign, jouez avec la dimension de votre fenêtre et vous vivrez l’expérience : http://3200tigres.wwf.fr

Les menus fixes
Avec l’avènement des effets de parallaxe et des sites basés sur une page, la navigation devient de plus en plus fixe. Dans ce design, c’est le contenu qui est animé autour d’une navigation fixe. Cette tendance s’inscrit dans une logique d’adaptation aux mobiles et notamment aux tablettes. Facebook est l’un des grands responsables à cette tendance, quand 250 millions d’utilisateurs naviguent sur un design de la sorte, on peut comprendre pourquoi.

Les polices web
Les polices exotiques optimisées pour le web ont connus un élan de popularité en 2011. Il est maintenant facile de créer une interface basée sur des typographies uniques. http://www.google.com/webfonts

Les illustrations vectorielles
Vous connaissez ces grandes illustrations vectorielles en design Web. Ces mascottes personnalisées, ces ambassadeurs vectoriels qui donnent une identité forte au site.
http://www.luhsetea.com
http://mailchimp.com

Parallaxe
L’effet de parallaxe dans le design web a gagné en popularité au cours des deux dernières années. Lorsqu’il est utilisé correctement, il peut en résulter une expérience utilisateur riche et engageante à la navigation sans faille.
http://www.thechrisbox.com
http://www.activatedrinks.com
http://www.ok-studios.de

Le fameux ruban
Loin d’être une nouveauté, l’utilisation du ruban a explosé durant la dernière année. Une raison très simple, l’accumulation massive de tutoriaux détaillés pouvant être trouvés sur Google. Le site PSDTUTS vous en offre plus de 1800.
http://bigbitecreative.com

En toute simplicité
Plus que jamais le principe K.I.S.S. (Keep It Simply and Stupid). Pour ne pas perdre les utilisateurs dans l’interface, gardez en tête des sites clairs et faciles d’utilisation.

 

Conclusion

À l’époque, l’expérience centrée sur l’utilisateur n’était certainement pas la première préoccupation. C’est l’arrivée des graphistes du domaine de l’imprimé qui aida grandement la conception des interfaces Web. Leurs bagages techniques ont pu apporter les règles élémentaires de contraste et de couleurs, la typographie, les grilles de mise en page et tellement d’autres.

Il est maintenant clair que surfant sur les tendances ou non, le design Web demeurera en constante évolution.

Les arts graphiques constituent une sorte de langue à la grammaire indéfinie, dont le vocabulaire s’étend sans cesse.

Dites-vous que la toile, même vierge, impose des limites au travail de l’artiste. Selon Ethan Marcotte « avant le premier coup de pinceau ou de burin, le support donne une dimension, une forme, une hauteur et une largeur, établissant les limites de l’œuvre naissante ». Sur le Web, on essaie d’imiter ce procédé.

Vous avez aimé? Partagez !Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someone