Definindo Estilo.

Uma ferramenta para criar e manter style guides.

Style guides existem para manter aplicações de identidade visual coesas. E eles são especialmente valiosos agora, quando nós precisamos desenhar para mais plataformas e temos mais tamanhos de tela para acomodar. Cada projeto demanda consistência, e para cada caminho que projetamos é mais difícil evoluir e manter uma identidade de forma consistente.

A qualidade do produto final depende do quanto a equipe entendeu a visão por trás do produto e o seu sistema próprio. Perceber o produto como um todo é essencial. Isso é mais fácil para equipes menores que tem algumas peças visuais e linhas de código como referência. Entretanto, em grandes projetos as necessidades mudam. Em pequenos projetos o objetivo principal é a entrega, em grandes projetos é o processo de trabalho. Por isso o style guide é tão importante.

Para que seja mais fácil para as equipes ficarem alinhadas em termos de estilo, nós desenvolvemos o Styleguide no Github — um serviço que permite pessoas criar e manter seus próprios style guides.


Introduzindo o Styleguide.

É comum style guides serem criados em arquivos PDF, o que significa rever todo o documento quando o mesmo precisa ser atualizado. Enquanto style guides baseados em HTML são mais fáceis de manter, eles apenas servem usuários que sabem programar.

Ambos os métodos tiveram problemas que os fizeram parecer fora de época e incapazes de se manter à altura das demandas atuais do design. Logo, o Styleguide aprimora esses pontos e automatiza o processo de forma que os membros de uma equipe possam se focar nas suas tarefas sem distração.

Quando nós fizemos testes de usuário durante o desenvolvimento do Styleguide, descobrimos que ao invés de criar apenas para desenvolvedores, nós deveríamos desenvolver o Styleguide para acomodar três tipos de usuário. Ao criar para a pessoa que precisara de um style guide na sua forma mais simples, nós acabamos por satisfazer todos os tipos de usuário, como as seguintes características:

  • Pouco conhecimento de código (geralmente o estagiário ou designer)
  • Algum conhecimento de código (prototipador ou desenvolvedor júnior)
  • Bom conhecimento de código (desenvolvedores)

Usando o Styleguide.

O Styleguide pode ser útil em dois cenários diferentes:

Começando com o Styleguide.

Frequentemente, a equipe de desenvolvimento e design trabalham juntas do início ao fim. Enquanto o design está sendo criado o Styleguide está sendo moldado com elementos básicos como cor e tipografia.

Ao invés de o ponto de partida para o desenvolvedor ser um projeto a parte, cada bloco, módulo ou componente é desenvolvido dentro do Styleguide. Você também pode reutilizar esses módulos durante o projeto.

Nesse caso o Styleguide e o produto estão sempre em sincronia. O Styleguide se torna a fonte de verdade para toda a equipe.

Compartilhando o Styleguide.

Se você já tem um produto, o Styleguide serve um propósito um pouco diferente. Outra equipe pode se tornar responsável pelo desenvolvimento e eles precisam manter a identidade do produto, fazendo com que os elementos dentro do Styleguide sejam essenciais para aqueles que não conhecem o trabalho.

Conteúdo editado em arquivos .json.

Work in progress.

O Styleguide é uma ferramenta viva, e funcionalidades estão sendo adicionadas e desenvolvidas constantemente. Hoje, é uma ferramenta focada em minimizar trabalho repetitivo se baseando em ações comuns dos usuários.

O que oferece.

  • Um clique para começar o Styleguide, automaticamente.
  • Um clique para compilar para HTML estático.
  • Menu gerado automaticamente a partir da estrutura de pastas.
  • Arquivos dos módulos importados automaticamente a partir da estrutura de pastas.
  • CSS e Javascript globais gerados automaticamente.
  • Reload automático.
  • Demonstração de breakpoints.
  • Breakpoints configuráveis.
  • Última data de alteração automática.

A seguir.

Criar páginas dentro do style guide, ou tornar fácil o trabalho de usá-lo junto com tecnologias diferentes, como frameworks client-side, é essencial. Conforme nós utilizamos o Styleguide em nosso próprio trabalho, nós vimos como podemos reduzir o tempo de desenvolvimento e construir as seguintes funcionalidades para a próxima fase:

  • Módulos como páginas e não somente blocos.
  • Reutilização de módulos (ou átomos e moléculas) dentro do Styleguide de forma amigável.
  • Biblioteca de módulos, para que possam ser reutilizados em outros Styleguides.
  • Sub-menus e hierarquia de módulos.
  • Layouts diferentes para o Styleguide.
  • Integração com ferramentas externas.
  • Edição ao vivo, tornando a criação mais fácil e minimizando a necessidade de código.

Open Source.

O processo de trabalho (workflow) de produtos digitais é algo que sempre pode ser melhorado. Abrindo o Styleguide para a comunidade nos permitirá criar cada vez mais formas de facilitar a integração com outros tipos de projetos e linguagens.

Para aprender a usar a ferramenta e saber todos os detalhes, vá para o site do projeto ou vá direto para o Github.

Este artigo é uma tradução da versão original em Inglês, postada no Huge Ideas.

Like what you read? Give Caio Vaccaro a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.