Como criar um Style Guide para o seu produto

Ju Do Vale
Mar 13, 2017 · 7 min read

Uma boa experiência só é construída quando um produto apresenta consistência em sua interface como um todo.

Image for post
Imagem retirada daqui.

Você já deve ter ouvido falar ou conhece o que é um “ manual da marca”, certo?! Ele é basicamente um conjunto de regras criadas para assegurar a aplicação correta da marca de uma empresa, se estendendo a símbolos, tipografia, elementos visuais, cores e todo tipo de aplicação possível de acordo com o tipo do negócio.

O Style Guide é como isso, mas ele vai além pois se estende a interfaces digitais e como elas devem se comportar.

A sua construção deve ser iniciada antes mesmo de definir o wireframe de uma tela e as vezes, ele até elimina essa necessidade, pois a ideia é criar regras que ao serem estudas permitirão criar templates sem necessariamente precisar visualizar uma página 100% montada ou layoutada.

Claro que esse é o cenário perfeito, mas nem sempre é o acontece. Aliás, é bem comum que produtos tenham seu re-design inciado sem um Style Guide, mas em algum momento, com toda certeza, ele fará falta e será preciso repensar.


Vantagens

Uma das principais vantagens da criação de um Style Guide é o incentivo da formação de equipes multidisciplinares onde os envolvidos, sutilmente, compartilham seus conhecimentos e “ dores”. Além disso, as decisões são tomadas em conjunto, o que minimiza o peso da responsabilidade do Designer definir algo que é impossível de ser feito.

Outras vantagens:

  • todos os envolvidos desenvolvem um senso crítico e acabam cobrando uns dos outros que as regras sejam aplicadas como devem;
  • as regras permitem que as equipes trabalhem mais rápido e com algo grau de eficiência;
  • muito mais foco na experiência do que no visual;
  • incentiva a curiosidade de conhecer novas plataformas, formatos e ideias fazendo com que o produto se desenvolva mais rápido e até mesmo de forma inovadora;
  • equipes fora do Design passam a aceitar mais as definições realizadas pois entendem melhor qual é o real papel do Designer.

Referências

A grande maioria dos softwares que utilizamos no dia a dia possuem Style Guides e são ótimas referências. Veja alguns deles antes de continuar lendo este artigo:

Note que, em todos eles, existe uma “ introdução” aos Principios de Design que cada equipe resolveu seguir. Eles são muito importantes para que todas as pessoas que tenham contato com a construção do produto, olhem para o mesma direção e sejam capazes de construir qualquer coisa sem estarem 100% do tempo ao lado do Designer.

Aliás, isso é muito bom pois o Designer ganha tempo para se preocupar com partes que realmente precisam da sua atenção e não perder tanto tempo com as atividades mais braçais.


Mão na massa

A construção de um Style Guide não é uma tarefa fácil e você irá notar que conforme das regras forem sendo aplicadas, muitos ajustes precisarão ser feitos. Então, uma forma legal de constução, é criar uma equipe multidisciplinar que seja capaz de identificar o meior número possível de itens que precisam de atenção e depois, criar um plano ação para atacar.

1- Princípios de Design:

Na minha visão, qualquer coisa fica mais “fácil” de ser criada quando temos um objetivo. Por isso, sugiro que o Style Guide seja iniciado pelos Principios de Design que o produto deve seguir.

Image for post
Princípios de Design InfoJobs

Mas, não é porque estamos falando de Design que ele deve ser construído apenas pela equipe Design, outras equipes também podem e DEVEM colaborar na identificação de problemas que precisam ser resolvidos/padronizados. Sem contar que, querendo ou não, o Design começará a impor regras e, se as outras equipes forem muito resistentes a segui-las, de nada adianta criá-las. Então, convide-as a colaborar, mas seja o defensor dos padrões e dos usuários.

Depois disso, comece com os elementos básicos pois eles sempre estarão presentes em todo o produto e, se não forem bem definidos, problemas sérios podem acontecer.

2- Tipografia:

Explore diversas aplicações com diversas opções e, para isso, quanto mais exemplos de aplicações possível você conseguir, mais conseguirá simular situações reais do uso e avaliar o peso visual que cada elemento de um texto deverá ter.

Image for post
Tipografia Frontify

Se estiver trabalhando com um produto digital, lembre-se de envolver programadores Front-end neste momento, eles saberão exatamente como orientar as definições de h1, h2, h3, font size, kerning, etc… até porque, eles devem ser seus #BFF, pois são eles que farão aquele layout bonito que você imaginou ser exatamente daquele jeito.

3- Paleta de cores:

Esse também é um tópico que precisa ser muito bem explorado. Se o produto já possuir uma identidade visual, você derá segui-la e propor variações de acordo com as aplicações necessárias.

4- Grids e espaçamentos:

O equilíbrio visual e a viabilidade técnica irão precisar de definições bem minuciosas das possibilidades da distruibuíção do conteúdo. Neste momento também é legal ter um Front-end ao seu lado para ajudar a visualizar no que é e o que não é possível.

Image for post
Grids Mailchimp

5- Ícones

Atualmente os ícones estão sendo muito utilizados e eles ajudam a dar vida as interfaces. Mas, um ícone precisa ter boa visibilidade e leiturabilidade.

Image for post
Iconografia Bootstrap

Sugiro que, com as regras de cores, tipografia, grids e espaçamentos, você crie um grid exclusivo para o desenho deles e escadas/tamanhos fixos de aplicações.

6- Sombras e demais elementos gráficos

Os elementos como sombras, separadores, bordas, etc. ajudam na organização do conteúdo apresentado em um produto. Eles devem ser pensados de modo a promover o equilibro visual entre os componentes sem comprometer a tarefa principal do usuário.

Image for post
Sombras e bordas Marvel

7- Componentes

Nesta etapa você chega ao principal tópico de um Style Guide pois todos os itens definidos anteriormente, irão ditar regras de construções para os componentes que serão utilizados. Também é nesta etapa que as definições já feitas serão testadas e possivelmente ajustadas até que tudo se encaixe perfeitamente e construa a tal “sonhada” consistência.

Image for post
Componentes Salesforce

Mais do que em qualquer etapa, nela você precisará de profissionais de programação Back-end, Analistas e qualquer outra função que esteja envolvida na cronstrução do produto pois eles irão te ajudar na crição, não apenas do visual (que já estará quase 100% definido), mas das regras.

E aqui já estaríamos entrando no assunto documentação, o qual vamos deixar para um próximo artigo, ok?!

8- Animações

Elas são importantes para transmitir mensagens aos usuários. Note as animações que aparecem em seu smartphone quando abre e fecha aplicativos, por exemplo.

Essas animações podem ser definidas por você, mas lembre-se de que elas devem ter um significado e serem definidas em conjunto com um bom programador.


Finalizando…

Até aqui parece que o Style Guide é a resolução para todos os problemas de qualquer produto, não é mesmo?! Porém, tome cuidado com:

  • não tente resolver todo o problema em uma tacada só. Comece por itens críticos e depois vá abrindo o leque;
  • não deixe de reavaliar constantemente tudo o que foi definido;
  • as regras devem ser modificadas conforme a necessidade;
  • quando uma nova necessidade surgir, antes de sair resolvendo o problema, consulte as regras já definidas para ver o que pode ser reutilizado e evitar novas regras desnecessárias ou conflitantes.

Espero que este artigo te ajude a criar um Style Guide MANEIRO para o produto com que trabalha, ou, que te traga bons argumentos para convencer sua equipe a criá-lo. Você também pode tentar seguir metodologias para auxiliar, como a do Atomic Design.

Se você trabalhou com um projeto desse tipo, conta pra gente nos comentários como foi.


SkillsWeb

Somos especialistas em criação e desenvolvimento para web…

Ju Do Vale

Written by

Formada em Design, especialista em UX, Primeira Dama do Jhony, mãe da Lily e criadora do canal Meu AUmigo Cão no Youtube.

SkillsWeb

SkillsWeb

Somos especialistas em criação e desenvolvimento para web (www.skills.com.br).

Ju Do Vale

Written by

Formada em Design, especialista em UX, Primeira Dama do Jhony, mãe da Lily e criadora do canal Meu AUmigo Cão no Youtube.

SkillsWeb

SkillsWeb

Somos especialistas em criação e desenvolvimento para web (www.skills.com.br).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store