Une introduction rapide aux guides de style

Cette semaine, l’équipe de conception Web de Tuts + vous propose une série de pièces sur le vaste monde de Guides de style et toutes les pièces mobiles qui vont avec.

Le terme "Guide de style" est très large et peut englober plusieurs domaines différents, pouvant aller de la marque à la conception de l'interface en passant par les méthodologies de codage, etc..

Pour lancer la semaine de notre Guide du style, nous allons simplifier un peu les choses. Commençons par la question la plus fondamentale: qu'est-ce qu'un guide de style??

Qu'est-ce qu'un "Guide de style"?

En un mot, un guide de style est un ensemble de normes qui s’appliquent à la création d’actifs de texte ou de conception pour une organisation, une publication ou un champ..(1)  C’est une référence complète de DOs et NE PAS FAIRE qui garantissent que le contenu est produit de manière cohérente, conformément aux objectifs de l'organisation, de la publication ou du domaine concerné.

Les types de ressources que les guides de style peuvent associer peuvent varier considérablement, et en dehors de la conception Web, ils peuvent tout couvrir, du matériel d’impression aux vêtements. Toutefois, dans le monde de la conception Web, les guides de style sont généralement conçus pour déterminer la manière dont nous travaillons avec:

  • Mises en page et conception d'interface
  • Formatage du texte et des images
  • Nom de l'entreprise et logo affiché
  • Palettes de couleurs
  • Création de code

Que définissent les guides de style?

Chaque guide de style est unique et vous verrez différentes choses définies dans chacune d'elles. Cependant, le contenu appartiendra généralement aux quatre catégories suivantes..

Identité

Qui est derrière le contenu? L’identité constitue la base de la stratégie de marque et peut inclure:

  • Déclaration de mission
  • Promesse aux clients / clients / utilisateurs
  • Personnalité, voix et ton
Le ton de la voix est très important pour Macmillan Cancer Support

Image de marque et design

Transmettre "l'identité" au public à travers des éléments tels que:

  • Palette de couleurs
  • Création de logo
  • Typographie
  • Style général
  • Animation
La palette de couleurs de Kickstarter

Interaction

Comment l’interface avec les gens devrait se faire via:

  • Expérience d'interface utilisateur
  • Principes assurant une conception centrée sur l'utilisateur
  • Flux de visiteurs à travers les sites
Une partie du langage de l'expérience mondiale de la BBC

Mise en forme

Meilleures pratiques concernant:

  • Formatage du code et méthodologies
  • Format de texte / langue et image
  • Directives d'utilisation du logo
Oui, nous le faisons pour

Comment les guides de style sont-ils appliqués??

Parmi les méthodes les plus courantes utilisées par les guides de style, citons:

  • Tuiles de style
  • Bibliothèques de modèles
  • Wireframes
  • Maquettes
  • Prototypes

Souvent, ces éléments entrent dans les guides de style dans le but de garder les choses au même endroit, et parfois les termes énumérés ci-dessus sont même utilisés indifféremment avec "Guide de style". Cependant, si certains croisements sont généralement considérés comme acceptables, un Guide de style consiste à définir des règles et des principes et leur exécution réelle est une étape secondaire..

Il y a plus!

Restez à l'écoute cette semaine pour apprendre à créer et à exécuter vos propres guides de style, afin de vous aider à définir un visage public clairement défini et cohérent pour vous-même et vos clients.!