Os guias de estilo, também conhecidos como bibliotecas de padrões, são uma ótima maneira de garantir que seu design continue conforme o esperado à medida que seu site cresce ou à medida que novos membros da equipe trabalham em um projeto da web. Cada estilo, ou padrão, é um agrupamento de marcações e estilos para os elementos de design do seu site.

Os guias de estilo modernos geralmente são exibidos como uma página da Web real, que mostra os diferentes elementos em um design de site ou aplicativo. Quando várias pessoas ou mesmo várias equipes estão trabalhando em um projeto da Web, um guia de estilo elimina o trabalho de adivinhação de como os elementos visuais devem ser. É uma ótima maneira de manter todos na mesma página para a consistência do projeto.

Mantenha sua equipe no caminho certo e seu código SECO

Além do design visual, um guia de estilo ajuda a garantir que o arquivo CSS não fique fora de controle. Todos nós já experimentamos código repetitivo, então vamos nos esforçar para manter o código sustentável e sem nada absolutamente necessário. Se todos em sua equipe puderem ver todos os estilos em um só lugar, ficará prontamente aparente quais existem atualmente para que não sejam duplicados na folha de estilos.

Como seu guia de estilo serve como uma coleção que inclui o design de módulos e outros elementos de design, é fácil ver se os novos elementos de design se enquadram nos padrões estabelecidos.

O que deve ir em um guia de estilo da web?

Como sabemos, o web design tem a tendência de ser um pouco selvagem. A boa notícia é que o web design eficaz, especialmente ao usar um guia de estilo, está sob seu controle. Os guias de estilo variam de muito simples a muito complexos. Eu incluí algumas idéias aqui para você começar.

Paletas de cores

É uma ótima ideia incluir amostras que tenham a cor hexadecimal anotada. Seu futuro eu com o tempo triturado agradecerá! Não consigo me lembrar de quantas vezes já perguntei ou me perguntaram: “O que é essa cor hexadecimal mesmo?” Ter uma referência rápida certamente será útil para todos.

Tipografia e hierarquia

Os espaços reservados de cabeçalho descritivos podem ajudar muito sua equipe a entender em que tipo de contexto os elementos do seu layout precisam ser usados.

Os guias de estilo também devem incluir uma hierarquia de cabeçalho sugerida. Qual é o h1, h2, h3 e assim por diante? Palavras descritivas como cabeçalho principal, subtítulo e cabeçalho do widget da barra lateral também eliminam muitas suposições futuras.

Não se esqueça de incluir elementos tipográficos menos comuns, como aspas em bloco, por exemplo. Você precisa especificar todos os exemplos de texto, mesmo os raramente usados. Se você tiver um determinado cabeçalho e estilo de corpo para citações em bloco ou depoimentos, especifique-os com os mesmos detalhes que você faz para elementos mais usados.

Imagens

Inclua um tratamento geral de imagens para seu projeto. As imagens exigem bordas ou um efeito de opacidade exclusivo? Existe uma interação de foco? Se sim, coloque isso no seu guia de estilo. Se houver vários tratamentos, inclua cada um e defina quando determinados tratamentos são usados.

Estilos de link, navegação e formulário

Do ponto de vista do UX, os links, a navegação e os elementos de formulário são três patos muito importantes para se ter em sequência. Você sem dúvida sabe que links de texto, botões e estilos de navegação precisam ser incluídos em seu guia de estilo. No entanto, pode ser fácil esquecer de incluir instâncias dos estilos normal, hover, visitado e ativo para cada um deles. Obtenha-os documentados para garantir a consistência em todos os detalhes do seu site.

Quando ótimos estilos se fundem com o formulário, não há melhor maneira de exibir todos os elementos do formulário da web do que em seu guia de estilo. É uma ótima maneira de mapear e fazer um inventário de todos os elementos do formulário, o que funciona, o que não funciona e o que está faltando.

Especificamente, aqui estão alguns componentes-chave a serem incluídos para estilos de formulário:

• Estado do campo de entrada normal
• Estado do campo de entrada focado
• Estilos de rótulo
• Texto do espaço reservado do formulário
• Texto ativo do usuário
• Texto digitado pelo usuário
• Botão de envio
• Mensagem de erro
• Estilos de caixa de seleção

Mais ideias para incluir no seu guia de estilo

É difícil listar todos os elementos que você pode encontrar, mas aqui estão mais alguns que podem ser benéficos:

• Caixa de chamada
• Links horizontais
• Elementos do comentário
• Tags de categoria
• Modelo pop-up

Como fazer seu próprio guia de estilo da web

Se você for o sortudo por enfrentar a façanha heróica de criar um guia de estilo do zero, tenho algumas considerações úteis para você.

Pessoalmente, gosto de começar com um arquivo HTML em branco e partir daí. Vincule este guia de estilo ao CSS do site ou aplicativo real. Dessa forma, as alterações são refletidas em ambos os lugares e você não precisa se preocupar em manter dois arquivos CSS.

Comece fazendo um inventário de todos os elementos do seu site e, em seguida, adicione a marcação exata necessária para cada um deles ao seu guia de estilo. Parece intimidante?

Primeiro, avalie a grade da página e, em seguida, preencha o guia de estilo com elementos importantes, como tipografia e paleta de cores, adicionando mais padrões à medida que você trabalha. Mais padrões de design podem incluir coisas como imagens, citações em bloco, estilos de barra lateral, botões e estilos de formulário.

Confie em mim. Este é um tempo bem gasto. Também é bom lembrar que nada é permanente e que tudo pode ser facilmente ajustado e ampliado.

Se você está buscando velocidade e a entrada manual de todos os estilos não é para você, existem algumas ótimas ferramentas por aí que facilitam a criação e o uso de padrões reutilizáveis.

Por exemplo, o Pattern Primer de Jeremy Keith irá gerar uma lista de todos os padrões em uma pasta. Esta é uma ferramenta PHP simples para transformar trechos de código em uma biblioteca de padrões. Você verá o padrão renderizado como HTML.

Outra ótima opção é o KSS de Kyle Neath, que também é uma ótima ferramenta para documentação de guias de estilo. Esses estilos automáticos gerados são um conjunto de diretrizes para ajudá-lo a produzir um guia de estilo HTML vinculado à documentação CSS. O KSS foi projetado para funcionar bem com pré-processadores CSS e acomoda muitos frameworks CSS.

Como todos sabemos, um site nunca está pronto. Se forem necessários novos elementos, é fácil expandir seu guia de estilo de vida simplesmente adicionando a ele.

Seu guia de estilo inicial pode não ser idêntico às páginas que você eventualmente criará, mas é uma ótima oportunidade para testar novos estilos e é especialmente útil para projetar para vários navegadores.

Exemplos de guias de estilo

Quer alguns exemplos da vida real de ótimos guias de estilo? Você entendeu:

Código para a América
Mailchimp
Força de vendas

Ao fornecer consistência em seu design, seu guia de estilo facilita a expansão do site e futuras melhorias na web. À medida que os estilos são adicionados e modificados, este documento é uma ótima maneira de manter a equipe informada e exibir seu projeto de estilo.