Principios de diseño para ingenieros de software

Actualizado el 9 de febrero de 2026

Actualización de febrero de 2026: Se añadieron dos nuevas secciones: Patrones de Interacción (8 paradigmas del estudio de Framer, Flighty, Halide, Warp, Bear, Craft y Superhuman) y Patrones de Interfaz con IA (diseño centrado en citas, fases de streaming, transparencia de errores de Perplexity). Se actualizaron los Patrones Web a 2026 con anchor positioning, animaciones basadas en scroll y @starting-style. Se actualizó la accesibilidad para reflejar la estandarización ISO de WCAG 2.2. Consulte Estudios de Diseño para análisis detallados de 16 productos excepcionales.

He pasado años estudiando diseño mientras desarrollo software, absorbiendo principios de leyendas como Dieter Rams y analizando interfaces de productos como Linear, Stripe y Raycast. Esta guía destila ese conocimiento en la referencia integral que desearía haber tenido cuando empecé a preocuparme por la apariencia y la experiencia de mi software.

El diseño no es decoración. Es comunicación. Cada píxel comunica función, jerarquía y significado. La diferencia entre un software que se siente amateur y uno que se siente profesional radica en comprender estos principios y aplicarlos de manera consistente.

Esta guía asume que usted ya sabe escribir código. Le enseña a ver: a entender por qué algunas interfaces se sienten naturales mientras otras se sienten caóticas, y lo que es más importante, cómo construir las primeras.

Tabla de contenidos

Parte 1: Fundamentos

1. Psicología Gestalt
2. Tipografía
3. Teoría del color
4. Jerarquía visual
5. Espaciado y ritmo
6. Principios de animación

Parte 2: Interacción e IA

1. Patrones de interacción
2. Patrones de interfaz con IA

Parte 3: Filosofía de diseño

1. Dieter Rams: Diez principios

Parte 4: Implementación

1. Patrones web 2026
2. Sistema de design tokens
3. Modo oscuro bien hecho
4. Flujos de extracción en Figma

Parte 5: Referencia

1. Tablas de referencia rápida
2. Lista de verificación de diseño
3. Estudios de diseño

Psicología Gestalt

“El todo es distinto de la suma de sus partes.” — Kurt Koffka

La psicología Gestalt, desarrollada en la Alemania de los años 1920, explica cómo los seres humanos perciben la información visual. El cerebro no ve píxeles individuales, sino que organiza los elementos en patrones con significado. Domina estos principios para controlar cómo los usuarios perciben tus interfaces.

Proximidad

Los elementos cercanos entre sí se perciben como un grupo.

Este es el principio Gestalt más poderoso en el diseño de UI. El espacio comunica relación más que cualquier otra propiedad visual.

INCORRECTO (espaciado uniforme = sin agrupación):
┌─────────────────┐
│ Label           │
│                 │
│ Input Field     │
│                 │
│ Label           │
│                 │
│ Input Field     │
└─────────────────┘

CORRECTO (espaciado desigual = grupos claros):
┌─────────────────┐
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
│                 │
│                 │ ← Amplio (24px) - separando grupos
│ Label           │
│ Input Field     │ ← Ajustado (4px) - relacionados
└─────────────────┘

Implementación en CSS:

.form-group {
  margin-bottom: 24px;  /* Between groups: wide */
}

.form-group label {
  margin-bottom: 4px;   /* Label to input: tight */
  display: block;
}

Implementación en SwiftUI:

VStack(alignment: .leading, spacing: 4) {  // Tight within group
    Text("Email")
        .font(.caption)
        .foregroundStyle(.secondary)
    TextField("[email protected]", text: $email)
        .textFieldStyle(.roundedBorder)
}
.padding(.bottom, 24)  // Wide between groups

Similitud

Los elementos que comparten características visuales parecen estar relacionados.

Cuando los elementos se ven iguales, los usuarios asumen que funcionan igual. Por eso los sistemas de diseño usan estilos de botón, tratamientos de tarjetas y tipografía consistentes.

Ejemplo de navegación:
┌───────────────────────────────────┐
│ [Dashboard] [Projects] [Settings] │  ← Mismo estilo = misma función
│                                   │
│ ┌─────┐  ┌─────┐  ┌─────┐        │
│ │Card │  │Card │  │Card │         │  ← Mismo estilo = mismo tipo de contenido
│ └─────┘  └─────┘  └─────┘        │
│                                   │
│ [+ New Project]                   │  ← Estilo diferente = función diferente
└───────────────────────────────────┘

Figura-fondo

El contenido debe separarse claramente del fondo.

El cerebro necesita distinguir la “figura” (en qué enfocarse) del “fondo” (el trasfondo). Una mala relación figura-fondo genera confusión visual.

Técnicas: - Contraste (figura clara sobre fondo oscuro, o viceversa) - Sombras (elevar la figura sobre el fondo) - Bordes (delimitar los contornos de la figura) - Desenfoque (desenfocar el fondo, enfocar la figura)

/* Strong figure-ground relationship */
.card {
  background: var(--color-surface);     /* Figure */
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  /* Elevation */
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);  /* Dim ground */
  backdrop-filter: blur(4px);      /* Blur ground */
}

Región común

Los elementos dentro de un límite se perciben como agrupados.

Encerrar elementos dentro de un contenedor visual (tarjeta, caja, área con bordes) indica que pertenecen al mismo grupo.

Continuidad

El ojo sigue trayectorias, líneas y curvas.

Usa la alineación y el flujo visual para guiar la atención a través de tu interfaz.

CONTINUIDAD EN LA ALINEACIÓN:
┌────────────────────────────────┐
│ Logo    [Nav]  [Nav]  [Nav]   │  ← Alineados en el eje horizontal
├────────────────────────────────┤
│                                │
│ Headline                       │
│ ─────────────────────────────  │  ← El ojo sigue el borde izquierdo
│ Paragraph text continues       │
│ along the same left edge       │
│                                │
│ [Primary Action]               │  ← Sigue en el borde izquierdo
└────────────────────────────────┘

Cierre

El cerebro completa las formas incompletas.

Los usuarios no necesitan que cada píxel esté dibujado: completan mentalmente las formas conocidas. Esto permite diseños más minimalistas y elegantes.

/* Horizontal scroll with partial card (closure) */
.card-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-right: 48px;  /* Show partial card = scroll hint */
}

.card-carousel .card {
  flex: 0 0 280px;  /* Fixed width, partial visible */
}

Referencia rápida de Gestalt

Tipografía

“La tipografía es el oficio de dotar al lenguaje humano de una forma visual duradera.” — Robert Bringhurst

La tipografía es la base del diseño de interfaces. El texto comunica funcionalidad, jerarquía y marca. Una tipografía deficiente hace que las interfaces sean más difíciles de usar; una gran tipografía es invisible: simplemente funciona.

Escala tipográfica

Una escala consistente crea armonía visual. Usa una proporción matemática.

La escala 1.25 (recomendada para UI):

:root {
  /* Base: 16px (1rem) */
  --text-xs: 0.64rem;    /* 10.24px - use sparingly */
  --text-sm: 0.8rem;     /* 12.8px - captions, labels */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.25rem;    /* 20px - lead text */
  --text-xl: 1.563rem;   /* 25px - h4 */
  --text-2xl: 1.953rem;  /* 31.25px - h3 */
  --text-3xl: 2.441rem;  /* 39px - h2 */
  --text-4xl: 3.052rem;  /* 48.8px - h1 */
}

Altura de línea (interlineado)

La altura de línea afecta drásticamente la legibilidad. Distintos tipos de contenido requieren diferente interlineado.

Longitud de línea (medida)

La longitud de línea óptima previene la fatiga visual y mejora la comprensión lectora.

• Óptimo: 45-75 caracteres por línea
• Objetivo: 50-65 caracteres
• Máximo absoluto: 85 caracteres

p {
  max-width: 65ch;  /* ch unit = width of '0' character */
}

.article-body {
  max-width: 70ch;
  margin: 0 auto;
}

Selección de fuentes

Fuentes del sistema primero. Se cargan al instante, coinciden con la plataforma y están optimizadas para pantallas.

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
               'JetBrains Mono', Consolas, monospace;
}

Usa fuentes personalizadas para: - Diferenciación de marca (sitios de marketing) - Sensación editorial o de publicación - Intención de diseño específica no alcanzable con fuentes del sistema

Peso de fuente para jerarquía

Usa el peso para establecer jerarquía, no solo el tamaño.

h1 { font-weight: 700; }  /* Bold */
h2 { font-weight: 600; }  /* Semibold */
h3 { font-weight: 600; }  /* Semibold */
.lead { font-weight: 500; }  /* Medium */
p { font-weight: 400; }   /* Regular */
.meta { font-weight: 400; color: var(--text-muted); }

Referencia rápida de tipografía

Teoría del color

“El color es un poder que influye directamente en el alma.” — Wassily Kandinsky

El color comunica más rápido que las palabras. Establece el estado de ánimo, dirige la atención, transmite significado y construye reconocimiento de marca.

La regla 60-30-10

La distribución de color más confiable para interfaces equilibradas.

┌──────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ 60% - Dominante (Fondo)
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 30% - Secundario (Tarjetas, secciones)
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░│
│░░░░░▓▓▓▓▓▓▓▓▓▓▓▓██████▓▓▓▓▓▓▓▓▓▓░░░░░░░░│ 10% - Acento (Botones, enlaces)
└──────────────────────────────────────────┘

Construir una paleta de colores

Toda interfaz necesita estos colores semánticos:

:root {
  /* Brand */
  --color-primary: hsl(220, 80%, 50%);
  --color-primary-hover: hsl(220, 80%, 45%);

  /* Semantic */
  --color-success: hsl(142, 76%, 36%);  /* Green - positive */
  --color-warning: hsl(38, 92%, 50%);   /* Amber - caution */
  --color-error: hsl(0, 84%, 60%);      /* Red - danger */

  /* Neutrals */
  --color-background: hsl(0, 0%, 100%);
  --color-surface: hsl(220, 14%, 96%);
  --color-border: hsl(220, 13%, 91%);

  /* Text */
  --color-text: hsl(220, 13%, 13%);
  --color-text-secondary: hsl(220, 9%, 46%);
  --color-text-muted: hsl(220, 9%, 64%);
}

Psicología del color

Diseño dark mode first (Vercel)

Vercel diseña primero para dark mode y luego deriva el modo claro. Esto produce mejores interfaces oscuras porque el dark mode se convierte en la consideración principal en lugar de algo secundario.

/* Design dark first, derive light */
:root {
  /* Dark mode defaults */
  --color-background: hsl(0, 0%, 0%);
  --color-surface: hsl(0, 0%, 7%);
  --color-border: hsl(0, 0%, 15%);
  --color-text: hsl(0, 0%, 93%);
  --color-text-secondary: hsl(0, 0%, 63%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-background: hsl(0, 0%, 100%);
    --color-surface: hsl(0, 0%, 97%);
    --color-border: hsl(0, 0%, 89%);
    --color-text: hsl(0, 0%, 9%);
    --color-text-secondary: hsl(0, 0%, 40%);
  }
}

Cuándo usarlo: herramientas para desarrolladores, apps multimedia, dashboards —contextos donde los usuarios pasan sesiones prolongadas y el dark mode reduce la fatiga visual.

Contraste y accesibilidad

WCAG 2.2 se convirtió en estándar ISO (ISO/IEC 40500:2025) en octubre de 2025, añadiendo criterios para visibilidad del foco, entrada redundante y autenticación accesible. Adiciones clave: los indicadores de foco no deben quedar completamente ocultos por otro contenido (2.4.11), y la autenticación no debe depender exclusivamente de pruebas de función cognitiva (3.3.8).

Herramientas: WebAIM Contrast Checker, selector de color de Chrome DevTools

Jerarquía visual

“El diseño es el embajador silencioso de tu marca.” — Paul Rand

La jerarquía visual controla qué ven los usuarios primero, segundo y tercero. Sin una jerarquía clara, los usuarios deben esforzarse para encontrar la información. Con ella, las interfaces se sienten naturales.

Las seis herramientas de la jerarquía

1. Tamaño — Los elementos más grandes atraen la atención primero

.hero-title { font-size: 3rem; }      /* Dominant */
.section-title { font-size: 1.5rem; } /* Secondary */
.body-text { font-size: 1rem; }       /* Baseline */

2. Peso tipográfico — La negrita destaca, lo ligero retrocede

h1 { font-weight: 700; }
.lead { font-weight: 500; }
p { font-weight: 400; }

3. Color y contraste — Alto contraste = atención

.title { color: var(--color-text); }  /* Near black */
.meta { color: var(--color-text-muted); }  /* Gray */

4. Posición — Las posiciones clave importan

F-PATTERN (content pages):     Z-PATTERN (landing pages):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espacio en blanco — El aislamiento genera importancia

.hero { padding: 120px 48px; }  /* Generous space */
.data-table { padding: 12px; }  /* Dense content */

6. Profundidad y elevación — Los elementos que sobresalen demandan atención

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-lg); }

Patrones aplicados

Presencia colaborativa (Figma): Múltiples cursores de usuario con etiquetas de nombre, resaltado de selección y contornos de componentes crean un documento vivo. El color de cada colaborador es distinto pero tiene el mismo peso visual —ningún cursor es más “ruidoso” que otro.

Indicadores de estado ambientales (Vercel): El estado de despliegue utiliza indicadores sutiles y persistentes en lugar de alertas intrusivas. Una barra delgada de color en la parte superior comunica el estado (compilando, desplegado, fallido) sin interrumpir el flujo de trabajo.

Analogías de diseño del mundo real (Flighty): Las visualizaciones del progreso de vuelo replican instrumentos de aviación físicos —curvas de altitud, indicadores de velocidad y mapas de puertas de embarque usan metáforas visuales familiares en lugar de barras de progreso abstractas.

La prueba de entrecerrar los ojos

Entrecierra los ojos mirando tu diseño. ¿Aún puedes distinguir la jerarquía? Si la respuesta es sí, es sólida.

Espaciado y ritmo

“El espacio en blanco es como el aire: es necesario para que el diseño respire.” — Wojciech Zieliński

El espaciado es la estructura invisible del diseño. Un espaciado consistente crea ritmo visual —la sensación de que los elementos pertenecen a un sistema coherente.

La cuadrícula de 8px

La cuadrícula de 8px es el estándar de la industria porque: - Se divide de manera uniforme (8, 16, 24, 32, 40, 48…) - Funciona con las densidades de pantalla más comunes (1x, 1.5x, 2x, 3x) - Crea un ritmo consistente sin necesidad de cálculos complicados

:root {
  --space-1: 4px;    /* Tight: icon gaps */
  --space-2: 8px;    /* Compact: inline elements */
  --space-3: 12px;   /* Snug: form fields */
  --space-4: 16px;   /* Default: most gaps */
  --space-6: 24px;   /* Spacious: card padding */
  --space-8: 32px;   /* Section gaps */
  --space-12: 48px;  /* Major sections */
  --space-16: 64px;  /* Page sections */
  --space-20: 80px;  /* Hero spacing */
}

Espaciado interno vs. externo

Interno (padding): Espacio dentro de un elemento Externo (margin): Espacio entre elementos

Regla: El espaciado interno generalmente debe ser mayor que el externo dentro de grupos relacionados.

.card {
  padding: 24px;        /* Internal: spacious */
  margin-bottom: 16px;  /* External: less than padding */
}

Patrones de espaciado en componentes

Tarjetas:

.card { padding: 24px; border-radius: 12px; }
.card-header { margin-bottom: 16px; }
.card-title { margin-bottom: 4px; }  /* Tight to subtitle */

Botones:

.btn { padding: 12px 24px; border-radius: 8px; }
.btn--sm { padding: 8px 16px; }
.btn--lg { padding: 16px 32px; }
.btn-group { display: flex; gap: 12px; }

Formularios:

.form-row { margin-bottom: 24px; }
.form-label { margin-bottom: 4px; }
.form-help { margin-top: 4px; }
.form-actions { margin-top: 32px; display: flex; gap: 12px; }

Referencia rápida de espaciado

Principios de animación

“La animación no es el arte de dibujos que se mueven, sino el arte de movimientos que se dibujan.” — Norman McLaren

La animación da vida a las interfaces. Bien ejecutada, guía la atención, comunica estados y genera conexión emocional. Mal ejecutada, frustra y distrae.

El principio fundamental

La animación debe sentirse inevitable, no decorativa.

Buena animación: 1. Comunica algo que el diseño estático no puede 2. Reduce la carga cognitiva al mostrar relaciones 3. Se siente natural y esperada 4. Desaparece de la percepción consciente

Mala animación: 1. Existe solo porque “se ve bien” 2. Ralentiza al usuario 3. Llama la atención sobre sí misma 4. Genera ansiedad o impaciencia

Principios clave para UI

1. Anticipación — Prepara a los usuarios para lo que viene.

.button {
  transition: transform 0.1s ease-out;
}

.button:active {
  transform: scale(0.97);  /* Slight press before action */
}

2. Seguimiento — Deja que el movimiento se complete de forma natural con un asentamiento tipo resorte.

.panel {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isOpen = true
}

3. Ease-In, Ease-Out — Nada en la naturaleza se mueve a velocidad constante.

4. Puesta en escena — Dirige la atención a lo que importa. Solo un elemento debe moverse a la vez, a menos que estén coreografiados como grupo.

5. Escalonamiento — Los elementos deben llegar en secuencia, no todos a la vez.

.list-item {
  animation: fadeSlideIn 0.3s ease-out both;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
.list-item:nth-child(4) { animation-delay: 150ms; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

Guía de tiempos

Rendimiento: la regla de oro

Solo anima transform y opacity — están acelerados por GPU y no provocan recálculo de layout.

/* BAD: Animating layout */
.panel { transition: left 0.3s, width 0.3s; }

/* GOOD: Using transform */
.panel { transition: transform 0.3s; }

Cuándo NO animar

1. El usuario tiene prefers-reduced-motion activado css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

2. La animación no aporta información — spinners gratuitos, elementos que rebotan

3. Los usuarios tienen prisa — estados de error, validación de formularios, resultados de búsqueda
4. La animación retrasaría acciones repetidas — los atajos de teclado deben omitir la animación
5. Los datos ya están cargados — Bear usa cero estados de carga al precargar el contenido, haciendo que la app se sienta instantánea. Si puedes precargar, omite el skeleton/spinner por completo.

// Bear's approach: preload so no loading state is needed
struct NoteListView: View {
    @Query var notes: [Note]  // SwiftData loads from disk instantly
    // No loading state, no skeleton, no spinner — data is always there
    var body: some View {
        List(notes) { note in
            NoteRow(note: note)
        }
    }
}

Referencia rápida de animación

:root {
  /* Durations */
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* Easings */
  --ease-out: cubic-bezier(0.0, 0.0, 0.58, 1.0);
  --ease-in: cubic-bezier(0.42, 0.0, 1.0, 1.0);
  --ease-in-out: cubic-bezier(0.42, 0.0, 0.58, 1.0);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

Patrones de interacción

“La mejor interfaz es no tener interfaz.” — Golden Krishna

Los patrones de interacción definen cómo los usuarios manipulan, navegan y comprenden tu producto. Estos patrones se extraen del estudio de productos que ofrecen interacciones excepcionales.

Manipulación directa (Framer)

Haz tangibles los conceptos abstractos. Framer transforma los breakpoints de CSS —números abstractos— en controles arrastrables. Los usuarios ven cómo los layouts se adaptan en tiempo real.

/* Breakpoint handle styling */
.breakpoint-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  cursor: col-resize;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.breakpoint-handle:hover,
.breakpoint-handle:active {
  opacity: 1;
  width: 6px;
}

Cuándo usar: Cualquier configuración donde el resultado sea visual —redimensionar arrastrando, selectores de color, desplazamiento en líneas de tiempo.

Interfaces sensibles al contexto (Flighty, Figma)

Muestra solo lo relevante para el momento actual. Flighty usa 15 estados distintos para el seguimiento de vuelos. El panel de propiedades de Figma se transforma por completo según lo que hayas seleccionado.

enum ContextState: CaseIterable {
    case farOut, dayBefore, headToAirport, atAirport
    case atGate, boarding, inFlight, landed, connection

    static func current(for flight: Flight, context: UserContext) -> ContextState {
        // Factor in: time, location, flight status
        // Return the single most relevant state
    }
}

Anti-patrón: Mostrar todos los controles y atenuar los irrelevantes. Esto genera ruido visual.

Activación inteligente (Halide)

Las herramientas deben detectar el contexto y activarse solas. La lupa de enfoque de Halide aparece al arrastrar el foco y desaparece al soltar. No se necesitan botones de alternancia.

struct IntelligentlyActivated<Content: View>: ViewModifier {
    let isInteracting: Bool
    @State private var isVisible = false

    func body(content: Content) -> some View {
        content
            .opacity(isVisible ? 1 : 0)
            .scaleEffect(isVisible ? 1 : 0.95)
            .animation(.easeInOut(duration: 0.2), value: isVisible)
            .onChange(of: isInteracting) { _, newValue in
                if newValue {
                    withAnimation { isVisible = true }
                } else {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        if !isInteracting { isVisible = false }
                    }
                }
            }
    }
}

Diseño de modo dual (Halide, Warp)

Los cambios de modo deben transformar la UI, no solo alternar elementos. Los modos Auto y Manual de Halide son interfaces completamente diferentes. Warp conecta CLI y GUI a través de cuatro métodos de entrada (escritura, paleta, IA, ratón) sin forzar a los usuarios a un solo paradigma.

Contenido estructurado (Warp, Bear, Craft)

Añade estructura al contenido tradicionalmente desestructurado. Warp convierte la salida del terminal en bloques discretos que se pueden copiar, compartir o volver a ejecutar. Bear te permite organizar notas en línea mientras escribes (#tag/subtag). Craft permite que cualquier bloque se convierta en página —la estructura emerge del uso, no de una jerarquía predefinida.

Entrenamiento progresivo (Superhuman)

Enseña a los usuarios el camino rápido mediante la exposición repetida. La paleta Cmd+K de Superhuman siempre muestra los atajos de teclado junto a los resultados. Cada uso es una micro-lección.

/* Always show shortcut alongside command name */
.command-result {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
}

.command-shortcut {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
}

Anti-patrón: Modales de tutorial que explican funciones. La explicación se olvida; la práctica se recuerda.

Patrones de interfaz con IA

“Las mejores interfaces de IA hacen visible el proceso de la máquina y verificable su resultado.”

Las interfaces de IA enfrentan desafíos únicos: los usuarios no pueden predecir el resultado, no pueden verificar la precisión por inspección y, con frecuencia, no pueden distinguir si el sistema funciona o está fallando.

El problema central

Diseño centrado en citas (Perplexity)

Cada afirmación factual debe enlazar a su fuente. Perplexity incorpora citas en línea [1] en cada afirmación, con previsualizaciones al pasar el cursor y un panel de fuentes persistente.

.citation-marker {
  position: relative;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8em;
  vertical-align: super;
}

.citation-preview {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Antipatrón: Interfaces de IA que generan afirmaciones sin fuentes rastreables. Si el modelo no puede citarlo, la interfaz debería señalarlo.

Indicadores de fase en streaming (Perplexity)

Muestra a los usuarios qué está haciendo la IA, no solo que está trabajando. Reemplaza los spinners genéricos con indicadores de fase: “Buscando…” → “Leyendo 4 fuentes…” → “Redactando respuesta…”

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--phase-color) 10%, transparent);
  border-radius: 16px;
  font-size: 13px;
  color: var(--phase-color);
  transition: all 0.3s ease;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

Transparencia ante errores

Cuando la IA falla o no está segura, muéstralo con claridad; no lo ocultes detrás de texto que suena convincente.

Dato clave: Los usuarios perdonan a una IA que es honesta sobre su incertidumbre. No perdonan a una IA que se equivoca con seguridad.

Dieter Rams: diez principios

“Menos, pero mejor.” — Dieter Rams

Dieter Rams es el diseñador industrial más influyente del siglo XX. Como director de diseño en Braun de 1961 a 1995, creó productos que siguen siendo atemporales décadas después. Su trabajo inspiró directamente el lenguaje de diseño de Apple.

Los diez principios del buen diseño

1. El buen diseño es innovador No copies. Combina la tecnología en evolución con un diseño innovador.

2. El buen diseño hace útil un producto Cada elemento debe cumplir un propósito. La forma sigue a la función.

3. El buen diseño es estético La belleza no es superficial, es esencial. Los productos que usamos a diario afectan nuestro bienestar.

4. El buen diseño hace comprensible un producto Los usuarios no deberían necesitar instrucciones. La interfaz se enseña sola.

5. El buen diseño es discreto El diseño debe apoyar, no abrumar. El contenido del usuario es el protagonista, no tu UI.

/* Obtrusive: UI competes with content */
.editor {
  background: linear-gradient(135deg, purple, blue);
  border: 3px dashed gold;
}

/* Unobtrusive: UI recedes, content shines */
.editor {
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

6. El buen diseño es honesto No uses dark patterns. No prometas de más. Sé transparente sobre las limitaciones.

7. El buen diseño es duradero Evita tendencias que envejecerán rápido. Lo clásico sobre lo trendy.

DE MODA (envejecerá):         ATEMPORAL:
- Glassmorphism extremo       - Tipografía limpia
- Colores neón, efectos glitch - Elevación sutil
- Degradados agresivos        - Paleta neutra con acento bien pensado

8. El buen diseño es minucioso hasta el último detalle Nada debe ser arbitrario. Estados de carga, estados vacíos, estados de error: todos diseñados.

9. El buen diseño es respetuoso con el medio ambiente El rendimiento es ecológico. Respeta la atención del usuario. Código eficiente.

10. El buen diseño es el mínimo diseño posible Elimina todo lo que no sea necesario. El mejor diseño es invisible.

Patrones web 2026

El diseño web moderno aprovecha las capacidades nativas de CSS que eliminan la necesidad de JavaScript en muchos casos. El período 2025-2026 trajo anchor positioning, scroll-driven animations y @starting-style a los navegadores en producción.

Container Queries

Dimensiona los componentes según su contenedor, no según el viewport.

.card-grid {
  container-type: inline-size;
  container-name: card-grid;
}

.card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

@container card-grid (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
  }
}

@container card-grid (min-width: 600px) {
  .card {
    padding: 32px;
    gap: 24px;
  }
}

El selector :has()

Selección del padre basada en los hijos, algo que antes era imposible sin JavaScript.

/* Card with image gets different padding */
.card:has(img) {
  padding: 0;
}

.card:has(img) .card-content {
  padding: 20px;
}

/* Form group with error */
.form-group:has(.input:invalid) .form-label {
  color: var(--color-error);
}

/* Highlight navigation when on that page */
.nav-item:has(a[aria-current="page"]) {
  background: var(--color-surface);
}

Anidamiento nativo en CSS

Anidamiento nativo sin preprocesadores.

.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
  }

  & .card-body {
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  &:hover {
    box-shadow: var(--shadow-md);
  }

  @media (min-width: 768px) {
    padding: 32px;
  }
}

Integración con HTMX

Interactividad impulsada por el servidor sin frameworks pesados de JavaScript.

<!-- Load content on click -->
<button hx-get="/api/more-items"
        hx-target="#item-list"
        hx-swap="beforeend"
        hx-indicator="#loading">
  Load More
</button>

<!-- Form with inline validation -->
<form hx-post="/api/contact"
      hx-target="#form-response"
      hx-swap="outerHTML">
  <input type="email" name="email"
         hx-post="/api/validate-email"
         hx-trigger="blur"
         hx-target="next .error" />
  <span class="error"></span>
</form>

Anchor Positioning

Posicionamiento nativo en CSS de un elemento relativo a otro, sin necesidad de JavaScript. Tooltips, popovers y menús desplegables que siguen a sus disparadores.

/* Anchor an element to another */
.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Scroll-Driven Animations

Vincula el progreso de la animación a la posición de scroll. Indicadores de progreso de lectura, efectos parallax y secuencias de aparición sin JavaScript.

/* Reading progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-primary);
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@starting-style

Define estilos iniciales para elementos que entran al DOM, lo que permite animaciones de entrada solo con CSS, sin JavaScript.

.card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;

  @starting-style {
    opacity: 0;
    transform: translateY(10px);
  }
}

Sistema de design tokens

Un sistema completo de tokens para mantener la consistencia en toda tu aplicación.

:root {
  /* Colors */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-surface-elevated: #ffffff;

  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8px base) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-normal: 200ms;
}

Dark Mode bien hecho

No te limites a invertir: rediseña para contextos oscuros.

@media (prefers-color-scheme: dark) {
  :root {
    /* Neutrals */
    --color-background: hsl(220, 13%, 10%);
    --color-surface: hsl(220, 13%, 15%);
    --color-surface-elevated: hsl(220, 13%, 18%);
    --color-border: hsl(220, 13%, 23%);

    /* Text (inverted) */
    --color-text: hsl(220, 9%, 93%);
    --color-text-secondary: hsl(220, 9%, 70%);
    --color-text-muted: hsl(220, 9%, 55%);

    /* Adjust saturation for dark mode */
    --color-primary: hsl(220, 80%, 60%);
    --color-success: hsl(142, 70%, 45%);
    --color-error: hsl(0, 80%, 65%);

    /* Shadows in dark mode need adjustment */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Principios del dark mode: - Reduce la saturación en superficies grandes - Aumenta la luminosidad de los colores de acento - Refuerza las sombras (necesitan más contraste) - Diseña el dark mode de forma intencional, no como algo secundario

Flujos de extracción desde Figma

Transformar archivos de diseño en código de producción requiere una extracción sistemática de design tokens: colores, tipografía, espaciado y efectos que definen tu lenguaje de diseño.

Exportación de variables de Figma

La función nativa de Variables de Figma ofrece la ruta de extracción más limpia:

Pasos de exportación: 1. Abre el archivo en Figma → panel de Variables locales 2. Haz clic en el menú de la colección → “Export to JSON” 3. Guarda como figma-variables.json

Estructura de tokens en JSON:

{
  "colors": {
    "primitive": {
      "blue-500": { "value": "#3b82f6", "type": "color" },
      "blue-600": { "value": "#2563eb", "type": "color" }
    },
    "semantic": {
      "primary": { "value": "{colors.primitive.blue-500}", "type": "color" },
      "primary-hover": { "value": "{colors.primitive.blue-600}", "type": "color" }
    }
  },
  "spacing": {
    "1": { "value": "4px", "type": "spacing" },
    "2": { "value": "8px", "type": "spacing" },
    "4": { "value": "16px", "type": "spacing" }
  }
}

Transformación de tokens a CSS

Propiedades personalizadas en CSS:

:root {
  /* Primitive colors (direct values) */
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Semantic colors (reference primitives) */
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-background: var(--color-white);
  --color-surface: var(--color-gray-50);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */

  /* Typography */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

Tokens para dark mode:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-gray-900);
    --color-surface: var(--color-gray-800);
    --color-text: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  }
}

Transformación de tokens a SwiftUI

Extensión de Color:

import SwiftUI

extension Color {
    // MARK: - Primitive Colors
    static let blue50 = Color(hex: "eff6ff")
    static let blue500 = Color(hex: "3b82f6")
    static let blue600 = Color(hex: "2563eb")

    // MARK: - Semantic Colors
    static let brandPrimary = Color.blue500
    static let brandPrimaryHover = Color.blue600

    // MARK: - Surface Colors
    static let surfaceBackground = Color(light: .white, dark: Color(hex: "0f172a"))
    static let surfaceElevated = Color(light: Color(hex: "f8fafc"), dark: Color(hex: "1e293b"))
}

extension Color {
    init(hex: String) {
        // Standard hex parsing implementation
    }

    init(light: Color, dark: Color) {
        self.init(UIColor { traits in
            traits.userInterfaceStyle == .dark ? UIColor(dark) : UIColor(light)
        })
    }
}

Constantes de espaciado:

enum Spacing {
    static let xs: CGFloat = 4    // --space-1
    static let sm: CGFloat = 8    // --space-2
    static let md: CGFloat = 16   // --space-4
    static let lg: CGFloat = 24   // --space-6
    static let xl: CGFloat = 32   // --space-8
}

// Usage
VStack(spacing: Spacing.md) {
    // ...
}
.padding(Spacing.lg)

Checklist de entrega al diseñador

Lo que los diseñadores deben exportar:

Criterios de control de calidad:

• [ ] Todos los colores definidos como variables (sin hex hardcodeados)
• [ ] La tipografía usa estilos de texto definidos
• [ ] El espaciado sigue el sistema de cuadrícula (base de 8px)
• [ ] Se proporcionan variantes de dark mode
• [ ] Los estados interactivos están documentados (hover, active, disabled)
• [ ] Los breakpoints responsivos están anotados
• [ ] Los requisitos de accesibilidad están indicados (ratios de contraste)

Lo que recibe el desarrollador:

1. Archivos de tokens (JSON/CSS/Swift según la plataforma)
2. Especificaciones de componentes con medidas
3. Exportaciones de recursos en los formatos requeridos
4. Documentación de interacciones (estados, animaciones)
5. Anotaciones de accesibilidad

Tablas de referencia rápida

Principios Gestalt

Tipografía

Roles de color

Escala de espaciado

Checklist de diseño

Antes de lanzar cualquier interfaz, verifica lo siguiente:

Gestalt

• [ ] Los elementos relacionados están más cerca que los no relacionados (Proximidad)
• [ ] Las funciones similares tienen estilos similares (Similitud)
• [ ] Hay separación clara entre primer plano y fondo (Figura-Fondo)
• [ ] La vista fluye naturalmente a través del diseño (Continuidad)

Tipografía

• [ ] El tamaño base de fuente es al menos 16px
• [ ] El line height es 1.5+ para texto de cuerpo
• [ ] La longitud de línea es menor a 75 caracteres
• [ ] La jerarquía es clara (3 niveles distinguibles)
• [ ] Se usa una escala consistente en todo el diseño

Color

• [ ] Todo el texto cumple con un contraste de 4.5:1 (WCAG AA)
• [ ] El color no es el único indicador (también iconos y etiquetas)
• [ ] El dark mode está diseñado de forma intencional
• [ ] Se sigue la distribución 60-30-10

Jerarquía visual

• [ ] Se puede identificar el elemento más importante (#1)
• [ ] La vista fluye en el orden previsto
• [ ] Hay un CTA claro por sección
• [ ] La escala tipográfica es consistente

Espaciado

• [ ] Todo el espaciado usa la escala definida (sin números mágicos)
• [ ] Las tarjetas y componentes tienen relleno consistente
• [ ] El espaciado en móvil es cómodo
• [ ] La alineación a la cuadrícula es consistente (base de 8px)

Interacción

• [ ] ¿Pueden los usuarios lograr sus objetivos sin pensar en la herramienta?
• [ ] ¿Se adapta la UI al contexto actual?
• [ ] ¿Las herramientas son visibles solo cuando son relevantes?
• [ ] ¿El uso repetido enseña métodos más rápidos?

Interfaces de IA

• [ ] Cada afirmación factual tiene una fuente rastreable
• [ ] El streaming muestra fases del proceso, no solo un spinner
• [ ] Los estados de error son transparentes, no están ocultos
• [ ] Las respuestas de baja confianza se diferencian visualmente

Verificación de Dieter Rams

• [ ] ¿Se puede eliminar algo?
• [ ] ¿Cada elemento cumple una función?
• [ ] ¿Se sentiría anticuado en 5 años?
• [ ] ¿He diseñado todos los estados?

Recursos

Libros: - As Little Design as Possible de Sophie Lovell (Dieter Rams) - The Elements of Typographic Style de Robert Bringhurst

Herramientas: - WebAIM Contrast Checker - Type Scale Generator - Figma Tokens Studio — Gestión de design tokens

Sistemas de diseño: - Apple HIG - Material Design 3 - Radix UI - shadcn/ui

Estudios de diseño

Análisis profundos de 16 productos excepcionales, documentando patrones y principios que vale la pena adoptar.

Herramientas para desarrolladores

iOS nativo (ganadores del Apple Design Award)

Productividad e IA

Esta guía crece con la práctica. Los principios de diseño son atemporales, pero su aplicación evoluciona con la tecnología y la comprensión.