6 choses à mettre dans votre guide de conception dès maintenant
Les guides de conception sont un outil précieux pour optimiser les résultats de l'équipe de conception et garantir une identité de marque cohérente. Nous examinons six composants essentiels des guides de conception réussis.
Un guide de conception est plus qu'un simple document fourni avec un nouveau site Web ou une nouvelle identité de marque. Un bon guide de conception est une œuvre d'art en soi et a une application pratique dans le travail de design quotidien. Il présente ce que votre projet est et aspire à être. Il doit rassembler des éléments de conception, de voix et même de code d’une manière qui soit gérable, utilisable et facile à comprendre.
Il commence par ces six éléments de guide de conception qui doivent figurer dans votre documentation. (Si ce n'est pas le cas, révisez votre guide immédiatement!)
1. Exemples d'identité de marque
Votre guide de conception doit présenter votre identité de marque dans un format visuel représentatif de la manière dont vous souhaitez que les matériaux de conception soient visibles. C'est un exemple de classe de show, ne le dis pas. (Bien que le guide contienne des explications visuelles)
Les meilleurs exemples sont des utilisations réelles qui illustrent exactement ce que les normes de conception sont censées représenter.
Utilisez des captures d'écran de la page d'accueil de votre site Web, de la page d'accueil mobile, de l'application ou de tout autre endroit lorsque le design est à son meilleur.
Qu'est-ce qui est bien à propos de la L'amour de rouler guide de conception est que chaque page du livret ressemble au site Web, créant la cohérence de la marque. Le guide met même en évidence de petits éléments de la conception, tels que le style correct pour les icônes d'applications dans un affichage précis.
La meilleure partie de l'utilisation d'exemples réels dans un guide de conception est que vous n'avez pas à créer de travail supplémentaire pour présenter des éléments visuels; vous les avez déjà en main De plus, les membres de l'équipe sauront que les directives écrites fonctionnent dans la pratique, car il y a des preuves visuelles.
2. Lignes directrices de conception
Tout, des échantillons de couleur aux palettes de typographie, aux formes et à l'utilisation d'éléments de conception, doit être clairement défini.
Pourquoi le design a-t-il l'apparence et le fonctionnement d'une certaine manière? Quelle est la philosophie derrière cela?
Expliquer ces choses peut aider les utilisateurs à appliquer le style de conception de manière plus précise et cohérente sur tous les supports. Pour ce qui est de la conception de sites Web, il est judicieux d’inclure des éléments qui pourraient être différents de leurs homologues et de leurs relations. Par exemple, de nombreux concepteurs optent pour une palette de typographie différente en ligne qui imite la marque imprimée afin de maximiser l'utilisation de Google Fonts sur Typekit pour en faciliter l'utilisation.
Assurez-vous de noter les caractères de substitution si cela fait partie de votre stratégie de conception.
Lorsque les consignes de conception doivent être spécifiques lorsque cela est nécessaire - les balises H1 ont toujours 88 points ou les images miniatures sont toujours 200 par 200 pixels - mais ne sur-communiquent pas les détails inutiles. Vous voulez que les membres de l’équipe voient les informations en un coup d’œil et les utilisent, sans se laisser aller à essayer de trouver quelque chose dans un océan de spécifications.
3. Voix et personnalité
Les directives de style d'écriture ne sont pas aussi amusantes à considérer que les autres éléments visuels d'un guide de conception, mais elles sont tout aussi importantes.
Un style d'écriture descriptif pour la copie peut également avoir un impact sur les éléments visuels. Cela contribue au type d'imagerie que vous choisissez d'utiliser et même à des éléments tels que la couleur et le type. Tous ces éléments vont de pair pour créer une personnalité globale pour la marque.
C'est comment le monde extérieur va vous identifier.
Ce qui est plus, c’est qu’une voix et une personnalité fortes font également partie de l’identité visuelle. Une bonne personnalité apparaît dans les éléments de conception, car les utilisateurs peuvent presque identifier les éléments de conception, même en dehors du contenu du reste de la marque. (Pensez à Coca-Cola rouge ou à la police de caractères de Disney.)
4. Mots-clés SEO
L'optimisation des moteurs de recherche pourrait être l'une des parties les plus parlées et les moins amusantes de la conception de sites Web. Pensez aux mots-clés tôt et souvent.
Incluez-les dans la façon dont vous parlez de la marque, dans un langage descriptif du design et mettez une liste des mots-clés les plus importants dans le guide de conception.
Urban Outfitters a une liste de mots clés bien conçue (et amusante) dans son guide de marque. Alors que la marque de vêtements utilise beaucoup de mots-clés différents, les mots les plus importants sont mis en évidence par couleur pour que vous les voyiez immédiatement.
Une liste de mots clés comme celle-ci apporte les mots que vous voulez dire en tête, chaque fois que vous les voyez. La plupart des gens qui écrivent des copies vous diront qu'une fois que vous voyez ou réfléchissez à un mot dans un certain contexte, il vous reste dans la tête. C'est exactement ce que la liste de mots clés SEO est censée faire.
Les éléments de conception doivent être liés à ces mots-clés à tout moment, car ce contenu est associé à la conception du site Web.
5. Styles de motif et d'élément
Avec autant de supports différents en ligne (sans parler des entreprises qui conçoivent également des éléments imprimés), il est important de disposer de guides pour toutes les utilisations possibles.
Cela s'applique aux versions fixes et animées des logos, aux palettes de couleurs, aux motifs et même aux éléments de conception tels que les champs de formulaire et la navigation.
Votre livre de conception devrait comporter une section dédiée à ces éléments. Et si vous voulez que l'équipe vous aime vraiment, créez un guide de style de modèle et d'élément dans un emplacement en ligne afin que les utilisateurs puissent simplement copier et coller des éléments pour une utilisation rapide.
6. Extraits de code
Chaque guide de conception de site Web doit inclure de nombreux fragments de code couramment utilisés. Des boutons aux petites animations en passant par les effets de curseur, ces petits bouts de code ajoutent des heures à votre flux de travail quotidien en éliminant le besoin de saisir manuellement des spécifications avec chaque nouvel élément.
Cela fonctionne pour tout, depuis les billets de blog - ajoutez un bloc de code pour les images que les blogueurs peuvent simplement copier et coller pour la bonne taille et les effets d'interface utilisateur plus élaborés.
Firefox inclut des informations sur les composants de conception dans son guide de conception pour l’utilisation de la marque et du logo récemment révisés. Même si vous ne fournissez pas une bibliothèque complète d'extraits de code, n'oubliez pas d'inclure des informations de base telles que l'emplacement de H1 à H4 sur les pages de la conception du site Web et le style des boutons et des images.
Conclusion
La meilleure partie d'un guide de conception est qu'il ne doit pas nécessairement être un document statique. Il peut évoluer et évoluer à mesure que votre marque et votre identité visuelle font la même chose.
La plupart des concepteurs-concepteurs de sites Web, en particulier, optent pour des versions en ligne d'un guide de conception afin que les modifications, les saisies de code et les extraits de couleur soient rapides et faciles. Envisagez d'ajouter une page de guide de style à votre site Web et n'oubliez pas de vous y référer (et de la mettre à jour) fréquemment.