Styleguides são o novo Photoshop

Já faz um tempo que ando praticando isso na agência com o time de Design e Tecnologia em alguns projetos, mas só agora tive a chance de parar e escrever (brevemente) sobre isso.

A frase-título do post é de Stephen Hay, o designer-desenvolvedor que também fez algumas palestras sobre o assunto.

Segundo ele, seu método preferido para criar interfaces é o sketching. Ele sequer possui uma licença do Photoshop, porque o considera impraticável para Web Design. Às vezes ele utiliza um software de edição de imagens, mas mais para criar elementos isolados do que para criar um grande layout de milhares de pixels.

“Funcionava bem no passado”, diz Stephen. Mas o problema do Photoshop para Web Design, nos dias de hoje, é que as coisas normalmente ficam mais bonitas no JPG do que no navegador. O Photoshop permite que você “minta”, arrumando os pixels para lá e para cá. E quando o desenvolvedor começa a trabalhar, ele precisa fazer novamente tudo o que o Designer fez usando o editor de imagens.

Soma-se a isso o problema dos websites serem visualizados em diferentes dispositivos (tablets, celulares) além do tradicional desktop.

Leia também: O começo do fim dos wireframes

Foi aí que ele passou a fazer os layouts no próprio navegador, usando CSS e HTML.

Alguns pontos positivos dessa técnica, segundo ele:

  • Não toma mais tempo do que o Photoshop.
  • Automatiza tarefas triviais.
  • Deixa a aparência do site mais realista.
  • Representa melhor os diferentes estados dos elementos (mouse-over, clique, drag).
  • Gratuito e livre: todo mundo tem um navegador e um editor de HTML.
  • Sem surpresas negativas para o cliente.
  • O material é reaproveitado pelos desenvolvedores.
  • O site pode ser responsivo.

O vídeo completo da palestra de Stephen para a SmashingConf você confere abaixo: