Principios de diseno 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 diferente a 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 — organiza los elementos en patrones significativos. Domine estos principios para controlar cómo los usuarios perciben sus 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 igual = 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 CSS:

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

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

Implementación 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 de la misma manera. Por eso los sistemas de diseño utilizan estilos consistentes de botones, tratamientos de tarjetas y tipografía.

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 relación figura-fondo deficiente genera confusión visual.

Técnicas: - Contraste (figura clara sobre fondo oscuro, o viceversa) - Sombras (elevar la figura sobre el fondo) - Bordes (delinear 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 borde) indica que pertenecen al mismo grupo.

Continuidad

El ojo sigue caminos, líneas y curvas.

Utilice la alineación y el flujo visual para guiar la atención a través de su 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]               │  ← Todavía en el borde izquierdo
└────────────────────────────────┘

Cierre

El cerebro completa las formas incompletas.

Los usuarios no necesitan que cada píxel esté dibujado — completarán mentalmente las formas familiares. 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 las interfaces más difíciles de usar; una gran tipografía es invisible — simplemente funciona.

Escala Tipográfica

Una escala consistente crea armonía visual. Utilice 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. Diferentes tipos de contenido necesitan diferentes interlineados.

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

Primero las fuentes del sistema. Se cargan instantáneamente, 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;
}

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

Peso de Fuente para Jerarquía

Utilice 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, guía la atención, señala 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)
└──────────────────────────────────────────┘

Construcción de 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 con Prioridad en Modo Oscuro (Vercel)

Vercel diseña primero para modo oscuro y luego deriva el modo claro. Esto produce mejores interfaces oscuras porque el modo oscuro se convierte en la consideración principal en lugar de una ocurrencia tardía.

/* 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, aplicaciones multimedia, dashboards — contextos donde los usuarios pasan sesiones prolongadas y el modo oscuro reduce la fatiga visual.

Contraste de Accesibilidad

WCAG 2.2 se convirtió en un 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 ser completamente ocultados por otro contenido (2.4.11), y la autenticación no debe depender únicamente 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 su marca.” — Paul Rand

La jerarquía visual controla lo que los usuarios ven 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 — La negrita se proyecta hacia adelante, 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 (páginas de contenido):    Z-PATTERN (páginas de destino):
████████████████████████      1 ──────────────────► 2
████████                            ↘
████                                     ↘
██                                            ↘
                                   3 ──────────────────► 4

5. Espacio en blanco — El aislamiento crea importancia

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

6. Profundidad y elevación — Los elementos que se proyectan hacia adelante exigen 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 usuarios con etiquetas de nombre, resaltados 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 fuerte” que otro.

Indicadores de estado ambientales (Vercel): El estado del despliegue utiliza indicadores sutiles y persistentes en lugar de alertas intrusivas. Una barra delgada de color en la parte superior comunica el estado (construyendo, 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 físicos de aviación—curvas de altitud, indicadores de velocidad y mapas de puertas de embarque utilizan metáforas visuales familiares en lugar de barras de progreso abstractas.

La prueba de entrecerrar los ojos

Entrecierre los ojos al mirar su diseño. ¿Aún puede ver 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 juntos en un sistema coherente.

La cuadrícula de 8px

La cuadrícula de 8px es el estándar de la industria porque: - Se divide uniformemente (8, 16, 24, 32, 40, 48…) - Funciona con las densidades de pantalla comunes (1x, 1,5x, 2x, 3x) - Crea un ritmo consistente sin 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 espaciado 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 los dibujos que se mueven, sino el arte de los movimientos que se dibujan.” — Norman McLaren

La animación da vida a las interfaces. Bien hecha, guía la atención, comunica estados y crea conexión emocional. Mal hecha, 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. Crea ansiedad o impaciencia

Principios clave para UI

1. Anticipación — Prepare 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. Continuidad del movimiento — Permita que el movimiento se complete de forma natural con un asentamiento similar a un 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 — Dirija 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 aparecer 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 anime transform y opacity — están acelerados por GPU y no provocan recálculo del diseño.

/* 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 agrega información — spinners gratuitos, elementos rebotando

3. Los usuarios tienen prisa — estados de error, validación de formularios, resultados de búsqueda
4. La animación ralentizaría acciones repetidas — los atajos de teclado deben omitir la animación
5. Los datos ya están cargados — Bear utiliza cero estados de carga al precargar el contenido, haciendo que la aplicación se sienta instantánea. Si puede precargar, omita 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 ninguna interfaz.” — Golden Krishna

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

Manipulación directa (Framer)

Haga tangibles los conceptos abstractos. Framer transforma los breakpoints de CSS—números abstractos—en controles arrastrables. Los usuarios ven cómo los diseños 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—arrastrar para redimensionar, selectores de color, desplazamiento en líneas de tiempo.

Interfaces sensibles al contexto (Flighty, Figma)

Muestre solo lo que es relevante para el momento actual. Flighty utiliza 15 estados distintos para el seguimiento de vuelos. El panel de propiedades de Figma se transforma completamente según lo que haya 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 por sí solas. La lupa de enfoque de Halide aparece al arrastrar el enfoque 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 Automático y Manual de Halide son interfaces completamente diferentes. Warp conecta CLI y GUI a través de cuatro métodos de entrada (escritura, paleta, AI, ratón) sin forzar a los usuarios a adoptar un solo paradigma.

Contenido estructurado (Warp, Bear, Craft)

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

Entrenamiento progresivo (Superhuman)

Enseñe 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: Ventanas modales de tutorial que explican funciones. Las explicaciones se olvidan; la práctica se recuerda.

Patrones de interfaz con AI

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

Las interfaces de AI enfrentan desafíos únicos: los usuarios no pueden predecir la salida, no pueden verificar la precisión por inspección y, a menudo, no pueden distinguir si el sistema está funcionando 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 vistas previas 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);
}

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

Indicadores de fase en streaming (Perplexity)

Muestre a los usuarios lo que la AI está haciendo, no solo que está trabajando. Reemplace los indicadores de carga 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 AI falla o es incierta, muéstrelo claramente—no lo oculte detrás de texto que suena seguro.

Idea clave: Los usuarios perdonan a una AI que es honesta sobre su incertidumbre. No perdonan a una AI que está equivocada 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 copie. Combine la tecnología en avance 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 a sí misma.

5. El buen diseño es discreto El diseño debe apoyar, no abrumar. El contenido del usuario es el protagonista, no su 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 use dark patterns. No prometa de más. Sea transparente sobre las limitaciones.

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

TRENDY (will date):           TIMELESS:
- Extreme glassmorphism       - Clean typography
- Neon colors, glitch effects - Subtle elevation
- Aggressive gradients        - Neutral palette with considered accent

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

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

10. El buen diseño es el menor diseño posible Elimine 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. 2025-2026 trajo anchor positioning, animaciones impulsadas por scroll y @starting-style a los navegadores de producción.

Container Queries

Dimensione 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 elemento padre basada en sus hijos — algo previamente 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 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 CSS nativo de un elemento relativo a otro — sin necesidad de JavaScript. Tooltips, popovers y menús desplegables que siguen a sus elementos activadores.

/* 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;
}

Animaciones impulsadas por scroll

Vincule el progreso de la animación a la posición de scroll. Indicadores de progreso de lectura, efectos de paralaje y secuencias de revelació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

Defina estilos iniciales para elementos que ingresan al DOM — permitiendo 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 su 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 implementado

No se limite a invertir — rediseñe 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: - Reduzca la saturación en superficies grandes - Aumente la luminosidad de los colores de acento - Refuerce las sombras (necesitan más contraste) - Diseñe el dark mode de forma intencional, no como algo secundario

Flujos de trabajo 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 su lenguaje de diseño.

Exportación de variables de Figma

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

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

Estructura JSON de tokens:

{
  "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

CSS Custom Properties:

: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)

Lista de verificación para la entrega entre diseñadores y desarrolladores

Lo que los diseñadores deben exportar:

Criterios de control de calidad:

• [ ] Todos los colores definidos como variables (sin hex codificados directamente)
• [ ] 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
• [ ] Se documentan los estados interactivos (hover, active, disabled)
• [ ] Se anotan los breakpoints responsivos
• [ ] Se incluyen los requisitos de accesibilidad (ratios de contraste)

El desarrollador recibe:

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

Lista de verificación de diseño

Antes de publicar cualquier interfaz, verifique:

Gestalt

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

Tipografía

• [ ] El tamaño de fuente base es al menos 16px
• [ ] La altura de línea 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 utiliza una escala consistente en todo el diseño

Color

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

Jerarquía visual

• [ ] Se puede identificar el elemento más importante (#1)
• [ ] La mirada fluye en el orden previsto
• [ ] Un CTA claro por sección
• [ ] Escala tipográfica consistente

Espaciado

• [ ] Todo el espaciado utiliza una escala definida (sin números arbitrarios)
• [ ] Las tarjetas/componentes tienen padding consistente
• [ ] El espaciado en móvil es cómodo
• [ ] La alineación de la grilla 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 indicador de carga
• [ ] Los estados de error son transparentes, no 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 verí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.