Aujourd'hui, je vous propose de revenir sur un sujet typiquement Web !
Le responsive design, ce paradigme qui met en avant des principes de design adaptatifs, a été inspiré de l’architecture d'intérieur. En effet, ce nom fut d'abord donné à un principe similaire, mais dans l'aménagement des espaces clos.
On pouvait trouver des idées d'aménagements totalement originaux, souvent adaptés à des petits appartements, avec un lit qui se déplace en hauteur pour transformer une chambre en salon, ou encore une chambre de 8m² totalement aménagée pour pouvoir y vivre.
Ce concept, adapté au Web, a radicalement changé la face de la création de sites en répondant par la même occasion à plusieurs problématiques du Webdesign professionnel qui, jusque là, étaient restés sans réponse en dehors de quelques bidouillages.
Mais il a apporté son nouveau lot de défis et l'un d'entre eux s'installa lors de la conception graphique. Avant le responsive webdesign, il n'était pas nécessaire de séparer l'architecture visuelle d'un site de son aspect purement graphique. Étant donné le choix d'une taille d'écran de prédilection, on faisait une seule maquette Web qui montra à la fois l'ergonomie du site, la disposition de ses contenus avec les couleurs, les typographies et les textures, bref... tout ce qui donne l'esthétique, ce qui fait transparaître les valeurs.
C'était simple, pas forcément optimal pour tous les écrans et ça ne faisait qu'une seule étape dans le processus de création. Mais le Responsive Webdesign a tout changé.
En effet, il n'est plus possible d'aborder ces deux aspect à la fois, du moins dans un premier temps, tout en étant optimal sur la qualité. Il faut d'abord pouvoir séparer les deux aspects dans la conception. Pour l'ergonomie, nos avions déjà la solution : les wireframes ! Il suffit d'en élaborer pour chaque support : smartphone, tablette, PC et télévision, avec détermination de minima et de maxima pour chaque type d'appareil.
La différence entre un site et son Wireframe avec le site de CNN
Mais alors, comment faire pour le ton et l'esthétique ?
C'est là que Samantha Warren, travaillant en tant que "Design Lead" chez Adobe, proposa un nouvel outils, directement inspiré (encore !?) du design d'intérieur : la planche tendance ("style tile" en anglais).
Le principe est simple : représenter simplement et sur une écran ce à quoi le site va ressembler avec header, footer, une palette de couleurs, des textes pour représenter les polices de titres et de contenu, le logo, des boutons et même un espace dédié aux mots-clefs permettant d'identifier le ton et les valeurs que doivent véhiculer l'aspect visuel.
Un petit exemple de style tile
C'est un document qui peut donc être travaillé et présenté au client pour plusieurs allers-retours plus rapides sans avoir à revenir plus tard sur une maquette plus avancée ou sur le site final, ce qui rallonge souvent assez considérablement le projet.
Il suffit de modifier les éléments graphiques sur ce document et de ne plus avoir à y revenir plus tard.
Bon, cela ne change souvent pas le besoin de proposer une maquette complète au client, qui n'a pas forcément un œil de graphiste et préfère avoir un résultat plus général. Mais ça facilite tout de même le travail en amont.
Personnellement, j'utilise déjà les style tiles pour mes projets personnels, et j'espère avoir l'occasion d'intégrer cet outil dans mon procédé de création web.
Personnellement, j'utilise déjà les style tiles pour mes projets personnels, et j'espère avoir l'occasion d'intégrer cet outil dans mon procédé de création web.
Les sites sources :
http://styletil.es/ : LE site de référence sur les style tiles, crée à l'initiative de Samantha Warren,
https://www.sitepoint.com/style-tiles-sass/ : un article sur la création d'une style tiles web avec Sass,
http://codepen.io/jcasabona/pen/OPzGRN : une style tile à utiliser sur CodePen.