Pixel Perfect — Boas Práticas e Gestalt

4 min readMay 13, 2018

Conceito

Pixel perfect é um conceito de desenvolvimento de interfaces digitais de alta qualidade, na prática, pixel perfect pode ser descrito como desenvolver uma interface digital seguindo as melhores práticas de UI (User Interface) e desenvolvimento. A seguir 10 dicas de como trabalhar com o conceito de Pixel Perfect.

1) Desenho vetorial

Os vetores são desenhos geométricos fundamentados por cálculos matemáticos que garantem a exatidão da forma. O espaço de trabalho dos elementos vetoriais são calculados em dois eixos, X e Y , a posição do elemento dentro do espaço também é feita através de cálculos matemáticos.

2) Faça a UI fielmente dentro do Grid

Seu layout deve ser desenvolvido seguindo um grid/proporção adaptável para qualquer tamanho de device. No de desenvolvimento web, converse com o desenvolvedor e verifique qual melhor grid para seguir de acordo com o framework que ele irá utilizar.

Para layouts de aplicativos você pode seguir um grid que tenha uma proporção da largura do device que você está trabalhando como referência.

Exemplo de grid Iphone SE — 320px de largura

3) Especifique as animações

Descreva como serão as animações e interações, o software Principle possibilita simular o comportamento de interações, assim o desenvolvedor entenderá como você imaginou a animação.

4) Fontes outline

Se você for utilizar algum tipo de tipografia muito específica, por exemplo em um título, é muito provável que os browsers (principalmente os antigos) não reconheça, então você pode optar por transformar fonte em outline e exportar em SGV, essa situação é muito mais comum em sistemas web, em aplicativos podemos embarcar a fonte no app.

5) Tenha em mente as leis da Gestalt

A Gestalt é a teoria que estuda como percebemos as coisas, nosso cérebro, ao invés de decifrar cada parte da forma visual, ele lê a soma do todo, pois para ele, o cérebro, o todo é mais importante que uma parte.

As principais leis da Gestalt são: Unidade, segregação, unificação, fechamento, continuidade, proximidade, semelhança e pregnância.

6) Ganhe velocidade — Crie um Design System

Um sistema de Design possibilita escalar boas práticas de Design e desenvolvimento, trabalhar com boas práticas de UI não é algo fácil e requer tempo, com um Design System, você poderá reaproveitar componentes já criados.

7) Ferramentas

Atualmente as ferramentas Sketch e Adobe XD são as mais utilizadas para desenhar interfaces digitais de alta qualidade, ambas possibilitam a edição de elementos vetoriais e são mais leves.

8) Exporte arquivos em SVG

Para garantir a qualidade dos assets é importante exportar os arquivos em SVG ou PDF, ambos os formados mantém as configurações dos arquivos, não importa o tamanho que o elemento será utilizado.

Por exemplo: Posso exportar um ícone SGV apenas uma vez no tamanho 20x20, e utilizar ele em vários formatos 20x20, 40x40, 60x60, 80x80 etc.

9) Especificadores

Ferramentas de especificação de layouts como o zeplin e sympli ajudam os desenvolvedores a reproduzirem o que foi desenhado e exportar os assets na melhor qualidade.