Nous avons déjà parlé des guides de style pour la conception Web et pourquoi vous devriez en avoir un pour votre site Web. Ensuite, passons en revue de toutes les étapes que vous devrez suivre lorsque vous concevez un guide de style pour un site Web.
1. Recherchez votre marque
Tout d'abord, familiarisez-vous avec votre marque et votre public cible. Comme point de départ, vous pourriez créer un tableau d'humeur. Votre objectif est de passer en revue vos valeurs fondamentales et de les traduire dans un langage visuel, en collectant tous les actifs et composants qui les définissent en cours de route. C'est une bonne idée d'inclure les valeurs et la mission de votre marque dans votre guide de style comme point de référence.
2. Établissez les directives d'utilisation de votre logo
L'étape suivante lorsque vous concevez un guide de style pour site Web consiste à établir des directives pour l'utilisation de votre logo dans toutes ses variantes.
Si votre équipe comprend un graphiste ou un concepteur de marque, vous devriez consulter toutes les directives pertinentes qui peuvent déjà exister.
Ceux-ci peuvent inclure la grille, la police, les couleurs, l'espacement et le placement appropriés de votre logo, l'apparence sur divers arrière-plans, etc. De plus, incluez les choses à faire et à ne pas faire pour l'utilisation de logos tiers, tels que les affiliés.
3. Établissez votre palette de couleurs
La couleur influence la façon dont votre site Web et votre marque sont perçus et mémorisés. En conséquence, veillez à définir vos couleurs primaires essentielles, qui doivent être au maximum de trois. Vous aurez également besoin de couleurs secondaires, tertiaires et neutres pour compléter votre palette de couleurs.
De plus, vous devez présenter ces couleurs dans votre guide de style de conception Web en utilisant leur apparence visuelle et leurs valeurs techniques.
Par exemple, lorsque vous ajoutez "bleu", vous incluez également ses équivalents RVB et Hex. Le choix de la bonne palette de couleurs pour votre marque est très important. Pour réussir dans ce domaine, vous devrez vous familiariser avec les termes clés et en savoir plus sur la théorie des couleurs. Créez facilement votre site internet avec AK CONSULTING, votre agence de création site web Tunisie, qui vous propose un look professionnel et une conception ultra simple de votre site web.
4. Créer des règles de typographie
La typographie, comme la couleur, est un élément essentiel du guide de style de conception Web. Créez une hiérarchie typographique dans votre guide de style pour vous assurer que la vôtre est attrayante et cohérente sur l'ensemble de votre site Web.
Tout d'abord, incluez les familles et les tailles de polices pour vos principaux titres, H1-H6 : en plus des titres, vous devez inclure des styles pour le texte courant (corps), les formulaires, les messages d'alerte et d'autres éléments.
Les familles de polices (groupes de polices comme Roboto, Lato ou Montserrat) et les tailles seront incluses dans ces styles. Les tailles de police doivent être spécifiées en pixels (px) et cohérentes entre les éléments. Vous voudrez également faire plaisir à vos développeurs en vous en tenant à des tailles progressives comme 14px, 16px, 18px ou 20px et en évitant les tailles intermédiaires comme 15px.
5. Définir les règles de mise en page et d'espacement
Les règles de mise en page, de grille et d'espacement sont également des éléments importants d'un guide de style de conception Web, et la majorité d'entre elles peuvent être implémentées à l'aide de HTML et CSS. Ceux-ci détermineront comment vos pages sont organisées.
Pour commencer, créez des modèles de base pour vos mises en page principales. Cela facilitera grandement les extensions et les ajouts futurs à votre site Web.
6. Pensez au style d'icône
L'iconographie est un autre choix stylistique important lorsque vous concevez un guide de style pour un site Web et vous devez établir des règles de base pour son utilisation.
Cela inclut la décision d'utiliser une bibliothèque d'icônes prête à l'emploi comme Font Awesome ou vos propres icônes personnalisées et le style des icônes - coloré ou monochrome, rempli ou contour, etc. Vous voudrez également inclure les principales tailles d'icônes qui devrait être utilisé, comme vous l'avez fait avec vos polices.
Gardez à l'esprit que certaines grilles d'icônes ou règles sur la façon de créer les graphiques peuvent être nécessaires lors de la création d'icônes personnalisées.
7. Établir des lignes directrices pour l'illustration et l'imagerie
Vous pourriez être tenté de créer des illustrations personnalisées pour ajouter un caractère unique à votre site et à son image de marque.
Cela peut donner à votre site Web une apparence et une voix distinctes. Vous devez inclure des références de style et de couleur pour les illustrations que vous utilisez. Vous devrez peut-être également établir des règles et des directives strictes pour les types d'images utilisées sur votre site Web.
Vous pouvez, par exemple, inclure certaines choses à faire et à ne pas faire pour incorporer des photos d'archives.
De plus, pour vous assurer que les images de votre site Web sont visuellement cohérentes, vous pouvez inclure des préférences de retouche photo pour les arrière-plans, les filtres, la luminosité, le contraste et d'autres facteurs. Il est également essentiel de préciser le ton général et le message que les images doivent véhiculer.
Par exemple, votre goût personnel peut pencher vers la photographie franche plutôt que vers des images trop retouchées. Peut-être préférez-vous des parcours spécifiques plutôt que d'autres. Tout au long de ce processus, gardez à l'esprit les préférences de votre public cible.
8. Décrire les considérations stylistiques pour les composants principaux du site Web
Une fois que vous avez établi vos définitions de style de base, il est temps d'intégrer les principaux composants de votre site Web dans votre guide de style de conception Web.
Ceux-ci incluent l'apparence, les tailles et les états des boutons, des champs de formulaire, des éléments de formulaire, des menus de navigation, des notifications et des alertes, des cartes, des modaux et d'autres éléments.
Vous pouvez aller plus loin pour chaque type de bouton en incluant ses différents états, tels que normal, survolé, actif ou ciblé. Les styles des éléments de formulaire tels que les boutons radio et les cases à cocher doivent également être définis.
9. Créez le ton de la voix de votre marque
Un guide de style de conception Web efficace traite de l'apparence de votre site, de sa messagerie et de sa voix.
Vous devrez peut-être consulter des spécialistes du marketing et des rédacteurs pour créer des directives pour votre site Web et d'autres contenus afin de les mettre par écrit.
Après tout, le ton et la voix de la copie de votre site Web sont la façon dont vous vous adressez aux visiteurs et aux clients potentiels, il est donc essentiel de bien faire les choses.
10. Incluez des choses à faire et à ne pas faire
Les concepts de votre guide de style de conception Web peuvent parfois être difficiles à expliquer avec du texte seul. C'est pourquoi il est souvent préférable d'utiliser des exemples concrets,tels que des choses à faire et à ne pas faire visuellement,pour démontrer comment les règles définies dans le document sont réellement mises en œuvre.
Des exemples clairs communiquent efficacement comment le guide de style doit être utilisé dans la pratique.
11. N'oubliez pas les ressources téléchargeables !
Outre les règles de votre guide de style, il peut être nécessaire d'inclure des ressources téléchargeables à l'occasion. Cela pourrait inclure :
- Votre logo dans tous les formats adaptés au web et au print
- Un dossier de presse contenant tous les supports de marque nécessaires
- Une brève représentation de votre livre de marque
- Une version PDF du guide de style pour le site Web
Ces ressources peuvent être utilisées à diverses fins, telles que la collaboration avec des affiliés, la conversion de prospects, l'intégration de nouveaux membres d'équipe, etc. Bien qu'un guide de style de conception Web soit nécessaire à des fins internes, il est également essentiel pour la reconnaissance de la marque auprès des utilisateurs, des clients, des affiliés, de la presse et du grand public.
Si vous pensez que votre marque sera représentée en dehors de votre site Web, par exemple dans des publications de presse, assurez-vous que les actifs de la marque sont faciles à demander et à obtenir.
