Une autre façon de créer

Gagner de l’argent grâce aux guidelines oui ! Mais, c’est quoi des guidelines ?

 

Tout d’abord, il faut expliquer ce que sont des guidelines. On peut trouver divers exemples sur internet. Cependant, on peut en trouver de toutes formes ! Je vais vous parler de ce que j’utilise avec mes clients, les guidelines graphiques dirigées webdesign (ui design). La définition pure de guidelines est : liste de règles générales à suivre et/ou conseils à appliquer.

Ainsi, on imagine que pour le domaine de l’UI design, les guidelines correspondent à une charte graphique. Ce n’est pas tout à fait ça !

 

 

Quelles différences entre guidelines et charte graphique ?

 

Et oui, c’est assez différent. La charte graphique mettra en page une multitude de règles à suivre pour réaliser n’importes quels (ou presque) support de communication. En effet, on retrouve tous les éléments qui permettent de conserver son identité visuelle et ce depuis une plaquette commerciale, jusqu’au site web. Par exemple, on y trouve les règles d’utilisation du logo, les polices d’écriture et typographies utilisables, l’iconographie (pictogrammes et traitement des visuels), les codes couleurs CMJN (impression) et RVB (écran) etc… Les guidelines s’articulent sur une maquette graphique qui ressemble à une page de site web. On y trouve la totalité des éléments nécessaires au site pour fonctionner. Par exemple, la barre de navigation, une liste d’éléments cliquables, un module de mise en avant texte, un autre module de mise en avant texte + visuel, les éléments de formulaire, l’en-tête et le pied-de-page, un module slider, les boutons, les niveaux de titres etc… Tout cela est orienté pour le web. Voyez les guidelines comme une boite de Lego. À partir de cette simple maquette graphique, un site entier peut être réalisé. La charte graphique est comme un document technique destiné à des créatifs pour qu’ils puissent créer sans risquer d’être hors sujet. Or, les guidelines ne servent pas les mêmes objectifs.

 

Alors quels sont les objectifs des guidelines ?

 

Une question légitime ! Voilà une petite liste qui vient remettre un peu de lumière sur ce point :

  • Le destinataire du livrable.

    Les guidelines sont généralement utilisées par les équipes de développement. Une seule maquette leur permet d’avoir tous les éléments (les Lego) qu’il faudra articuler entre eux selon les pages. Par exemple, la page contact pourra être construite à partir de la maquette guidelines parce que celle-ci propose le module formulaire ainsi que les niveaux de titres et l’application du texte courant pour constituer la page entière.

  • La pédagogie.

    La maquette guidelines n’est pas une maquette qui vise à montrer à quoi ressemblera une page du site avec exactitude, nous l’avons compris. Ainsi, les textes peuvent très bien être remplis de bolobolo (Lorem Ipsum). Rien de pédagogique me direz-vous. Et bien, le fait de ne pas entrer le contenu du site permet d’incorporer des indications aux développeurs. (cf : image en bas de l’article). En effet, on voit les niveaux de titre (h1, h2, h3…), ou bien les codes couleurs (#2A45A4), mais aussi le design d’interaction (effet de survol des boutons) etc… La façon de mettre en forme ces informations donne un caractère multifonction à ce document, d’où son aspect pédagogique.

  • Le gain d’argent.

    Vous le savez, il me tient à cœur d’œuvrer pour permettre à tous de pouvoir bénéficier de support professionnels à des coûts que même les plus petits budgets peuvent s’offrir. Aider les porteurs de projet à donner vie à leurs idées, c’est mon crédo ! Or, il y a un principe très simple : faire gagner du temps à son prestataire, c’est gagner de l’argent pour soi ! En effet, Si vous êtes une start-up avec une petite équipe technique mais que vous ne pouvez pas embaucher un créatif, demander à un freelance de vous faire vos maquettes web de façon traditionnelle va coûter cher. Et oui, il n’aura pas qu’une maquette à faire, mais 15 (relatif) ! Sans compter le nombre de retours… En effet, il est naturel et humain de vouloir une maquette au poil de c… carotte, ce qui emmène inévitablement à toujours tout remettre en doute. Même si la raison est légitime, je vous assure que la finalité ne l’est pas. Le client oublie souvent que le responsive design va de toute façon tout faire bouger. 🙂 Avec les guidelines, c’est magique ! Le client (vous qui me lisez peut-être ?) se focalise sur le message qui est véhiculé par le design graphique, il se focalise aussi sur l’utilisabilité des modules et le plus important, sur les fonctionnalités ! Ainsi, les retours entre client et prestataire sont beaucoup plus pertinents et moins fréquents. Le résultat : gagner de l’argent grâce aux guidelines, c’est simple. Dans la pratique, il ne vous reste plus qu’à donner les guidelines à votre équipe technique et hop…

 

 

Un exemple de guidelines

 

Parler c’est bien, quoi qu’écrire c’est mieux. Cependant, montrer est de loin la façon la plus effective de faire passer le message ! Alors, voilà un exemple de guidelines :
Avec ça, tout est faisable. 😉 L’approche par fonctionnalité permet de voir le site dans son entièreté. Bien-sur, si les guidelines montrent une liste avec 4 items (les couleurs par exemple), il incombe aux développeurs d’adapter cette liste s’il doit y avoir que 3 items sur une autre page.

 

Vous avez aimé le petit garçon et sa licorne ? Moi aussi.
Ah, vous avez encore plus aimé l’approche stratégique que représentent les guidelines ? Arf… Je préfère toujours la licorne, mais je vous invite à me contacter pour mettre sur pied votre futur site ou application avec un peu de poussière de fée (mais surtout avec mes capacités quand même…) Contacter la faiseuse de licorne guidelines ! 

Vous pouvez aussi me contacter via les réseaux sociaux ! Ça me donnera l’impression d’avoir des amis : Facebook  Instagram  Linkedin