Como criar um Style Guide para o seu produto

Uma boa experiência só é construída quando um produto apresenta consistência em sua interface como um todo.
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.

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.

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.

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.

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.

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.

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.