universal-design

vjrivmon's avatarfrom vjrivmon

Diseño que funciona para todos sin necesidad de adaptación. Use cuando diseñe productos para audiencias diversas o cuando busque máximo alcance.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[Brand and Creative Direction]

When & Why to Use This Skill

This Claude skill integrates the Universal Design framework to guide the creation of products, digital interfaces, and environments that are inherently accessible to all people. By applying the seven core principles—such as equitable use, flexibility, and intuitive operation—it ensures that designs achieve maximum reach and usability without requiring specialized adaptation or secondary versions for different user groups.

Use Cases

  • UX/UI Auditing: Evaluating digital wireframes and prototypes against the 7 principles of Universal Design to ensure accessibility and responsiveness.
  • Inclusive Product Development: Guiding the conceptualization of physical or digital products to accommodate diverse user abilities, ages, and contexts from the start.
  • Workflow Optimization: Refining user journeys to minimize cognitive load and physical effort, incorporating error tolerance features like 'undo' and 'autosave'.
  • Content Strategy: Implementing perceptible information standards, such as high-contrast visuals and multi-modal communication (text, audio, visual), to reach broader audiences.
nameuniversal-design
authorux-ui-skills
version"1.0"
categoryframeworks

Diseño Universal

Resumen

Diseño de productos y entornos que sean utilizables por todas las personas, en la mayor medida posible, sin necesidad de adaptación o diseño especializado.

Origen

  • Autor: Ronald Mace (NC State University)
  • Año: 1997
  • Centro: Center for Universal Design
  • Contexto: Arquitectura accesible

Los 7 Principios

1. Uso Equitativo

  • Útil para personas con diversas capacidades
  • Mismo método de uso cuando posible
  • Equivalente cuando no es posible
  • Sin segregar usuarios

2. Flexibilidad de Uso

  • Acomoda preferencias y habilidades
  • Facilita precisión y accuracy
  • Ofrece adaptabilidad al ritmo
  • Permite múltiples métodos

3. Uso Simple e Intuitivo

  • Fácil de entender
  • Independiente de experiencia
  • Independiente de conocimiento
  • Independiente de idioma

4. Información Perceptible

  • Comunica eficazmente
  • Múltiples modos (visual, auditivo, táctil)
  • Contraste adecuado
  • Compatible con técnicas/dispositivos

5. Tolerancia al Error

  • Minimiza riesgos de acciones accidentales
  • Warnings de peligros
  • Fail-safe features
  • Desalienta acciones inconscientes en tareas críticas

6. Bajo Esfuerzo Físico

  • Uso eficiente y cómodo
  • Mínima fatiga
  • Posición corporal neutral
  • Fuerzas de operación razonables

7. Tamaño y Espacio Apropiado

  • Apropiado para approach, reach, manipulation
  • Independiente de tamaño corporal
  • Independiente de postura
  • Independiente de movilidad

Aplicación en Diseño Digital

Uso Equitativo

  • Una URL para todos (no versiones "accesibles")
  • Responsive design
  • Progressive enhancement
  • Sin barreras de entrada

Flexibilidad

  • Dark mode / light mode
  • Tamaños de fuente ajustables
  • Keyboard + mouse + touch
  • Velocidad de animación configurable

Simple e Intuitivo

  • Iconos universales
  • Navegación consistente
  • Lenguaje simple
  • Onboarding claro

Información Perceptible

  • Alt text en imágenes
  • Captions en videos
  • Transcripts de audio
  • High contrast options

Tolerancia al Error

  • Undo disponible
  • Confirmaciones para acciones destructivas
  • Autoguardado
  • Mensajes de error claros

Bajo Esfuerzo

  • Gestos simples
  • Clicks mínimos
  • Formularios cortos
  • Autocompletado

Espacio Apropiado

  • Touch targets de 44px+
  • Spacing generoso
  • Scrolling natural
  • Zoom funcional

Ejemplos

  • OXO Good Grips: Diseñado para artritis, útil para todos
  • Rampas de acera: Para sillas de ruedas, útiles para todos
  • Puertas automáticas: Accesibles, convenientes para todos
  • Subtítulos: Para sordos, útiles en espacios ruidosos

Anti-patterns

  • ❌ Diseñar para "usuario promedio"
  • ❌ Accesibilidad como afterthought
  • ❌ Versiones separadas para "discapacitados"
  • ❌ Asumir capacidades uniformes
  • ❌ Ignorar edge cases como casos raros

Principios Relacionados

  • [[inclusive-design]] - Diseño que incluye
  • [[wcag-perceivable]] - Web accesible
  • [[accessibility]] - Accesibilidad digital

Referencias