El diseño UX/UI decide cómo funciona un producto digital (la experiencia de usuario) y cómo se ve y se comporta en pantalla (la interfaz de usuario). Para quien toma las decisiones, la cuestión no son las definiciones, sino el retorno: un diseño UX/UI bien hecho aumenta la conversión, reduce las consultas al soporte y abarata el desarrollo, porque se construyen menos pantallas dos veces. En nuestra experiencia, su coste ha bajado en los dos últimos años, porque la IA asume ahora la producción repetitiva (variantes de componentes, primeros borradores, preparación de imágenes, pruebas), mientras que la investigación, el concepto, la dirección de arte y el acabado final siguen siendo trabajo de personas, y ahí es donde debería ir el dinero. Esta guía explica las dos mitades con claridad, qué investigación merece la pena pagar, cómo encajan flujos, wireframes e interfaces, por qué importa un sistema de diseño, qué esperar en coste y plazos y cómo elegir una agencia de diseño.
¿Qué diferencia hay entre UX y UI?
El diseño de experiencia de usuario trata de la estructura y el comportamiento: qué intentan hacer las personas, qué pasos dan, qué necesitan saber en cada uno y dónde se atascan. Sus entregables son hallazgos de investigación, flujos de usuario, mapas del sitio y wireframes.
El diseño de interfaces trata de la presentación: tipografía, color, espaciado, componentes, estados y movimiento. Sus entregables son pantallas terminadas, prototipos y una biblioteca de componentes.
Las dos partes no se pueden comprar por separado con buen resultado. Una interfaz bonita sobre un flujo confuso sigue perdiendo gente; un flujo lógico con una interfaz descuidada transmite poca confianza. Diseño de producto es el término que suele usarse cuando un mismo grupo se ocupa de ambas, junto con los objetivos comerciales del producto.
¿Qué investigación se paga sola?
La investigación es la parte del proyecto que más se recorta, y la que más cuesta después cuando falta. El objetivo no es un informe grueso. Es sustituir suposiciones por evidencia antes de que nadie construya nada, y hacerlo en días, no en meses.
Qué decidir primero
- Quiénes son los usuarios principales y qué tareas importan más, para ellos y para el negocio.
- Lo que ya sabes: analítica, tickets de soporte, llamadas comerciales, estudios anteriores, los motivos que dan los clientes para irse.
- La suposición más arriesgada del proyecto y la forma más barata de ponerla a prueba.
Un puñado de entrevistas cortas con usuarios reales, leídas junto a la analítica y las consultas al soporte, suele sacar a la luz la mayoría de los problemas importantes de un flujo, y con eso basta para empezar a diseñar con seguridad.
Qué dejar para después
Las grandes encuestas, los documentos de personas interminables y las fases de descubrimiento de un mes rara vez se pagan en un proyecto pequeño o mediano. Empieza con una investigación acotada y después prueba mientras diseñas. Si el producto es nuevo, trata también la primera versión como investigación.
En Odduel, la IA se encarga de ordenar: transcribe y agrupa las notas de las entrevistas, resume los tickets y detecta patrones en las opiniones. Los diseñadores dedican su tiempo a hablar con los usuarios y a tomar decisiones, y las conclusiones las revisan las personas que estuvieron en la sala. La misma división del trabajo recorre nuestros proyectos de desarrollo de IA: la máquina pone el volumen, las personas ponen el criterio.
Flujos, wireframes e interfaces
El diseño va de lo abstracto a lo concreto en tres pasos. Cada uno responde a una pregunta que deberías poder hacer en la revisión.
| Paso | La pregunta que responde | Qué revisas |
|---|---|---|
| Flujo de usuario | ¿Qué pasos da una persona para completar una tarea? | Un diagrama del recorrido, con las salidas |
| Wireframe | ¿Qué va en cada pantalla y en qué orden? | Maquetas grises con contenido real |
| Interfaz | ¿Cómo se ve, cómo se siente y cómo responde? | Pantallas terminadas y un prototipo navegable |
- Flujos. Un flujo traza los pasos para completar una tarea: registrarse, pedir un presupuesto, pagar. Deja ver los pasos innecesarios antes de dibujar una sola pantalla, y es donde se gana o se pierde la mayor parte de la conversión.
- Wireframes. Maquetas de poco detalle que fijan la estructura y las prioridades. Son baratas de cambiar y mantienen la conversación en el contenido y el orden, no en el color.
- Interfaces. El diseño visual completo, basado en la marca, con todos los estados (vacío, cargando, error, éxito) diseñados en lugar de dejar que el desarrollador los adivine. Si la marca aún no está definida, lee primero nuestra guía de branding.
Un ejemplo. Nothing To Eat, una marca de sándwiches de Ámsterdam, necesitaba una web que vendiera antes de explicar. El flujo se redujo a una decisión: quien quiere pedir va directo al menú, en la misma página, y todo lo demás se coloca alrededor de ese camino, no delante. Una página, una tarea y cada estado de pantalla dibujado antes de empezar a construir.
¿Qué es un sistema de diseño y lo necesitas?
Un sistema de diseño es una biblioteca compartida de componentes, reglas y tokens (colores, tamaños de letra, espaciado) que usan por igual diseñadores y desarrolladores. Es lo que mantiene coherente un producto a medida que crece y que se incorpora gente nueva.
Qué aporta al negocio:
- Velocidad. Las páginas y funciones nuevas se montan con piezas ya probadas.
- Coherencia. Botones, formularios y mensajes se comportan igual en todas partes.
- Calidad. La accesibilidad y el rendimiento se resuelven una vez en cada componente.
- Un coste de cambio más bajo. Una actualización de marca se aplica en un solo sitio.
Un sistema de diseño no necesita ser grande para ser útil, y es también donde la IA ha cambiado nuestro trabajo de forma más visible: las variantes de un componente, el código que hay detrás y sus pruebas se producen en horas y después se revisan; por eso nuestros proyectos de desarrollo web y desarrollo de aplicaciones parten de un sistema y no de una pantalla en blanco. Nuestra guía de desarrollo web sigue el sistema hasta el desarrollo.
Pruebas
Las pruebas cierran el círculo entre el diseño y la realidad. Métodos útiles, del más barato al más laborioso:
- Pruebas de cinco segundos en una página clave: ¿qué recuerda la gente?
- Pruebas con prototipo navegable con unos pocos usuarios por ronda, antes de que exista código.
- Comprobaciones de accesibilidad según los criterios de las WCAG 2.2: contraste, uso con teclado, etiquetas, foco.
- Analítica tras el lanzamiento: ¿en qué punto abandona la gente un flujo?
- Pruebas A/B en páginas con mucho tráfico, donde las pequeñas diferencias cuentan.
Prueba pronto con prototipos sin pulir: cambiar un wireframe cuesta minutos, cambiar una función ya programada cuesta días. Las comprobaciones automáticas, incluidas las basadas en IA, detectan una parte útil de los problemas en muchas pantallas a la vez; no lo detectan todo, así que añadimos pasadas manuales con teclado y lector de pantalla antes de publicar nada.
¿Por qué incorporar la accesibilidad desde el primer wireframe?
La accesibilidad funciona mucho mejor como principio de diseño desde el primer wireframe que como comprobación final, y hoy es además una exigencia legal para muchos productos: la Ley Europea de Accesibilidad se aplica a una amplia gama de productos y servicios digitales vendidos en la UE desde el 28 de junio de 2025.
Diseñar de forma accesible significa:
- Contraste que cumple los ratios de las WCAG para textos y controles.
- Tamaños de letra que siguen siendo legibles en pantallas pequeñas y con zoom.
- Recorridos con teclado por todos los flujos, con un estado de foco visible.
- Etiquetas e instrucciones que no dependen solo del color ni del texto de ejemplo del campo.
- Movimiento que se puede reducir para quien lo necesita.
- Errores explicados con palabras, junto al campo, con una forma de corregirlos.
Nada de esto limita el buen diseño. Suele mejorarlo, porque la claridad para las personas con discapacidad es claridad para cualquiera que use el móvil a pleno sol. Incorpora estas reglas al sistema de diseño y cada componente nuevo las hereda; el coste de cumplir baja con cada página.
Cuánto cuesta el diseño UX/UI y cuánto se tarda
No publicamos una lista de precios, porque dos productos con el mismo número de pantallas pueden multiplicar varias veces el esfuerzo entre uno y otro. Lo que fija la cifra es el número de flujos y tipos de pantalla distintos, la profundidad de la investigación, si se incluye un sistema de diseño y cuántas personas aprueban cada ronda.
Lo que la IA ha cambiado es la producción: las variantes de los componentes, los estados de cada pantalla, la preparación de imágenes y la primera versión de las especificaciones llevan ahora horas en lugar de días. En nuestra experiencia, un proyecto acotado, como rediseñar un flujo clave, lleva unas semanas desde el briefing aprobado; el diseño completo de un producto o de una web se desarrolla por fases a lo largo de un par de meses, y la investigación y las pruebas ocupan la parte del calendario que antes ocupaba la producción. Nuestra guía sobre cuánto cuesta una página web explica el presupuesto en su conjunto. Si sustituyes un producto existente en lugar de empezar uno nuevo, un rediseño web se plantea de otra manera, porque el contenido, los datos y el posicionamiento ya existen.
¿Cómo trabajar con un partner de diseño?
Qué aporta una buena agencia de diseño y qué puedes esperar de ella:
- Un proceso claro de la investigación a la entrega, con puntos de revisión definidos.
- Diseño en la realidad del navegador: maquetas responsive, contenido real, todos los estados cubiertos.
- Trabajo cercano con los desarrolladores, para que lo diseñado se pueda construir y lo construido coincida con el diseño. En Odduel, los desarrolladores están en el proyecto desde el primer wireframe, así que podemos diseñar para nuestro propio desarrollo o entregárselo al tuyo.
- Documentación: componentes, reglas y decisiones registrados para quien venga después.
- Conocimiento de la práctica actual sin perseguir modas.
Pregunta cómo usan la IA. Una respuesta creíble incluye la síntesis de la investigación, variaciones rápidas para explorar y comprobaciones automáticas, con los diseñadores tomando todas las decisiones finales; nosotros damos nuestra respuesta en el artículo sobre la IA en el diseño y desarrollo web. Pide ver la investigación detrás de un proyecto anterior y productos en funcionamiento que hayan diseñado, no solo imágenes del portfolio. Nuestra nota sobre cómo elegir una agencia digital recoge las demás preguntas que vale la pena hacer, y la del arranque con una agencia describe las primeras semanas.
Preguntas frecuentes
¿Cuánto debo presupuestar para el diseño UX/UI?
Depende del número de flujos y tipos de pantalla, de la profundidad de la investigación y de si se incluye un sistema de diseño. El diseño es una parte moderada del coste total de un proyecto digital y ahorra mucho más en retrabajo evitado. Pide un presupuesto desglosado por entregable, para poder comparar las cifras de dos agencias.
¿Cuánto tarda el diseño UX/UI con Odduel?
Un proyecto acotado, como rediseñar un flujo clave, lleva unas semanas desde el briefing aprobado. El diseño completo de un producto o de una web lleva más tiempo y se desarrolla por fases. La IA acorta el análisis de la investigación y la producción, así que más tiempo va a las pruebas y al refinado.
¿Cuál es la diferencia entre diseño UX y diseño UI?
El diseño UX decide qué hace un producto y en qué orden: los flujos, la estructura, el contenido de cada pantalla. El diseño UI decide cómo se ve y cómo responde: tipografía, color, componentes y movimiento. Un buen producto necesita las dos cosas, dentro de un mismo alcance.
¿Necesito un sistema de diseño para un producto pequeño?
Normalmente sí, en versión reducida. Unas decenas de componentes documentados y un conjunto de tokens mantienen coherente el producto mientras crece y abaratan cada función nueva. Se construye como parte del primer diseño, no como un proyecto aparte.
¿Cómo cambia la IA el coste y los plazos?
Acelera la síntesis de la investigación, la exploración inicial, la producción de componentes y los controles de calidad, lo que acorta los proyectos y reduce el coste. El criterio sobre lo que necesitan los usuarios y cómo debe sentirse el producto sigue siendo de los diseñadores, y una persona revisa cada resultado antes de que te llegue.
Si un producto o una web no rinde como debería, la causa suele estar en un puñado de flujos. Nuestro servicio de diseño UX/UI empieza por ahí: investigación donde compensa, prototipos que puedes probar, interfaces construidas para tu marca y un sistema sobre el que tus desarrolladores pueden seguir construyendo, desde Barcelona y São Paulo. O cuéntanos tu proyecto.
