Tips de diseño ui para programadores

Sabés programar, pero cuando tenés que armar una interfaz el resultado parece una planilla de Excel. Espacios inconsistentes, colores al azar, tipografías que gritan, botones que no parecen botones. La realidad es que el diseño UI no es magia ni "talento artístico": son reglas y patrones que podés aprender como aprendiste recursión o closures.

Espaciado: el secreto mejor guardado del diseño

El espaciado correcto hace más diferencia que cualquier paleta de colores. La mayoría de las interfaces que "se ven mal" fallan acá.

Usá una escala de espaciado, no valores random:

/* Mal: valores al azar */
.header { padding: 17px; }
.card { margin: 23px; }
.button { padding: 11px 19px; }

/* Bien: escala consistente (múltiplos de 4 u 8) */
.header { padding: 16px; }
.card { margin: 24px; }
.button { padding: 12px 24px; }

La regla del 8px: todos los espacios son múltiplos de 8 (8, 16, 24, 32, 48, 64). Si necesitás algo más chico, usá 4 o 12. Nunca 15, 23 o 37.

Más espacio = más jerarquía. Los elementos relacionados están cerca (gap de 8-16px), las secciones diferentes tienen más separación (32-48px). Si todo tiene el mismo espacio, nada tiene jerarquía.

Tipografía: menos es más

No necesitás cinco tamaños de fuente. Necesitás una escala clara.

Para un proyecto web estándar:

• Texto base: 16px (nunca menos de 14px)
• Títulos: 24px, 32px, 48px
• Texto chico: 14px
• Interlineado: 1.5 para párrafos, 1.2 para títulos

Dos fuentes como máximo: una para títulos, una para cuerpo. O incluso la misma con pesos diferentes. Google Fonts gratuitas que funcionan: Inter, Roboto, Work Sans, Lato.

/* Sistema de tipografía consistente */
body { 
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 2rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }

Color: no inventes, copiá

El mayor error: elegir colores "a ojo". Usá herramientas que generen paletas coherentes.

Estructura básica de colores:

• 1 color primario (tu marca, acciones principales)
• 1 color secundario (opcional)
• Grises: al menos 5 tonos (texto, bordes, fondos)
• Colores de estado: success (verde), error (rojo), warning (amarillo)

Herramientas que salvam vidas:

• Tailwind Colors: toda su paleta es copiable (coolors.co/tailwind)
• Realtime Colors: ves tu paleta aplicada en tiempo real
• Paletton: genera combinaciones armónicas

Truco de contraste: texto sobre fondo debe tener ratio mínimo de 4.5:1. Chequeá con WebAIM Contrast Checker. Si tenés que entrecerrar los ojos para leer, el contraste está mal.

/* Mal: colores mágicos sin sistema */
--primary: #3b82f6;
--secondary: #ff5733;
--text: #666666;

/* Bien: paleta con escala */
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-700: #1d4ed8;
--gray-900: #111827;
--gray-600: #4b5563;
--gray-100: #f3f4f6;

Alineación y consistencia

Si los elementos no están alineados, se nota. Aunque no sepas por qué, tu cerebro lo detecta.

Todo tiene que alinear con algo:

• Usá grillas (12 columnas es el estándar)
• Centrá elementos respecto a algo específico, no "más o menos"
• Los iconos deben tener el mismo tamaño y alinear verticalmente con el texto

Consistencia sobre originalidad:

• Si un botón primario es azul con bordes redondeados, todos los botones primarios son iguales
• Si los inputs tienen padding de 12px, todos lo tienen
• Si los íconos son outline, no mezcles con filled

Componentes que funcionan

Algunos patrones de UI son universales porque funcionan:

Botones:

• Primario: fondo de color, texto blanco, hover más oscuro
• Secundario: fondo transparente, borde de color
• Terciario: solo texto de color
• Padding: al menos 12px vertical, 24px horizontal
• Estados claros: hover, active, disabled

Cards:

• Borde sutil (1px) o sombra suave, nunca ambos
• Padding consistente (16-24px)
• Border-radius moderado (4-8px)

Formularios:

• Labels arriba de los inputs, no adentro
• Inputs con altura cómoda (44-48px)
• Mensajes de error rojos debajo del campo
• Estados visuales: focus, error, disabled

<!-- Estructura básica de form con buenos estados -->
<div class="form-group">
  <label for="email">Email</label>
  <input 
    type="email" 
    id="email" 
    class="input"
    placeholder="tu@email.com"
  />
  <span class="error-message">Este campo es requerido</span>
</div>

<style>
.input {
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px;
}

.input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input.error {
  border-color: #ef4444;
}
</style>

Jerarquía visual

No todo puede tener la misma importancia visual. Usá estas variables para crear jerarquía:

1. Tamaño: lo más importante es más grande
2. Peso: bold para destacar, regular para el resto
3. Color: color primario para acciones, grises para secundario
4. Contraste: más contraste = más atención

El CTA (call to action) principal debe ser obvio. Si tenés tres botones del mismo color y tamaño, el usuario no sabe qué hacer.

Herramientas que te facilitan la vida

Frameworks CSS que vienen con sistema de diseño:

• Tailwind CSS: utility-first, escalas de color y espaciado incluidas
• Chakra UI: componentes con accesibilidad built-in
• shadcn/ui: componentes copiables que podés modificar

Recursos de inspiración (para copiar, no para inventar):

• Dribbble, Behance: mirá, pero no copies pixel por pixel
• Mobbin: capturas reales de apps exitosas
• Refero: biblioteca de componentes reales

Extensiones de Figma gratis:

• Iconify: miles de íconos consistentes
• Unsplash: imágenes placeholder decentes

El checklist antes de publicar

Antes de pushear esa interfaz, revisá:

• ¿Todos los espacios son múltiplos de 4 u 8?
• ¿Hay máximo 3 tamaños de fuente diferentes?
• ¿El contraste de texto es al menos 4.5:1?
• ¿Los botones parecen botones? (tienen padding, hover, estados)
• ¿Hay un solo CTA principal por pantalla?
• ¿Los inputs tienen altura de al menos 44px?
• ¿Todo está alineado con algo?

Preguntas frecuentes

¿Necesito saber Figma para aplicar estos tips?

No. Podés implementar todo esto directo en código. Figma ayuda para prototipar rápido, pero no es obligatorio. Muchos programadores diseñan directo en el navegador con Chrome DevTools.

¿Qué hago si mi cliente/jefe pide "algo más creativo"?

Creativo no significa romper las reglas de legibilidad y usabilidad. Podés ser creativo en ilustraciones, animaciones o micro-interacciones, pero la estructura base debe ser sólida. Mostrales ejemplos de productos exitosos que usan patrones estándar.

¿Cuánto tiempo lleva aprender diseño UI siendo dev?

Con estos principios básicos, podés mejorar tus interfaces en semanas. No vas a ser Diseñador Senior, pero vas a dejar de hacer UIs que asustan. La clave es copiar patrones que funcionan y aplicar consistencia.