Style Guide: aprenda do zero a criar o seu
Se você já trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que contém todas as informações estéticas e visuais de uma marca, como tipografia, paleta de cores, logo, entre outras.
Publicado em 19 de julho de 2022
Se você já trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que contém todas as informações estéticas e visuais de uma marca, como tipografia, paleta de cores, logo, entre outras.
O Style Guide ou guia de estilo, em tradução livre, é como se fosse um manual de marca, só que voltado para times de produto e tecnologia.
Veremos neste conteúdo o que é um Style Guide, no que ele difere do manual de marca e do Design System, com o qual também pode ser confundido, e como criar o seu do zero. Vamos lá?
Glossário
O que significa Style Guide?
Style Guide é um documento que contém as diretrizes de design de um projeto, seja ele uma empresa, um produto ou uma marca.
Dentro desse documento ficam os direcionamentos acerca do uso de cores, tipografia, grids e breakpoints, além dos elementos de User Interface que são utilizados no produto.
Duas características fundamentais do Style Guide são:
- Todos os envolvidos no produto precisam ter acesso a ele;
- O guia é um organismo vivo, que pode ser modificado quando necessário.
Por que o Style Guide é importante?
É comum encontrar no mercado equipes mais enxutas, principalmente na área de produto, com menos pessoas envolvidas.
Mesmo assim é muito importante que todos saibam as diretrizes de design do projeto no qual estão trabalhando para que não haja ruídos na comunicação, tampouco na interface do usuário.
Essa necessidade fica ainda mais clara quando o time é maior, contemplando mais designers e outros profissionais envolvidos no processo.
Se não houver um guia, cada pessoa pode tomar uma decisão diferente a respeito do design, o que acarreta em erros, perda de tempo, retrabalhos e falta de organização.
E sabemos que num ambiente com muitos erros, desperdício de tempo hábil e falta de organização falta também otimização. Sem otimização, perde-se não apenas tempo, mas dinheiro também.
Style Guide, Brand Guidelines e Design System
No início do conteúdo comparamos o Style Guide ao manual de marca, também conhecido como Brand Guidelines. Eles são dois documentos que, à primeira vista, podem parecer similares, mas têm diferenças cruciais entre si.
O manual de marca, por exemplo, armazena informações importantes sobre uma marca, como tipografia, paleta de cores, maneiras corretas e incorretas de aplicação de logo, além de toda a defesa e storytelling acerca da identidade e nascimento da marca.
O manual de marca é um documento que só vai mudar quando os decisores da empresa acreditarem que é hora de realizar um rebranding, nome que a publicidade dá ao processo de recriação e reformatação de uma marca.
Como definir as diretrizes de estilo de um produto para que todos possam seguir e, dessa maneira, criar uma unidade identitária.
Já o Style Guide não. O Style Guide, como dissemos anteriormente, é um organismo vivo. Isso significa que ele sofrerá mudanças com muito mais frequência do que um manual de marca.
É claro que o guia de estilo não vai ter uma versão nova todos os dias, mas como no caso da área de produto o foco é sempre uma melhor experiência do usuário (UX), se algum dos profissionais envolvidos encontrar uma solução melhor, então o guia vai mudar.
Já o Design System tem uma outra definição. Trata-se de uma ferramenta mais robusta e completa que tem mais dados acerca de uma empresa, como:
- Princípios de design;
- Propósitos, valores e objetivos;
- Identidade visual;
- Componentes, elementos e padrões visuais;
- Regras e outras diretrizes.
Podemos dizer que o Style Guide estará dentro do Design System e, por ser uma ferramenta mais completa, com mais informações e diretrizes, o Design System serve como fonte de consulta para as mudanças do Style Guide.
Passo a passo para criar um Style Guide
Um bom Style Guide deve ter referências sobre cores, tipografia, elementos de User Interface, layouts, grids e breakpoints.
A seguir veja uma lista com o passo a passo para definir cada um desses elementos e criar o seu próprio documento.
1. Cores
- Defina as cores primárias, secundárias e terciárias;
- Se possível, escolha apenas uma cor primária e trabalhe com tons e sombras;
- Defina as cores dos textos, dos backgrounds (devem contrastar entre si), dos títulos e subtítulos;
- Lembre-se que elas são um elemento importante de UX, então é necessário definir também as cores de links, botões de CTA, mensagens de erro, status etc.
- Documente todas essas informações no seu Style Guide.
2. Tipografia
Dentro da tipografia não estão apenas as fontes utilizadas, mas também:
- Os espaçamentos entrelinhas, entre caracteres e entre um bloco de texto e outro;
- Altura e posicionamento das linhas;
- Hierarquia tipográfica;
- Peso e cores.
3. Grids e Breakpoints
- No Style Guide deve estar contemplada a estrutura padrão dos grids para manter a padronização das interfaces;
- Assim como a padronização dos breakpoints, que são os diversos tipos de layouts para cada tela.
4. User Interface
- É importante lembrar dos elementos de interface, como imagens, ícones, logos e outros elementos visuais;
- A padronização das mensagens de erro também entra no Style Guide;
- UX Writing: regras de como deve estar escrito o conteúdo em texto de forma que comunique o passo a passo ao usuário sem ruídos;
- Lembre-se sempre da acessibilidade, conceito importante dentro do design de interfaces que também precisa de padrão.
? Quer ingressar na área de Design e Produto? Vem para a Awari!
A Awari é uma plataforma completa que conta com mentorias individuais, cursos com aulas ao vivo e suporte de carreira na área de Produto.
Conheça nossos cursos de Design e Gestão de Produtos, com intensivos de Product Management, Product Discovery, Product Marketing & Product Leadership.
Saiba mais sobre a nossa jornada personalizada e materiais complementares feitos por especialistas no mercado.
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Awari e Fluency: A Revolução da Educação Começou
Fluency e Awari estão oficialmente juntas e prometem transformar...
Requisitos do sistema para design 3D
Os requisitos do sistema para design 3D são as...
Design de UX: Como ele pode te ajudar a conquistar o sucesso
O Design de UX desempenha um papel fundamental no...
