Guide du concepteur sur l'utilisation des guides de style et des carreaux de style
Créer un identité de marque n'est pas une tâche facile. Cela demande des efforts mais c'est aussi l'une des tâches créatives les plus gratifiantes. Projets Web souvent mélanger la marque avec la conception de l'interface. Cela peut être déroutant car il y a tant à faire dans les deux domaines. Guides de style et tuiles de style sont d'excellentes ressources pour les concepteurs Web, et bien qu'ils sonnent de la même façon, ils accomplissent deux tâches différentes.
Dans cet article, j'aimerais approfondir ces deux aspects et couvrir les avantages que vous pouvez tirer de ces atouts créatifs. Tout le monde n’aura pas besoin de créer des guides de style ou des carreaux de style. Mais chaque concepteur doit au moins comprendre ce qu’ils sont et comment ils fonctionnent.
Guides de style pour le Web
J'ai lu différentes opinions sur les guides de style. Certains disent que ce sont des maquettes numériques tandis que d'autres disent que les guides de style basés sur du code sont les plus utiles.
Dans les deux cas, l'objectif d'un guide de style est identique pour le Web que pour tout autre projet. Il définit modèles cohérents, modules d'interface utilisateur et préférences de création utilisé dans le processus de conception. Vous pouvez obtenir des informations très précises et stipuler des mesures de pixels parfaits pour certains éléments, ou vous pouvez rester lâche et proposer des instructions avec des exemples visuels..
Il n’existe pas de bonne façon de faire un guide de style. La seule mauvaise solution consiste à créer une ressource qui ne peut pas être compris par les autres.
L’objectif est de créer un actif qui résister à l'épreuve du temps. CA devrait etre ouvert aux modifications si de nouvelles ressources sont créées. Il devrait également être accessible à toute personne rejoignant l’équipe pour se plonger directement dans le guide..
Un guide de style devrait être aussi détaillé que nécessaire pour le projet. Il comprend généralement actifs réutilisables, tels que la typographie, les boutons, les nuanciers, les textures et les éléments de page courants.
Nous avons récemment couvert outils de guide de style de vie cela peut vous aider à construire des guides de style de vie à partir de zéro. Ces guides vivants sont plus destinés aux développeurs front-end, mais ils peuvent être tout aussi utiles aux concepteurs. Vous pouvez en savoir plus sur ce sujet dans cet article de Smashing Magazine.
Ma ressource préférée absolue est StyleGuides.io. Il couvre la bases des guides de style pour le web, comprenant exemples vivants et études de cas.
La bibliothèque de modèles de MailChimp est l'un des meilleurs exemples que vous puissiez trouver sur StyleGuides.io. C'est un guide de style en ligne qui définit les éléments de grille, de typographie et de page de MailChimp.
Lorsque vous concevez un guide de style pour une entreprise Web, il est courant de tout mettre en ligne, mais vous pouvez également créer guides internes, et les conserver sur un intranet local ou les héberger en privé derrière une page de connexion utilisateur. La façon dont vous accédez à un guide de style n'a pas d'importance. Ils servent tous le même but en véhiculant des couleurs, des motifs et des visuels spécifiques correspondre au thème d'un projet web.
Pour en savoir plus sur le sujet, consultez ces autres articles sur les guides de style:
- Guides de style frontaux (24ways.org)
- Créer un guide de style de site Web (creativebloq.com)
- Comment faire le guide de style de conception Web parfait (dtelepathy.com)
Ramification en tuiles de style
Tuiles de style sont une bête totalement différente. Ces tuiles sont actifs créatifs utilisés au début de la phase de conception en essayant de clouer une esthétique spécifique.
Le site Web Style Tiles a été créé par Samantha Warren et contient tout ce dont vous avez besoin de savoir. Il y a pas de modèle spécifique pour concevoir une tuile de style. Mais les exemples de Samantha utilisent en-têtes et types de paragraphes, liens, modèles, et choix de couleurs possibles avec un logo de marque.
Lorsque vous travaillez avec des carreaux de style, votre objectif ultime est de: présenter 2-3 carreaux de style différents au client ou au directeur de la création. Ces tuiles sont plus détaillé qu'un tableau d'humeur, encore beaucoup moins détaillé qu'une maquette complète.
Les carreaux doivent être suffisamment détaillés pour donner une idée de la identité et humeur du site. Samantha encourage en utilisant des adjectifs décrire chaque dalle en détail.
Les clients peuvent regarder à travers les différentes tuiles, et sélectionnez leurs morceaux préférés. Ce vous fait gagner du temps lors de la conception, car le client a déjà vu les ressources qu’il aime, ce qui réduit les risques de modifications importantes..
Voici une excellente citation tirée du site Web Style Tiles:
Comparer les carreaux de style à la boîte à outils d'un architecte d'intérieur est une analogie intéressante. Vous ne voulez pas faire d'effort dans une maquette au pixel près, mais seulement pour permettre au client de se rendre compte qu'il déteste la plupart des polices et des couleurs..
Au lieu de cela, utilisez des carreaux de style pour trouver un thème commun ou langage visuel être utilisé sur tout le site. Cela peut inclure image de marque / identité mais pourrait aussi inclure Fonctionnalités de l'interface utilisateur, tels que les menus déroulants ou les boutons CTA.
Vous devriez les utiliser comme actifs livrables au début du processus. Une fois que vous avez terminé une maquette complète, vous n'avez plus besoin de référencer la vignette de style. Néanmoins, au début, les carreaux de style peuvent être essentiels au processus de création en gagner du temps de designer et offrant au client de nombreuses options parmi lesquelles choisir.
Si tu veux plonger plus dans les carreaux de style Découvrez ces articles liés.
- Tuiles de style et comment ils fonctionnent
- Tuiles de style: une alternative aux compositions complètes
- Création de mosaïques de style: une approche simple pour une direction de conception
Guides de style vs tuiles de style
La différence entre les guides de style et les carreaux de style est vague mais nette. UNE guide de style est beaucoup plus détaillé et devrait être utilisé comme guide de référence continu pour l'équipe créative. UNE tuile de style peut être utilisé comme Conseil d'humeur à tracer des idées visuellement pour vous ou pour le client. Ils sont souvent habitués à explorer des idées, et une fois le projet terminé, ils ne servent plus à rien.
Les carreaux de style sont souvent beaucoup plus rugueux sur les bords et ils sont utilisés uniquement au début du processus de création. Un guide de style est destiné à être utilisé tout au long du processus de conception et même après pour référence future pour les autres designers susceptibles de travailler sur le site.
Les deux ont leurs avantages et leurs inconvénients. Les carreaux de style sont rapide et amusant, mais éphémère dans la nature. Les guides de style sont approfondi et se comporter comme une documentation visuelle, mais ils ont aussi nécessite beaucoup de travail.
Alors lequel devriez-vous utiliser? Finalement dépend du projet.
Petits projets comme pour les petites entreprises, les sites Web fonctionnent mieux avec des carreaux de style. Construire un guide de style complet pour un site de petite entreprise nécessiterait beaucoup trop de travail et d'heures facturables. Cela ne vaut probablement pas le coût pour la plupart des clients.
Cependant un grand projet comme la refonte du NY Times bénéficierait à la fois des carreaux de style et des guides de style.
Trouver une langue et une humeur pour un nouveau projet est toujours un processus précieux. C'est ce qui fait les carreaux de style parfait pour presque tous les scénarios.
Vous pouvez aussi vous débrouiller sans créer ni l'un ni l'autre de ces actifs. Certains designers vont à droite des wireframes à maquettes détaillées. Et certains clients ne veulent même pas d'un guide de style, car il ne sera pas utilisé.
Travaillez projet par projet et décidez ce qui convient le mieux à chacun.
Exemples en direct
Terminons cela en couvrant exemples des guides de style et des carreaux de style. J'ai trouvé ces motifs en parcourant Dribbble et je pense qu'ils illustrent la qualité que vous souhaitez dans vos propres guides de style ou carreaux de style..
Guides de style
Ce guide de style Airbnb incroyable a été créé par Derek Bradley. C’est très simple mais cela illustre bien la principaux motifs, couleurs et éléments de page être trouvé dans la conception.
Voici un guide de style numérique beaucoup plus grand créé par le designer Naoshad Alam. Cet exemple est beaucoup plus organisé avec sections pour les couleurs, la typographie, les formulaires, les éléments d'interface et autres fonctionnalités de l'interface utilisateur.
Des guides de style plus détaillés mettraient tous ces éléments de conception sur le Web, et inclure des extraits de code pour chacun.
La designer Cupi Wong a réalisé ce guide pour AfterShip. La typographie, les boutons, le choix des couleurs et les éléments de page courants sont soigneusement élaborés. organisé ensemble en sections.
Cela pourrait également être porté sur le Web et développé de manière beaucoup plus vaste en tant que documentation de référence en ligne..
Le designer d'interface utilisateur Greg Dlubacz a partagé son propre guide de style d'interface utilisateur pour un projet Web. Cette chose est sérieusement énorme. L'aperçu plein écran s'étend sur 21 000 pixels!
Absolument l'un des meilleurs guides de style numériques que j'ai jamais vus. Cela pourrait également être porté sur une page de documentation en ligne pour que les membres de l'équipe puissent s'y référer..
Tuiles de style
Le designer UI / UX, Abdus Salam, a créé cette tuile de style pour un site Web de magasin d'aliments biologiques. C'est très basique avec éléments de design plats, quelques fonctionnalités mineures de l'interface utilisateur, et un palette de couleurs.
Le designer Adrian Cantelmi a été vraiment détaillé avec sa tuile style désinvestissement. Il a les couleurs et la typographie, mais comprend également illustrations vectorielles.
Ces vecteurs aident à définir la marque, l'ambiance et le jeu de couleurs global du site.
La nouvelle conception des conseillers de la Coupe du monde a obtenu sa propre tuile de style avec des caractéristiques très basiques. Quelques icônes, un choix de couleurs et quelques boutons. Simplicité est le nom du jeu.
Si vous pouvez avoir une idée de ce à quoi le site pourrait ressembler en un coup d'oeil alors tu le fais bien.
Voici un exemple amusant de mosaïque de style rejeté utilisée pour un projet de voyage. La designer Brennan Gleason fournit seulement un petit échantillon de la tuile, mais vous pouvez toujours avoir une idée de l'ambiance du site.
Mots finaux
Si vous effectuez une recherche sur le Web, vous trouverez de nombreux autres exemples, astuces et ressources pour guides de construction et carreaux de style. Mais j'espère que cet article peut vous aider à comprendre les deux et à vous aider à comprendre et à créer ces éléments de conception..
