GUIA PROFESIONAL DE
UX / UI Design
De principiante a profesional
Nivel Basico Nivel Intermedio Nivel Profesional
Conceptos esenciales Proceso y herramientas Estrategia avanzada
Ingenieria de Software | 2025-2026
Guia UX/UI | Ingenieria de Software | 2025-2026
Guia UX/UI | 2
Nivel Básico
Entendiendo UX/UI desde cero
1. Que es UX y que es UI?
Imagina que vas a comprar un automóvil. UX (User Experience) es todo lo que sientes y vives
al manejarlo: que tan cómodo es el asiento, si el volante responde bien, si encuentras
fácilmente la palanca de velocidades. UI (User Interface) es como se ve el tablero: los colores,
la Tipografía del velocímetro, los iconos del radio.
analogía clave: UX es el mapa del viaje. UI es la pintura, los colores y los botones del
vehículo.
La diferencia clave
UX - User Experience UI - User Interface
¿Que siente y vive el usuario? ¿Como se ve la pantalla?
investigación, flujos, prototipos Color, Tipografía, componentes
La arquitectura del edificio La decoración interior
Que puedas reordenar en Amazon con 1 El botón naranja de 'Anadir al carrito'
clic
Ejemplos cotidianos
Uber
UX: En menos de 30 segundos ya tienes un auto asignado y ves en el mapa donde está en
tiempo real. No necesitas leer ningún manual.
UI: La paleta de color negro y verde, los iconos redondeados, la Tipografía limpia y el botón
grande de 'Confirmar'.
Netflix
UX: Te lleva a una película en 3 clics o menos.
UI: imágenes grandes, texto blanco sobre fondo oscuro y un carrusel horizontal intuitivo.
ingeniería de Software | 2025-2026
Guia UX/UI | 3
Spotify
UX: Descubre música nueva de forma casi automática gracias al algoritmo y las playlists
personalizadas.
UI: Usa la fuente Circular, paleta verde sobre negro y una jerarquia visual que resalta la imagen
del álbum.
Videos recomendados - Nivel básico
"What is UI/UX Design?" - canal Simplilearn "What Is UX Design? - An Introduction" - canal
CareerFoundry
ingeniería de Software | 2025-2026
Guia UX/UI | 4
Nivel Intermedio
Como se disena realmente
2. El proceso UX paso a paso
El diseno UX no empieza con colores ni botones. Empieza con preguntas. Un buen diseñador
hace el trabajo de detective antes de abrir Figma.
Las 6 etapas del proceso UX
1. Investigacion (Research)
Antes de diseñar Airbnb nadie invento la interfaz de la nada. El equipo hablo con personas y
viajeros, entrevisto personas, observo como buscaban alojamiento. Esto se llama research
cualitativo.
• Entrevistas a usuarios
• Encuestas y cuestionarios
• análisis competitivo
• observación contextual
2. User Personas
Con la investigación creas personas ficticias pero basadas en datos reales. Por ejemplo:
'Laura, 28 años, viaja por trabajo cada mes, necesita reservar rápido desde su celular.' Esta
persona guía cada decisión de diseño.
Si Laura no lo entiende en 5 segundos, hay que rediseñar.
3. Journey Map
Es un diagrama que ilustra todos los pasos que da un usuario para lograr su objetivo,
incluyendo sus emociones en cada etapa. Identifica fricciones y oportunidades de mejora.
4. Wireframes
Son bocetos en escala de grises, sin colores ni fotos. Son como el plano arquitectónico de una
casa: definen donde va que cosa sin preocuparse por la decoración. Se hacen con rectángulos,
líneas y texto placeholder en Figma.
5. Prototipo
Un wireframe que ya se puede 'clickear'. No es Código real, es una simulación. Airbnb hace
prototipos en Figma antes de escribir una sola línea de Código. Detectan errores baratos, no
costosos.
6. Pruebas de usabilidad
ingeniería de Software | 2025-2026
Guia UX/UI | 5
Pones el prototipo frente a 5 usuarios reales y los observas. No los ayudas, solo observas. Si 3
de 5 no encuentran el botón de búsqueda, el problema no es el usuario, es el diseño.
3. El proceso UI: construyendo la apariencia
Una vez que el UX definió que va donde, el UI Designer toma el wireframe y lo convierte en una
interfaz visual que comunica la marca, guía la atención y se siente placentera de usar.
Elementos fundamentales del diseño UI
Color
No es solo estética. El verde de WhatsApp comunica 'mensaje enviado'. El rojo de YouTube
dice 'atención, esta en vivo'. El negro de Spotify comunica exclusividad nocturna. Cada color
tiene una carga emocional y funcional.
Tipografía
Spotify usa la fuente Circular que transmite modernidad. Apple usa San Francisco que
comunica precisión y tecnología. Las jerarquías tipográficas (título grande, subtitulo mediano,
cuerpo pequeño) guían el ojo sin que el usuario lo note.
Grids y espaciado
Un grid es una cuadricula invisible que organiza todos los elementos. Es como las líneas de los
cuadernos: no las ves en el resultado final, pero sin ellas todo cae en desorden. En Figma se
trabaja sobre grids de 8px.
Accesibilidad WCAG
Las Web Content Accessibility Guidelines son un estándar internacional que garantiza que tu
app pueda usarla alguien con daltonismo, baja visión o que navega solo con teclado. El
contraste mínimo entre texto y fondo debe ser 4.5:1.
No cumplir WCAG no solo es excluyente - en muchos países es ilegal.
Microinteracciones
Son las pequeñas animaciones que hacen que una app se sienta 'viva'. Cuando le das like a un
tweet y el corazón hace un pequeño estallido rojo. Cuando en iOS arrastras desde abajo y la
pantalla rebota. Son detalles que generan placer sensorial.
ingeniería de Software | 2025-2026
Guia UX/UI | 6
Herramientas del oficio
Herramienta Tipo Para que sirve Precio
Figma diseño + Prototipo UI, prototipado, Gratis / Pro
colaboración
FigJam Pizarra digital Journey maps, Incluido en Figma
workshops
Miro colaboración Mapas mentales, Gratis / Business
research
Notion Documentacion Handoff, decisión log Gratis / Plus
Maze Testing Pruebas de usabilidad Freemium
remotas
Nivel Profesional
Pensamiento estratégico y diseño avanzado
4. Design Systems: el lenguaje unificado
Un Design System es como el manual de identidad de una empresa, pero para interfaces
digitales. Es la colección viva de componentes, reglas y decisiones que permite que 50
diseñadores y 200 desarrolladores construyan la misma experiencia sin caos.
Empresa Nombre de su Design System
Google Material Design
Apple Human Interface Guidelines
Airbnb DLS (Design Language System)
Spotify Encore
IBM Carbon Design System
Componentes de un Design System
Tokens de diseno
Son los valores más pequeños y fundamentales del sistema. Por ejemplo: color-primary:
#1DB954, spacing-md: 16px, radius-lg: 12px. Son la fuente de verdad para todos los equipos.
ingeniería de Software | 2025-2026
Guia UX/UI | 7
Componentes
Botones, inputs, cards, modales, ya construidos y documentados. Cuando se actualiza un
componente, se actualiza en toda la app automáticamente.
Patrones
Como combinar componentes para situaciones comunes: un formulario de pago, un estado
vacio, una pantalla de error, un onboarding de 3 pasos.
Principios
Las reglas no escritas que dicen 'en esta empresa usamos el humor con moderación' o 'la
claridad siempre gana sobre la creatividad'.
Sin Design System: cada equipo inventa su propio botón. Con Design System: hay un solo
botón que todos usan y que al actualizarse, se actualiza en toda la app.
5. Métricas UX: medir lo que importa
Un diseñador senior no dice 'creo que esta pantalla se ve mejor'. Dice 'el rediseño del checkout
redujo el abandono en un 23%'. Las métricas convierten la intuición en argumento.
métrica Que mide Como se calcula Benchmark
SUS Usabilidad percibida Encuesta de 10 Arriba de 68 es bueno;
preguntas (0-100) 80+ es excelente
NPS Lealtad del usuario % promotores - % Uber ~40; Apple ~70
detractores
Tasa de conversión Cumplimiento de Conversiones / visitas E-commerce: 2-4%
objetivo totales promedio
Time on task Eficiencia del flujo Tiempo real vs tiempo Cuanto menos, mejor
benchmark
6. Frameworks avanzados
Design Thinking
La metodología más conocida en la industria. No es un proceso lineal sino un sistema de
pensamiento que pone al humano en el centro. Popularizado por IDEO y la [Link] de
Stanford.
• Empatizar: entender al usuario en profundidad
• Definir: articular el problema real
• Idear: generar multiples soluciones sin filtros
• Prototipar: crear versiones rapidas y economicas
ingeniería de Software | 2025-2026
Guia UX/UI | 8
• Testear: validar con usuarios reales
Lean UX
Adapta los principios del Lean Startup al diseno. La idea central: lanza rapido, aprende rapido,
itera. Minimiza outputs (entregables) y maximiza outcomes (resultados de negocio). En lugar de
un documento de 40 paginas, haces un Lean UX Canvas en una hora.
Jobs To Be Done (JTBD)
Un framework de estrategia que pregunta: que 'trabajo' contrata el usuario cuando usa este
producto?
La gente no compra un taladro, contrata 'hacer un hoyo en la pared'. La gente no usa
Spotify, contrata 'acompañamiento emocional mientras trabajo. Este cambio de perspectiva
transforma como defines funcionalidades.
7. El diseñador UX/UI hoy (2025-2026)
El UX/UI vive una transformación por la IA. Herramientas como Figma AI, Galileo AI y prompts
generativos ya generan variantes de componentes en segundos. Pero la IA no reemplaza al
diseñador: acelera la ejecución, no el pensamiento.
La empatía con el usuario, la capacidad de hacer las preguntas correctas y el criterio para
decidir que construir y que no, siguen siendo habilidades 100% humanas e irremplazables.
El mejor diseño es el que el usuario ni siquiera nota, porque simplemente funciona.
Videos recomendados - Nivel Profesional
"Every UX Principle Explained in 12 Minutes" - canal Re:Design "Using AI for UX Design" -
canal CareerFoundry "Design Systems in 10 Minutes" - canal Figma
ingeniería de Software | 2025-2026
Guia UX/UI | 9
8. Mini-ejercicios practicos
Nivel básico
Elige una app que uses diario (puede ser TikTok, Maps, tu banco). Escribe en un papel:
que es lo mas fácil de hacer? ¿Que es lo más confuso? Acabas de hacer tu primer análisis
heuristico informal.
Nivel Intermedio
Descarga Figma (es gratis) y recrea una pantalla de una app real. No copies, reconstruye
desde cero. Te tomara 2 horas y aprenderás mas que en 10 horas de videos.
Nivel Profesional
Elige un flujo de onboarding de cualquier app (el registro inicial). Define: cual es el 'Job To
Be Done' del usuario en ese momento? Que metrica indicaría que el diseño esta
funcionando? Que cambiarias y como lo medirias?
Guia UX/UI | Ingenieria de Software | 2025-2026
ingeniería de Software | 2025-2026