Nesta postagem, examinaremos mais de perto as diferenças entre um sistema de design e um guia de estilo, o que incluir em cada um e quando colocá-los em uso.
Ao desenvolver um site ou aplicativo, pode ser difícil manter tudo em ordem quando se trata do design da interface do usuário.
Claro, você pode usar o Google Docs ou outros rastreadores de notas para documentar seus códigos de cores HEX ou opções de tipografia. Mas e algo como design de botão? Como você garante que todos os seus botões sejam projetados da mesma maneira? E que botões com finalidades diferentes e distintas são desenhados corretamente?
Um guia de estilo pode ajudar nisso, mas pode não ser suficiente.
Sites ou aplicativos maiores, experiências omnicanal e equipes de produtos em crescimento adicionam camadas extras de complexidade que os guias de estilo simplesmente não conseguem resolver. É aí que um sistema de design se torna útil.
O que é um guia de estilo?
Um guia de estilo é um documento que descreve e descreve os principais elementos visuais e estilos usados por uma marca. Pode ser um conjunto independente de diretrizes ou pode aparecer dentro de um sistema de design maior.
O Guia de estilo do Yelp tem uma boa analogia de como funciona.
Elementos do guia de estilo, como cores e fontes, são os ingredientes. Os designers consultam o guia de estilo para saber quais ingredientes usar ao fazer uma determinada “receita”.
Mas é aqui que o guia de estilo normalmente termina. Mostra-nos quais são os principais ingredientes e orientações básicas de como utilizá-los. Contudo, as instruções completas, os pratos prontos e os livros de receitas (ou seja, o produto digital e a experiência do usuário) não são abordados.
Para algumas marcas e equipes de design, isso é suficiente.
O objetivo de um guia de estilo
Um guia de estilo fornece aos designers um conjunto de diretrizes básicas para usar ao criar recursos visuais para uma marca. Isso se aplica a tudo, desde o design de um site até a criação de brindes comerciais e tudo mais.
Porém, não são apenas os web designers que usam guias de estilo. Levar a Guia de estilo do Disquspor exemplo.
Este microconjunto de diretrizes da marca é útil para quem trabalha na mídia. Pessoas como jornalistas, revisores e influenciadores referem-se a esses recursos visuais e ativos para download para garantir que usam a versão correta da marca de uma empresa ao mencioná-la online.
Portanto, um guia de estilo serve a dois grandes propósitos. O objetivo principal é ajudar os designers a imbuir um produto digital com estilos e elementos visuais consistentes. O objetivo secundário é garantir que a identidade visual de uma marca seja representada corretamente na web.
O que incluir em um guia de estilo
Quer seja um funcionário ou um meio de comunicação consultando seu guia de estilo, não deve haver dúvidas sobre como lidar com os elementos da marca, como logotipo, cores, tipografia e iconografia. Mas isso geralmente não é suficiente para ajudar os designers a criar a IU do seu produto digital.
É por isso que alguns guias de estilo incluem especificações adicionais relacionadas à grade, espaçamento, layout, ícones, animação e muito mais. Incluir uma seção sobre acessibilidade também está se tornando cada vez mais popular. O mesmo ocorre com uma pequena coleção dos componentes de UI mais comumente usados.
Se você der uma olhada na web, notará que os guias de estilo variam de marca para marca. Por exemplo, o guia de estilo para Drupal inclui diretrizes para o seguinte:
- Princípios de design
- Tipografia
- Cores
- Marcação
- Grade
- Acessibilidade
Há também uma seção chamada Palavras e frases que estabelece diretrizes de estilo de conteúdo para a marca Drupal.
O diretrizes de marca para Frontifypor outro lado, incluem o seguinte:
- Identidade da marca
- Logotipo
- Cor
- Fonte
- Imagens da marca
- Imagens do produto
- Citações e tamanhos de imagens
Há também uma seção dedicada à UI “Material”. Ele contém diretrizes para experiências do usuário fora do produto digital primário, como papelaria, embalagens, brindes e assinaturas de e-mail da empresa.
Em última análise, o guia de estilo é seu para detalhar. Comece adicionando os elementos principais como logotipos, cores e fontes. Então construa a partir daí.
Quando criar um guia de estilo
A menos que você esteja construindo um site pequeno, pessoal e não comercial, não há realmente nenhum bom motivo não para criar um guia de estilo.
Oferece um local para documentar as decisões de design mais críticas em relação à identidade visual da sua marca. Mesmo se você trabalhar sozinho, achará valioso ter todas essas informações em um só lugar.
Além do mais, um guia de estilo é um ótimo recurso para desenvolver e compartilhar com os clientes. Quer você continue trabalhando para eles ou não após lançar seu site ou aplicativo, o guia de estilo pode garantir que suas decisões iniciais de design sejam mantidas. E quando for necessário fazer alterações, o documento pode ser atualizado para que todos que o utilizarem no futuro permaneçam na mesma página.
O que é um sistema de design?
Um sistema de design é a linguagem visual de uma marca. O guia de estilo é apenas uma pequena parte dele. Os sistemas de design são kits de ferramentas completos que também incluem princípios de design, componentes reutilizáveis, bibliotecas de padrões, recursos de design e muito mais.
Vamos continuar de onde paramos com a analogia do Yelp.
Se os elementos do guia de estilo são ingredientes, as instruções da receita seriam os vários componentes que você coloca na IU, como botões, campos, cartões, listas, avatares e muito mais. Também incluiria padrões que combinam esses componentes em elementos úteis e interativos na página.
Os “ingredientes” do guia de estilo garantem que cada componente e padrão seja projetado com uma aparência consistente. As bibliotecas de componentes e padrões garantem que você reúna tudo na ordem e maneira corretas para obter o melhor resultado.
Outras partes do sistema de design – como trechos de código, tokens de design e recursos – ajudam você a seguir as instruções para que você possa transformar a receita em um excelente produto final.
O objetivo de um sistema de design
Consistência, clareza e qualidade são os resultados naturais de trabalhar com um sistema de design. No Sistema de design de sementes página inicial, o Sprout Social explica por que isso é tão vital:
“Uma presença de marca distinta e consistente nos diferencia dos concorrentes, cria confiança e familiaridade com nossos clientes e, eventualmente, leva ao valor da marca a longo prazo.”
Os sistemas de design não são úteis apenas para documentar como criar um único produto digital. Embora muitas vezes seja assim que eles começam.
Um sistema de design fornece todas as instruções e diretrizes necessárias para reunir recursos visuais para sua marca. Isso o torna um kit de ferramentas indispensável para dimensionar marcas. Por exemplo:
- Uma loja que espera aumentar seu estoque exponencialmente ano após ano
- Uma equipe digital que está expandindo e integrando novos funcionários para atender às novas necessidades do negócio
- Uma marca que está se expandindo para novos canais e precisa de uma maneira rápida e eficaz de fazer isso
Com o crescimento vem a complexidade. Quanto maior for o seu produto, equipe ou alcance, mais difícil será manter tudo correto e consistente quando se trata de design de IU. É por isso que os sistemas de design são essenciais se seus objetivos são crescimento e escalabilidade.
O que incluir em um sistema de design
Assim como os guias de estilo, o que você decide colocar no sistema de design depende da sua marca e do que você está construindo. Dito isto, os sistemas de design são kits de ferramentas abrangentes, portanto a maioria inclui o seguinte:
- Introdução da marca
- Princípios de design
- Guia de estilo
- Biblioteca de componentes
- Biblioteca de padrões
- Tokens de design
- Recursos como bibliotecas, modelos e ferramentas
Alguns também incluem uma seção sobre conteúdo como o Sistema de Design Atlassiano faz.
Esta seção fornece diretrizes sobre como lidar com:
- Linguagem inclusiva
- Linguagem e gramática
- Vocabulário
- Princípios de voz e tom
- Diretrizes para redação
- Estilos de escrita
Esta é apenas uma maneira pela qual um sistema de design atende uma equipe de produto interdisciplinar. Quando incluída, uma seção sobre tokens de design ajuda a preencher a lacuna entre as escolhas estéticas do web designer e a implementação delas no desenvolvimento do produto.
Você encontrará um ótimo exemplo do que fazer com tokens de design em Sistema de design Coral da Talend.
É por isso que os sistemas de design são comumente chamados de fonte única de verdade para equipes distribuídas. Eles permitem que qualquer pessoa entre e tome decisões seguras quando se trata de projetar produtos, ativos e experiências digitais para uma marca.
Quando criar um sistema de design
Está claro como os sistemas de design podem ser vantajosos para as equipes digitais.
Eles fornecem aos designers uma linguagem visual consistente para usar no desenvolvimento dos ativos de uma marca. Eles reduzem falhas de comunicação, interpretações erradas e erros. Eles também tornam mais fácil e rápido projetar e atualizar interfaces visuais.
No entanto, eles exigem muito trabalho para construir e manter. Portanto, é importante considerar se vale a pena investir antes de desenvolver um para sua marca.
Se você estiver projetando um site para um projeto pessoal, para uma pequena empresa ou com conteúdo estático que provavelmente não mudará ou se expandirá muito, então um sistema de design provavelmente não será benéfico para você.
Conclusão
Embora não seja possível ter um sistema de design sem um guia de estilo, você pode ter um guia de estilo sem ele. E há vários motivos pelos quais você pode escolher a última opção.
Um guia de estilo é uma ótima maneira de acompanhar as decisões de design que constituem a base da identidade visual da sua marca. E se você não tiver certeza sobre a necessidade de um sistema de design, um guia de estilo não exige tanto comprometimento de tempo. Você também não precisará obter a adesão de outros membros da equipe e partes interessadas.
Então, no mínimo, planeje fazer um guia de estilo para cada projeto profissional em que você trabalhar.
Agora, se você está começando a trabalhar em um grande projeto – seja um site corporativo, um grande mercado de comércio eletrônico, um aplicativo móvel, etc. – há boas chances de você se beneficiar de um sistema de design. Com mais peças móveis, colaboradores, revisões e complexidade geral, um sistema de design é a única maneira de garantir que o que você cria seja executado consistentemente no mais alto nível.
Confira nosso Guia 101 de sistemas de design para saber mais sobre os benefícios da construção de sistemas de design, o que incluir no seu e ver mais exemplos de sistemas de design em ação.
