Recursos de diseño que todo desarrollador debería guardar

Muchos proyectos no tienen diseñador. Eso no es excusa para una interfaz que parezca un accidente.

Estas herramientas cubren las decisiones que suelen salir mal: color, contraste, espaciado, imágenes y escala tipográfica.

Color

Realtime Colors

Prueba una paleta sobre un diseño real en vez de sobre cinco cuadrados que no dicen nada.

realtimecolors.com

Color

Coolors

Genera y bloquea paletas rápido, y luego expórtalas como variables CSS.

coolors.co

Accesibilidad

WebAIM Contrast Checker

Dos minutos aquí evitan el gris sobre gris que suspende cualquier auditoría.

webaim.org/resources/contrastchecker

Tipografía

Type Scale

Construye una escala de titulares coherente para que tus tamaños dejen de ser arbitrarios.

typescale.com

Ilustración

unDraw

Ilustraciones gratuitas que puedes recolorear con tu marca antes de descargarlas.

undraw.co

Imágenes

Squoosh

Comprime imágenes en el navegador y ve la pérdida de calidad antes de aceptarla.

squoosh.app

Fondos

Haikei

Genera blobs, ondas y degradados en SVG para secciones hero en unos clics.

haikei.app

Herramienta de diseño

Figma

Aunque nunca dibujes en él, lo necesitarás para abrir lo que te manden los diseñadores de verdad.

figma.com

Si solo usas dos, que sean el comprobador de contraste y la escala tipográfica: arreglan los problemas que el usuario sí nota.

¿Necesitas construirlo, no solo elegirlo?

Aplicaciones web, APIs, infraestructura e interfaces. Freelance desde Barcelona, con clientes en cualquier sitio.

Hablemos


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *