O que precisa estar no seu guia de estilo? (E como você o aplica?)
Todo mundo com um site precisa de um guia de estilo. É simples assim. Se você deseja instilar mais consistência em seu projeto e colocar todos na mesma página, seu guia de estilo se tornará inestimável.
Agora que temos isso fora do caminho, o que exatamente você coloca nesse guia? E como você garante que outras pessoas da equipe sigam as regras para que sua presença visual mantenha consistência? Isso é um pouco mais complicado. Vamos mergulhar no tópico hoje.
Visão geral da marca
Criar um guia de estilo a partir do zero pode ser bastante assustador se você nunca o fez antes. Os iniciantes podem se beneficiar ao encontrar um guia que gostem - o MailChimp tem um dos melhores por aí e o disponibiliza sob uma licença Creative Commons - e usa-o como modelo para começar.
A maioria dos guias de estilo possui duas partes:
- Diretrizes de redação
- Diretrizes visuais
Cada conjunto de diretrizes é igualmente importante e deve fazer parte do seu guia geral de estilos. Juntar os elementos estabelecerá uma identidade geral. Cada marca, empresa ou site é um pouco diferente também. Escolha um tom e estilo que funcionem bem em termos de cópia e recursos visuais, mas que também estejam relacionados a você e seu público como um todo.
Considere os usuários e as partes interessadas ao estabelecer uma identidade. A marca é o que eles querem e esperam? Eles podem se relacionar com isso? Eles querem interagir com isso?
Voz e Tom
Vamos nos concentrar principalmente nos aspectos visuais do seu guia de estilo, mas a voz e o tom são importantes. Parte de sua identidade está na maneira como você "conversa" com os usuários. Esse estilo é formal ou casual? É detalhado ou mais sucinto?
Escreva seu guia de estilo da mesma maneira que a cópia em seu site. Isso ajudará a informar sua equipe sobre o que é esperado e como o idioma deve contribuir para a identidade da marca.
Essa voz e tom devem ser usados em todas as suas comunicações. Volte aos contornos do MailChimp para uma visão abrangente da construção da voz da marca. Observe a maneira como a empresa fala sobre seu mascote, por exemplo: “Freddie é nosso mascote. Nós não o usamos em combinação com o nosso logotipo. Freddie sempre está certo, e ele sempre pisca.
"Regras" e uso
Seu guia de estilo deve ser o seu manual de design. (Isso não parece mais amigável do que "regras"?)
Ele deve descrever como e quando usar tipo, cor e todos os outros tipos de elementos de design de uma maneira fácil de entender. Aqui está uma lista de verificação para incluir:
- Paleta de cores, incluindo valores e matizes aceitáveis
- Paleta de tipografia, com todos os pesos, tamanhos, avanço e uso aceitáveis
- Logotipo, incluindo diretrizes para tamanho e localização
- Estilos de ícone ou elemento (isso inclui tratamento de elementos de botões a ícones de compartilhamento de mídia social)
- Ortografia, escolha de palavras e estilo de cópia (Que diretrizes editoriais você deve seguir? APA, AP, outra coisa?)
- Diretrizes de fotografia, incluindo cor, corte e presença visual
- Informações de SEO, como tags e palavras-chave
- Padrões de grade (para web e impressão)
- Considerações sobre espaçamento (se o design estiver frouxo ou apertado)
- Ponto de contato (onde os membros da equipe podem ir com perguntas ou esclarecimentos)
Conceitos Simples e Específicos
Agora, aqui está a parte mais difícil. Você precisa pegar todas as informações acima e resumir em conceitos simples, específicos e acionáveis.
- Não exagere no conteúdo quando se trata de seu guia de estilo. Esta é uma referência visual; projetar dessa maneira.
- Agrupe itens relacionados em páginas para referência rápida: uma página para cores, outra página para tipografia, uma página para fotografia etc.
- Mostre exemplos de como as coisas devem ser. Não explique as coisas por escrito quando uma imagem for suficiente.
- Forneça detalhes que sejam utilizáveis. As amostras de cores, por exemplo, devem incluir misturas RGB (ou HEX) e CMYK, para que a cor seja consistente em todos os usos.
- Divida partes do design para mostrar como os elementos devem ser usados.
Trechos e exemplos
Quer o seu guia de estilo seja impresso ou um documento digital ou baseado na Web, ele deve estar equipado com ferramentas utilizáveis. Um dos elementos que pode ser incrivelmente útil são exemplos de coisas que as marcas fazem e não fazem. Pode ser fácil enfatizar o que você quer ver com a marca visualmente.
Em seguida, crie um catálogo de peças facilmente acessíveis. Crie bibliotecas (ou um conjunto de elementos comuns, dependendo do uso do software) para todos os membros da equipe. Salve os arquivos em um local comum, de fácil acesso e para que as alterações sejam relativamente fáceis de fazer.
Forneça uma lista de ferramentas para software baseado em nuvem para todos os envolvidos no projeto. (Isso inclui links, nomes de usuário e outras informações básicas.) Verifique se todos os pacotes de fontes, logotipos e arquivos de imagem estão em um local comum e todos os usuários sabem onde estão. (Mantenha um backup em outro lugar também, para o caso de alguém cortar e salvar o original.)
Crie uma lista mestre para trechos de código fáceis de copiar e colar em projetos. Não faz sentido criar e recriar tudo de novo a cada vez. Elementos comuns devem morar em um local compartilhado ao qual todos tenham acesso.
A última parte disso é lembrar de evoluir. As coisas vão mudar - e deveriam. A Smashing Magazine tem um maravilhoso estudo de caso que descreve um "guia de estilo de vida".
Aplicar o Guia de estilo
Finalmente, a maior questão é "como fazer as pessoas seguirem as regras?" Você já está em um bom caminho, se tiver projetado o guia seguindo algumas das orientações acima, principalmente a seção sobre o uso de conceitos simples e específicos.
O guia deve ser fácil de seguir e utilizável (assim como seu site). O idioma deve ser simples e não microgerenciável, para que as pessoas queiram seguir as diretrizes.
Deve ser um guia que deixe bastante espaço para flexibilidade e design real. Projetar dentro de um conjunto de restrições pode ajudar os membros da equipe a liberar sua criatividade enquanto cria algo que se parece com a sua marca. O guia de estilo deve ter um proprietário também. Essa é a pessoa que aprova atualizações e alterações e pode responder a perguntas sobre decisões de design. O "proprietário" pode ser um indivíduo ou equipe, dependendo do tamanho da sua organização.
Conclusão
Você já tem um guia de estilo ou está na hora de um novo? Este é um projeto que você deve abordar anualmente, para que o guia esteja sempre atualizado. (Você não pode culpar um membro da equipe se tiver padrões antigos flutuando por aí.)
Você tem ou viu alguns excelentes guias de estilo? Eu sou um nerd total por essas coisas e adoraria vê-las. Você pode me acessar no Twitter ou me enviar um e-mail.
){kind=link}