Comment écrire un guide de style parfait
Je développe une sorte de thème avec un ensemble de composants de pré-construction tels que des tableaux de données stylisés, des formulaires d'entrée, etc. document au thème. Je n'ai jamais écrit de guide de style et j'aimerais avoir des conseils sur la façon d'en rédiger un. J'ai googlé et découvert quelques modèles, mais j'aimerais également avoir des guides professionnels.
Je vous remercie.
Un guide de style contient généralement une liste de modèles de conception utilisés par votre marque, produit, application.
Un modèle de conception:
Un modèle de conception généralement accompagné des informations suivantes
- Une déclaration de problème
- Usage
- Une solution
- Raisonnement
- Exemples
- Captures d'écran
- Spécifications de conception visuelle (couleurs, espacement, typographie, etc ...)
- Spécifications de l'interface utilisateur (le cas échéant, ajoutez le support HTML, JS, CSS)
Guide de style
Un bon guide de style contient une liste de modèles de conception et communique toutes les informations nécessaires à une équipe créative et/ou de développement pour construire une expérience de marque cohérente sur différents canaux.
- Logo et utilisation du logo
- Iconographie
- Schéma de couleur
- Typographie
- Copie et tonalité de la voix
- La grille
- Points d'arrêt
- Disposition et modèles de page (ou d'écran)
- Espacement
- CTA
- et ainsi de suite...
Vous pouvez jeter un coup d'œil à Design Material de Google et Patterns UI ainsi que Foundation Framework et B ootstrap Framework ( comme mentionné sur cette page)
Vous n'avez pas besoin de le construire à partir de zéro. il existe de nombreux générateurs de guide de style personnalisables. bootstrap et fondation sont deux d'entre eux.
voici quelques exemples de guides de style réalisés par diverses entreprises http://styleguides.io/examples.html
voici également un bon point de départ. Vous pouvez l'utiliser pour décomposer ce que css est déjà utilisé et essayer de supprimer toutes les redondances http://stylifyme.com/
Bootstrap http://www.monolinea.com/labs/bootstrap-style-guide-boilerplate/
L'inclusion du comportement de l'interface utilisateur (en plus de la présentation de l'interface utilisateur) dans le Guide de style est une bonne pratique. Par exemple, décrire le comportement de l'interface utilisateur d'authentification ou le comportement d'exploration sur un appareil.
Si vous travaillez dans un environnement Agile, les mises à jour du Guide de style peuvent être incluses dans le cadre de user stories spécifiques qui incluent des composants d'interface utilisateur nouveaux/mis à jour.
La rédaction d'un guide de style est la partie facile. Le garder en vie, l'améliorer et le modifier si nécessaire et le faire respecter par les développeurs et les concepteurs est la partie difficile.
Je vous recommande de jeter un œil à ces diapositives de Wolf Brüning, un concepteur d'interaction pour otto.de
http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy
Il décrit comment créer une bibliothèque de modèles allégés et impliquer tout le monde dès le départ.
Je n'utilise généralement rien du gouvernement comme exemple de quoi faire correctement, mais leur site de normes de conception Web est simplement un excellent guide de style: https://playbook.cio.gov/designstandards/ =
Comme mentionné par d'autres personnes, il commence par des styles généraux (atomes) et se déplace vers des styles d'éléments de plus en plus complexes (molécules, organismes, modèles, pages, etc.). C'est ce qu'on appelle la "conception atomique" et c'est un excellent moyen d'organiser vos styles réutilisables.
C'est aussi un excellent site/application que j'ai utilisé pour préparer rapidement un guide de style en ligne: https://frontify.com/ (fyi, je ne travaille pas pour frontify. C'est juste un bon outil)