Comment créer des guides de style pour un public spécifique

Un guide de style peut être un document incroyablement puissant qui vit plus longtemps que la plupart des autres dans la culture d’une entreprise. Qu'il s'agisse de créer une nouvelle marque pour une entreprise encore inconnue ou de recréer une marque déjà établie, la rédaction d'un guide de style peut apporter une cohésion aux actifs conçus autour de cette marque, ainsi que le ton associé à la marque.

Dans cet article, j'aimerais explorer les publics auxquels vous voudriez créer le guide de style, ainsi que certaines techniques que vous pouvez utiliser pour créer des écosystèmes de marque plus forts et plus durables. Cet article ne s’applique pas uniquement au Web, mais nous inclurons certainement des conseils spécifiques pour les guides de style orientés Web..

Public n ° 1. Toi même

Vous avez besoin de règles. Vous avez besoin de responsabilité. Si vous ne les avez pas, vous ne pourrez pas créer de marque ciblée. Créer un guide de style avec des limites strictes et une structure de base pour la conception et le développement appliquera des règles pour vous, vous libérant de la charge cognitive d'essayer de vous restreindre sans guide..

Jack White, guitariste des White Stripes, a déclaré:

En vous disant: «Oh, vous avez tout le temps du monde, vous avez tout l'argent du monde, vous avez toutes les couleurs de la palette que vous voulez, tout ce que vous voulez», je veux dire, cela tue la créativité.

Prenez le temps de définir des restrictions pour vous-même. Ne le faites pas aveuglément; faites-le par le biais de la recherche, à partir de votre compte-rendu personnel et des meilleures pratiques empiriques / documentées. Veillez à ne pas abandonner la créativité et l'intuition au profit de la recherche, mais souvenez-vous que la recherche peut renforcer la créativité et l'intuition..

Quel genre de restrictions?

Il n’est pas facile de répondre à cette question et elle dépend fortement de votre situation. Nous discuterons plus tard de certaines des restrictions et directives que vous ajoutez à un guide de style pour d’autres, mais vous devez d’abord vous assurer de créer des restrictions pour vous-même..

En définitive, le but d’un guide de style est de créer des restrictions qui permettent de renforcer l’efficacité d’une initiative de conception. Dans l’intérêt de cet article, nous supposerons que le guide de style s’articule autour d’une marque..

Contraignant? Non, crucial. Un échantillon des célèbres actifs de la marque MailChimp

Pour y parvenir le plus efficacement possible, l’une des premières étapes à franchir est d’examiner plus attentivement la perception de la marque comme si c’était un être humain. La marque sert de symbole symbolique pour le marqué. Par conséquent, vous devriez envisager d’attribuer une voix et un ton et filtrer tout ce que vous créez à travers cette voix. Cela fournira un point d'ancrage aux personnes pour faire référence à votre marque dans leur esprit. La marque est le porte-parole ultime d'une entreprise ou d'une organisation.

Partie de la voix et de la tonalité utilisée par Tuts + pour guider les instructeurs

Qu'est-ce que cela a à voir avec un guide de style, en particulier sur le Web? Absolument tout. En étudiant le design et les principes psychologiques de la théorie de la communication, vous pouvez responsabiliser cette personne, la voix et le ton, au travers d’éléments graphiques. Par exemple, si votre ton est amical pour les jeunes enfants, vous devriez considérer les couleurs primaires vives au lieu des couleurs primaires. Vous pouvez envisager des mots plus courts plutôt que des mots plus longs, et les éléments de conception tournent probablement autour de l'imagerie et d'une limitation du nombre de mots utilisés dans un élément donné..

Pour le Web, il existe des éléments très importants qui aident à façonner votre ton.

Astuces Pro:

• Lorsque vous demandez à un utilisateur d'entrer dans un formulaire, rappelez-vous qu'il s'agit de conversations. Ne mettez pas toute votre énergie dans le slogan, puis oubliez le ton lorsque vous demandez à l'utilisateur de faire quelque chose..
• De même, lorsque vous avertissez l’utilisateur d’une erreur, d’une réussite ou de toute autre information pertinente, conservez votre tonalité..

Probablement pas le ton que vous voudriez

• En plus de définir la palette de couleurs et d'afficher cette palette, vous devez identifier les connexions symboliques entre les couleurs et leur signification. Par exemple, si votre marque associe le rouge à la positivité, vous devez l'identifier, car ce n'est pas nécessairement un lien implicite ou naturel. Avoir ces connexions et connotations renforcées dans votre guide de style aide à prendre des décisions de conception difficiles.

Une partie de la marque de Skype

• Ne pensez pas seulement aux couleurs, formes, types et autres éléments de conception statiques; considérez l'animation comme un citoyen de première classe dans votre guide. Par exemple, préférez-vous un fondu, une diapositive linéaire, une diapositive assouplie ou un rebond? La marque appelle à peu ou pas d'animation, sauf sur quelques éléments choisis. Ces décisions devraient être délibérées. Une transition porte un message. Pour mieux comprendre les bases d’une animation efficace, considérons les 12 principes de l’animation..
• Identifiez tous les types / modèles de page de base et expliquez leur fonction. Ces définitions doivent montrer une structure filaire du type de page, ainsi que les styles de police.
• Identifiez tous les modules réutilisés sur le site, avec des structures filaires expliquant tous les aspects de la conception, y compris les règles de choix de couleur, les restrictions de taille d'image, les réponses en survol et tout autre aspect interactif du module..
• Identifiez non seulement les aspects de la présentation, mais également toutes les restrictions relatives à l'expérience utilisateur. Considérez le guide de la marque comme un "guide d'expérience", si cela peut vous aider. par exemple, imposer des limites strictes à la vitesse de traitement des pages ou exiger un processus de test qualitatif pour chaque conception avant son expédition.
• Abordez les restrictions et le contenu mobiles tôt et souvent, et donnez la priorité à la définition des différences de voix et de tonalité pour les utilisateurs de mobile par rapport aux utilisateurs de bureau. Les objectifs de ces utilisateurs varieront probablement et la connaissance de ces objectifs devrait éclairer la prise de décision en matière de conception..
• Redéfinissez les règles de dimensionnement des polices pour différentes tailles d'écran.
• Personnifiez votre utilisateur moyen. Étudiez votre base d'utilisateurs et déterminez s'il y a un seul utilisateur archétypique ou s'il existe plusieurs types d'utilisateurs. Déterminez quels sont les utilisateurs les plus importants et façonnez votre conception en fonction de ce qui communique le mieux votre voix et votre tonus à ces utilisateurs..
• N'oubliez pas les "coins sombres" du site! Concevez les endroits difficiles à atteindre et les coins oubliés pour être à la hauteur de la qualité du reste de la conception.
• Assurez-vous d'avoir des jeux par défaut raisonnables et utilisables pour chaque style d'élément.
• Lorsque vous modifiez les styles d'éléments intégrés, assurez-vous que l'accessibilité et la convivialité sont bien équilibrées avec l'esthétique. Votre guide de style devrait vous empêcher de modifier le comportement attendu des actions utilisateur de base telles que le défilement, le survol ou le clic sur un contrôle de formulaire, sans motif clair et déterminé..

Public n ° 2. La marque

Une marque est une marque qui représente les personnes, les idées, les pratiques, la culture et l'identité d'une entreprise. Cette société et les personnes qui la composent constituent le deuxième public visé par le guide de style. ils sont qui est marqué.

En définitive, un guide de style est une référence pour la création d’objets de design cohérents avec la marque. Les personnes que représente la marque sont probablement celles qui utiliseront le plus souvent le guide de style. Les restrictions que vous proposez à ceux qui l'utilisent quotidiennement devraient être rédigées de manière beaucoup plus claire, avec une anticipation des questions relatives à la cohésion de la marque. La plupart des entreprises ont besoin d'un guide de style qui convient à deux types de personnes: sensible au design et agnostique au design.

Design Aware Individuals

La remise d'un guide de style devrait impliquer la formation des personnes sensibilisées à la conception aux spécificités du guide de style et la création de révisions à partir de questions posées par les individus..

En général, le langage de conception peut être utilisé avec des individus attentifs à la conception. Le guide de style devrait permettre aux individus soucieux de la conception d'explorer et d'élargir la voix et le ton de la marque à mesure qu'elle grandit; les marques doivent conserver leur plasticité pour leur permettre de se déplacer et de se développer à mesure que le marché évolue.

Concevoir des individus agnostiques

La fourniture d'un guide de style devrait impliquer la formation d'individus ne tenant pas compte de la conception sur la notoriété de la marque et sur l'importance de s'en tenir au guide. Si la plupart des ressources développées par un personnel donné le sont par des concepteurs agnostiques, des restrictions et des exigences plus strictes doivent être consignées dans le guide de rédaction.. 

Par exemple, tous les exemples d'emplacement de logo, d'emplacement de type, de phrases ou de balises de marque clés, de couleurs et de tests / exigences d'utilisation doivent être identifiés en détail.

Adobe rend les restrictions d'utilisation de son logo très claires pour tous (PDF)

Astuces Pro:

• Utilisation mal, d'accord, bien, et meilleur exemples pour une clarté maximale.
• Ne confondez pas Design Agnostic avec anti-design; en général, les gens pourront suivre les instructions et le feront avec plaisir. Ne donnez pas au guide une apparence de règle, mais définissez-le plutôt comme un outil d'autonomisation.

Une partie du guide de la marque Beano - prouvant que les restrictions peuvent aussi être amusantes (PDF)

• Explicite vaut mieux qu'implicite. utilisez les explications les plus évidentes, y compris des captures d'écran si nécessaire, pour définir un guide de style de marque.
• Les listes de contrôle peuvent être une bonne chose, mais seulement si elles ne sont pas trop techniques, écrasantes ou exigeantes.
• Ne vous contentez pas de donner des règles: donnez des raisons. Fournissez un langage clair qui n'utilise pas une terminologie de conception lourde qui explique vos directives.
• Fournissez des couleurs d'accompagnement très claires de toutes les couleurs conformes à la marque, ainsi que leurs codes hexadécimaux et toute information de codage de couleur pertinente telle que les identifiants Pantone.

Un échantillon des directives de couleur de More4 (PDF)

• Pour les guides de style de saisie Web / HTML, fournissez un ensemble de code de travail afin que l'utilisateur puisse copier et coller. Identifier certaines sections avec des commentaires HTML.
• Clarifiez tous les problèmes de qualité d'image; fournir aux utilisateurs des exemples de bonnes photographies et envisager d'identifier les caractéristiques de base d'une bonne photo.
• N'oubliez pas d'expliquer le ton de la messagerie aux utilisateurs, ainsi que l'importance de la double vérification de la grammaire. Le ton doit être vérifié par deux personnes ou plus, et au moins une autre personne doit relire l’ensemble de la copie selon un modèle donné..

Public n ° 3. Le public (facultatif)

Si votre marque doit être utilisée par le public, vous devrez peut-être lui fournir un guide de style qui correspond à ses besoins. Plus précisément, les guides de style pour le public sont souvent destinées aux marques axées sur le service. Twitter en est un exemple évident. Lorsque vous ajoutez le logo Twitter ou un fil Twitter à votre site, Twitter se préoccupe de son apparence..

Tiré des actifs de la marque Twitter

Ceci est généralement le plus applicable lorsqu'il s'agit de placement de logo. Quelques règles de base pour le placement de logo, en particulier:

• Fournir des paquets téléchargeables de logos dans des formats populaires, avec toutes les versions applicables (tailles et variantes)
• Définir l'espacement; utilisez une règle empirique d'au moins la hauteur de la lettre la plus haute du logotype en remplissant le logo lui-même.
• Définir si le logo doit être centré, aligné à gauche ou à droite, ou placé autrement par rapport à la page elle-même.
• Clarifiez les couleurs de fond pouvant être utilisées avec le logo, avec des cas d'utilisation et des exemples explicites.

Guides de style Web: À la croisée des identités et de l'interactivité

L’écart entre l’interaction et la marque elle-même est peut-être le décalage le plus déconcertant entre un guide de style et une expérience Web. Souvent appelé "sentir", cet écart est la raison pour laquelle il est si important de prototyper les interactions. Il est rare qu'un guide de style de marque prenne bien en compte les aspects de la conception d'interaction fondés sur l'identité. Cependant, cela devrait Soyez notre objectif lorsque vous rédigez un guide de style! Pensez à utiliser les concepts et astuces suivants pour votre guide de style en ce qui concerne l'interactivité:

• Élevez la définition de la couche interactive pour être un citoyen de première classe dans le guide de conception, aussi important que la couleur et le type.
• Ecrivez des "user stories" pour aider à définir tous les chemins et actions des utilisateurs. La liste d’histoires d’utilisateur devrait contribuer à éclairer l’interaction croisée de haut niveau, tout en maintenant les objectifs réalisables en conformité avec la marque..
• Décrivez les animations avec deux types de langage: d’abord, un langage descriptif, uniforme, qui tente de définir de manière objective ce que l’animation fait. Deuxièmement, avec un langage subjectif, décrire ce que l'animation doit "ressentir". Un bon concepteur connaît la différence de toucher des animations .2s et .3s, mais peut ne pas connaître la description mathématique de cette différence..
• Lorsque les descriptions échouent, fournissez des prototypes interactifs de l’interaction que vous essayez d’obtenir. Concentrez-vous sur les détails de l'interaction; que se passe-t-il en quelques secondes? Que se passe-t-il dans des cas inattendus?

Conclusion

Ce guide pour la création de guides de style est loin d’être complet; il y a certainement des milliers de morceaux de sagesse à partager sur les guides de style. Qu'avez-vous appris à être incroyablement important? Partagez-le avec nous ci-dessous!