Patrones de Diseño Web
Patrones de implementación CSS para interfaces de producción. Para fundamentos de diseño y toma de decisiones, consulta ui-design. Esta habilidad se centra en el código.
Ver también:
ui-designpara teoría de tipografía/color/espaciado,frontend-designpara estética creativa.
Instalación
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install web-design
Principios de Layout
Usa CSS Grid para layouts bidimensionales y Flexbox para flujo unidimensional. Elige la herramienta adecuada para cada contexto.
| Necesidad de Layout | Herramienta | Por qué |
|---|---|---|
| Estructura a nivel de página | CSS Grid (grid-template-areas) | Regiones nombradas, control explícito de filas/columnas |
| Barras de navegación | Flexbox | Alineación en un solo eje, espaciado con gap |
| Cuadrículas de tarjetas | Grid (auto-fill / auto-fit) | Responsive sin media queries |
| Centrado | Grid (place-items: center) | La forma más corta y fiable de centrar |
| Sidebar + contenido | Grid (grid-template-columns: 250px 1fr) | Tamaño proporcional con sidebar fija |
| Superposiciones apiladas | Grid + grid-area: 1/1 | Superponer elementos sin position: absolute |
Composición Espacial
Ve más allá de los layouts predecibles. La asimetría intencionada, los elementos superpuestos y los acentos que rompen la cuadrícula crean interés visual. Usa apilamiento con grid (grid-area: 1/1) en lugar de position: absolute para superponer elementos. Elige espacio negativo generoso para estéticas de lujo/editoriales, o densidad controlada para interfaces con muchos datos — la elección debe ser intencionada.
Tipografía
La tipografía lleva el 90% de la personalidad de un diseño. Elige fuentes que coincidan con el propósito de la interfaz.
| Contexto | Dirección de Fuente para Títulos | Dirección de Fuente para Cuerpo | Ejemplo de Combinación |
|---|---|---|---|
| Editorial / revista | Serif de alto contraste | Sans humanista neutral | Playfair Display + Source Sans 3 |
| Panel SaaS | Sans geométrica | Sans del mismo peso | DM Sans + DM Mono (datos) |
| Portafolio creativo | Display expresiva | Sans limpia y legible | Syne + Outfit |
| Comercio electrónico de lujo | Serif moderna y fina | Sans elegante | Cormorant Garamond + Jost |
| Herramientas de desarrollo | Display monoespaciada | Cuerpo monoespaciado | JetBrains Mono + IBM Plex Mono |
Escala Tipográfica
Usa una proporción consistente. Una escala de 1.25 (tercera mayor) funciona para la mayoría de las interfaces: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Establece el texto del cuerpo a 1rem (16px mínimo), interlineado 1.5 para el cuerpo, 1.1–1.2 para títulos. Limita la longitud de línea a 60–75ch.
Color
Construyendo una Paleta
Cada paleta necesita cinco roles funcionales:
| Rol | Propósito | Ejemplo de Uso |
|---|---|---|
| Primario | Identidad de marca, acciones principales | Botones, enlaces, estados activos |
| Neutral | Texto, bordes, fondos | Texto del cuerpo, tarjetas, divisores |
| Acento | Acciones secundarias, resaltados | Etiquetas, badges, botones secundarios |
| Éxito / Advertencia / Error | Feedback semántico | Toasts, validación de formularios, estado |
| Superficie | Fondos en capas | Tarjetas sobre página, modales sobre overlay |
Contraste y Profundidad
Crea profundidad mediante capas de superficie, no solo sombras:
:root {
--surface-0: hsl(220 15% 8%); /* fondo de página */
--surface-1: hsl(220 15% 12%); /* tarjeta */
--surface-2: hsl(220 15% 16%); /* elemento elevado */
--surface-3: hsl(220 15% 20%); /* popover / modal */
}
Usa HSL u OKLCH para manipulación de color perceptualmente uniforme. Un color dominante con acentos nítidos supera a las paletas distribuidas uniformemente. Verifica siempre el contraste WCAG: 4.5:1 para texto normal, 3:1 para texto grande.
Espaciado
El espaciado consistente crea ritmo. Usa una unidad base de 8px (o 4px para UIs densas):
| Token | Valor | Uso |
|---|---|---|
--space-1 | 0.25rem (4px) | Espaciado de iconos en línea, padding ajustado |
--space-2 | 0.5rem (8px) | Padding de inputs, listas compactas |
--space-3 | 0.75rem (12px) | Padding de botones, espaciado interno de tarjetas |
--space-4 | 1rem (16px) | Espaciado predeterminado entre elementos |
--space-6 | 1.5rem (24px) | Padding de secciones, espacios entre tarjetas |
--space-8 | 2rem (32px) | Separación de secciones |
--space-12 | 3rem (48px) | Saltos de sección importantes |
--space-16 | 4rem (64px) | Ritmo vertical a nivel de página |
Aplica el espaciado de manera consistente: usa gap en contenedores Grid/Flexbox en lugar de márgenes en los hijos. Esto elimina los errores de colapso de márgenes y simplifica los ajustes responsive.
Jerarquía Visual
Guía la mirada mediante un contraste deliberado en tamaño, peso, color y espacio.
Técnicas de Jerarquía
| Técnica | Cómo | Impacto |
|---|---|---|
| Contraste de tamaño | Título principal 3–4 veces el tamaño del cuerpo | Punto focal inmediato |
| Contraste de peso | Títulos en negrita + cuerpo normal | Escaneabilidad |
| Contraste de color | Texto primario vs secundario atenuado | Capas de información |
| Agrupación espacial | Espaciado ajustado dentro de grupos, amplio entre grupos | Proximidad Gestalt |
| Elevación | Sombras / capas de superficie | Affordance interactivo |
| Aislamiento con espacio en blanco | Espacio vacío alrededor de un elemento clave | Énfasis a través de la ausencia |
Patrón Práctico — Jerarquía en Tarjetas
Capa de jerarquía dentro de las tarjetas: línea superior (xs, mayúsculas, atenuado) → título (xl, semibold) → cuerpo (base, color secundario, interlineado 1.6) → acción (separado con margin-top). Usa color de superficie para la separación y padding consistente de los tokens de espaciado.
Diseño Responsive
Estrategia de Breakpoints
| Breakpoint | Objetivo | Enfoque |
|---|---|---|
< 640px | Móvil | Una columna, navegación apilada, objetivos táctiles ≥ 44px |
640–1024px | Tablet | Opciones de dos columnas, sidebars colapsables |
1024–1440px | Escritorio | Layout completo, interacciones hover habilitadas |
> 1440px | Ancho | Contenedor de ancho máximo (1280px), evitar longitudes de línea ultra anchas |
Técnicas Fluidas
Prefiere el tamaño fluido sobre los breakpoints rígidos cuando sea posible:
/* Tipografía fluida — escala entre viewport de 640px y 1440px */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* Espaciado fluido */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* Cuadrícula intrínseca — no necesita media queries */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }
Usa container queries (@container) para capacidad de respuesta a nivel de componente cuando el layout de un componente deba responder a su contenedor, no al viewport.
Accesibilidad
La accesibilidad no es opcional. Constrúyela desde el principio.
| Requisito | Implementación | Estándar |
|---|---|---|
| Contraste de color | 4.5:1 texto normal, 3:1 texto grande / UI | WCAG 2.1 AA |
| Navegación por teclado | Todos los elementos interactivos enfocables y operables | WCAG 2.1.1 |
| Indicadores de foco | Anillo :focus-visible visible, desplazamiento de 2px+ | WCAG 2.4.7 |
| HTML semántico | Usa <button>, <nav>, <main>, <article>, etc. | WCAG 1.3.1 |
| Texto alternativo | Descriptivo para imágenes informativas, alt="" para decorativas | WCAG 1.1.1 |
| Seguridad de movimiento | Respeta prefers-reduced-motion | WCAG 2.3.3 |
| Objetivos táctiles | Áreas interactivas mínimas de 44×44px | WCAG 2.5.8 |
| ARIA cuando sea necesario | aria-label, aria-live, role solo cuando la semántica nativa es insuficiente | WCAG 4.1.2 |
/* Indicador de foco robusto */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Respetar preferencias de movimiento */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
Diseño de Componentes
Anatomía de un Componente Bien Diseñado
Cada componente de UI debe tener estados claros, espaciado consistente y comportamiento predecible:
| Estado | Tratamiento Visual | Ejemplo |
|---|---|---|
| Predeterminado | Estilo base | Botón en reposo |
| Hover | Cambio sutil — fondo, sombra o escala | background se aclara 5-10% |
| Activo / Presionado | Sensación comprimida — sombra reducida, ligero inset | transform: scale(0.98) |
| Foco | Anillo de alta visibilidad, sin eliminación de contorno | Anillo :focus-visible |
| Deshabilitado | Opacidad reducida, cursor: not-allowed | opacity: 0.5 |
| Cargando | Spinner o skeleton, interacción deshabilitada | Spinner en línea reemplazando la etiqueta |
Arquitectura de Tokens de Diseño
Estructura los tokens en tres capas para mantenibilidad:
/* Capa 1: Valores primitivos */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* Capa 2: Alias semánticos */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* Capa 3: Específicos del componente */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);
Este enfoque de tres capas permite cambiar de tema reasignando la Capa 2 sin tocar los componentes.
Patrones de Interacción
Movimiento y Animación
Usa el movimiento para comunicar cambios de estado, no para decorar. Concéntrate en los momentos de alto impacto:
| Interacción | Duración | Easing | Propósito |
|---|---|---|---|
| Hover de botón | 150ms | ease-out | Reconocer interacción |
| Apertura de modal | 250ms | ease-out | Llamar la atención |
| Cierre de modal | 200ms | ease-in | Despedida rápida |
| Transición de página | 300ms | ease-in-out | Mantener contexto espacial |
| Revelación escalonada | 50–80ms de retraso por elemento | ease-out | Carga secuencial de contenido |
| Micro-feedback | 100ms | ease-out | Toggle, checkbox, interruptor |
/* Animación de entrada escalonada */
.stagger-item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}
Efectos Basados en Scroll
Usa animation-timeline: scroll() nativo (detrás de @supports) para efectos de parallax y revelación sin JavaScript. Envuelve en detección de características para degradar con gracia.
Lista de Verificación de Calidad de Diseño
Antes de publicar, verifica contra estos criterios:
- Tipografía: Combinación de fuentes intencionada, escala consistente, longitudes de línea legibles
- Color: Paleta coherente, contraste WCAG cumplido, colores de feedback semántico definidos
- Espaciado: Ritmo consistente usando tokens de espaciado, sin valores de píxel ad-hoc
- Jerarquía: Flujo visual claro — la trayectoria de la mirada sigue el orden de lectura previsto
- Responsividad: Probado en móvil, tablet, escritorio; sin desbordamiento horizontal
- Accesibilidad: Navegable por teclado, foco visible, probado con lector de pantalla, seguro para movimiento
- Estados: Todos los elementos interactivos tienen estados hover, activo, foco, deshabilitado y de carga
- Personalidad: El diseño tiene un punto de vista claro — no estética de plantilla genérica
- Rendimiento: Imágenes optimizadas, fuentes subseteadas, animaciones aceleradas por GPU (
transform,opacity) - Modo oscuro: Si es compatible, las superficies usan luminosidad en capas, no colores invertidos