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:
O grande problema é que a maioria dos designers não sabem uma vírgula de html. Para isso acontecer é necessário que eles primeiramente tenham interesse em aprender como se desenvolve uma interface. Não precisa necessariamente saber fazer, mas é interessante entender as possibilidades.
Ou então se aproximarem rápido dos programadores :)
Valeu pela visita e pelo comentário, Rogério.
Tenho notado mesmo esse movimento de designers colocando a mão no código. Acho bastante positivo por um lado e me incluo no esforço de quebrar o paradigma, mas por outro, acho que o software gráfico ainda deixa o fluxo de concepção/produção mais eficiente em muitos casos. Um deles é “layer comps” para testar idéias rapidamente, por exemplo. O equivalente a isso com “Styleguides” – escrever várias folhas de estilo – me parece mais demorado. O ideal é buscar o equilíbrio entre os dois modelos, dependendo do tipo projeto.
Ótimo ponto: o equilíbrio dos dois é uma boa solução para o problema. O que eu tenho sentido é que, quanto mais cedo o designer deixa de lado o photoshop (dentro da timeline do projeto), melhor. Obrigado pela visita e pelo comentário, Fred.
O conceito é interessante, mas layout feito dessa maneira ainda é um assunto delicado. O código HTML/CSS nada mais é do que uma interpretação do que foi feito visualmente. É uma descrição que o navegador interpreta. Fazer layout dessa maneira é como se o artista, ao invés de pintar um quadro, descreva uma paisagem (código), e você (browser) interprete a paisagem. A ideia é boa, mas não é pratica. Não se tem uma visão concreta do resultado final. Mas havendo acordo, da para se trabalhar em um conjunto mais harmonioso. Por exemplo, se o designer cria os elementos principais e as diretrizes (tipografias, espaçamentos) e a turma do código/arquitetura da informação façam o restante das telas.
Ah, além do mais, e se o cliente não aprovar depois de ter digitado toda aquela quantia de código?
Ótimo ponto, mas discordo que alterar código seja mais difícil que alterar PSD. Você altera o CSS uma vez só e ele replica em todo o produto.
A diferença entre a metáfora do artista que você citou e o designer que cria o layout no photoshop é a seguinte: a tinta que o artista aplica na tela é a mesma tinta que secará e ficará aplicada na tela por anos. Os pixels que ele desenha no photoshop não são os mesmos que rodam no browser dos usuários.
Valeu pela visita e pelo comentário!
Concordo que o CSS é melhor para editar o projeto como um todo, mas a minha referência ao designer/pintor é que a criação é muito mais visual, porque se eu penso “circulo” imediatamente visualiso o objeto; agora se eu penso “.caixa{border-radius:20px;display:block;height:20px;width:20px}”, vai ser muito mais dificil visualizar o circulo. Por isso acho que o design via Photoshop antes do corte é muito mais produtivo e “sem limites”, oq é ótimo(ou péssimo as vezes).
Abraço!
Pingback: » Styleguides são o novo Photoshop » Be Relevant. O Blog da 92dpi
Pingback: Guia de Estilos | Tableless
Pingback: Guia de Estilos | Bastidores do #BunkerWeb
Pingback: Mundo Digitais | Guia de Estilos