© 2016 Your Business Name!

 

10 ans de design web

Responsive design : évolution du design web

10 ans de design web

Dans la partie précédente, j’ai beaucoup parlé le de CSS, de PHP et autres technologies du web. Et sans aucun doute, au fur et à mesure des progrès accomplis, elles ont contribué à façonner l’internet au fil des années.

Mais la technologie n’est pas tout et une fois les outils bien maitrisés, elle doit savoir laisser la place à la créativité des designers du Web.

Mais alors, quelles ont été les grandes tendances de l’Internet des 10 dernières années ? Et qu’est-ce que le responsive design ?
Et jusqu’à quel point la technologie a-t-elle interféré dans cette évolution ?

De l’avènement du Web 2.0 au responsive design

Le concept du Web 2.0

L’expression Web 2.0 a été utilisée dès 2003 mais à vrai dire, elle s’est surtout répandue à partir de 2005.
Mais que signifie-t-elle au juste ? Est-ce précisément une tendance du design internet ?

Et bien contrairement à ce que beaucoup d’internautes pensent, le web 2.0 ne fait pas référence à un esthétisme particulier mais il correspond à une évolution majeure du web et de l’utilisation qui en est fait.
On peut résumer en 2 points :

  • Le Web 2.0, c’est à la fois une grande complexification des technologies qui ont considérablement progressé et dans un même temps, une simplification majeure pour l’utilisateur qui a moins besoin de connaissances pointues. L’outil a changé. Il n’est plus un prototype réservé aux seuls spécialistes et le web s’ouvre à un public de plus en plus large pour des applications aussi riches que variées.
  • Le Web 2.0, c’est aussi la naissance et l’expansion rapide de l’interactivité. Forums, blogs, flux RSS, réseaux sociaux ont transformé l’internet en lieu d’échanges dynamiques de toutes sortes

Bref, le Web 2.0 N’EST PAS un style de design de site internet malgré ce qu’on a pu entendre parfois sur la planète geek à partir de la seconde moitié des années 2000.

Par contre, il est vrai que cette période a vu fleurir une myriade de sites internet répondant tous à des codes esthétiques particuliers, ne se privant pas de profiter des avancées des technologies du web, l’AJAX étant en 1ère ligne.

 

Parmi les éléments caractéristiques, citons l’usage des dégradés, des transparences, des reflets (en particulier sur le logo), de l’effet glossy, des ombres portées.
Les couleurs sont vibrantes, la navigation est simplifiée.
Une place importante est réservé à tout ce qui peut permettre à l’internaute de rester connecté avec le site via les réseaux, une newsletter ou avis et commentaires des internautes. Les icônes avec leur aspect vite identifiables deviennent incontournables.

Nous sommes désormais bien loin du site statique avec un simple texte accompagné d’une photo immobile. Désormais, les pages web, alimentées par des bases de données, sont dynamiques.

Il faut dire qu’à l’ère du Web 2.0, on compte bien utiliser toutes les ressources technologiques pour mettre en valeur le contenu de son site web et conserver le lien avec son visiteur. Attention toutefois à la surcharge qui finit par rendre certains sites un peu trop comparables à des sapins de noël !

C’est peut-être bien cet aspect parfois un peu « too much » qui a amorcé un véritable virage vers un nouveau type de design.

Le flat design

Avez-vous déjà remarqué combien les modes successives ont parfois tendance à s’opposer comme en réaction à la précédente ?
Voilà qui s’applique parfaitement bien au Flat design.

Le nom (« design plat ») n’est pas très chatoyant, c’est le moins qu’on puisse dire. En fait, le flat design est simple à définir :

Il est minimaliste.
Le but est d’éliminer tout élément graphique non indispensable afin que simplicité rime avec lisibilité.

De ce fait, finis les effets glossy, les reflets et les objets graphiques texturés.
Et pour donner au site le maximum de la lisibilité recherché, on va jouer à fond sur les couleurs et les typos.

Les couleurs, elles seront vives et utilisées sous forme d’aplats et on ne craindra pas de jouer judicieusement avec contrastes. Tout devra être fait pour qu’elles guident intuitivement l’internaute dans sa navigation tout en dynamisant l’aspect visuel du site.

De même, les typos prennent une importance de taille : 2 ou 3 polices de caractère maximum, choisies avec minutie, vont également contribuer à structurer le contenu et à le hiérarchiser.

Alors, minimaliste, peut-être ! Mais un flat design bien exécuté est tout sauf synonyme de platitude…

Alors ce Flat design, à quoi ressemble-t-il ?

C’est Microsoft qui a contribué largement à la propagation de ce type de design même s’il est bien probable qu’il existait avant !

Et pour comprendre ce qui s’est passé, il va falloir d’abord que je vous parle d’Apple…

Retour en 2007 : c’est la révolution dans le monde des mobiles avec la sortie du 1er Iphone. Très vite, les designers d’Apple vont s’attacher à rendre leurs smartphones le plus intuitif possible.
Pour cela, ils ont choisi la voie du skeuomorphisme

Ahhhhhhhh ! Qu’est-ce que ce drôle de mot qui n’est même pas dans le dictionnaire???

Pas de panique ! C’est moins complexe à comprendre que ça en a l’air !

Le skeuomorphisme, c’est l’art d’utiliser des objets physiques comme modèles pour les éléments de design d’une interface.

Quelques exemples :

  • La bibliothèque de votre Iphone ou de votre Ipad aura l’air d’une vraie, tout en bois.
  • L’icône du navigateur Safari aura l’air d’une véritable boussole à l’ancienne.
  • Le bloc note aura l’aspect du papier jauni d’un cahier de brouillon.
  • Et on aura même un vieux poste de télé en guise d’icône de Youtube…

L’idée est qu’en utilisant des objets concrets connus de tous, le smartphone pourra être pris en main très rapidement par tous.

Mais voilà qu’en 2010, Microsoft décide à son tour de lancer son 1er smartphone. Pour se faire une place, l’entreprise décide de miser sur un style radicalement différent, le Flat design. Le Windows phone 7 est arrivé !

windows-phone-7

Désormais Flat design et Skeuomorphisme sont en concurrence…

Le Windows phone et son nouveau design est un vrai succès. Sur Internet, les web designers s’inspirent de ce look aux lignes simplifiées et le flat design se répand comme une trainée de poudre…

Du coup, en 2012, Microsoft reste fidèle au Flat design pour les ordinateurs cette fois avec Windows 8.
Malheureusement, cette version n’a pas été un franc succès. Et à vrai dire, le design n’est pas réellement en cause. Car Microsoft a fait l’erreur de déstabiliser ses utilisateurs qui ne retrouvaient plus ses marques. A commencer par le fameux bouton « démarrer » qui avait disparu…

Flat design avec Windows 8
Notons en passant qu’Apple a depuis opéré un virage stratégique à partir de IOS7 en 2013 en s’éloignant du skeuomorphisme tout en le mariant avec subtilité au Flat design.

Mais au fait, vous avez envie de voir quelques sites en Flat design ? A vrai dire, vous en avez forcément déjà croisés un certain nombre… Mais voici un lien où vous en trouverez vraiment beaucoup

Responsive design ou en bon français, Web adaptatif

Si vous êtes arrivés à ce point de l’article, d’après mon compteur WordPress, vous avez déjà lu plus de 1000 mots. Bravo !

Voyons maintenant si vous avez été attentifs….

Si c’est bien le cas, vous savez donc que la tendance déferlante du Flat design coïncide avec la tout autant déferlante invasion des smartphones sans oublier la naissance peu après de l’Ipad et autres tablettes.

Maintenant, jetez un petit coup d’oeil sur l’image en tête d’article. Ok, je la remets ici :

Responsive design : évolution du design web

Qu’observons-nous ? Et bien qu’un joli design sur un bel et grand écran d’ordinateur va vous rendre claustrophobe si on le visualise à l’identique sur un smartphone.

Bref, il va falloir s’adapter pour créer des sites internet qui soient aussi jolis sur un ordinateur de bureau, sur un portable, sur une tablette et sur un smartphone.
Whaouh ! Quel défi à relever !
Et ce défi, c’est celui du Responsive Web ou Web adaptatif en français. Autrement, un site ne sera plus tout à fait le même selon le support où on le regarde, l’objectif étant bien sûr qu’il soit aussi agréable d’y naviguer dans tous les cas.

Ce terme de Responsive Design a été utilisé pour la 1ère fois en mai 2010 dans un article d’Ethan Marcotte.
Mais 2013 est considérée comme l’année du Responsive Web Design

Et rendre un site responsive, cela implique de plus grandes modifications qu’il n’y parait. Les principales consistent à :

  • réorganiser la disposition des différentes sections de la page qui, au plus l’écran est de petite taille, au plus ces sections se positionneront les unes en dessous des autres
  • Prendre en compte la lisibilité des typos choisies
  • Adapter la tailles des images
  • Modifier la gestion du menu principal. Sur ce point, la solution retenue sur smartphone est souvent de remplacer le menu par le symbole « hamburger » comme on le nomme dans le jargon geek. Un simple effleurement du doigt permettra de dérouler le menu avec toute la lisibilité souhaitée.

Responsive design : shématisation

Techniquement, on va employer les Media Queries, requêtes qui permettront une adaptation du site selon la taille de l’écran ou sa résolution.

Vous voulez voir ce que cela donne ?

Voici la méthode pour visualiser un site en « vue adaptative »
Ouvrez la page d’accueil de Pixeliart.
La suite dépend de votre navigateur :

  • Pour Firefox : appuyez sur CTRL Maj M. Faites varier la largeur de la fenêtre du site pour visualiser les transformations successives
  • Pour IE (à partir de IE11) : Appuyez sur F12 puis sur CTRL 8 (ou cliquez sur Emulation dans la nouvelle fenêtre). Dans la section affichage, choisissez la largeur d’écran que vous souhaitez…
  • Pour Chrome : Appuyez sur F12 et faites varier la largeur du site.
    L’avantage de Chrome est que le site se retrouve alors sur un arrière-plan gradué permettant de travailler avec finesse sur les différentes résolution d’écran.

Ainsi, par exemple, pour Pixeliart (1ère version du site, note du 31 octobre 2017  😉 ), vous pouvez voir que le menu « hamburger » apparait pour une largeur inférieure à 600 px.

Vue adaptative du site Pixeliart, responsive web design (RWD)

Mode « vue adaptative » avec le navigateur Chrome

Voilà, à présent, vous pouvez tester n’importe quel site, y compris le vôtre, pour voir comment il se comporte 😉

Mais au fait, seriez-vous tenté de vous dire que tout ça n’est peut-être pas très important, parce qu’après tout, l’essentiel est que votre site soit beau sur un ordinateur… un vrai…

ARF ! Que nenni ! Vous êtes gravement dans l’erreur !!!

Parce qu’en 2014, c’est plus d’1 visiteur sur 3 qui est venu d’une tablette ou d’un smartphone.

Et le design web de demain alors ?

Difficile de dire ce que sera le design dans 10 ans… Par contre, depuis quelques temps, la tendance minimaliste évolue déjà vers quelque chose d’autre. On conserve la lisibilité du flat design, sa capacité à s’adapter à tous supports de navigation mais on y ajoute un « je ne sais quoi » qui va faire que tel site restera gravé dans votre mémoire parce qu’il a su vous touché et vous faire vibré. Et ça, c’est le Design émotionnel !

Vous avez manqué les 2 premières parties de la sage de l’évolution du design web ?
Voici la session de rattrapage :

 

Pas de commentaires

Laisser un commentaire

Pin It on Pinterest

Share This