Drawn UI – Ilustrações desenhadas de interfaces reais

Drawn UI

Uma tela desenhada mostra um produto da forma como um designer o esboçaria para um estudo de caso: a interface real, simplificada até restar apenas sua estrutura, matizada na própria cor do produto. Ela parece trabalho de design, enquanto uma captura de tela parece algo colado, e nunca exibe dados privados, pois todo o texto são barras.

O visual permanece calmo porque as regras são poucas e estritas. Cada projeto ainda se parece consigo mesmo, porque a matiz, as telas e a parte elevada vêm do projeto. Para onde os desenhos vão (um hero, uma grade, uma lista de recursos, um slide) fica a critério de quem os utiliza.

Trabalhe nesta ordem

1. Leia o produto real. Suas telas atuais, a partir do código, do aplicativo ou do arquivo de design. Cada desenho remonta a uma tela ou componente real. Nunca invente uma metáfora (balanças flutuantes, portas, setas entre cartões): se o produto não possui algo, o desenho também não mostra.
2. Escolha os momentos. Para que serve cada desenho: uma tela, um componente, um estado. Um conjunto mostra componentes diferentes, não um mesmo componente com mais detalhes a cada vez.
3. Pegue o acento cromático. A própria matiz ou cor da marca do produto. scripts/tint.py "#hex" mostra os tons resultantes. Mais acentos apenas quando significam algo no produto (cores de status, um par de marca).
4. Escreva a especificação. drawings.json, formato em references/spec.md (leia suas seções sobre tamanhos, elevação e tons antes de desenhar), com o exemplo em examples/ledger/drawings.json ao lado. Dimensione cada desenho para o espaço que ocupará.
5. Desenhe e verifique. python3 scripts/draw.py drawings.json --shots (a captura de tela precisa do Playwright com Chromium). Corrija cada problema que ele imprimir, depois abra out/shots/sheet.png e observe. Números sinalizam, olhos decidem: cantos vazios dentro de um cartão, um desenho que pende para um lado, uma pilha que parece comprimidos. Repita até passar e parecer calmo.

As regras

1. Um desenho não contém palavras. Todo texto se torna barras: alturas 12, 8, 6 ou 4, larguras em passos de 4, completamente arredondadas.
2. Cartões brancos, um raio por função (cartões 12, caixas internas 8, linhas 4, celulares 32), uma sombra de cartão, uma sombra de elevação.
3. Uma parte por desenho pode se elevar para fora de seu cartão: ela sai por apenas um lado, de 16 a 72 (24 a 40 é o melhor visual), nunca ultrapassando o topo ou a base do cartão, com 8 ou mais ao redor. Um desenho com 600 ou mais de largura pode elevar duas partes. A parte elevada substitui o que levantou, não cobre pela metade.
4. Um acento cromático por desenho, usado naquilo que importa naquela tela.
5. No máximo um glifo de linha por desenho, desenhado com 1,5 de espessura e pontas arredondadas.
6. Sem fundo por padrão: o desenho vem apenas com espaço para suas sombras e se assenta em qualquer página onde for colocado. Com "ground": true ele ganha um solo matizado, que preenche de 65 a 75 por cento em largura e altura, centralizado.
7. Tudo em escala 1:1 em uma grade de 4. Desenhos de um mesmo conjunto que ficam lado a lado compartilham uma escala: desenhe-os no tamanho em que são exibidos e iguale as alturas quando estiverem em uma linha.
8. Celulares têm proporção de 1 a 2,05.

Usando a saída

Os arquivos out/<id>.svg são autocontidos, carregam sua própria largura e altura e se ajustam à página: claros em fundo branco, escuros em fundo preto. Eles seguem a configuração de sistema do visualizador, e uma classe dark ou light (ou data-theme) em qualquer ancestral força um dos modos. Eles são aria-hidden, com ids com namespace por desenho, para que vários possam ficar inline em uma única página. As formas carregam classes de função (p-ground, p-card, p-bar, p-dot, p-glyph, p-hi para a parte elevada) para animação ao passar o mouse; out/index.html mostra uma animação suave com uma resposta para movimento reduzido. Um desenho muito largo para um celular ganha um segundo desenho mais estreito; nunca o comprima.

Projetando no Figma: as mesmas regras se aplicam, e os valores da especificação mapeiam um a um para frames (layout automático para cartões, posição absoluta apenas para a parte elevada). Exporte cada solo como SVG.

Quando as regras entram em conflito com o produto

Um produto sem um acento cromático único pode usar seu neutro mais escuro. Uma tela que só faz sentido com dois destaques pode ser dois desenhos. Dobre uma regra de cada vez e diga qual.