6 coisas para colocar em seu guia de projeto agora
Guias de design são uma ferramenta inestimável para maximizar a produção da equipe de projeto e para garantir uma identidade de marca consistente. Analisamos seis componentes essenciais de guias de design bem-sucedidos.
Um guia de design é mais do que apenas um documento que vem com um novo website ou identidade de marca. Um bom guia de design é uma obra de arte em si e tem aplicação prática no trabalho diário de design. Ele mostra o que seu projeto é e aspira a ser. Deve trazer elementos de design, voz e até mesmo código juntos de uma forma que seja gerenciável, utilizável e fácil de entender.
Ele começa com esses seis elementos do guia de design que precisam estar em sua documentação. (Se não estiverem, revise seu guia imediatamente!)
1. Exemplos de identidade de marca
Seu guia de design deve mostrar sua identidade de marca em um formato visual que seja representativo da maneira como você deseja que os materiais de design sejam exibidos. Esse é um exemplo de classe de show, não diga. (Embora haja alguma indicação no guia para acompanhar os exemplos visuais).
Os melhores exemplos são usos de casos reais que exemplificam exatamente o que os padrões de design devem retratar.
Use capturas de tela da página inicial do seu website, da página inicial para dispositivos móveis, do aplicativo ou de qualquer outro lugar quando o design estiver no seu melhor.
O que é bom sobre o Amor para cavalgar O guia de design é que cada página do livreto se parece com o site, criando consistência de marca. O guia ainda traz pequenos elementos do design em foco, como o estilo correto dos ícones de aplicativos em uma exibição precisa.
A melhor parte de usar exemplos reais em um guia de design é que você não precisa criar trabalho extra para exibir elementos visuais; você já as tem na mão. Além disso, os membros da equipe saberão que a diretriz escrita funciona na prática porque existe uma prova visual.
2. Diretrizes de Design
Tudo, desde amostras de cores a paletas de tipografia, formas e uso de elementos de design devem ser claramente delineados.
Por que o design parece e funciona de uma determinada maneira? Qual é a filosofia por trás disso?
Explicar essas coisas pode ajudar os usuários a aplicar o estilo de design com mais precisão e consistência em mídias. Quando se trata de design de site, é uma boa ideia incluir elementos que podem ser diferentes dos correspondentes de marca de impressão e como eles se relacionam. Por exemplo, muitos designers optam por uma paleta de tipografia on-line diferente que imita a marca impressa para maximizar o uso do Google Fonts no Typekit para facilitar o uso.
Certifique-se de anotar quais tipos de letra são substitutos se isso fizer parte da sua estratégia de design.
Ao delinear as diretrizes de design, seja específico quando for importante - as tags H1 são sempre 88 pontos ou as imagens em miniatura são sempre 200 x 200 pixels - mas não comunique detalhes desnecessários. Você quer que os membros da equipe vejam a informação rapidamente e a usem, não sejam sobrecarregados tentando encontrar algo em um mar de especificações.
3. Voz e Personalidade
Diretrizes de estilo de escrita não são tão divertidas de se pensar como outros elementos visuais de um guia de design, mas são igualmente importantes.
Um estilo de escrita descritivo para cópia também pode afetar o visual. Contribui para o tipo de imagem que você escolhe usar e até para elementos como cor e tipo. Todos esses itens combinam para criar uma personalidade geral para a marca.
É como o mundo exterior irá identificá-lo.
Além disso, uma voz forte e personalidade tornam-se parte da identidade visual também. Uma boa personalidade é mostrada nos elementos de design porque os usuários quase conseguem identificar elementos de design mesmo fora do conteúdo do resto da marca. (Pense na Coca-Cola vermelha ou no tipo de assinatura da Disney.)
4. Palavras-chave SEO
Search engine optimization pode ser uma das partes mais faladas e menos divertidas de design do site. Pense nas palavras-chave cedo e com frequência.
Inclua-os na maneira como você fala sobre a marca, em linguagem descritiva sobre o design e coloque uma lista das principais palavras-chave no próprio guia de design.
Urban Outfitters tem uma lista de palavras-chave bem projetada (e divertida) em seu guia de marca. Enquanto a marca de roupas usa muitas palavras-chave diferentes, as palavras mais importantes são destacadas por cor para que você as veja imediatamente.
Uma lista de palavras-chave como essa traz as palavras que você quer dizer em primeiro lugar, sempre que as vir. A maioria das pessoas que escreve uma cópia lhe dirá que, uma vez que você veja ou pense sobre uma palavra em um determinado contexto, ela fica presa na sua cabeça. É exatamente o que a lista de palavras-chave de SEO deve fazer.
Os elementos de design devem se correlacionar a essas palavras-chave em todos os momentos para que o conteúdo esteja relacionado ao design do site.
5. Estilos de Padrão e Elemento
Com tantos meios diferentes on-line (para não mencionar empresas que também projetam elementos impressos), é importante ter guias para todos os usos possíveis.
Isso se aplica a versões estáticas e animadas de logotipos, paletas de cores, padrões e até mesmo elementos de design, como campos de formulário e navegação.
Seu livro de design deve ter uma seção dedicada a esses elementos. E se você quiser que a equipe realmente goste de você, crie um guia de estilo de elemento e padrão em um local on-line para que os usuários possam copiar e colar elementos apenas para uso rápido.
6. Snippets de Código
Cada guia de design do site precisa incluir muitos trechos de código comumente usados. De botões a animações pequenas a efeitos deslizantes, esses pequenos pedaços de código adicionam horas ao seu fluxo de trabalho diário, eliminando a necessidade de inserir manualmente as especificações com cada novo elemento.
Isso funciona para tudo, desde postagens em blogs - adicionar um bloco de código para imagens que os blogueiros podem copiar e colar apenas para o tamanho e o recorte certos - para efeitos de interface de usuário mais elaborados.
O Firefox inclui informações de componentes de design em seu guia de design para a marca e o uso de logotipo recentemente revisados. Mesmo que você não forneça uma biblioteca completa de trechos de código, lembre-se de incluir algumas informações básicas, como onde usar H1 a H4 nas páginas do design do site e como estilizar botões e imagens.
Conclusão
A melhor parte sobre um guia de design é que ele não precisa ser um documento estático. Pode crescer e mudar à medida que sua marca e identidade visual fazem a mesma coisa.
A maioria dos designers - em particular, os designers de sites - estão optando por versões on-line de um guia de design para que fazer alterações e pegar códigos e snippets de cores seja rápido e fácil. Considere adicionar uma página de guia de estilo ao seu site e lembre-se de consultá-la (e atualizá-la) com frequência.