La analogía del restaurante
Imagina que vas a un restaurante. La experiencia de usuario (UX) es todo lo que pasa desde que llegas: ¿encontraste estacionamiento?, ¿te recibieron rápido?, ¿la mesa estaba limpia?, ¿el mesero entendió tu pedido?, ¿la comida llegó en tiempo razonable?, ¿el baño estaba presentable?, ¿la cuenta fue clara? Es el recorrido completo, de principio a fin.
La interfaz de usuario (UI) es cómo se ve y se siente todo: el diseño del menú, la tipografía, los colores del lugar, la presentación del plato, la vajilla, la iluminación, el uniforme del personal. Es la capa visual y tangible que interactúa con tus sentidos.
Un restaurante puede tener vajilla hermosa y manteles de lino (UI impecable) pero hacerte esperar 45 minutos sin que nadie te atienda (UX terrible). O puede tener mesas de plástico y servilletas de papel (UI básica) pero servirte el mejor taco de tu vida en 3 minutos (UX excelente).
UX es el problema que resuelves. UI es cómo lo presentas. Los dos importan, pero el orden no es negociable: primero UX, después UI.
Qué hace un diseñador UX
El diseñador UX es el arquitecto. Antes de que alguien dibuje un solo botón, el UX designer investiga, estructura y valida. Su trabajo no es hacer que las cosas se vean bien — es hacer que funcionen.
Investigación de usuarios
Entrevistas, encuestas, análisis de datos, pruebas de usabilidad. El UX designer necesita entender quién va a usar el producto, en qué contexto, con qué expectativas y con qué limitaciones. Sin investigación, todo lo demás es opinión disfrazada de diseño.
Arquitectura de información
¿Cómo se organiza el contenido? ¿Qué va primero? ¿Cuántos clics necesita alguien para llegar a lo que busca? ¿El menú de navegación tiene 4 opciones o 12? La arquitectura de información es la estructura invisible que determina si un sitio tiene sentido o es un laberinto.
Wireframes y flujos
Diagramas de baja fidelidad que definen qué va en cada pantalla y cómo se conectan las pantallas entre sí. Un wireframe parece un dibujo a lápiz, y ese es el punto: si la estructura no funciona en blanco y negro y en bloques grises, no va a funcionar con colores bonitos encima.
Personas y mapas de viaje
Perfiles ficticios basados en datos reales de tus usuarios. "María, 34 años, directora de operaciones, usa la app en el transporte público con una mano mientras carga el café con la otra." Eso define decisiones de diseño: botones grandes, acciones con una mano, contenido escaneable.
Pruebas de usabilidad
Poner el producto frente a usuarios reales y observar qué pasa. ¿Encuentran el botón de compra? ¿Entienden el formulario? ¿Abandonan en el paso 3? Las pruebas de usabilidad son la diferencia entre "creo que funciona" y "los datos dicen que funciona".
Qué hace un diseñador UI
El diseñador UI es el diseñador industrial. Toma la estructura que definió UX y le da forma visual, personalidad e interactividad. Su trabajo es que cada pantalla sea clara, atractiva y coherente con la marca.
Diseño visual
Colores, gradientes, sombras, espaciado, jerarquía visual. El UI designer decide que este botón es verde y prominente (acción principal) y este otro es gris y discreto (acción secundaria). Cada decisión visual comunica prioridad.
Tipografía
Qué familias tipográficas usar, en qué tamaños, con qué pesos. La tipografía es el 90% del diseño de interfaces — si la tipografía no funciona, nada funciona. Un buen UI designer sabe que la diferencia entre un sitio que se ve "profesional" y uno que se ve "amateur" muchas veces está en la tipografía.
Sistemas de componentes
Botones, formularios, tarjetas, modales, menús, tablas. El UI designer no diseña pantallas sueltas — diseña un sistema de piezas reutilizables que se combinan para crear cualquier pantalla. Esto garantiza consistencia y acelera el desarrollo.
Iconografía
Los íconos son un lenguaje. Un UI designer elige o diseña un set de íconos que sea coherente en estilo (línea, sólido, duotono), tamaño y nivel de detalle. Íconos inconsistentes hacen que una interfaz se vea desarmada.
Diseño de interacción
¿Qué pasa cuando pasas el cursor sobre un botón? ¿Cómo se abre un menú — deslizando, apareciendo, expandiéndose? ¿Qué animación confirma que tu acción fue exitosa? Las micro-interacciones son lo que separa una interfaz funcional de una interfaz que se siente bien.
3 ejemplos que lo aclaran todo
Ejemplo 1: UI hermosa, UX terrible
Piensa en esas apps bancarias que se ven espectaculares — gradientes suaves, tipografía moderna, animaciones fluidas — pero necesitas 7 pasos para hacer una transferencia, el token se desincroniza cada 3 días, y no puedes encontrar el botón de ayuda. La interfaz gana premios de diseño. La experiencia te hace querer cambiar de banco.
El problema: invirtieron todo en la capa visual sin resolver la estructura, los flujos y los puntos de fricción. Se ve como un Ferrari pero se maneja como un taxi desvencijado.
Ejemplo 2: UX excelente, UI básica
Craigslist. Google en sus primeros 15 años. La terminal de comandos. Herramientas que no van a ganar ningún concurso de belleza, pero que millones de personas usan a diario porque funcionan. Encuentras lo que buscas, haces lo que necesitas, y te vas. Cero fricción.
El punto: una buena experiencia de usuario puede sobrevivir sin diseño visual elaborado. Un buen diseño visual no puede sobrevivir sin buena experiencia de usuario.
Ejemplo 3: Cuando los dos trabajan juntos
Abre la app de Airbnb. La búsqueda es intuitiva (UX), los filtros están organizados por prioridad real del usuario — precio, fechas, tipo de alojamiento (UX), las fotos se ven espectaculares con un grid bien pensado (UI), las tarjetas de cada propiedad muestran exactamente la información que necesitas para decidir (UX + UI), el flujo de reservación es de 3 pasos (UX), y cada paso se ve limpio y claro (UI).
Eso es lo que pasa cuando UX y UI trabajan en sincronía: un producto que es fácil de usar Y agradable de ver. No es coincidencia — es proceso.
El proceso: de la investigación al pixel
En un proyecto bien ejecutado, UX y UI no son fases separadas — son capas que se construyen una sobre otra.
- Investigación — Entender al usuario, el negocio y el contexto. Entrevistas, datos, análisis de competencia. (UX)
- Arquitectura de información — Definir la estructura del contenido y la navegación. Sitemaps, card sorting. (UX)
- Wireframes — Diseñar la estructura de cada pantalla en baja fidelidad. Sin colores, sin tipografía final. (UX)
- Diseño visual — Aplicar la identidad de marca: colores, tipografía, componentes, iconografía. (UI)
- Prototipo interactivo — Conectar las pantallas con interacciones y animaciones. Simular la experiencia real. (UI + UX)
- Pruebas de usabilidad — Validar con usuarios reales. Iterar. Repetir hasta que funcione. (UX)
Saltarte pasos es tentador. "Ya sé cómo debe verse, empecemos con el diseño." Todos los proyectos que empiezan así terminan con 5 rondas de correcciones, porque resulta que lo que "sabías" no era lo que tu usuario necesitaba.
¿Necesitas un diseñador UX, un UI, o los dos?
Si tu proyecto es un sitio web corporativo de 5-10 páginas, un buen diseñador que haga ambas cosas (UX/UI) probablemente es suficiente. La complejidad no justifica tener dos roles separados.
Si tu proyecto es una app con múltiples flujos, roles de usuario, y funcionalidad compleja, necesitas las dos disciplinas. Pueden ser la misma persona (un UX/UI designer senior) o dos personas especializadas, pero ambas capacidades tienen que estar presentes.
Lo que no funciona es tener solo UI. Un diseñador que salta directo a "hacer bonitas las pantallas" sin entender al usuario va a producir algo que se ve bien en Dribbble pero no funciona en el mundo real.
Diseño que funciona y se ve bien
En Tank Studio Lab, cada proyecto de diseño incluye las dos disciplinas. No separamos UX de UI porque no creemos en entregar uno sin el otro. Investigamos antes de diseñar, prototipamos antes de desarrollar, y probamos antes de lanzar. Conoce nuestro servicio de diseño UI/UX o cuéntanos sobre tu proyecto.