El diseño UX/UI decide si alguien se queda en tu web o se va en tres segundos. Lo he comprobado mil veces: da igual lo bonita que sea una interfaz si el usuario no encuentra lo que busca. Y da igual lo clara que sea la navegación si todo parece de hace diez años.
Aquí tienes una guía completa para entenderlo de una vez. Vas a ver qué es UX y qué es UI, el proceso real que sigue un diseñador, las herramientas que se usan hoy (con Figma a la cabeza), qué papel juega la inteligencia artificial y cómo aprender todo esto gratis. Sin humo. Con recursos que puedes abrir ahora mismo.
Si estás empezando, léelo de arriba abajo. Si ya tienes base, usa el índice y ve directo a lo tuyo.
Qué es el diseño UX/UI (y en qué se diferencian)
El diseño UX/UI es el trabajo de hacer que un producto digital sea a la vez fácil de usar y agradable de ver. Son dos disciplinas que van de la mano, pero no son lo mismo. Y confundirlas es el primer error de quien empieza.
UX es User Experience, la experiencia de usuario. Se ocupa de cómo funciona algo: la estructura, los flujos, qué pasa cuando pulsas un botón, si encuentras el precio sin dar vueltas. El diseñador UX investiga, ordena la información y elimina fricción. Su pregunta es: ¿esto tiene sentido para la persona que lo usa?
UI es User Interface, la interfaz de usuario. Se ocupa de cómo se ve y se toca: los colores, la tipografía, el espaciado, los botones, los iconos, los estados de cada elemento. El diseñador UI construye la capa visual sobre esa estructura. Su pregunta es: ¿esto se entiende de un vistazo y da confianza?
La UX es el esqueleto y la lógica. La UI es la piel y la ropa. Una casa sólida con mala pintura se puede arreglar. Una casa preciosa sin cimientos se cae.
En equipos pequeños, la misma persona hace las dos cosas. Por eso verás tanto la etiqueta «diseñador UX/UI». En empresas grandes se separan, y hasta aparece el UX researcher, dedicado solo a investigar. Si estás aprendiendo, te conviene dominar las dos: te hace más versátil y más contratable.
Un apunte que casi nadie cuenta: buena parte del trabajo de UX no es diseñar, es quitar. Menos pasos, menos campos, menos decisiones para el usuario. Si quieres profundizar en esto, tengo una guía dedicada a cómo optimizar la experiencia de usuario en el diseño web que complementa esta sección.
El proceso de diseño UX/UI paso a paso
Nadie abre Figma y empieza a pintar botones. O no debería. El diseño UX/UI sigue un orden que va de lo abstracto a lo concreto. Te lo cuento en cuatro fases, que es como lo trabajo yo cuando reviso un proyecto.
1. Investigación
Antes de dibujar nada, entiende a quién diseñas y qué problema resuelves. Aquí entran las entrevistas a usuarios, las encuestas, mirar qué hace la competencia y revisar los datos que ya tienes (Analytics, mapas de calor, soporte). El objetivo es salir con decisiones basadas en algo real, no en tu intuición.
De esta fase salen dos entregables típicos: el perfil de usuario (a quién le hablas) y el mapa del recorrido, que muestra cada paso que da la persona y dónde se atasca. No hace falta que sean documentos bonitos. Hace falta que sean ciertos.
2. Wireframes
El wireframe es el boceto en gris de cada pantalla. Sin color, sin fotos, sin adornos. Solo cajas y texto para decidir qué va dónde y en qué orden. Trabajar en gris tiene truco: te obliga a resolver la estructura sin distraerte con lo bonito.
Empieza en papel si quieres. Un par de folios y un rotulador te ahorran horas de pantalla. Cuando la idea funciona sobre papel, la pasas a digital. Ni antes.
3. Prototipo
El prototipo es el diseño ya con su capa visual y, sobre todo, con las pantallas conectadas entre sí. Pulsas un botón y pasa algo. Sirve para que tú, tu cliente y tus usuarios toquéis el producto antes de programar una sola línea. Aquí es donde se ve si el flujo se entiende o si falta un paso.
Figma hace esto de serie: enlazas frames, defines transiciones y ya tienes algo navegable en el móvil. No necesitas saber programar para prototipar. Solo pensar en clics.
4. Testing
Pon el prototipo delante de personas reales y cállate. En serio. Les das una tarea («compra este producto») y observas dónde dudan, dónde se equivocan, qué no ven. Con cinco personas ya detectas la mayoría de los problemas graves. No hace falta un laboratorio.
Después iteras: corriges, vuelves a probar, corriges. El diseño UX/UI no es una línea recta, es un bucle. Y un tema que se suele olvidar en el testing es la accesibilidad. Si diseñas sin pensar en contraste, tamaño de texto o navegación con teclado, dejas fuera a mucha gente. Lo desarrollo en la guía de cómo crear un diseño accesible.
Herramientas de diseño UX/UI
La buena noticia: hoy no necesitas gastarte nada para empezar. Estas son las herramientas UX/UI que de verdad se usan, con su tier de precio para que sepas dónde te metes.
Figma (el estándar)
Figma es hoy la herramienta de referencia para diseño de interfaz y prototipado. Funciona en el navegador, permite trabajar en equipo a la vez y tiene un plan gratis más que suficiente para aprender y montar tu portfolio. Si solo vas a instalar una cosa, que sea esta.
Su ecosistema es otra ventaja: miles de plugins te ahorran trabajo repetitivo. Te dejé mis favoritos en los mejores plugins de Figma para tu día a día. Tier: freemium. Web oficial.
Adobe XD (en retirada)
Aquí un aviso importante. Adobe XD ya no se vende como aplicación suelta a nuevos clientes y está en modo mantenimiento: Adobe corrige errores, pero no añade funciones nuevas. Sigue disponible dentro de Creative Cloud para quien ya lo tenía. Mi consejo si empiezas de cero: no inviertas tiempo en XD. Ve a Figma. Tier: de pago (dentro de Creative Cloud). Info oficial.
Penpot (la alternativa libre)
Penpot es una herramienta de diseño e prototipado de código abierto y gratuita. Es la opción si te importa el software libre o quieres autoalojarlo. No tiene el músculo de Figma en plugins, pero para aprender y para proyectos serios cumple. Tier: gratis. Web oficial.
Tip: Figma se aprende antes con un curso que te lleve de la mano. En los cursos de UX/UI de Domestika tienes clases en español de diseñadores en activo, con proyecto final incluido. Si empiezas, ahorra semanas de tutoriales sueltos de YouTube.
Herramientas de IA para UX/UI
La inteligencia artificial no te va a quitar el trabajo, pero sí te quita el folio en blanco. Estas herramientas generan pantallas, wireframes o estructuras a partir de un texto, y tú refinas. Las he probado y esto es lo que hace cada una hoy.
- Figma AI (First Draft): genera una primera versión de pantalla dentro de Figma a partir de una descripción. Cómodo porque no sales de tu herramienta. Las funciones de IA requieren asiento de pago; el plan gratis incluye créditos limitados. Tier: freemium. Web oficial.
- Google Stitch (antes Galileo AI): Galileo AI fue comprada por Google y ahora es Stitch, un generador de interfaces por texto con exportación a Figma y a código. Funciona con un sistema de créditos diarios sin tarjeta. Tier: freemium. Web oficial.
- Uizard: convierte bocetos e ideas en prototipos editables. Curva de aprendizaje muy baja, ideal para validar rápido. Tier: freemium. Web oficial.
- Visily: punto medio entre lienzo libre y plantilla guiada, orientado a wireframes y flujos. Tier: freemium. Web oficial.
- UX Pilot: genera flujos de pantallas y wireframes desde un prompt, integrado con Figma. Tier: freemium. Web oficial.
- Relume: brilla en la estructura, no en lo estético. Genera mapas del sitio y jerarquías de página desde un brief y los manda a Figma o Webflow. Tier: freemium. Web oficial.
Mi forma de usarlas: para arrancar y explorar direcciones, no para entregar. La IA acierta con lo genérico y falla en el detalle, que es justo donde vive un buen diseño. Si quieres el cara a cara entre las tres más populares, lo tienes en Figma AI vs Galileo vs Uizard 2026. Y la sección completa vive en herramientas de IA para diseñadores UX/UI.
Cómo aprender UX/UI gratis
Se puede aprender diseño UX/UI gratis, y bastante lejos, sin pagar un euro. La clave es combinar teoría con proyectos propios. Aquí tienes los recursos que recomiendo, del más gratuito al de suscripción, todos reales y verificados.
Google UX Design (Coursera)
El Certificado Profesional de Diseño UX de Google son siete cursos que van de cero a portfolio. Lo imparten diseñadores de Google y puedes inscribirte gratis en modo oyente (el certificado con nota sí es de pago por suscripción). Es el punto de partida más sólido que conozco para alguien sin experiencia. Tier: freemium. Ver en Coursera.
Interaction Design Foundation (IxDF)
La Interaction Design Foundation tiene decenas de cursos de UX y ofrece artículos y literatura de diseño abiertos y gratuitos. Los cursos completos van con membresía anual, pero su material de lectura gratuito es de los mejores que hay para entender los fundamentos. Tier: freemium. Web oficial.
Domestika
Domestika es la opción en español si prefieres vídeo y proyecto guiado. Tiene cursos de UX, de UI y de especialización, más algunas clases introductorias gratuitas. Funciona por suscripción o compra suelta, con periodo de prueba. Tier: freemium / de pago. Cursos UX/UI.
DesignLab
DesignLab es conocida por su bootcamp intensivo con mentor (UX Academy), que es de pago y para gente decidida a dar el salto profesional. Ojo, no es un recurso «gratis» en el sentido estricto, así que mételo en tu radar solo cuando ya tengas base y quieras acelerar con acompañamiento. Tier: de pago. Web oficial.
Un consejo de método: no acumules cursos. Haz uno, aplica cada lección rediseñando una app que ya usas y enseña el resultado. Se aprende diseñando, no viendo vídeos. Si buscas más rutas, reuní varias en cursos de diseño web desde cero y toda esta sección amplía el post de aprende diseño UX/UI gratis.
Tip: Si vas en serio con la teoría, la membresía de la Interaction Design Foundation da acceso a todos sus cursos por una cuota anual. Es de lo más rentable en formación UX si comparas coste por curso.
Tip: Para el certificado con nota, el Certificado de Diseño UX de Google en Coursera es la vía más reconocida y la puedes probar antes de suscribirte.
Recursos gratis: UI kits, sistemas, paletas e iconos
Con la teoría y las herramientas ya tienes el motor. Estos recursos son la gasolina para ir más rápido sin partir de cero en cada proyecto.
- UI kits: paquetes de componentes ya diseñados (botones, formularios, tarjetas) que copias y adaptas. En la comunidad de Figma tienes cientos gratis.
- Sistemas de diseño: bibliotecas completas y documentadas. Material Design de Google es la referencia abierta para aprender a pensar en componentes reutilizables.
- Paletas de color: para no pelearte eligiendo tonos, tira de un generador. Reuní los que uso en los mejores generadores de paletas de colores.
- Iconos: sets coherentes y gratuitos como los de bibliotecas abiertas te dan consistencia en toda la interfaz. Un icono suelto de cada estilo canta muchísimo.
Y para el papel, nada como leer a los clásicos. Los principios de usabilidad no caducan aunque cambie la herramienta. Dejé una selección honesta en libros esenciales para cualquier diseñador web.
Tip: Cuando pasas a proyectos de cliente y necesitas UI kits, plantillas y mockups de calidad sin límite, Envato Elements sale a cuenta: descargas ilimitadas con licencia comercial por una cuota. Lo uso para no reinventar cada componente.
Mi recomendación
Si empiezas hoy y me preguntas por dónde, te lo digo sin rodeos. Instala Figma (plan gratis) y no toques nada más de momento. Arranca el Google UX Design en modo oyente para tener el marco teórico ordenado. Y en paralelo, rediseña una app que uses a diario: tu banco, una de comida, la que sea.
La IA la sumaría después, cuando ya distingas un buen diseño de uno malo. Antes de eso te da resultados aparentes que no sabrás corregir. Google Stitch o Uizard para explorar rápido, sí, pero con criterio propio encima.
¿Lo que más se ignora y más pesa? El testing y la accesibilidad. Un diseñador que prueba con usuarios reales y no deja a nadie fuera vale más que uno que hace pantallas preciosas. Ahí está la diferencia entre parecer diseñador y serlo.
Tabla resumen
| Recurso | Para qué sirve | Tier |
|---|---|---|
| Figma | Diseño de interfaz y prototipado | Freemium |
| Penpot | Alternativa libre y de código abierto | Gratis |
| Adobe XD | Diseño UI (en mantenimiento, no recomendado para empezar) | De pago |
| Figma AI (First Draft) | Generar primeras pantallas por texto | Freemium |
| Google Stitch (antes Galileo AI) | Interfaces por texto con export a Figma | Freemium |
| Uizard / Visily / UX Pilot / Relume | Wireframes y flujos con IA | Freemium |
| Google UX Design (Coursera) | Formación completa de cero | Freemium |
| Interaction Design Foundation | Teoría y cursos de UX | Freemium |
| Domestika | Cursos en español con proyecto | Freemium / de pago |
| DesignLab | Bootcamp con mentor | De pago |
Preguntas frecuentes
¿Qué diferencia hay entre UX y UI?
UX es la experiencia: cómo funciona el producto, los flujos y la lógica. UI es la interfaz: cómo se ve y se toca, colores, tipografía y botones. La UX resuelve si algo tiene sentido; la UI, si se entiende de un vistazo. En equipos pequeños las hace la misma persona.
¿Se puede aprender diseño UX/UI gratis?
Sí, y bastante lejos. Con Figma en su plan gratis, el Certificado de Diseño UX de Google en modo oyente y el material abierto de la Interaction Design Foundation tienes teoría y práctica sin pagar. Lo que marca la diferencia no es el dinero, es hacer proyectos propios y pedir feedback.
¿Qué herramienta de diseño UX/UI es mejor para empezar?
Figma, sin dudarlo. Es el estándar del sector, funciona en el navegador, tiene plan gratis y sirve para diseñar y prototipar. Adobe XD está en retirada, así que no lo recomiendo para quien empieza de cero. Si te importa el software libre, Penpot es una buena alternativa.
¿Sirven las herramientas de IA para diseñar UX/UI?
Sirven para arrancar rápido y explorar ideas, no para entregar sin más. Herramientas como Figma AI, Google Stitch o Uizard generan una primera versión que tú refinas. Aciertan con lo genérico y fallan en el detalle, que es donde vive un buen diseño. Úsalas con criterio propio encima.
¿Cuánto se tarda en aprender UX/UI?
Para tener una base sólida y un portfolio inicial, entre tres y seis meses dedicando unas horas al día. Los fundamentos se cogen rápido; lo que lleva tiempo es el criterio, y ese solo llega diseñando de verdad y recibiendo feedback. No hay atajos, pero tampoco es tan largo como parece.
¿Necesito saber programar para dedicarme al UX/UI?
No es obligatorio. Puedes diseñar y prototipar sin escribir código. Ahora bien, entender lo básico de HTML y CSS te ayuda a hablar con desarrolladores y a diseñar cosas realistas. No para programarlas tú, sino para saber qué es viable y qué no.
Esto es todo lo que necesitas para arrancar en el diseño UX/UI con la cabeza clara y sin gastar de más. Abre Figma, elige un curso, rediseña algo que uses y ponlo delante de dos personas. Ahí empieza de verdad. Si te ha servido, compártelo con quien esté dando sus primeros pasos, y cuéntame en los comentarios por dónde vas a empezar.
