Diseño UX/UI para webs, tiendas online y aplicaciones

Investigamos cómo usan tu producto las personas, ordenamos la información, prototipamos y probamos antes de programar, y entregamos un sistema de diseño que tu equipo puede seguir usando. Accesible según WCAG 2.2 AA desde el primer boceto, y con el mismo equipo que luego lo construye.

Cuéntanos tu producto Ver cómo trabajamos

2-3 clics Hasta la compra de entradas en el TNC
WCAG 2.2 AA Accesibilidad desde el diseño
Desde 2009 Diseño y desarrollo, mismo equipo

01 · Investigación Marca, público y competencia
02 · Concepto Una idea que ordena
03 · Sistema Tipografía, color y componentes
04 · Prototipo Navegable y probado
05 · Pruebas Con usuarios reales
06 · Entrega Tu equipo lo usa desde el día uno
Cada prueba afina el sistema

Scroll

Definición

¿Qué es el diseño UX/UI?

El diseño UX/UI es el trabajo de definir cómo funciona un producto digital (UX, experiencia de usuario) y cómo se ve y se usa cada pantalla (UI, interfaz de usuario). La UX decide flujos, estructura y contenido a partir de lo que necesitan las personas; la UI los convierte en componentes, tipografía, color y estados que se entienden a la primera.

En la práctica incluye investigación con usuarios, arquitectura de la información, wireframes y prototipos navegables, diseño visual, un sistema de diseño con sus componentes y pruebas de usabilidad. Se aplica a webs, tiendas online, aplicaciones móviles y plataformas SaaS, y bien hecho reduce errores, peticiones de soporte y desarrollo rehecho.

Resumen

Resumen ejecutivo

Qué compras cuando contratas diseño UX/UI y qué te ahorra.

El coste de una mala experiencia no aparece en ninguna factura: está en el carrito abandonado, en el formulario que nadie termina, en las llamadas a soporte para hacer algo que debería ser obvio y en las semanas de desarrollo que se tiran cuando una pantalla se rediseña después de programarla. El diseño UX/UI mueve esas decisiones al principio, cuando cambiarlas cuesta un prototipo y no un sprint.

Trabajamos con investigación y datos reales (entrevistas, analítica, mapas de calor, pruebas con usuarios), no con opiniones. De ahí sale la estructura, después los prototipos que se prueban y, al final, un sistema de diseño con componentes, estados y reglas para que tu producto crezca sin perder coherencia. La accesibilidad WCAG 2.2 AA entra desde el primer boceto: contraste, foco, tamaños de toque y orden de lectura se diseñan, no se parchean.

Lo que nos distingue es que diseño y desarrollo son el mismo equipo. El diseño que aprobamos es el que se construye, y quien lo diseñó revisa que se respete. Así lo hicimos en el Teatre Nacional de Catalunya, donde el rediseño UX dejó la compra de entradas a 2-3 clics y bajó un 37 % el LCP en móvil.

-37 % LCP en móvil tras el rediseño del TNC
+35 % Reservas directas en Tamarit Beach Resort
+200 % Donaciones online en Ampans

Qué incluye

Qué incluye el diseño UX/UI

Cada fase deja un entregable que puedes usar, aunque el desarrollo lo haga otro.

Investigación con usuarios: entrevistas, análisis de la analítica y de los mapas de calor, y revisión de la competencia
Arquitectura de la información: mapa de contenidos, navegación, taxonomías y flujos de las tareas clave
Wireframes y prototipos navegables en Figma para validar los flujos antes de invertir en lo visual
Pruebas de usabilidad con personas reales sobre el prototipo, con hallazgos priorizados
Diseño de interfaz a partir de tu marca: tipografía, color, iconos, estados y microinteracciones
Sistema de diseño: componentes, tokens y reglas de uso para que tu equipo cree pantallas nuevas coherentes
Accesibilidad WCAG 2.2 AA desde el diseño: contraste, foco visible, tamaños de toque y orden de lectura
Diseño responsive y móvil primero: cada pantalla pensada para móvil, tablet y escritorio
Acompañamiento al desarrollo: especificaciones, revisión de lo construido y ajustes con datos tras publicar

Por qué

Diseño UX/UI, diseño web y branding: qué es cada cosa

Tres servicios que se tocan, con objetivos distintos.

El branding define quién eres: la estrategia de marca, el logotipo, la identidad visual y el tono. El diseño web es el proyecto de una web corporativa que transmite esa marca y convierte visitas en contactos. El diseño UX/UI va un paso más adentro: cómo funciona un producto con tareas de verdad, como comprar, reservar, darse de alta, gestionar una cuenta o trabajar cada día en una plataforma. Lo necesitas cuando el problema no es la imagen, sino que la gente no consigue hacer lo que viene a hacer. Si lo que falla es la conversión de una web que ya funciona, empieza por CRO.

sistema-de-diseno/boton.json

// Un componente, todas sus reglas

"boton-primario": {

"estados": ["normal", "hover", "foco", "desactivado", "cargando"],

"contraste_minimo": "4.5:1",

"area_de_toque": "24x24 px como mínimo",

"foco": "visible, 3:1 sobre el fondo"

}

Con estados Componentes
WCAG 2.2 AA Accesibilidad
Probado Prototipo

Claves

Qué diseñamos

Productos donde la experiencia decide si se usan o no.

01
Webs con tareas complejas

Agendas, buscadores, áreas privadas, reservas o compra de entradas. En el TNC rediseñamos la navegación por agenda con filtros y las fichas de espectáculo con una jerarquía clara (fechas, reparto, precios y botón de compra).
02
Tiendas online y procesos de reserva

Fichas de producto, colecciones, carrito y checkout. En Tamarit Beach Resort la UX móvil lleva la reserva en 3 pasos, con galería y comparador de alojamientos.
03
Aplicaciones móviles

Flujos, navegación y componentes para iOS y Android, respetando las convenciones de cada sistema y con tamaños de toque y estados pensados para el pulgar. Lo construimos en desarrollo de aplicaciones móviles.
04
Producto digital y SaaS

Paneles, formularios largos, permisos y uso diario intensivo. Lo hacemos en casa: Nexo, nuestra propia plataforma de CRM, proyectos, facturación y control horario, la diseñamos y la usamos cada día.
05
Sistemas de diseño

Librería de componentes, tokens y documentación para que varios equipos o proveedores diseñen y programen con las mismas piezas, sin reinventar cada pantalla.
06
Auditorías de UX y accesibilidad

Revisión heurística, análisis de datos y pruebas con usuarios sobre lo que ya tienes, con una lista priorizada de cambios. Si hace falta cumplir la normativa, entra nuestro servicio de accesibilidad web.

Cómo trabajamos

Cómo trabajamos un proyecto de UX/UI

De lo que sabemos de tus usuarios a un diseño probado y listo para construir.

01
Descubrimiento e investigación

Entrevistas con tu equipo y con usuarios, revisión de la analítica, de los mapas de calor y de las consultas de soporte. Salen los objetivos, las tareas clave y los problemas que hay que resolver.
Según alcance
02
Arquitectura y flujos

Mapa de contenidos, navegación y flujos de cada tarea clave. Decidimos qué va en cada pantalla y en qué orden antes de dibujarla.
Según alcance
03
Prototipo y pruebas

Wireframes y prototipo navegable que probamos con personas reales. Lo que no se entiende se cambia aquí, cuando cuesta poco.
Iterativo
04
Diseño de interfaz y sistema de diseño

Diseño visual a partir de tu marca, con todos los estados de cada componente y las reglas de accesibilidad WCAG 2.2 AA documentadas.
Según alcance
05
Construcción y medición

Acompañamos al desarrollo (el nuestro o el tuyo), revisamos que lo construido respete el diseño y medimos con datos qué funciona tras publicar.
Continuo

Para quién

¿Es para ti?

El diseño UX/UI rinde cuando hay tareas que la gente tiene que completar y datos para medir si lo consigue.

Para quién

Empresas con una web o una tienda donde la gente se pierde, abandona o llama para hacer algo que debería ser sencillo.
Equipos que van a construir una app o un SaaS y quieren validar los flujos antes de programar.
Productos que han crecido a base de parches y necesitan un sistema de diseño para volver a ser coherentes.
Organizaciones que deben cumplir accesibilidad (WCAG 2.2 AA, European Accessibility Act) y prefieren diseñarla desde el principio.
Equipos de producto o de desarrollo propio que necesitan diseñadores con criterio técnico.

Para quién no

Si solo necesitas una web corporativa sencilla que transmita tu marca: tu servicio es diseño web.
Si lo que falta es la identidad de marca (logotipo, colores, tono): empieza por branding.
Si buscas pantallas bonitas sin tiempo para investigar ni probar con usuarios: no te vamos a dar lo que vendemos.

Entregables

Qué entra y qué no

Lo que recibes al final de un proyecto de diseño UX/UI.

Incluido

Informe de investigación con las tareas clave, los problemas detectados y su prioridad
Arquitectura de la información y flujos de las tareas clave
Prototipo navegable en Figma y resultados de las pruebas de usabilidad
Diseño de todas las pantallas acordadas, en móvil, tablet y escritorio
Sistema de diseño: componentes con sus estados, tokens y reglas de accesibilidad
Ficheros de diseño editables y propiedad de todo lo entregado

No incluido

Desarrollo y programación (se presupuesta aparte, con nuestro equipo o con el tuyo)
Creación de marca e identidad visual desde cero (es un proyecto de branding)

La prueba

Diseño que se mide en resultados

En el Teatre Nacional de Catalunya hicimos un rediseño UX centrado en tareas: la compra de entradas quedó a 2-3 clics, el LCP en móvil bajó un 37 % (de 3,8 a 2,4 s), las páginas por sesión subieron un 18 % y el sitio cumple WCAG AA. En Tamarit Beach Resort diseñamos una reserva móvil en 3 pasos sobre su motor de reservas propio, y las reservas directas crecieron un 35 %. En Fundació Ampans el diseño inclusivo, con WCAG 2.1 AA, acompañó un aumento del 200 % en donaciones online. Y en TwoPoles el rediseño de fichas de producto y colecciones, medido con CRO, llevó la conversión del 2,1 al 2,5 %.

2-3 Clics hasta la compra de entradas (TNC)
3 Pasos de la reserva móvil (Tamarit)
+35 % Reservas directas (Tamarit)
5,0 Valoración en Clutch

Para el CTO

Resumen para el CTO

Cómo encaja el diseño con la ingeniería.

Diseñamos en componentes con todos sus estados (normal, foco, error, vacío, cargando, desactivado) y con tokens de color, tipografía y espaciado que pasan tal cual al código. Así el sistema de diseño y la librería de componentes hablan el mismo idioma y un cambio de marca no obliga a revisar pantalla por pantalla.

La accesibilidad se especifica en el diseño: contrastes de 4,5:1 en texto y 3:1 en controles y foco, área de toque mínima, orden de foco y semántica de cada componente. Después se mide con axe-core y lectores de pantalla, no a ojo. Y el rendimiento también se diseña: peso de imágenes, fuentes y animaciones que no comprometan las Core Web Vitals, como en el TNC.

Tecnologías

Figma
Tokens de diseño
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Componentes con todos sus estados, no solo el estado ideal
Tokens de diseño que se trasladan al código sin reinterpretar
Accesibilidad WCAG 2.2 AA especificada y medida con axe-core
Rendimiento tenido en cuenta desde el diseño (imágenes, fuentes, animación)
Revisión del diseño sobre lo construido antes de publicar

Riesgos y cómo los cubrimos

Los riesgos que evitamos

Lo que suele salir mal en un proyecto de diseño.

01
Diseñar según la opinión de quien más manda en la reunión

Mitigación
Cada decisión importante se apoya en investigación, datos de uso o pruebas con usuarios, y queda documentada.
02
Un diseño precioso que luego no se puede construir o se construye distinto

Mitigación
Diseño y desarrollo son el mismo equipo: el diseño se valida con criterio técnico y revisamos lo construido antes de publicar.
03
Accesibilidad añadida al final, a base de parches

Mitigación
Contraste, foco, tamaños de toque y orden de lectura se definen en el sistema de diseño y se miden con axe-core.
04
Un producto que pierde coherencia a cada pantalla nueva

Mitigación
Un sistema de diseño con componentes, tokens y reglas de uso que tu equipo puede seguir usando sin nosotros.

Tecnologías

Herramientas

Con las que investigamos, diseñamos y medimos.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Tokens de diseño

Preguntas frecuentes

Preguntas frecuentes sobre el diseño UX/UI

Lo que más nos preguntan antes de empezar.

¿Qué diferencia hay entre UX y UI?

La UX (experiencia de usuario) decide cómo funciona el producto: qué tareas resuelve, en qué orden, con qué estructura y con qué contenido. La UI (interfaz de usuario) decide cómo se ve y se usa cada pantalla: componentes, tipografía, color, estados. Una buena UI sobre una mala UX sigue siendo difícil de usar; por eso las trabajamos juntas.

¿Qué hace una agencia de diseño UX/UI?

Investiga cómo usan tu producto las personas, ordena la información, diseña y prueba prototipos, crea la interfaz y un sistema de diseño, y acompaña al desarrollo para que lo construido respete lo diseñado. En nuestro caso, además, el mismo equipo puede construirlo.

¿En qué se diferencia del diseño web?

El diseño web es el proyecto de una web corporativa que transmite tu marca y capta contactos. El diseño UX/UI se centra en productos con tareas: tiendas, reservas, áreas privadas, apps o plataformas SaaS, con investigación y pruebas con usuarios. Muchos proyectos de diseño web incluyen UX; lo que cambia es la profundidad.

¿Cuánto cuesta un proyecto de diseño UX/UI?

Depende del número de flujos y pantallas, de cuánta investigación y cuántas rondas de pruebas hagan falta y de si necesitas un sistema de diseño completo. No publicamos una tarifa única: tras una primera sesión de descubrimiento te damos un presupuesto cerrado por fases. Si lo que necesitas es una web corporativa, su precio está publicado en diseño web: desde 4.500 €.

¿Cuánto tarda?

Depende del alcance: una auditoría de UX de un flujo concreto no es lo mismo que el diseño de un SaaS entero. Como referencia real, el rediseño integral del TNC, con diseño y desarrollo, duró 8 meses. Tras el descubrimiento te damos un calendario con hitos.

¿Hacéis pruebas con usuarios reales?

Sí. Probamos los prototipos con personas que se parecen a tus usuarios antes de programar, y después de publicar medimos con analítica y mapas de calor. Lo que no se entiende se cambia en el prototipo, que es donde cambiarlo cuesta menos.

¿Qué es un sistema de diseño y lo necesito?

Es la librería de componentes (botones, formularios, tarjetas, tablas), con sus estados, tokens y reglas de uso. Lo necesitas si tu producto tiene muchas pantallas, si varias personas o proveedores diseñan y programan sobre él, o si va a crecer. Para una web pequeña basta con una guía de estilo.

¿El diseño cumple WCAG 2.2 AA?

Sí, de serie. Contraste suficiente, foco visible, tamaños de toque, orden de lectura y textos alternativos se definen en el diseño y se miden después con axe-core y lectores de pantalla. Si necesitas una auditoría formal o cumplir la European Accessibility Act, lo hacemos con nuestro servicio de accesibilidad web.

¿Podéis diseñar y que lo desarrolle mi equipo?

Sí. Entregamos ficheros editables, sistema de diseño y especificaciones, y acompañamos a tu equipo durante el desarrollo. Si prefieres que lo construyamos nosotros, diseño y desarrollo están en el mismo equipo, sin traspasos.

¿Diseñáis aplicaciones móviles?

Sí: flujos, navegación y componentes para iOS y Android, respetando las convenciones de cada sistema. Si también necesitas construirla, mira desarrollo de aplicaciones móviles.

Siguiente paso