Diseño de producto UX/UI
Diseño UX/UI para apps, software y plataformas que la gente sí usa
Investigamos a quién va dirigido, diseñamos cada flujo y cada pantalla, lo probamos con personas reales y te entregamos un sistema de diseño que tu equipo puede construir. Diseño de producto digital, del primer boceto a la pantalla final.
¿Te suena?
¿Tu producto se ve bien, pero no se usa?
- 01
La gente se pierde
Abren la app o el sistema, no encuentran el siguiente paso y se van sin terminar lo que vinieron a hacer.
- 02
Desarrollo rehace pantallas
Cada cambio llega cuando ya está programado. Se paga dos veces y el lanzamiento se mueve.
- 03
Cada pantalla se ve distinta
Botones, colores y textos cambian de una sección a otra. El producto se siente armado a pedazos.
- 04
Tu equipo prefiere el Excel
El sistema existe, pero es más lento que la hoja de cálculo. Nadie lo abre si no es obligatorio.
No es un problema de colores. Es un problema de diseño de producto: entender a quién va dirigido y diseñar cómo lo usa, antes de construir.
Qué es el diseño UX/UI
UX es cómo funciona. UI es cómo se ve. Se diseñan juntas
El diseño UX/UI es el diseño de la experiencia (UX) y de la interfaz (UI) de un producto digital. Una buena UI con mala UX se ve bien pero no se usa; una buena UX con mala UI se usa, pero no inspira confianza.
-
UX
Experiencia de usuario
Qué pasos sigue una persona, qué decide en cada pantalla y si logra lo que vino a hacer. Se diseña con investigación, flujos y pruebas de usabilidad.
-
UI
Interfaz de usuario
Cómo se ve y se siente: jerarquía, tipografía, color, estados y movimiento. Es lo que hace que una pantalla se entienda de un vistazo.
-
DS
Sistema de diseño
Las piezas con las que se arma cada pantalla: colores, tipografía y componentes con sus estados. Mantiene el producto igual mientras crece.
Qué diseñamos
Qué diseñamos
Productos nuevos o rediseños de lo que ya tienes. Diseñamos para quien lo usa todos los días, no para la presentación.
-
Diseño de aplicaciones móviles
Apps para iOS y Android, desde el registro hasta la última pantalla, pensadas para el pulgar y para conexiones lentas.
Desarrollo de apps → -
Diseño de software y sistemas internos
ERP, CRM y sistemas de operación que tu equipo usa ocho horas al día: rápidos, claros y con menos clics.
Software a la medida → -
Plataformas y SaaS
Productos con varios roles y una sola fuente de datos: cada persona ve su pantalla y su información.
-
Diseño de dashboards
Tableros que responden una pregunta a la vez, con la cifra importante primero y el detalle a un clic.
Inteligencia de negocios → -
Portales de clientes y proveedores
Autoservicio para pedidos, facturas y seguimiento, con tu marca y sin capacitación.
Antes de programar
Lo pruebas en tu celular antes de construirlo
Cada proyecto pasa por un prototipo navegable: se ve y se usa como el producto final, pero todavía no está programado. Lo probamos con cinco personas de tu público y corregimos lo que no se entiende. Cambiar una pantalla en el prototipo cuesta minutos; cambiarla ya programada, semanas.
- 5 personas
- bastan para encontrar la mayoría de los problemas de uso
- Minutos
- cuesta un cambio en el prototipo, contra semanas en código
- Tuyo
- el prototipo sirve para validar con clientes e inversionistas
Nielsen Norman Group: pruebas con 5 usuarios encuentran la mayoría de los problemas de usabilidad.
Sistema de diseño
Un sistema de diseño para que tu producto crezca sin desordenarse
Un sistema de diseño (design system) es el manual vivo de tu producto: colores, tipografía, espacios y cada componente con sus medidas y estados. Tu equipo de desarrollo construye más rápido porque no inventa cada pantalla, y el producto se ve igual en la app, en el sistema y en el sitio.
32 puntosmás de crecimiento en ingresos en cinco años para las empresas que mejor integran el diseñoMcKinsey, The Business Value of Design
Favorito de huéspedes Casa frente al mar★ 4.92 (128)
Tulum, Quintana Roo · a 40 m de la playa
Anfitrión: CarlosResponde en menos de 1 h Superanfitrión - $2,450 × 3 noches
- $7,350
- Limpieza
- $450
- Total (MXN)
- $7,800
Aún no se hace ningún cargo
- Responde al toque. El botón baja a 96 % en 100 ms: tu dedo siente que algo pasó.
- Se vuelve círculo mientras confirma. El ancho va de 380 a 52 px en 240 ms y el texto se apaga antes de tocar los bordes.
- Confirma sin cambiar de pantalla. Se pinta de verde y la palomita se dibuja en 300 ms.
- Disparador
- Toque
- Anima
- escala, ancho, color
- Duración
- 0 / 640 ms
- Easing
- Ease-out (0.22, 1, 0.36, 1)
- Movimiento reducido
- Cambia sin transición
- Tokens
- radio 14 · espacio 8
Medidas en px a 1×, dibujadas a 2×.
-
Fundamentos
Color, tipografía, espacios, retícula e íconos, con nombres que diseño y desarrollo comparten.
-
Componentes y estados
Botones, campos, tablas y tarjetas con cada estado: normal, activo, error, cargando y deshabilitado.
-
Accesibilidad
Contraste, tamaños de toque y textos alternativos revisados desde el diseño, no al final.
Antes de contratar
Freelance, agencia de branding o estudio de producto
Los tres diseñan pantallas. La diferencia está en lo que pasa antes y después de que se ven bien.
| Aspecto | Freelance | Agencia de branding | Estudio de producto |
|---|---|---|---|
| Investigación con usuarios | Pocas veces | Enfocada en marca | Entrevistas y pruebas de usabilidad |
| Sistema de diseño | Archivos sueltos | Manual de marca | Componentes con estados, listos para desarrollo |
| Entrega a desarrollo | Depende de la persona | Fuera de su alcance | Especificaciones y acompañamiento |
| Quién lo construye | Otro equipo | Otro equipo | Nosotros, si quieres, o tu equipo |
| Después del lanzamiento | Por proyecto | Campañas | Medimos el uso y mejoramos cada mes |
Cómo lo hacemos
Diseño centrado en el usuario, en cuatro pasos
- 01
Investigación
Entrevistas, analítica y una revisión de lo que ya tienes: quién lo usa, para qué y dónde se atora.
- 02
Flujos y arquitectura
Arquitectura de información, el mapa de pantallas y cada flujo en blanco y negro, antes del color.
- 03
UI y prototipo
Interfaces de alta fidelidad y un prototipo navegable que probamos con personas de tu público.
- 04
Sistema y entrega
Sistema de diseño documentado, especificaciones y acompañamiento mientras se construye.
Inversión
Cuánto cuesta el diseño UX/UI
Precios de referencia en MXN más IVA. El alcance exacto sale del diagnóstico gratis.
Auditoría UX
Desde
$25,000
MXN · 1 a 2 semanas
Incluye
- Revisión heurística de tu producto
- Analítica de uso
- Pruebas de usabilidad con 5 personas
- Reporte priorizado: qué arreglar primero
Diseño UX/UI de producto
Desde
$90,000
MXN · 4 a 6 semanas · MVP o rediseño
Incluye
- Investigación con usuarios
- Flujos y wireframes
- UI de alta fidelidad
- Prototipo navegable con pruebas
- Sistema de diseño base
- Entrega a desarrollo
Producto completo y sistema de diseño
Desde
$160,000
MXN · 8 a 12 semanas
Incluye
- Todo lo del diseño de producto
- Varios módulos y roles
- Sistema de diseño documentado
- Componentes, estados y accesibilidad
- Acompañamiento durante el desarrollo
Diseño continuo
¿Necesitas diseño todos los meses?
Con la suscripción de diseño y desarrollo tienes un equipo senior por una cuota fija, desde $50,000 MXN al mes. Y si solo tienes la idea, el sprint de validación ($30,000 MXN, 2 a 3 semanas) te deja un prototipo, el alcance y el costo real.
Guías
Para leer antes de decidir
Guía · 7 minQué es un prototipo y cómo se hace el prototipado de una app o sistema
Guía · 7 minQué es un MVP (producto mínimo viable) y cómo validar tu idea de app
Guía · 10 minMetodologías de desarrollo de software: tipos, ejemplos y cuál conviene a tu proyecto
Guía · 8 minTasa de conversión: qué es, cómo se calcula, el embudo de conversión y cómo mejorarla (CRO)
Preguntas frecuentes
Lo que nos preguntan sobre diseño UX/UI
¿Qué es el diseño UX/UI?
Es el diseño de la experiencia (UX) y de la interfaz (UI) de un producto digital: cómo funciona y cómo se ve. Incluye investigar a quién va dirigido, diseñar los flujos y las pantallas, probarlos con personas y dejar un sistema de diseño para construirlo.
¿Qué diferencia hay entre UX y UI?
La UX (experiencia de usuario) es cómo funciona tu producto: qué pasos sigue una persona y si logra lo que vino a hacer. La UI (interfaz de usuario) es cómo se ve y se siente: colores, tipografía, botones y movimiento. Una buena UI con mala UX se ve bien pero no se usa; por eso se diseñan juntas.
¿Cuánto cuesta diseñar una app?
En TOR studio, el diseño UX/UI de una app o un MVP cuesta desde $90,000 MXN más IVA (4 a 6 semanas), con investigación, prototipo navegable con pruebas y sistema de diseño base. Una auditoría UX de lo que ya tienes, desde $25,000 MXN. El diseño y el desarrollo juntos, desde $250,000 MXN.
¿Cuánto tarda el diseño de una aplicación?
De 4 a 6 semanas para un MVP o un rediseño, y de 8 a 12 semanas para un producto con varios módulos y roles. Desde la segunda o tercera semana ya puedes probar el prototipo en tu celular.
¿Qué me entregan?
Los archivos de diseño editables, el prototipo navegable, el sistema de diseño con sus componentes y estados, las especificaciones para desarrollo y el reporte de las pruebas con usuarios. Todo es tuyo al pagarse.
¿Pueden también desarrollarlo?
Sí. Diseñamos y construimos apps, software a la medida y plataformas con el mismo equipo, así el diseño no se pierde en la traducción. También podemos entregarlo a tu equipo de desarrollo y acompañarlo.
¿Qué es un sistema de diseño?
Es el conjunto de reglas y piezas con las que se arma un producto: colores, tipografía, espacios y componentes con sus estados. Hace que el producto se vea igual en todas sus pantallas y que desarrollar cada pantalla nueva sea más rápido.
¿Hacen pruebas de usabilidad?
Sí, en cada proyecto. Probamos el prototipo con cinco personas de tu público mientras intentan tareas reales, y corregimos lo que no se entiende antes de programar.
Transcripción del video: Diseño UX/UI: que tu producto se vea bien y además se use
¿Tu app o tu sistema se ve bien… pero la gente no lo usa? Pasa más de lo que crees.
La gente se pierde y no termina. Desarrollo rehace pantallas que ya estaban programadas. Y tu equipo regresa al Excel. No es un problema de colores: es de diseño.
En TOR studio, un estudio de innovación en México, hacemos diseño de user experience y user interface (UX/UI): investigamos a quién va dirigido, diseñamos cada flujo y cada pantalla, y te dejamos un sistema de diseño que tu equipo puede construir.
Y antes de programar, lo pruebas en tu celular. Lo probamos con cinco personas reales: cambiar una pantalla ahí cuesta minutos; ya programada, semanas.
Como blitzHub, un software para agencias de influencers: diseñamos una pantalla para cada persona —la agencia, el talento y la marca— sobre el mismo dato.
Empezamos con un diagnóstico gratis. Si ya tienes producto, una auditoría de user experience (UX) desde $25,000; si vas a lanzar, el diseño de tu producto desde $90,000.
Y cuando se construye, seguimos contigo: medimos cómo se usa y lo mejoramos cada mes.
Soy Renata. Si tu producto se ve bien pero no se usa, pregúntame aquí abajo… o agenda una llamada con el equipo.
Empieza por el diagnóstico
¿Tu producto se ve bien, pero no se usa?
En una llamada revisamos lo que tienesy te decimos qué diseñar primero.
Agenda tu diagnóstico gratis