O divórcio entre o PSD e o HTML
Alguns estão chamando de “morte”, mas preferi chamar de “divórcio”. Eles continuam vivos, fortes e saudáveis. Só não moram mais juntos. O caminho PSD to HTML que durante anos foi o mais certeiro (às vezes único) no processo de design para web, parece estar com seus dias contados.
Primeiro você desenha uma página no Photoshop. Layout impecável, representando exatamente como é que você quer que a página se comporte quando for aberta no browser. Depois um programador front-end transforma aquele arquivo PSD em HTML, CSS e Javascript. Os assets são recortados, um a um, exportados do Photoshop, importados no código. Novas ferramentas e plugins estão sendo criados para tentar facilitar esse processo, e tem até algumas empresas no oriente que cobram cerca de 100 dólares para fazer esse processo para você.
Exportar para web
Conforme articula Nick Pettit no blog da Tree House, é um processo que faz sentido à primeira vista. Pode ser difícil começar a programar a página sem saber exatamente como os designers esperam que fique o resultado final. Experimentar no Photoshop primeiro e depois exportar para HTML parece um processo razoável. E ele acabou ditando muito da estrutura dos times dentro de agências e produtoras que criam para a web.
Acontece que o cenário tem mudado bastante nos últimos anos. A direção para a qual o design web está caminhando traz alguns aspectos que fazem com que esse processo PSD to HTML comece a ficar ultrapassado.
Entre as principais mudanças:
Design em CSS
Depois do CSS3, muitos dos efeitos visuais que eram alcançados apenas com as ferramentas do Photoshop (sombra, bordas arredondadas, gradiente, entre muitos outros) começaram a ficar disponíveis no próprio código CSS. Antigamente, se um box tinha bordas arredondadas no layout, o programador precisava exportar as bordas como imagens e fazê-las encaixarem milimetricamente no HTML. A maioria dos browsers modernos já suportam isso via CSS. Raros são os sites que precisam dar suporte a versões mais antigas do Internet Explorer, por exemplo, o grande vilão do web design contemporâneo.
Design Responsivo
Se você lê o Blog de AI com frequência, já sabe muito bem dos desafios em se desenhar websites que rodem em todas as resoluções disponíveis no mercado – ainda mais depois do surgimento dos smartphones, tablets e do caos causado pela falta de padronização de tamanho de tela por parte dos fabricantes desses dispositivos. O Design Responsivo vem como uma solução bastante eficaz para esse problema. Agora voltando ao exemplo das bordas arredondadas: é quase impossível fazer com que elas se encaixem perfeitamente em todas as resoluções de tela disponíveis no mercado. E se ilude quem pensa que basta desenhar para os três ou quatro breakpoints mais importantes, e dane-se o resto.
Tamanhos de tela
Design Flat
Com a tendência do design flat e redução do skeumorfismo, são cada vez menos comuns os sites que se apoiem majoritariamente em efeitos visuais “a la Photoshop”. Interfaces sem muita sombra, bevel, emboss, permitem que mais e mais sites sejam desenhados completamente com CSS, usando imagens apenas para fotografias e backgrounds mais específicos.
Maturidade do mercado
Com o passar dos anos, a indústria do design para web amadureceu bastante. Designers e programadores começaram a aprender o que funciona bem e evitar o que não funciona. Em algumas empresas, é esperado do Designer (tanto Visual quanto UX) um conhecimento mais apurado sobre o que é possível com as tecnologias disponíveis atualmente. Nada de propor soluções malucas se elas não forem prototipadas e testadas logo no início do projeto.
Mas então o Photoshop está morto?
Nein. O Photoshop ainda é muito importante para o design web. Mas o que acontece é ele passa a ser usado muito mais como um “sketchbook” do que como uma etapa no processo.
Designers testam soluções no Photoshop para averiguar a harmonia da página e apresentar a identidade visual para clientes e outros stakeholders. O layout serve também como uma ferramenta de discussão, para que todos cheguem a um consenso sobre o visual que o produto deve ter. Mas nada de ficar layoutando a mesma tela em 8 resoluções de tela diferentes para passar para o programador. É inviável e impreciso.
Designing in the browser
Brad Frost é um dos programadores que já captaram essa mudança de pensamento. Segundo ele, o melhor jeito de desenhar um site no navegador é fazer com que o programador comece o código no mesmo dia em que o designer começa a pensar na identidade visual. Nada de processo 100% em cascata, em que uma pequena inviabilidade de implementar algo no navegador faz com que o projeto ande para trás.
Abaixo uma entrevista em que ele conta um pouco do processo que costuma aplicar nos projetos em que participa.
Fonte: http://arquiteturadeinformacao.com/
Compartilhe esse post: