Cómo empezar en UX/UI sin experiencia

No necesitas saber dibujar ni programar para empezar en diseño UX/UI. Necesitas observar a las personas, ordenar ideas y explicar tus decisiones. Esta guía te da el camino.

1. UX y UI no son lo mismo

• UX (experiencia de usuario): que la app resuelva el problema correcto y sea fácil de usar. Incluye investigar, ordenar la información y probar con personas.
• UI (interfaz de usuario): cómo se ve. Tipografía, color, espaciado, componentes.

Un diseñador UX/UI junior hace las dos cosas, pero siempre empieza por las personas y no por la pantalla bonita.

2. Qué aprender y en qué orden

1. Investigación: entrevistas con preguntas abiertas, observación, análisis de la competencia y mapas de afinidad. Termina en un problema bien definido: "¿Cómo podríamos…?".
2. Flujos y wireframes: user flows con el camino feliz y los errores, arquitectura de información, card sorting y wireframes en papel y en gris.
3. UI: escala tipográfica, paleta de colores, espaciado con una escala de 4 u 8 puntos, grillas y jerarquía visual.
4. Figma: auto layout, componentes con variantes y prototipos navegables.
5. Accesibilidad y pruebas: pautas WCAG 2.2 y pruebas de usabilidad con tareas reales.
6. Sistema de diseño y handoff: tokens con variables, documentación de componentes y entrega a desarrollo con Dev Mode.

3. Reglas que te ahorran errores

• Contraste (WCAG, nivel AA): al menos 4.5:1 para texto normal y 3:1 para texto grande.
• Áreas táctiles: WCAG 2.2 pide un mínimo de 24 × 24 px; para botones en celular se recomiendan 44 a 48 px.
• No depender solo del color: un error se indica también con texto o un ícono.
• Las 10 heurísticas de Nielsen: por ejemplo, mostrar el estado del sistema y prevenir errores.

4. Proyectos para tu portafolio

• Rediseño de una app real: una tarea clave (pagar, reservar, registrarse), con prototipo navegable y caso de estudio.
• Auditoría heurística y de accesibilidad de una web pública, con capturas y propuestas.
• Mini sistema de diseño en Figma: tokens de color, tipografía y espaciado, y 6 componentes con variantes.

En UX/UI se muestra el proceso: problema, investigación, decisiones y resultado. Una pantalla linda sin contexto no convence.

5. Errores comunes

• Diseñar sin hablar con nadie. Cinco entrevistas cortas valen más que tus suposiciones.
• Preguntas que inducen la respuesta, como "¿Verdad que te gustaría…?".
• Inventar personas. Deben salir de datos de la investigación.
• Entregar solo el camino feliz. Diseña también los estados vacíos, de carga y de error.

Si después quieres llevar tus diseños a código, sigue con HTML, CSS y JavaScript desde cero.

Siguiente paso

La ruta gratuita UX/UI Jr de Codea te lleva en 6 semanas de la investigación al sistema de diseño, y cierras con el rediseño de una app real con prototipo navegable, revisado por un mentor.