Indiehacker from Brazil   EasyRetro.io, ImageAI.app - All Projects

< Go back

Guia de estilo vivo

22 Mar 2014

"Guia de estilo"

Guia de estilos vem sendo usados no mundo do design a muito tempo. Eles servem para documentar o trabalho que o designer faz referente a um produto, marca ou serviço. Ele é usado para diferentes finalidades:

  • Showcase do trabalho para o cliente
  • Guia visual - cores, logo, tipografia, tom, diagramação
  • Aplicações, maneira correta e não correta de aplicar a marca
  • Componentes para aplicações web
  • Etc…

Guia de estilos podem se tornar documentos muito detalhados de uma aplicação web e podem acabar perdendo seu propósito pois ficam esquecidos no HD e nunca mais são utilizados ou atualizados.

Pós PSD

A nova realidade da web traz um maneira diferente de trabalharmos. Um site ou aplicação precisa suportar diferentes tamanhos de tela e o número aumenta mais a cada dia.

Isso faz com que o design mude, pois agora não é mais possível fazer o design numa ferramenta estática como o photoshop. Precisamos nos adaptar e encontrar novas ferramentas para esse novo modelo.

Guia de estilo vivo

Uma das maneiras para se resolver esse problema é criar um guia de estilo vivo. Basicamente ele é um guia de estilo que é conectado ao CSS da sua aplicação. Ou seja, quando você alterar um estilo da aplicação o guia de estilo é atualizado automaticamente, pois ele e a aplicação são a mesma coisa.

A idéia é ter uma página com o estilo inteiro da aplicação resumido nela. Botões, listas, tabelas, icons, forms, notificações, cores, tipografia, componentes, etc…

O guia de estilo vai te ajudar a manter uma consistência na aplicação e vai servir como um guia de design para o time. Outro ponto legal é ajudar UI developers provendo code snippets que podem ser usados rapidamente.

O guia de estilo é uma página html/css normal, então nele mesmo você poderá criar os estilos responsivos da sua aplicação e fazer as mudanças necessárias para testar se seu site é responsivo ou não.

Como criar o seu

Eu vejo duas maneiras de criar um guia de estilo vivo:

Pode-se usar uma ferramenta como o KSS. O KSS usa comentários no CSS para gerar o guia de estilo. Outro exemplo é o Kalei.

A outra maneira é criar seu guia de estilo usando html padrão. Dessa maneira pode-se se usar um boilerplate ou criar a partir do zero.

Exemplos

Aqui tem alguns exemplos de guia de estilo para se basear:

Criados por mim:

Outros:

Esse é um gerador de guia de estilo automatico por url (bem simples mas interessante)

Outra ferramenta interessante mas mais simples é o Style Tiles. Que é basicamente um resumo do estilo de uma página/aplicação pensando como funciona em diferentes dispositivos.

Mais informações