Toda dúvida de tela termina em número. O botão parece maior que o de cima, mas maior quanto. O espaço entre o título e o parágrafo parece apertado, e apertado em relação a quê. A imagem que o cliente mandou parece larga demais para o slot, e a única forma de ter certeza é saber a largura dela em pixels.

A pergunta é sempre pequena. O caminho até a resposta é que é longo. Você tira um print da tela, abre o print num editor de imagem, espera o programa carregar, seleciona a área com a ferramenta de seleção, olha o painel de informação, anota o valor num canto e volta para a janela onde a dúvida começou. Quatro programas depois, você tem um número que valia dois segundos.

Existe uma variação pior, que é a conta de cabeça. Você olha os dois elementos, decide no olho que a diferença é de uns doze pixels, aplica o ajuste e descobre na revisão seguinte que a diferença era de vinte e um. O erro não aparece na hora, aparece depois, quando a peça já foi entregue e alguém pergunta por que uma coluna está desalinhada da outra.

A terceira variação é a mais comum entre quem não trabalha com design todo dia: desistir da medida. Você olha, acha que está bom, segue em frente. Na maior parte dos casos está mesmo, e nos casos em que não está o custo chega em forma de retrabalho, de comentário de cliente ou de página que fica visivelmente torta sem ninguém conseguir explicar por quê.

O ponto que une as três variações é o mesmo: o número existe, está na tela, e mesmo assim é caro de obter. A informação está bem ali, renderizada, e ainda assim exige uma cadeia de ferramentas para virar um valor que você consiga usar.

Antes de olhar a ferramenta que encurta essa cadeia até um arrasto, vale entender por que a tela é a única fonte honesta de medida, e por que o arquivo de origem quase sempre mente sobre o que está sendo exibido.

Continue lendo ↓

I  O Problema

I, O número que está na tela e ninguém alcança

Medir na tela parece um problema resolvido, e não é. O motivo é simples: a tela não é feita para ser medida, é feita para ser olhada. Nada no sistema oferece um valor em pixels de qualquer coisa que esteja sendo exibida, e o que existe de aproximado só funciona dentro de um programa específico.

O primeiro obstáculo é que a medida do arquivo não é a medida da tela. Uma imagem de mil e duzentos pixels de largura pode estar aparecendo com quatrocentos, porque o navegador reduziu, porque o slot é menor ou porque a tela tem densidade alta. Você abre o arquivo, lê a largura original e ela não responde a pergunta que você fez.

O segundo obstáculo é que cada programa mede o próprio quintal. O editor de design mostra distância entre objetos do editor de design. O inspetor do navegador mostra dimensões de elementos da página aberta. Nenhum dos dois mede o botão do outro programa, o item da barra lateral, o vídeo pausado ou a captura que um cliente mandou por mensagem.

O terceiro obstáculo é a densidade. Numa tela de alta resolução, o pixel de software e o pixel de hardware deixam de ser a mesma unidade. Um print tirado nessa tela tem o dobro do valor que você precisa reportar, e a pessoa que esquece de dividir por dois entrega uma especificação com o dobro do tamanho certo.

O quarto obstáculo é o tempo de contexto. Não é o print que custa, é a troca de janela. Você sai do lugar onde estava pensando, entra em outro programa, resolve um problema mecânico e volta. A dúvida original enfraquece no caminho, e às vezes você volta sem lembrar exatamente o que ia fazer com o número.

O quinto obstáculo é a repetição. Medir uma vez é barato. Medir catorze vezes na mesma revisão, alternando entre print e editor, transforma uma conferência em meia tarde de trabalho manual.

O resultado é o que se vê em qualquer equipe: a medida vira sensação. Ninguém confere espaçamento com número, todo mundo confere no olho, e o padrão visual do produto passa a depender de quem tem melhor percepção de distância, não de uma régua compartilhada.

Edward Tufte escreveu em The Visual Display of Quantitative Information, publicado em 1983, que a integridade gráfica depende da proporção entre o que é mostrado e o que é medido. A leitura prática dessa frase é dura: sem medida acessível, ninguém tem como saber se a proporção está certa.

E medida acessível é exatamente o que falta. Não falta capacidade técnica de calcular a distância entre duas bordas na tela, falta uma ferramenta que faça esse cálculo no lugar onde a pergunta nasceu, sem tirar você de onde você está.

II  A Descoberta

II, A régua que enxerga borda sozinha

O PixelSnap é um utilitário que transforma qualquer coisa exibida na tela em algo mensurável. Você aciona o atalho, a tela congela, e o cursor passa a funcionar como uma régua que entende o que está embaixo dela.

O comportamento que define a ferramenta é a detecção automática de borda. Você aponta para um botão e o contorno inteiro dele é reconhecido, com a largura e a altura aparecendo na hora, sem precisar arrastar com precisão de mão nas duas pontas.

Medida por arrasto livre: para o que a detecção não pega, você arrasta do ponto A ao ponto B e o valor em pixels aparece ao lado do cursor enquanto o arrasto acontece. Soltar fixa a medida na tela.

Distância entre dois elementos: apontar para um elemento e depois para outro devolve o vão entre eles, que é a medida mais pedida numa revisão de layout e a mais chata de obter de outro jeito.

Número copiável: o valor medido vai para a área de transferência com uma tecla, o que elimina o passo de anotar o número num bloco de notas para colar depois na especificação ou na mensagem para o desenvolvedor.

Consciência de densidade: a ferramenta sabe em que tipo de tela está e reporta o valor na unidade que você usa para trabalhar, sem exigir a divisão manual que todo mundo esquece de fazer.

Funciona sobre qualquer coisa: página de navegador, aplicativo nativo, vídeo pausado, captura de tela recebida por mensagem, apresentação em modo de exibição. A régua mede o que está sendo exibido, não o arquivo por trás.

Marcação de medidas fixas: dá para deixar várias medidas visíveis ao mesmo tempo sobre a mesma tela, o que serve para comparar espaçamentos de uma lista inteira de uma vez em vez de um por um.

Onde ele não é a peça certa: edição de imagem, correção de cor, criação de guia dentro do arquivo de design e conferência de código. A régua entrega número, não altera pixel nenhum, e quem precisa mexer no arquivo continua precisando do editor.

Pra quem serve: quem revisa layout sem ser designer, quem escreve especificação para desenvolvedor, quem monta apresentação e briga com alinhamento, quem trabalha com captura de tela alheia e precisa reportar tamanho com precisão.

Preço: o aplicativo é pago, com licença de uso contínuo, e tem período de teste. Roda em versões recentes do macOS e pede permissão de gravação de tela, porque precisa ler o que está sendo exibido para reconhecer as bordas.

O ponto de atenção: a detecção automática erra em fundo de baixo contraste. Elemento claro sobre fundo claro pode ter a borda reconhecida alguns pixels adiante do lugar certo, e nesse caso o arrasto manual é mais confiável que a mágica.

Na nossa opinião: o valor está em cortar a troca de contexto. A medida deixa de ser uma tarefa com começo, meio e fim, e vira um gesto de dois segundos no meio do trabalho que já estava acontecendo.

Conhecer o PixelSnap →

III  O Setup

III, Três medidas que valem a semana

Instalou? Não abra a ferramenta com a intenção de aprender todos os modos de medida. A primeira sessão tem um objetivo só: usar a régua nas três situações em que você hoje mede no olho, e sentir a diferença no mesmo dia.

Ajuste 01: defina o atalho antes de tudo. Uma régua que exige encontrar um ícone na barra do sistema não vira reflexo. Escolha uma combinação que a sua mão alcance sem olhar e use ela nas primeiras vinte medidas, até o gesto virar automático.

Ajuste 02: comece pela dúvida que mais se repete. Espaçamento vertical entre blocos de texto é a campeã em quase todo mundo que revisa tela. Meça três vãos seguidos numa página que você conhece e compare os números com o que você achava que eles eram.

Ajuste 03: adote a cópia direta. Toda medida que vira mensagem para outra pessoa deve sair da régua para a área de transferência, nunca da régua para a sua memória. O erro de transcrição é o mais barato de evitar e o mais caro de descobrir depois.

A regra que decide o resultado é medir antes de opinar. A frase "esse espaço está estranho" não gera conserto, gera discussão. A frase "esse espaço tem dezenove pixels e o de baixo tem trinta e dois" fecha o assunto em dez segundos, porque troca percepção por dado.

Não transforme a régua em auditoria. Medir tudo o que está na tela produz uma lista de vinte inconsistências e nenhuma decisão. O uso que compensa é pontual: você já desconfia de alguma parte, e a régua confirma ou desmente.

Quem escreve especificação para desenvolvedor ganha o par mais óbvio: medir e copiar direto na mensagem. A conversa deixa de girar em torno de "um pouco maior" e passa a girar em torno de números que os dois lados enxergam do mesmo jeito.

Quem monta apresentação fecha o ciclo comparando margens entre slides. Slide montado em sessões diferentes costuma ter margem diferente, e a inconsistência só aparece na projeção, quando não dá mais para consertar com calma.

Quem trabalha com captura de tela recebida de terceiro tem o ganho menos previsto: dá para reportar o tamanho exato de um elemento numa tela que você não tem acesso, o que resolve boa parte das trocas de mensagem sobre problema visual de outra pessoa.

Quem revisa produto sem ser designer é quem muda mais de comportamento. A régua devolve autoridade para opinar sobre layout, porque a opinião passa a vir acompanhada do número que qualquer um pode conferir.

O resultado aparece na primeira semana, quando você percebe que parou de escrever "parece desalinhado" nos comentários e passou a escrever a diferença exata, e que a conversa sobre tela ficou bem mais curta por causa disso.

Jogo Todo Dia

O clássico que envelheceu bem, o lançamento que vem aí e o bastidor de quem fez. No seu email todo dia às 18:18.

Quero receber →