Des guides de styles pour votre intégrateur

Des guides de styles pour votre intégrateur (le 16 juillet 2013)

Si vous êtes Web Designer/graphiste/etc. (nous dirons graphiste par simplification), et si vous voulez être aimé de votre intégrateur stressé et débordé de travail, voici quelques pistes.

Nous partirons de l'idée que l'intégrateur est plus orienté développeur front-end que Web Designer. En clair, il est moins habitué à manipuler Photoshop/Illustrator/<ce que vous voulez> que vous (et plus habitué à coder). Nous sommes bien d'accord, l'intégrateur est capable de le faire et peut le faire, mais vous serez bien plus efficace à cette tâche.

Partant de ce postulat, on peut en déduire un fait : l'export des images sera bien plus rapidement effectué par le graphiste, c'est-à-dire vous. Il vous faut donc quelques bases sur l'optimisation des images, les formats, etc. Assez des exports en qualité maximale !

Bien sûr, vous ne ferez pas de maquette sans que l'intégrateur ne vous dise un rapide « ok pas de souci avec ce que tu as fait », afin d'éviter un gros couac potentiel avec le client (qui aura validé quelque chose d'impossible à pondre sans contrainte particulière non annoncée au client). Ce n'est pas uniquement pour vous embêter, c'est aussi pour éviter de mettre toute l'équipe dans l'embarras.

C'est encore plus critique sur des sites en responsive. D'ailleurs, au moment de faire les exports, discutez avec votre intégrateur si vous n'êtes pas sûr, il pourra vous économiser du travail en vous disant « n'exporte pas ça, je le ferai en CSS ». D'ailleurs, quand vous maquettez des versions petit écran, demandez à votre intégrateur, il pourra vous aiguiller en vous disant par exemple « attention, ce genre d'adaptation est impossible pour une simple raison d'ordre du code, fais plutôt ainsi ».

Ensuite, plutôt qu'un long discours, prenons un court exemple. J'ai eu le plaisir de travailler sur le site de Myolux.

Voici le genre de guides de style que j'attends d'un graphiste : Exemple de guide de styles (PDF de 1,42 Mo).

Guides de styles, tailles de typos

En général, une image détaillée avec les dimensions des blocs vient avec, afin que je ne travaille pas au pifomètre, surtout pour la page d'accueil. Pas besoin d'un truc magnifique, une image avec quelques flèches, quelques encarts avec les dimensions me suffisent amplement.

Pour les intégrateurs (qui bavent d'envie) et les autres qui lisent ces documents, ne le cachons pas : oui, le code que mon graphiste a mis est parfois inexact/imparfait. Ceci dit, j'ai compris son intention, et c'est mon problème de traduire cette intention en CSS/HTML, pas le sien. Donc, n'en exigez pas trop non plus de votre graphiste.

Revenons à vous, chers graphistes. Vous pensez que j'en exige trop peut-être ? Mais c'est uniquement pour bien respecter votre travail que j'ai ce genre de demandes. Et c'est aussi pour ceux qui suivront que ce genre de document est vital. Accessoirement, cela montrera votre sérieux au client si vous lui fournissez ce genre de document.

On est d'accord, sur du projet ultra-rapide et rikiki, il n'y a pas besoin d'une telle armada de guides de styles, un export avec les dimensions et quelques indications rapides (liens, typo) me suffiront amplement. Néanmoins, voulez-vous prendre le risque que votre création dont vous êtes si fier soit légèrement massacrée par un intégrateur qui n'a pas le temps de faire dans le détail ?

Ajoutons à cela que quand j'ai un graphiste qui fait tant d'efforts et qui met autant de bonne volonté, je vais me plier en quatre pour freiner le moins possible sa créativité et la respecter le plus fidèlement possible, il est assez rare que je dise un « non » franc et massif à une idée venant de quelqu'un qui mouille la chemise comme on dit (sauf si j'ai une réelle impossibilité technique).

Hé oui, ce n'est qu'un juste retour des choses.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1573

8 commentaires

Posté par lordfpx le 16/07/2013 à 12:15:23
Je bave devant une telle guide line !
Mais bon, je me contente d'un PSD aux calques bien nommés et rangés en espérant ne pas avoir 10 polices différentes et des blocs de tailles "logiques" (ouais, utiliser une grille CSS est encore un doux rêve).
Posté par Fabien le 16/07/2013 à 13:46:00
Je ne suis pas sûr que "mon" graphiste se chargera de le rédiger, mais moi j'ai tout intérêt (ça n'a d'ailleurs pas besoin d'être aussi bien looké que le tiens) !

En tout cas, merci pour le partage de ce document ^^

Posté par Yannick le 16/07/2013 à 17:16:57
Ce type de guide line est top !
Toutes les infos utiles sont renseignées clairement, les typos, les couleurs, tout est au même endroit. Ca fait gagner pas mal de temps, plutôt que d'éditer le texte sous photoshop, aller chercher la couleur de la typo... Là, on a tout.
Après, c'est clair qu'un doc de ce genre pour un petit projet, c'est chaud. Mais rien n'empêche de faire un doc txt, avec les infos en brut.
Posté par Angy le 13/02/2014 à 14:25:44
Un guideline propre, c'est important surtout pour un gros projet, c'est sûr. Mais il faut également beaucoup communiquer entre graphistes et intégrateurs. Et c'est souvent un problème, les 2 font leurs trucs chacun de leur côté, sans partager ni poser de questions. C'est le meilleur moyen pour perdre du temps au final.

Pour éviter des phrases comme « n'exporte pas ça, je le ferai en CSS », il faudrait selon moi que le graphiste ait des notions d'inté. Il suffit de lui donner un petit cours sur ce qui est faisable ou pas en CSS.

C'est comme ça qu'on s'enrichit aussi. Il ne s'agit pas non plus d'apprendre un autre métier en plus mais bien des notions intéressantes qui nous aideront dans notre travail et pour nos projets en commun avec l'intégrateur.
Posté par Alfa le 13/02/2014 à 17:24:37
Très sympa comme guide, personnellement, j'intègre souvent avec maquettes faites avec Illustrator, j'ai renoncé à réclamer des maquettes en PSD mais j'ai obtenu une grille 24 colonnes avec des élements qui dépassent et je dois me débrouiller pour le RWD, j'imagine la tête de ma graphiste si je lui demandais ça en plus.
Posté par Nico le 14/02/2014 à 9:31:23
Angy : je fais souvent un mini-brief de qq minutes sur les exports si le graphiste a un doute, c'est très peu formel, et avec l'habitude, le graphiste ne connait pas l'intégration mais il sait ce qu'on peut faire et ne pas faire en CSS. (sourire)

Alfa : perso, si ton graphiste se retrouvait face à moi, il se prendrait net dans la tête « t'es gentil, mais c'est ton boulot de me fournir ce dont j'ai besoin pour faire correctement le mien ET respecter le tien ». Sans blague !
Posté par Webmaster Luxembourg le 11/08/2015 à 2:26:27
Merci pour ces explications, bon travail
Posté par Nicolas le 24/09/2015 à 18:59:39
Je trouve indispensable ce genre de document pour pouvoir bosser efficacement. Malheureusement, on recoit généralement au pire un fichier photoshop avec lequel il faut composer, au mieux avec un style guide qui dans les premières pages est largement commenté pour des choses parfois évidentes, puis devient très évasif lorsqu'on rentre dans les détails. Parfois même la nouvelle identité visuelle est annoncée (j'ai en tête un gros client) mais dans les faits les documents indispensables ne sont pas prêt (coming soon sur l'intranet...) !

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.