Recursos de design que todo o programador devia guardar

Muitos projetos não têm designer. Isso não é desculpa para uma interface que parece um acidente.

Estas ferramentas cobrem as decisões que costumam correr mal: cor, contraste, espaçamento, imagens e escala tipográfica.

Cor

Realtime Colors

Experimente uma paleta num layout a sério em vez de cinco quadrados que não dizem nada.

realtimecolors.com

Cor

Coolors

Gere e fixe paletas depressa e exporte-as como variáveis CSS.

coolors.co

Acessibilidade

WebAIM Contrast Checker

Dois minutos aqui evitam o cinzento sobre cinzento que chumba qualquer auditoria.

webaim.org/resources/contrastchecker

Tipografia

Type Scale

Constrói uma escala de títulos coerente para os tamanhos deixarem de ser arbitrários.

typescale.com

Ilustração

unDraw

Ilustrações gratuitas que pode recolorir com a sua marca antes de descarregar.

undraw.co

Imagens

Squoosh

Comprima imagens no navegador e veja a perda de qualidade antes de a aceitar.

squoosh.app

Fundos

Haikei

Gera blobs, ondas e gradientes em SVG para secções hero em poucos cliques.

haikei.app

Ferramenta de design

Figma

Mesmo que nunca desenhe nele, vai precisar dele para abrir o que os designers enviam.

figma.com

Se usar só duas, que sejam o verificador de contraste e a escala tipográfica: resolvem os problemas que o utilizador nota mesmo.

Precisa construir, não só escolher?

Aplicações web, APIs, infraestrutura e interfaces. Freelance desde Barcelona, com clientes em qualquer lugar.

Vamos conversar


Comentários

Leave a Reply

Your email address will not be published. Required fields are marked *