Planta 02 · Web
Diseño UX/UI. Pantallas claras, menos dudas.
El diseño UX/UI define cómo funciona un producto y qué aspecto tiene: qué ve primero el usuario, cómo completa una tarea y dónde se atasca. yop diseña apps, productos SaaS y webs en Tallinn, de la investigación y los wireframes a un sistema de diseño con el que programar, y también diseñamos y lanzamos productos propios.
UI y UX
Diseño UI y diseño UX: ¿qué cubre cada uno?
El diseño UX es cómo funciona un producto: los pasos del usuario, la información de cada pantalla, el orden de las decisiones y qué pasa cuando algo falla. El diseño UI, o diseño de interfaces, es el aspecto: maquetación, tipografía, color, botones, estados y movimiento. Buena UX con mala UI no inspira confianza; buena UI con mala UX parece correcta y aun así pierde usuarios.
Hacemos las dos, en ese orden. Cada flujo se prueba como wireframe gris antes de añadir color, porque cambiarlo en esa fase es barato y después del desarrollo no lo es.
- Investigación. Entrevistas, analítica y grabaciones de sesión para ver dónde se atasca la gente.
- Estructura. Arquitectura de información, flujos y wireframes.
- Interfaz. Diseño visual, componentes, estados y accesibilidad.
- Entrega. Un sistema de diseño y archivos anotados para programar.
Comprueba
Cuándo tu producto necesita UX.
Marca lo que hayas visto en el último mes. Cada señal es un síntoma que podemos rastrear hasta una pantalla.
0/ 6
Aún no has marcado nada. Elige las que hayas visto.
Una señal: suele ser una pantalla o etiqueta.
Hay un patrón. Una auditoría UX breve mostrará dónde empieza.
El producto pierde usuarios. Empieza investigando los flujos clave.
Qué diseñamos
Seis entregables listos para programar.
Auditoría UX
Probamos la usabilidad y la accesibilidad de tu producto o web, y ordenamos los problemas según cuánto molestan al usuario.
Investigación
Entrevistas y pruebas breves con usuarios reales, y analítica revisada para ver dónde abandona la gente.
Wireframes y flujos
Cada tarea clave dibujada paso a paso en gris, para acordar la lógica antes de empezar con el estilo.
Prototipo navegable
Un prototipo en Figma que usuarios y equipo recorren con clics, en portátil y en móvil.
Diseño UI
Pantallas con tu marca y todos sus estados dibujados: vacío, cargando, error y éxito.
Sistema de diseño
Componentes, tokens y reglas en Figma, alineados con el código, para que lo nuevo sea coherente.
Pruébalo
Tres menús, una tarea.
Un test de árbol da a la gente una tarea y solo el menú, sin diseño. Sus clics muestran si las etiquetas se entienden. Mira cómo un usuario prueba tres versiones.
Ilustración de un test de árbol. Una prueba real da la misma tarea a un grupo de usuarios y registra cada recorrido.
Tarea
¿Dónde ves la política de devoluciones?
Clics 4
No encontrado
Etiquetas antiguas: cuatro clics y el usuario se rinde.
Cómo funciona
Cuatro pasos a pantallas útiles.
Entender
Objetivos, usuarios y producto actual, con entrevistas, analítica y una auditoría.
Estructurar
Flujos y wireframes de las tareas clave, revisados contigo y probados con algunos usuarios.
Diseñar
La interfaz con tu marca, todos los estados incluidos, como prototipo navegable.
Entregar
Sistema de diseño y archivos anotados, y tiempo con los programadores durante el desarrollo.
Ideas comunes
Mitos de diseño que cuestan usuarios.
Tres ideas que salen en casi todas las primeras reuniones. Todas suenan sensatas y todas hacen el producto más difícil de usar.
Solemos oír
«Los usuarios leerán las instrucciones.»
Lo que vemos
Casi nunca lo hacen. Si una pantalla necesita manual, el problema es la pantalla; etiquetas claras y valores por defecto sensatos deberían explicarlo todo.
Solemos oír
«Ya probaremos con usuarios al lanzar.»
Lo que vemos
Se puede, pero entonces cada cambio es código. Unas pocas personas recorriendo un prototipo dan con los peores problemas cuando arreglarlos aún lleva minutos en Figma.
Solemos oír
«La accesibilidad solo importa a unos pocos.»
Lo que vemos
Contraste, estados de foco y etiquetas claras ayudan a todos: en la calle a pleno sol, con un móvil lento, con una mano ocupada. En la UE, el Acta Europea de Accesibilidad la hace además obligatoria para muchos productos y servicios digitales.
Compara
Qué responde cada fase.
| Estudio UX, diseño UX y diseño UI comparados | Estudio UX | Diseño UX | Diseño UI |
|---|---|---|---|
| La pregunta | ¿Qué necesitan los usuarios y dónde se atascan? | ¿Cómo debe funcionar el producto? | ¿Cómo debe verse y sentirse? |
| Resultado | Hallazgos y prioridades | Flujos, wireframes, prototipo | Pantallas, componentes, sistema |
| Duración | Días o pocas semanas | Semanas | Semanas |
| En yop | Sí | Sí | Sí |
El arranque
Así empieza una auditoría UX.
La auditoría es el primer paso habitual, y es corta a propósito. Así van las dos primeras semanas, de la primera llamada a una lista ordenada de arreglos.
Día 1
Arranque
Objetivos, usuarios y flujos más importantes, acordados en una llamada. Tú compartes la analítica y las grabaciones.
Días 2–5
Mirar y escuchar
Analítica, grabaciones y tiques de soporte revisados, y entrevistas a algunos usuarios.
Semana 2
Probar
Usuarios reales prueban las tareas clave en tu producto o en un prototipo rápido.
Día 10
Hallazgos
Lista ordenada de problemas, cada uno con su pantalla, la evidencia y un arreglo propuesto.
Varios idiomas
¿Se puede diseñar una interfaz multidioma?
Sí. El texto cambia de longitud según el idioma: el alemán alarga las etiquetas, el español ocupa más que el inglés y el árabe, que va de derecha a izquierda, invierte la maquetación. Diseñamos componentes que se estiran, saltan de línea y se invierten, y probamos las pantallas clave en el idioma más largo y en árabe antes de entregar.
Así te ahorras una ronda de arreglos más adelante, cuando un botón traducido ya no cabe o una página en árabe se descuadra.
Tu producto
Enséñanos la pantalla donde se atascan.
Envía un enlace o unas capturas. En dos días laborables uno de los fundadores te responde con lo que probaríamos primero.
Preguntas
Dudas de diseño.
¿Qué incluye el diseño UX/UI?
El diseño UX/UI planifica cómo funciona un producto digital (UX) y qué aspecto tiene (UI), de la investigación y los wireframes al diseño visual, los prototipos y un sistema de diseño. yop lo hace para apps, productos SaaS y webs.
¿Cuánto cuesta el diseño UX/UI?
Se paga un precio cerrado por fase, como una auditoría, un conjunto de flujos o un sistema de diseño completo. En yop se acuerda tras una breve llamada inicial.
¿Cuánto dura un proyecto de diseño de producto?
Una auditoría lleva unos días, dos semanas como mucho. Diseñar los flujos clave y la interfaz de un producto suele llevar varias semanas, más en productos grandes con muchos perfiles.
¿Qué recibimos al final?
Archivos de Figma con cada pantalla y estado, un prototipo navegable y un sistema de diseño con componentes y notas para programar. Todos los archivos son de tu empresa.
¿Los diseños son accesibles?
Sí. yop diseña según WCAG 2.2 AA: contraste, estados de foco, tamaño del texto, etiquetas y uso con teclado se revisan antes de la entrega.
¿yop también desarrolla lo que diseña?
Sí. Las plantas de Software y Web construyen apps, productos SaaS y webs con los mismos archivos, así que ningún detalle se pierde entre diseño y código.
¿Con cuántos usuarios se prueba?
Normalmente entre cinco y ocho por ronda en pruebas de tareas: bastan para ver los problemas que frenan a la mayoría. Preferimos varias rondas pequeñas, con arreglos entre medias, a una gran prueba al final.
Planta 02 · Web
Más en la planta Web
Webs y tiendas online rápidas, hechas para vender en cada idioma que necesites.
Webs y apps web rápidas y multidioma que tu equipo edita.
Webs en WordPress que tu equipo edita y Google entiende.
Tiendas online que venden, envían y cuadran el stock.
Una página, una oferta, para convertir clics en contactos.
Actualizaciones, copias, seguridad y pequeños cambios, cada mes.
Más rápida, con Core Web Vitals aprobadas y menos abandonos.