nome

Precisamos falar do pixel perfeito

Publicado em 9 de janeiro de 2019
Autor: Mateus Ávila Isidoro

Disclaimer: Antes de iniciamos a discussão, ressalto que eu trabalho com muitos designers excelentes que curtem esta leva de pixel perfeito, e que passam feedbacks precisos para os trabalhos que realizo. Porém, quero colocar que precisamos pensar também numa escala macro.

fonte: http://www.criatives.com.br/2013/10/24-imagens-perturbadoras-para-quem-tem-toc/

Para quem caiu de paraquedas no meu blog e nunca viu sobre o termo, o pixel perfeito (pixel perfect) é um formato de desenvolvimento que determina um padrão de qualidade estético do projeto web considerando todas as nuances do projeto, partindo do pixel até a visão macro. Ele possui inegáveis vantagens por manter-se fiel aos padrões estéticos definidos e por ser uma forma de agregar valor a um projeto.

Um padrão estético de qualidade é mais fácil e agradável aos usuários do que um padrão simplório. Confesso que meu senso estético é muito primitivo, tanto que constantemente estou fazendo alterações no blog para fazer ajustes pontuais. Mesmo eu sendo crítico ao pixel perfeito, entendo que ele pode ser um caminho excelente para aumentar a qualidade de um projeto digital.

De onde veio esta ideia? Aposto minhas fichas que é do imaginário coletivo que os produtos da Apple impuseram no mercado. A empresa de Cupertino cria produtos com alto valor agregado, e em suas campanhas de marketing reforça aspectos técnicos e de design valorizando os detalhes da construção dos produtos, preparando o olhar do consumidor para que ele valorize as nuances que os produtos da marca possuem.

Curvas bonitas não são feitas em poucos segundos de trabalho.

Entretanto o pixel perfeito é um dos vilões do relacionamento entre desenvolvedor e designer. Apresento abaixo alguns argumentos de que ele pode ser um enorme problema para equipes de agências e empresas digitais.

O esforço por pixel

Acredito que ainda não há alguma ferramenta digital que meça o tempo gasto por determinado área de um layout ou site. Se existir, peço que deixem um comentário que eu farei a atualização desta postagem. imagino que, se houvesse tal instrumento, veríamos que a atenção à perfeição exige tempo.

O tempo, numa escala de economia, é um recurso precioso demais, pois toda e qualquer tarefa envolve o consumo de fração dele. Um projeto de um hotsite que não tenha links internos, mas que há sessões com transições maravilhosas e leveza no scroll envolve um considerável acúmulo de horas de desenvolvimento, testes e ajustes. Num mundo perfeito de tempo e sem pressões por prazos curtos e tarefas que não se engasgam com algum ponto e vírgula fora do lugar, tudo é possível.

Entretanto, na realidade de uma agência digital brasileira é obrigada a lidar com a contradição entre um projeto de qualidade e atender uma lista de clientes querendo tarefas para ontem. O pixel perfeito é o maior inimigo de uma agência que preza-se pela agilidade nas entregas. Pixel perfeito só funciona quando há tempo hábil disponível.

Há, ainda, vários browsers disponíveis no mercado

Falando em pixel perfeito, um dos seus sinônimos é hacks de CSS, de Javascript e SSR. Se o produto tiver foco o mercado mundial, ainda há uma presença muito forte de Internet Explorer e Firefox no mercado para aumentar a complexidade dos estilos e animações. Já vi designers reclamarem que no Firefox do Mac as animações estarem mais travadas. Forçosamente, um desenvolvedor solo, para garantir a integridade estética do projeto, terá que ter um PC e um Mac para trabalhar – mesmo que a culpa das implementações cabe aos Sistemas Operacionais.

Por sorte, o Brasil é um dos raríssimos lugares que se pode pensar em pixel perfeito, com taxas de acesso ao Chrome acima dos 80%.

Fonte: http://gs.statcounter.com/browser-market-share/all/brazil/#monthly-201712-201812

Ter apenas um browser tem seus efeitos ruins para o desenvolvimento web, como retratei neste post.

Temos muitos tamanhos de telas diferentes

Infelizmente muitos designers que pensam pixel perfeito orientam seus olhares para o mundo feliz do Chrome. Mas a internet tem em muitos dispositivos, de muitos tamanhos e densidade de pixels diferentes.

Como validar se as distâncias estão exatas se não tem como medir no Android? A não ser que exista alguma ferramenta maravilhosa que faça as medições corretas, o olhômetro é o guia – logo temos uma contradição para o pixel perfeito.

O foco aqui não é apontar a inconsistência dos defensores mais fervorosos, e sim que tudo complica quando mostramos que é impossível ser pixel perfeito tendo tantas telas e densidades diferentes. Mesmo que desenvolvamos usando padrões de tamanho que o Chrome faz, sempre há o risco de alguma coisa não sair conforme o combinado. Ouso dizer que CSS não é uma ciência exata!

A questão da validação do produto

Quando se tem uma boa ideia, imagino que um bom design ajuda a verificar se ela vende ou não. E isto varia conforme o grau cultural de cada país. É estranho dizer, mas por muitos anos, um dos sites mais acessado nos EUA é o Craiglist, cujo valor estético é nenhum. Ninguém tem muito controle do que vai dar certo ou não com as pessoas, e mesmo as métricas podem estar erradas. A 10 anos atrás, ninguém entendia como o scroll infinito do facebook viraria padrão de mercado para conteúdos de redes sociais.

Onde quero chegar: as 3 ou 4 horas que se discute o tamanho e a cor da fonte não farão que as pessoas comprem ou não um produto. E mais estranho que possa parecer: as pessoas não fazem a validação do layout.

Isto não significa que está liberado quebrar no Firefox, ou fazer o projeto de qualquer jeito – a questão é achar a medida certa. Os prazos estão apertados? Definam a prioridade, e os micro ajustes façam depois. Tá com prazo sobrando? Façam mais próximo do possível.

A pós entrega

Entendemos como um projeto pronto aquele que é publicado e configurado para ir no ar. No pixel perfeito, ele pode ficar pronto pra produção, mas há muitos componentes que podem transformar este trabalho num projeto tortuoso e cansativo:

  • A equipe de marketing traz métricas dizendo que a tela inicial pode converter mais se inserir várias informações novas;
  • A equipe de infraestrutura comentou que o CSS está muito grande, mesmo minificado, pois há muitos ajustes que poderiam ser simplificados caso optassem por um padrão mais simples;
  • O cliente quer um tom mais azul espartano, no lugar de um gradiente que demorou 1 hora para ser definido;
  • O cliente liga desesperado pra tirar o telefone do topo do site, pois seu callcenter não dá conta da quantidade enorme de ligações. Verificamos depois no Analytics e no Hotjar que os usuários só abrem o site para ver o telefone. Detalhe importante: foram testados 5 ícones diferentes de telefone;

Estas situações acima ocorrem numa hipotética pós entrega, pois é natural que a validação seja feita depois de pronto. Sempre há a possibilidade de melhorias e correções depois que o projeto vai no ar, logo o tempo perdido para o ajuste que tinha que ser feito antes irá atrasar todo um processo no futuro.

A guisa de conclusão

Se por um lado o pixel perfeito é um excelente meio para valorização dos projetos, agregando valor e qualidade, por outro ele pode tornar-se um vilão se desconsiderarmos a visão global de projeto. Para líderes de empresas que querem ter vários clientes satisfeitos e funcionários produtivos, saber alinhar o momento certo de dar prioridade para um projeto ter qualidade pixel perfeito é uma capacidade que pode fazer a diferença.

Para desenvolvedores freelancers, é importante listar horas extras no orçamento para que não tenhamos a sensação de trabalhar de graça nas correções. Para os designers que são exigentes demais com a qualidade do projeto, recomendo que sejam racionais e pensem globalmente, e realizem as avaliações de ajustes no seu devido tempo e necessidade.