Header style tiles

Pour mon projet de Master 1, je dois créer un site de A à Z, de la conception à la réalisation. Pour la conception, j’ai commencé par toutes les étapes de recherche, d’analyse de la concurrence, définition de la cible, liste des fonctionnalités, besoins fonctionnels et non fonctionnels, choix techniques / technologiques, contraintes techniques…

A partir de toutes ces informations, j’ai commencé à travailler sur l’ergonomie du site. J’ai listé tous les gabarits et après une étape de croquis rapides sur papier, je les ai maquettés sous InDesign.

Je trouve InDesign très adapté pour cette étape, car il permet de gérer très efficacement des grilles, il est parfaitement intégré à la suite Adobe, ce qui peut éviter de dédoubler certaines tâches, et, contrairement à Photoshop, il est fait pour gérer du texte. Manipuler des grosses quantités de texte sous Photoshop est un pensum, là où les styles de paragraphe d’InDesign font gagner beaucoup de temps.

Une fois les maquettes faites, on a la structure du site : on a défini la hiérarchie de l’information, sa répartition dans le site, et les différentes manières d’y accéder.

Indesign

Il reste tout l’aspect graphique à déterminer.

Jusqu’à ce projet, j’utilisais Photoshop pour ces deux étapes. Produire 50 documents Photoshop pour les 50 maquettes du site me parait être une perte de temps sans nom, sans parler de l’évolutivité : à chaque changement, je devais modifier tous les éléments concernés dans chaque maquette. Fastidieux, et propice à l’erreur.

J’ai depuis entendu parler des Styles Tiles, via cet article : Style Tiles: The Flip Side of Wireframes. J’ai tout de suite été convaincue de l’intérêt de distinguer l’aspect graphique de la structure des pages, tout comme je vois l’intérêt d’une séparation entre le HTML et le CSS.

Pour des sites très graphiques, plus proches de l’illustration qu’autre chose, il n’est peut-être pas possible d’utiliser les Styles Tiles, mais pour des projets contenant beaucoup de texte et avec beaucoup de gabarits, les Styles Tiles prennent tout leur sens. Je pense également que les Styles Tiles peuvent être intéressantes pour des designs reponsives, même si je n’ai pas encore eu l’occasion d’essayer.

Style tile v3

En un document, j’ai pu donner une direction graphique à mon site, j’ai défini ses couleurs, les polices, le style des éléments graphiques utilisés… Et il ne reste plus qu’à combiner avec les maquettes pour l’intégration. J’ai complété avec une page “témoin” contenant toutes les sortes de balises utilisées dans le site, qui me permet de vérifier en temps réel la cohérence des styles CSS.

Edit du 6 décembre 2013 : Un des articles de 24 jours de Web est consacré aux styles tiles, je vous le recommande 🙂