Les guides de style, également connus sous le nom de bibliothèques de modèles, sont un excellent moyen de s'assurer que votre conception se poursuit comme prévu à mesure que votre site Web se développe ou que de nouveaux membres de l'équipe travaillent sur un projet Web. Chaque style, ou modèle, est un groupement d'annotations et de styles pour les éléments de conception de votre site Web.

Les guides de style modernes sont généralement affichés sous la forme d'une page Web réelle, qui montre les différents éléments d'un site Web ou d'une conception d'application. Lorsque plusieurs personnes ou même plusieurs équipes travaillent sur un projet Web, un guide de style évite de deviner à quoi devraient ressembler les éléments visuels. C'est un excellent moyen de garder tout le monde sur la même longueur d'onde pour la cohérence du projet.

Gardez votre équipe sur la bonne voie et votre code au SEC

Outre la conception visuelle, un guide de style permet de s'assurer que le fichier CSS ne devient pas incontrôlable. Nous avons tous connu du code répétitif, alors efforçons-nous de garder le code maintenable et sans rien d'absolument nécessaire. Si tous les membres de votre équipe peuvent voir tous les styles au même endroit, il sera facile de voir lesquels existent actuellement afin qu'ils ne soient pas dupliqués dans la feuille de style.

Étant donné que votre guide de style sert de collection qui comprend la conception des modules et d'autres éléments de conception, il est facile de voir si les nouveaux éléments de conception correspondent aux normes établies.

Que doit contenir un guide de style Web ?

Comme nous le savons, la conception Web a tendance à devenir un peu sauvage. La bonne nouvelle est qu'une conception Web efficace, en particulier lorsque vous utilisez un guide de style, est sous votre contrôle. Les guides de style vont du très simple au très complexe. J'ai inclus quelques idées ici pour vous aider à démarrer.

Palettes de couleurs

C'est une bonne idée d'inclure des échantillons qui ont la couleur hexadécimale notée. Votre futur moi pressé par le temps vous remerciera ! Je ne me souviens pas combien de fois j'ai demandé ou on m'a demandé: "Quelle est cette couleur d'hexagone déjà?" Avoir une référence rapide sera certainement utile pour tout le monde.

Typographie et hiérarchie

Les espaces réservés de titre descriptif peuvent grandement aider votre équipe à comprendre dans quel type de contexte les éléments de votre mise en page doivent être utilisés.

Les guides de style doivent également inclure une hiérarchie d'en-tête suggérée. Quel est le h1, h2, h3, et ainsi de suite ? Les mots descriptifs tels que l'en-tête principal, le sous-titre et l'en-tête du widget de la barre latérale éliminent également beaucoup de conjectures futures.

N'oubliez pas d'inclure des éléments typographiques moins courants, comme les guillemets par exemple. Vous devez spécifier tous les exemples de texte, même ceux qui sont rarement utilisés. Si vous avez un certain style d'en-tête et de corps pour les citations ou les témoignages, spécifiez-les avec les mêmes détails que pour les éléments les plus couramment utilisés.

Images

Incluez un traitement général des images pour votre projet. Les images nécessitent-elles des bordures ou un effet d'opacité unique ? Y a-t-il une interaction de survol ? Si oui, obtenez cela dans votre guide de style. S'il y a plusieurs traitements, incluez chacun d'eux et définissez quand certains traitements sont utilisés.

Styles de lien, de navigation et de formulaire

Du point de vue UX, les liens, la navigation et les éléments de formulaire sont trois canards très importants à avoir à la suite. Vous savez sans doute que les liens textuels, les boutons et les styles de navigation doivent être inclus dans votre guide de style. Cependant, il peut être facile d'oublier d'inclure des instances de styles normal, survolé, visité et actif pour chacun d'entre eux. Obtenez ceux documentés pour assurer la cohérence dans chaque détail de votre site.

Lorsque de grands styles fusionnent avec un formulaire, il n'y a pas de meilleur moyen de montrer tous les éléments de formulaire Web que dans votre guide de style. C'est un excellent moyen de cartographier et d'inventorier tous les éléments du formulaire, ce qui fonctionne, ce qui ne fonctionne pas et ce qui manque.

Plus précisément, voici quelques composants clés à inclure pour les styles de formulaire :

• État normal du champ de saisie
• État du champ de saisie ciblé
• Styles d'étiquette
• Texte de l'espace réservé du formulaire
• Texte actif de l'utilisateur
• Texte saisi par l'utilisateur
• Bouton de soumission
• Message d'erreur
• Styles de case à cocher

Plus d'idées à inclure dans votre guide de style

Il est difficile d'énumérer tous les éléments que vous pouvez rencontrer, mais en voici quelques-uns de plus qui pourraient vous être utiles :

• Boîte d'appel
• Liens horizontaux
• Éléments de commentaire
• Balises de catégorie
• Modèle pop-up

Comment créer votre propre guide de style Web

Si vous êtes le chanceux qui s'attaque à l'exploit héroïque de créer un guide de style à partir de zéro, j'ai quelques considérations utiles pour vous.

Personnellement, j'aime commencer avec un fichier HTML vierge et partir de là. Liez ce guide de style au CSS du site Web ou de l'application. De cette façon, les modifications sont reflétées aux deux endroits et vous n'avez pas à vous soucier de la maintenance de deux fichiers CSS.

Commencez par faire l'inventaire de tous les éléments de votre site, puis ajoutez le balisage exact dont vous avez besoin pour chacun à votre guide de style. Cela vous semble intimidant ?

Évaluez d'abord la grille de la page, puis remplissez le guide de style avec des éléments importants tels que la typographie et la palette de couleurs, en ajoutant d'autres motifs au fur et à mesure de votre progression. D'autres modèles de conception peuvent inclure des éléments tels que des images, des blocs de citations, des styles de barre latérale, des boutons et des styles de formulaire.

Fais-moi confiance. C'est du temps bien dépensé. Il est également bon de se rappeler que rien n'est permanent et que tout peut facilement être ajusté et élargi.

Si vous recherchez la vitesse et que la saisie manuelle de tous les styles n'est pas pour vous, il existe d'excellents outils qui facilitent la création et l'utilisation de modèles réutilisables.

Par exemple, Pattern Primer de Jeremy Keith générera une liste de tous les modèles dans un dossier. Il s'agit d'un outil PHP simple pour transformer des extraits de code en une bibliothèque de modèles. Vous verrez le modèle rendu en HTML.

Une autre excellente option est le KSS de Kyle Neath, qui est également un excellent outil pour la documentation du guide de style. Ces styles automatiques générés sont un ensemble de lignes directrices pour vous aider à produire un guide de style HTML lié à la documentation CSS. KSS est conçu pour bien fonctionner avec les préprocesseurs CSS et s'adapte à de nombreux frameworks CSS.

Comme nous le savons tous, un site Web n'est jamais terminé. Si de nouveaux éléments sont nécessaires, il est facile d'élargir votre guide de style de vie en y ajoutant simplement.

Votre guide de style initial peut ne pas être identique aux pages que vous créez éventuellement, mais c'est une excellente occasion de tester de nouveaux styles, et c'est particulièrement utile pour la conception pour plusieurs navigateurs.

Exemples de guides de style

Vous voulez des exemples concrets de grands guides de style ? Tu l'as eu:

Code pour l'Amérique
MailChimp
Force de vente

En assurant la cohérence de votre conception, votre guide de style facilite l'expansion du site Web et les futures améliorations Web. Au fur et à mesure que les styles sont ajoutés et modifiés, ce document est un excellent moyen de tenir l'équipe informée et de montrer votre projet de style.