Édition Nº4 du 5 juin 2012 Retour au sommaire

Les « Style Tiles », un nouvel outil pour le webdesigner ?

Depuis quelques semaines, on peut entendre parler de « Style Tiles ». Focus sur ce nouvel outil pour voir si vous pouvez l’ajouter à votre arsenal de webdesigner.

Conducteur


Marie Alhomme

Arrêts prévus :

Mais qu’est-ce que c’est ?

On peut traduire en français les “Style Tiles” par le terme “Planches Tendances”. Habituellement utilisées en mode, en déco ou même en publicité, elles servent à définir les grandes tendances (graphiques, texturales, chromatiques, etc.) d’un projet donné.

Un article de Samantha Warren, paru récemment sur A List Apart, propose d’adapter le concept et de l’utiliser en webdesign pour ressortir des tendances visuelles sans se soucier de la structure de la page.

En bref, de faire l’inverse de ce qu’on fait avec les “wireframes” (ou “filaires”, ou “gabarits”, ou même “storyboards”… selon vos habitudes) pour déterminer une structure sans se soucier de l’apparence visuelle…

Pourquoi s’en servir ?

Généralement, quand on commence un projet de site web (que ce soit une création ou une refonte d’ailleurs), on fait des wireframes pour déterminer les grandes lignes de la structure des pages principales, puis on en déduit une ou deux (voire trois) propositions de maquettes graphiques (souvent de la page d’accueil) qui permettent de choisir une piste (de style, couleur, etc.). On itère ensuite sur ces maquettes jusqu’à obtenir le “master”, qui servira pour les déclinaisons sur les autres gabarits de page.

Ça marche bien et les clients y sont habitués. Mais cela crée aussi chez eux des attentes qui ne correspondent pas nécessairement à la réalité. En présentant des maquettes aussi précises, et à des tailles fixes, il est plus difficile de leur faire comprendre d’une part la réalité des différences de rendu des différents couples OS/navigateur possibles, et d’autre part celle des différents appareils (mobile, tablette, portable, bureau, TV…) et des tailles/résolutions qui en découlent.

Partie intégrante de la démarche de “responsive webdesign” (“design adaptatif”), les “Planches Tendances” se proposent donc de décorréler la structure de page du choix des aspects graphiques et stylistiques en eux-mêmes. Ainsi, il ne s’agit pas de repartir d’un des wireframes pour le “mettre en couleurs et images”, mais bien de créer de zéro une planche regroupant des éléments constitutifs de la charte graphique web sans notion de mise en page.

Cet aspect est important, car il permet de ne pas s’arrêter à des éléments de détails et de se concentrer dans un premier temps sur l’homogénéité et la pertinence (vis-à-vis de la marque, du message, etc.) des styles retenus, qu’ils concernent les polices, les couleurs, ou encore les textures.

En revanche, il est aussi essentiel de retenir que ces Planches de Style ne remplacent pas nécessairement les maquettes à proprement parler : celles de quelques gabarits principaux permettront de s’assurer de la cohérence et la hiérarchie de l’ensemble des éléments une fois mis en scène/page dans des gabarits donnés.

OK, et comment je m’y prends ?

Déjà, si vous parlez anglais, vous pouvez vous rendre sur le site dédié au Style Tiles pour en savoir un peu plus sur le projet et la méthode. Vous pourrez aussi y télécharger un modèle de base au format PSD. Assez sommaire, il est conseillé de ne pas hésiter à le compléter selon les spécificités de votre projet, pour par exemple y intégrer une navigation, des éléments interactifs (eg. contrôles de diaporama) ou encore des éléments de formulaire.

Ensuite, il vaut probablement mieux tester cette technique avec un client qui n’a jamais travaillé avec vous sur ce genre de projets : autrement, il risquerait d’avoir pris des habitudes et d’accepter plus difficilement le changement de méthode. Cela dit, si vous avez un client qui vous fait complètement confiance et qui est partant, voire même curieux d’essayer, n’hésitez pas car cela ne pourra être que plus constructif pour tous.

Enfin, concrètement, cela va vous demander de repenser un peu votre flux de travail habituel, que vous travailliez seul chez vous ou en équipe dans une agence.

Premièrement, et dans les deux cas, il faudra que la personne en charge de l’aspect graphique du site se force à lâcher prise :) En effet, il faut oublier les réflexes de calage sur une grille (verticale ou horizontale), ne pas aller “trop loin” dans les détails…

Ensuite, il vous faudra poser les bonnes questions à votre client, comme vous le feriez pour une prise de brief habituelle. La création d’un questionnaire de prise de brief étant une discipline à part entière, nous ne rentrerons pas plus dans le sujet ici, mais pourquoi pas dans un prochain article (si ça vous intéresse, faites-le nous savoir dans les commentaires)…

Munis de ces réponses (généralement sous la forme d’adjectifs, de thèmes, etc.), vous allez pouvoir les appliquer à votre Planche. Selon les cas, vous proposerez alors une ou deux (ou trois, là aussi) planches différentes à vos clients, puis selon les retours, vous itérerez sur l’une ou l’autre (en les mélangeant si besoin et tant que cela reste cohérent) jusqu’à obtenir un consensus fort sur tous les éléments de la planche retenue.

Viendra alors le moment d’en déduire une maquette, par exemple de la page d’accueil, afin de valider et d’affiner les différents choix. Le cas échéant, veillez à bien maintenir votre Planche Tendances à jour avec ces évolutions, elle deviendra alors votre Planche de Styles. Vous pourrez aussi la compléter avec de nouveaux éléments, y ajouter les différents états pour les boutons et éléments interactifs, etc., la transformant ainsi effectivement en “Charte Graphique Web”.

Enfin, selon votre projet, votre client, ainsi que votre équipe et ses préférences, vous pourrez alors décliner traditionnellement cette maquette sur d’autres gabarits principaux, ou, selon une méthode plus “agile”, intégrer directement votre design dans un gabarit HTML/CSS et décliner les autres gabarits dans le navigateur. (Là aussi, il s’agit d’une problématique très spécifique et pour laquelle le choix est assez personnel ; l’occasion peut-être d’un autre article) Si vous êtes en agence, il est recommandé de faire un “passage de relais” entre les équipes de création et celles de développement afin que la Planche soit bien comprise et prenne toute son utilité. Dans tous les cas, elle pourra donc ensuite servir de référence à toutes les étapes : intégration, développement, et même graphisme à nouveau en cas d’ajout de gabarits ou de fonctionnalités par exemple.

Un exemple concret ?

En plus des exemples que vous pourrez trouver dans l’article de Samantha, je vous propose très modestement de consulter les Planches réalisées récemment pour ce magazine.

Les deux premières Planches envisagées

Première Planche de Style pour le train de 13h37
Première Planche de Style pour le train de 13h37 (voir en grand)
Deuxième Planche de Style pour le train de 13h37
Deuxième Planche de Style pour le train de 13h37 (voir en grand)

Après quelques itérations, la Planche définitive retenue

Planche Tendance finale du train de 13h37
Planche Tendance finale du train de 13h37

Enfin, les maquettes de page d’accueil qui en ont été déduites en fonction des quelques breakpoints que nous avions choisis

Maquettes de la home du train de 13h37, version mobile, tablette et desktop
Maquette de la home du train de 13h37, version « mobile » (voir en grand), , « tablette » (voir en grand) et « desktop » (voir en grand)

Conclusion

Dans un contexte de consultation web qui se fait depuis de plus en plus de supports aux contraintes différentes, la conception web retrouve une complexité (qu’il ne faut pas confondre avec complication) rafraîchissante après quelques années de quasi-balkanisation graphique et conceptuelle.

Dans le même temps, la possibilité de commencer en parallèle (et non plus en série) la conception du contenu et celle du contenant permettrait de gagner en souplesse et en délais.

Amenant ainsi à de nouvelles façons de penser et de travailler, comme le webdesign “adaptatif” ou les méthodes dites “agiles”, elle permet aussi de renouveler les relations avec nos clients en les impliquant plus dans le processus de conception de leur communication web, réduisant ainsi le fossé entre leurs attentes et la réalité des livrables.

Les Planches de Styles sont un outil de plus, pas une fin en soi, mais les ignorer complètement est peut-être se priver d’une mise à jour réjuvénatrice de nos méthodes et habitudes…

Et vous, qu’en pensez-vous ? Connaissiez-vous les Styles Tiles ? Les utilisez-vous, ou comptez-vous les utiliser ?

Les « Style Tiles », un nouvel outil pour le webdesigner ?

Note de cet article : 3 / 5

Pour pouvoir noter les articles, vous devez voyager avec un billet (c'est gratuit !).
Toutes les infos sur la page d'abonnement !
Déjà inscrit ? Connectez-vous.

Marie Alhomme est webdesigner et intégratrice indépendante depuis maintenant 9 ans en tant que PouipouiDesign. Elle s'implique dans de nombreux projets visant à promouvoir les bons usages et les technologies du Web, qu'il s'agisse de traduction sur pompage.net ou de l'organisation de W3Café ou de Sud Web.

Découvrir les autres articles de cet auteur

3 réactions à cet article (RSS)

@Oliv06

#1

Merci Marie. Peut-être une bonne idée, en effet.

Je le croiserais éventuellement ces planches avec les cartes de personnalités (de site) d’Aarron Walter : http://aarronwalter.com/design-personas/ (Download design persona template) qui semblent aller plus loin que le « visuel » pour cerner le projet et englober le ton, la conception, le niveau technique des publics, etc.

Peut-être :
1. carte de personnalité,
2. planches tendances à partir des infos du (1.)

A tester sur un vrai projet.

Sébastien Desbenoit

#2

J’ai utilisé un principe très propre proche pour la création d’un site où le budget était tiré vers le bas. Pas de maquette : juste des principes graphiques.

Et cela fonctionne : c’est le site où j’ai eu le moins de retour ! La validation des styles est allée très vite. Mais ce qui est le plus important dans ce type de conception, c’est la qualité de la relation entre le client et le designer.

Marie Alhomme

Marie Alhomme

#3

@Oliv06 : Ah, je ne connaissais pas, merci pour cette ressource. Ta proposition est intéressante, après il faut juste s’assurer que ça fait pas (re)gonfler le budget en ajoutant des étapes ;)

@Sébastien : tout à fait d’accord. Je m’en sers actuellement avec ce que j’appelle des clients « débutants » et ça nous a fait gagner énormément de temps et de souplesse ! Après, je suis pas persuadée que ça puisse convenir à tous les projets et/ou tous les clients…

Trop tard pour réagir... ;)

Cet article a plus de 30 jours, il n'est donc plus possible d'y réagir.