Comment créer un guide de style de design web

L'une des façons de s'assurer que l'équipe est sur la même longueur d'onde lors de la conception de différentes parties du site web ou de la sauvegarde de conceptions de développeurs est de créer une documentation de conception ou un guide de style de conception web.

Il est avantageux d'avoir un guide de style afin de créer une expérience cohésive sur les différentes pages. De plus, cela permet de s'assurer que le développement futur ou la production par des tiers suivront les directives de la marque et seront perçus comme faisant partie de l'ensemble de la marque.

Qu'est-ce qu'un guide de style ?

Un guide de style est une collection d'éléments pré-conçus, de graphiques et de règles que les concepteurs ou les développeurs doivent suivre pour s'assurer que les différentes parties du site web seront cohérentes et créeront une expérience cohésive à la fin.

Airbnb UI Toolkit – Web par Derek Bradley

Pourquoi est-ce important ?

Il est extrêmement important que plusieurs concepteurs travaillent sur un grand site web ou une application web pour s'assurer qu'ils n'interprètent pas trop et n'altèrent pas ou n'ajustent pas les styles en fonction de préférences personnelles. En développement, avoir des éléments de site web définis rend facile pour les développeurs de réutiliser ces éléments. De plus, cela peut être plus facile car ils verront exactement quels éléments ils doivent coder et verront précisément à quoi ils doivent ressembler dès le départ.

Pour faciliter la vie des développeurs, il est du devoir du concepteur d'inclure toutes les interactions possibles telles que survol, clic, visite et autres états pour les boutons, titres, liens, etc.

Créer un guide de style de conception web

1. Étudier la marque

D'abord, vous devez étudier la marque pour comprendre ce qu'elle représente. Découvrez l'histoire derrière la marque, observez l'équipe et déterminez la vision, la mission et les valeurs de l'entreprise. Il est important d'approfondir votre compréhension de la marque pour que le guide de style que vous produirez représente visuellement et émotionnellement l' organisation.

Si vous êtes un concepteur qui ne peut pas coder, ouvrez simplement Photoshop et donnez à votre document un titre et une courte description de ce qu'est le document et à quoi il sert.

Si vous pouvez coder, il est préférable de créer un document HTML avec des éléments pré-codés pour qu'ils puissent être facilement réutilisés.

2. Définir la typographie

Selon Oliver Reichenstein, la typographie représente 95 pour cent de la conception web.

Vous devez bien maîtriser la typographie car elle est l'un des outils de communication les plus importants entre vos visiteurs et votre site.

Établissez la hiérarchie et identifiez-la. Il existe des types de titres : h1, h2, h3, h4, h5 et h6.

Ensuite, vérifiez les balises de copie principale, gras et variations en italique. Pensez à la copie personnalisée qui sera utilisée pour les petits liens, le texte d'introduction, etc. Fournissez la famille de polices, le poids et la couleur.

Guides de style par Zech Nelson

3. Palette de couleurs

C'est incroyable la façon dont les humains perçoivent la couleur et associent les teintes aux marques connues. Pensez à Coca-Cola, je parie que vous voyez ce rouge maintenant.

Commencez par définir les couleurs primaires de votre guide de style qui domineront votre site web, les couleurs dominantes ne doivent pas inclure plus de trois teintes. Dans certains cas, cependant, vous aurez besoin de couleurs secondaires et même tertiaires pour illustrer votre interface utilisateur, assurez-vous de les définir également. Incluez également les couleurs neutres telles que le blanc, le gris et le noir pour que les couleurs de marque primaires ressortent.

Palette de couleurs Guest Center par Chloe Park

4. Voix

La voix à laquelle je fais référence est une copie réelle. Vous avez étudié la marque avant de commencer le guide de style et avez découvert que la marque est jeune et tendance. S'il n'y a pas de directives pour la voix de la copie, vous devez la définir. Cela peut être un simple exemple montrant que la voix doit être professionnelle, amusante et accueillante. Au lieu de dire « Vous avez une erreur 404 », vous pouvez dire « Oh zut, vous avez cassé le web. Erreur 404. » Si la voix était plus corporative, vous ne feriez pas cela. L'excellence se cache dans les petites choses.

5. Iconographie

Les icônes existent depuis des milliers d'années et sont plus anciennes que le texte et les mots. Profitez de l'utilisation des icônes dans vos projets car elles donneront une idée instantanée aux visiteurs de ce qui se passe et de ce qui se passera ensuite. Choisir les bonnes icônes donnera plus de contexte au contenu que la palette de couleurs, la copie ou les graphiques. Lorsque vous utilisez des icônes, assurez-vous de penser au public cible, à la religion, à l'histoire, pour éviter les malentendus et les mauvaises interprétations. Une autre chose à mentionner, pensez à la marque et à ses valeurs pour ne pas utiliser d'icônes dessinées à la main sur un grand site bancaire.

Iconfinder est un excellent outil pour trouver des icônes géniales pour vos projets.

NounProject crée un langage visuel d'icônes que chacun peut comprendre

6. Imagerie

Les images parlent mille paroles. Assurez-vous d'inclure une imagerie qui définit le style et la direction des images que le site web devrait utiliser. Une fois de plus, pensez aux valeurs de la marque et à sa mission. Par exemple, un organisme de bienfaisance pour l'eau utilise une imagerie frappante qui a une forte émotion, une bonne cause et fait appel à l'émotion humaine pour qu'ils soient fortunés d'avoir les biens de première nécessité essentiels comme l'eau, la nourriture, l'électricité et l' éducation.

Quelques excellents sites pour les images libres de droits : 16 endroits pour trouver les meilleures photos d'archives gratuites.

7. Formulaires

Les formulaires sont ce qui rend votre site web ou votre application web interactif et dynamique pour que l'utilisateur puisse saisir les données et que vous puissiez les manipuler et faire le travail.

Assurez-vous d'établir une hiérarchie et d'inclure les commentaires possibles des formulaires — actif, survol, ajout d'erreur, avertissement et messages de succès y compris les éléments tels qu'un mot de passe étant trop faible, un e-mail n'étant pas valide ou de simples messages de succès par exemple « e-mail envoyé. »

8. Boutons

Les boutons sont un mélange de palette de couleurs, de formulaires et de voix. Fiez-vous à ces éléments d'actif précédemment créés pour créer des boutons au look cohérent et fonctionnels avec différentes conceptions d' état.

9. Espacement

Comment l'espacement peut-il figurer dans un guide de style ? Il est extrêmement important de mentionner l'espacement. Il peut se présenter sous la forme d'une grille utilisée pour une mise en page ; il peut y avoir un espacement défini entre les titres, les boutons, les images, les formulaires et autres éléments.

Bien maîtriser l'espacement est important car cela donne plus d'espace aux éléments, et l'utilisation cohérente rend votre travail structuré et professionnel.

10. À faire et à ne pas faire

Enfin et surtout : Créez la section À FAIRE et À NE PAS FAIRE un peu comme une FAQ montrant les pièges les plus courants et donnez des exemples de la façon dont les choses devraient plutôt ressembler et fonctionner.

Directives et actifs de marque Twitter

Exemples

Voici quelques-uns des meilleurs exemples de guides de style à utiliser comme inspiration lors de la création de votre propre guide de style. Gardez à l'esprit que ces guides sont fortement influencés par la structure organisationnelle, leur vision, leur mission et leurs valeurs, et certaines décisions pourraient être non pertinentes ou illogiques par rapport à ce que vous faites, donc ne suivez pas aveuglément les choses là.

Spotify – Directives de marque pour les partenaires (PDF)

Marque et logos Dropbox

Guide de style Kickstarter

Guide de conception Lonely Planet

Trouver les directives – La façon la plus rapide d'accéder aux actifs de marque

Conclusion

Vous devez étudier la marque pour laquelle vous créez le guide de style, assurez-vous d'avoir bien complété les différentes parties de la conception et assurez-vous que le guide de style est cohérent et inclut tous les scénarios possibles lors de la transformation des conceptions en produits fonctionnels.