Diseño de producto
Diseño UX/UI para sitios, sistemas y aplicaciones que la gente sí logra usar
Bonito no alcanza: la pantalla tiene que llevar a la persona a lo que vino a hacer, sin capacitación y sin errores. OnWeb diseña la experiencia (UX) y la interfaz (UI) de los productos que construye, y también aplica con fidelidad el diseño que tu equipo o agencia ya creó.
- nota de fidelidad al diseño aprobado en páginas de Safetline
- 95
- nota de fidelidad al diseño aprobado en páginas de Safetline
- tamaños de fuente en un sitio entero, por decisión de producto
- 4
- tamaños de fuente en un sitio entero, por decisión de producto
- ancho de celular verificado en cada entrega
- 390px
- ancho de celular verificado en cada entrega
- contraste mínimo de accesibilidad como estándar
- AA
- contraste mínimo de accesibilidad como estándar
UX y UI: qué resuelve cada uno
UX (experiencia de usuario) es el camino: qué información aparece primero, cuántos pasos para completar una tarea, qué pasa cuando hay un error. UI (interfaz de usuario) es la forma: tipografía, colores, espaciado, componentes y estados de cada botón.
En un sitio, buena UX es que el visitante encuentre el producto y pida la cotización sin buscar. En un sistema interno, es que el equipo registre un producto con 400 variaciones sin perderse. Ambos necesitan una UI consistente, porque la inconsistencia es lo que hace dudar si se hizo clic en el lugar correcto.
Qué hacemos en UX/UI
Investigación y entrevistas
con quien usa hoy, para entender tareas, dolores y vocabulario.
Arquitectura de información
menús, jerarquía y nombres que tienen sentido para el usuario, no para el organigrama.
Flujos y prototipos
recorridos clicables para validar antes de construir.
Diseño de interfaz
pantallas finales, responsivas, con estados de carga, error y vacío.
Design system
componentes, colores y tipografía documentados para crecer sin volverse un parche.
Implementación fiel
el diseño aprobado reproducido en el código, medido al píxel.
Del diseño aprobado al sitio en línea, sin perder detalle
Muchas empresas llegan con el diseño listo, hecho por una agencia o por el equipo interno. El problema suele aparecer después: peso de fuente distinto, espaciados torcidos, imágenes achatadas. OnWeb trata la fidelidad como una métrica.
En Safetline, cada página se comparó sección por sección con el diseño aprobado, con medición de fuentes, espaciados y alturas por herramienta, hasta llegar a notas de fidelidad superiores a 90. El mismo rigor vale para el celular: cada entrega se revisa a 390 píxeles de ancho.
UX para sistemas internos
Los sistemas internos suelen hacerse con prisa y usarse por años. Pequeñas decisiones de UX ahorran horas por semana: una búsqueda que acepta nombre, documento o número; filtros que recuerdan la última elección; acciones masivas; atajos de teclado; confirmación solo donde el error cuesta caro.
En los paneles de OnWeb, cada área tiene textos de ayuda escritos para el usuario final ("tamaño recomendado 1215 x 831 px, fondo blanco o transparente"), no términos técnicos. Eso es lo que permite al equipo del cliente operar solo.
Accesibilidad y rendimiento son parte del diseño
Contraste mínimo, tamaño de toque, navegación por teclado, texto alternativo en imágenes y tema claro y oscuro entran al proyecto desde la primera pantalla. El rendimiento también: imágenes livianas, fuentes cargadas de la forma correcta y un layout que no salta mientras la página abre, lo que pesa en las métricas de Google.
Qué recibes
Investigación documentada
lo que aprendimos con los usuarios y lo que cambia en el producto.
Flujos y prototipos
recorridos principales clicables y validados.
Pantallas finales
escritorio y celular, con todos los estados.
Design system
componentes y tokens en el código, listos para reutilizar.
Implementación
interfaz construida y verificada contra el diseño.
Pruebas de uso
ajustes a partir de personas usándolo de verdad.
Cómo trabajamos el diseño
- 01
Entender
objetivos del negocio, usuarios y tareas más importantes.
- 02
Estructurar
arquitectura de información y flujos.
- 03
Una pantalla de referencia
aprobamos una pantalla completa antes de producir las demás.
- 04
Escalar
el resto del producto con el mismo sistema visual.
- 05
Medir
comparación con el diseño y pruebas con usuarios.
Hecho por OnWeb
Industria · Calzado de seguridad
Safetline
Sitio en tres idiomas con panel de gestión propio, asistente de IA que recomienda productos, modelos 3D generados a partir de fotos y 627 URL antiguas migradas sin perder Google.
Leer el caso
SaaS · SEO y GEO
Crownler
SaaS de SEO y GEO en cuatro idiomas: lee el sitio entero y lo dibuja como un mapa, sigue Google y las respuestas de IA, produce contenido y conversa con agentes de IA por API y MCP.
Leer el caso
Energía · Comparador de energía por suscripción
Luz no Bolso
Comparador de energía solar por suscripción con 75 empresas en 26 estados de Brasil y EDI, una IA que lee la foto de la factura de luz, compara las empresas de la región y completa el registro en la conversación.
Leer el casoPreguntas frecuentes
¿Solo diseñan o también desarrollan?
Las dos cosas. El diseño de OnWeb sale pensado para construirse, y el desarrollo lo hace el mismo equipo. También implementamos diseños hechos por otras agencias.
¿Usan Figma?
Usamos las herramientas que pida el proyecto, incluidos Figma y Canva cuando el diseño del cliente viene de allí. El design system final vive en el código, para no desactualizarse.
¿Cuánto tarda el UX/UI de un sistema?
Depende de la cantidad de flujos. Trabajamos por módulo: el diseño del primer módulo está listo antes de que empiece su desarrollo.
¿Se puede mejorar la UX de un sistema que ya existe?
Sí. Empezamos observando el uso, listamos los puntos de fricción y rediseñamos por prioridad, sin detener la operación.
Servicios relacionados
¿Encendemos tu empresa?
Cuéntanos qué necesitas. Respondemos con un diagnóstico del camino técnico, plazo e inversión, sin compromiso.