Por que eu parei de usar o Photoshop pra design de interfaces

Quero contar algo pra vocês: sou contra o Photoshop.

Já faz alguns anos. Gosto do software, comecei a trabalhar com ele mas não dá. Demorou demais pra evoluir.

Antes que você dê um piti, vamos esclarecer algo. Existe uma situação que o Photoshop é imbatível: edição e tratamento de imagens.

A minha birra é usar o Photoshop pra desenho de interfaces digitais. Não dá.

Previously…

Uns bons anos atrás nos habituamos a usar o Photoshop pra desenhar o clássico “layout do website”. Naquela época a resolução máxima dos monitores era 1024×768, a banda larga não era tão larga assim e sequer tínhamos um versionamento de arquivo decente.

O Photoshop era ótimo. Exportava as imagens em tamanho micro (e sem perder a qualidade), fatiava cada elemento em um .jpeg específico (e já organizava isso na pastinha) e ainda era uma mão na roda pras sombras e degradês que a gente usava e abusava naquela época.

Naquela época não existia site mobile, ninguém falava em responsivo, a gente sequer fazia wireframe antes de começar a desenhar. Era in loco, do briefing direto pro layout.

Graças a Deus o mercado evoluiu.

Hoje qualquer bom profissional colhe um bom briefing, faz um research decente, analisa a concorrência e pensa na…
Experiência do usuário como um todo

Hoje, peca quem pensa em layout como apenas um site em um tamanho de tela. Vivemos a era da responsividade. Qualquer um tem smartphone, até sua mãe que nunca entendeu nada do computador. Metade dos acessos de qualquer projeto vem do celular. Às vezes até mais.

Pensar em experiência do usuário como um todo envolve conceber a interface que funcione independente de dispositivo.

Tá, isso significa que você faz um layout pra cada device? Não né, e foi aí que comecei a abandonar o Photoshop.

Onde eu me decepcionei com o Photoshop

• Tamanho Responsivo

Photoshop não me deixa pensar nas variações do tamanho de tela. A largura do canvas é fixo, pra pensar nas variações de tela eu preciso criar vários arquivos ou separar várias layers.

A gente fala de ter um único site que abra em qualquer dispositivo mas desenha várias telas que na verdade são um único site.

Não sei vocês mas pra mim não faz o menor sentido ter o “site_mobile” e o “site_desktop” no mesmo arquivo se é um único site. Consegue perceber a redundância?

• Densidade de pixels

Erro clássico de designer: desenhar tudo em 72dpi. Hoje um iPhone de 2 anos atrás já trabalha com 300dpi. Resultado? As imagens aparecem todas serrilhadas no celular e lindas no seu monitor.

Eu sei que o Photoshop consegue trabalhar em densidades maiores mas o que eu quero é algo mais prático: insiro uma imagem em alta e tenho a saída dela em todas as variações possíveis.

E mais do que trabalhar a quantidade de pixels por polegada, eu preciso trabalhar a densidade de pixels que varia de dispositivo pra dispositivo.

Sempre bom lembrar: densidade de pixel é diferente de pontos por polegada.

• Fidelidade

Sempre tem a diferença entre como cada browser renderiza uma página. Nunca, jamais você vai conseguir 100% de fidelidade ao que tem no layout usando o Photoshop.

Ao pensar na experiência do usuário como um todo, eu já quero ser confrontado com todas as variações possíveis.

• Animações e interações

Como você simula uma interação animada no Photoshop? Não simula. No máximo você chega pro desenvolvedor e fala: quando clicar ali, essa janelinha vem pro lado assim ó, fiiiiiuuuu, sacou?

E como você define o mouse over de um botão? Cria outro botão e deixa a layer escondida (aí sempre esquecem de fazer).

Como você define que uma área vai ficar fixa independente da rolagem? Impossível.

• Agilidade vs. Redundância

Numa era em que falamos de Lean UX, de testes A/B e de como as coisas precisam estar no ar rápido, o Photoshop vai contra toda essa agilidade.

Ao mudar um elemento, você precisa sair alterando todas as variações que ele tem.

Numa era em que tempo é cada vez mais escasso e essencial, eu não posso me dar a esse luxo.

Uma luz no fim do túnel

Na versão 2015, o Photoshop deu um up. Artboards foram incorporados, temos um Live Preview disponível (mesmo que limitado) e uma biblioteca de assets (chega de alterar mais de uma vez o mesmo elemento).

As novas features resolvem boa parte dos problemas que citei. Porém, tive que esperar mais de 3 anos por isso. Não deu, eu parti pra outra.

https://www.youtube.com/watch?v=2IMi3GwD9LI

A parte boa nessa história é que, como muitos ainda usam o Photoshop, as funcionalidades tendem a tornar o mercado mais sadio e eficaz.

Além do software

Mais do que um update de features, o que a gente precisa é um upgrade de mentalidade.

Hoje não basta apenas desenhar, você precisa conhecer as limitações e possibilidades de cada plataforma.

Não à toa, os melhores designers web que conheço são aqueles que conhecem HTML. Os caras que sabem até onde podem ir e os que menos sofrem na hora de testar e usar um novo software.

Alternativas ao Photoshop? Você tem várias:

• Webflow (minha favorita)
• Macaw
• Sketch
• Mais vários aqui.

Qual é o melhor? Nesse exato momento eu diria que o Webflow, é o que vem respondendo mais rápido às necessidades. Mas reparem que ele não é o substituto, não existe mais O software. O que temos é a necessidade de mercado e o quão rápido as ferramentas se adaptam.

Essa proposta de redesign do IMDB, por exemplo, foi feita direto no Webflow. O que você vê na tela é o produto final que o Webflow entrega, ele entrega um site e não um arquivo de imagem.

Estamos numa época em que tudo muda muito rápido e precisamos nos adaptar. Ficar preso a um único software por apego é burrice, é ficar estagnado. É ser aquela tia que dizia que a TV jamais iria superar o rádio.

Então antes criticar uma simples escolha de software, reflita o quando às vezes ficamos estagnados num mercado em que justamente deveríamos ser os primeiros a experimentar e inovar.

Mais do que uma crítica ao Photoshop, esse texto é uma crítica àqueles que ficam presos a legados do passado. Aqueles que se mantém fiéis a um software por puro apego e por falta de visão estratégica. Aqueles que tem medo de arriscar (mesmo que seja pra fazer um simples layout).

Tentou e não deu certo? Não se preocupe, o mercado digital não é aquele jornal que você imprime e já era. Você pode voltar atrás, fazer de volta e fazer melhor. Você pode(e deve) experimentar.