Diseño UX/UI de sitios web y productos web del prototipo a la UI
Sobre el servicio
El diseño UX/UI de un sitio web es el diseño del recorrido del cliente (UX) y del aspecto de cada pantalla (UI): desde la estructura y el prototipo hasta los diseños finales en Figma. Lo necesitas cuando lanzas un sitio o un producto web, haces un rediseño o ves que la gente se va sin dejar una solicitud.
Empezamos por la investigación y el prototipo, y solo después dibujamos la interfaz: cinematográfica, con la historia de tu marca, luz y ritmo. Cada pantalla la diseñamos desde cero según la marca y el recorrido del cliente, sin temas prediseñados. Nuestro diseñador UX/UI tiene más de 8 años de experiencia en equipos de producto sólidos, y el especialista SEO y el desarrollador trabajan a su lado, sin subcontratación: la estructura tiene en cuenta la búsqueda y el sitio se construye tal como se diseñó.
Recibes el prototipo, los diseños para teléfono, tableta y escritorio, el UI kit y los archivos fuente de Figma; nos encargamos del desarrollo o entregamos los archivos a tu equipo. Así diseñamos el sitio de la empresa de transporte estadounidense Pixel Express, con escenas que avanzan al hacer scroll, la tienda de té orgánico Herbal Cup y el sitio de LGC sobre terrazas y pérgolas: míralos en los casos.
- Formato de trabajo
- solo diseño o llave en mano
- Precio
- tras el brief
- Resultado
- diseños y UI kit en Figma
- Para empezar
- consulta gratuita
¿Qué es el diseño UX/UI de un sitio web y para qué lo necesita tu negocio?
La UX se encarga de cómo funciona el sitio para las personas, y la UI, de cómo se ve y se siente; tu negocio necesita ambas.
- UX: estructura de las páginas, escenarios, textos de los botones y el recorrido desde la primera pantalla hasta la solicitud o el pago.
- UI: tipografía, color, retícula, componentes, animaciones y adaptación al teléfono.
Un sitio sin una UX bien pensada puede verse caro y no vender, y un sitio lógico sin una UI potente no genera confianza. Cuando se diseñan juntas, el cliente entiende antes por qué eres mejor, menos gente se pierde de camino a la solicitud y el desarrollo sigue un prototipo aprobado, sin costosas reescrituras de código.
Precio del diseño de un sitio web
El precio del diseño del sitio, por separado de la programación, te lo damos tras el brief, cuando el alcance y las tareas están claros. En el precio influyen:
- la cantidad de plantillas de página únicas y de estados de la interfaz;
- la profundidad de la investigación UX y la cantidad de escenarios del prototipo;
- las versiones responsive, las animaciones y las ilustraciones;
- el sistema de diseño para el equipo que hará crecer el producto.
En los sitios web llave en mano, el diseño ya está incluido en el precio: landing page, desde $800; sitio web corporativo, desde $2000; tienda online, desde $5000. La consulta es gratuita y el presupuesto queda fijado antes de empezar.
Diseño UX/UI para SaaS y productos web
El diseño UX/UI de SaaS y aplicaciones web no empieza por la página de inicio, sino por los escenarios: qué hace el usuario cada día y dónde puede atascarse.
- mapa de roles y escenarios, onboarding sin instrucciones;
- paneles, tablas, formularios y filtros con los que es cómodo trabajar durante horas;
- estados de pantallas vacías, errores y carga;
- un sistema de diseño con cuyos componentes listos se construyen las nuevas funciones.
Aquí ayuda la experiencia de nuestro diseñador en equipos de producto: los diseños tienen en cuenta desde el principio todos los estados y las limitaciones del desarrollo, no solo una «página de inicio bonita». Si también se necesita la parte de programación, nos encargamos del desarrollo de la aplicación web o SaaS.
Qué incluye
Investigación UX
Estudiamos al público, la competencia y la analítica para saber dónde se pierde el cliente.
Prototipo del sitio
Estructura y escenarios de las pantallas clave, aprobados antes de los colores y los gráficos.
Diseño UI
Pantallas cinematográficas con luz, ritmo y tipografía, desde cero para tu marca.
Diseño responsive
Diseños específicos para teléfono, tableta y escritorio, no solo para pantallas grandes.
Sistema de diseño
UI kit con colores, tipografías y componentes, para que el sitio crezca sin caos.
Entrega a desarrollo
Archivos de Figma con los estados de los elementos y la descripción de las animaciones, claros para cualquier desarrollador.
Etapas del trabajo
Brief y estrategia
Analizamos el negocio, el público y la competencia, y definimos qué debe lograr el sitio.
UX y prototipo
Diseñamos el recorrido del cliente hasta la solicitud o el pago y aprobamos el prototipo antes de pasar a lo visual.
Diseño UI
Dibujamos las pantallas y sus versiones responsive desde cero; dos rondas de cambios están incluidas.
Desarrollo y lanzamiento
Desarrollamos con WordPress, React y Next.js, Node.js o Python o entregamos los archivos a tu equipo.
Preguntas frecuentes
¿Cuánto cuesta el diseño de un sitio web?
El precio del diseño por separado del desarrollo te lo damos tras el brief: depende de la cantidad de páginas únicas y estados de la interfaz, la profundidad de la investigación, las versiones responsive, las animaciones y de si se necesita un sistema de diseño. Si encargas un sitio web llave en mano, el diseño ya está incluido en el precio. La consulta es gratuita y el presupuesto queda fijado antes de empezar.
¿Cuánto tiempo lleva el diseño UX/UI de un sitio web?
El prototipo y el diseño de un sitio de varias páginas llevan desde 2 semanas, y el diseño de una landing page entra en el plazo total de su lanzamiento: desde 7 días. El plazo depende de la cantidad de pantallas únicas, de que los textos estén listos y de la rapidez de las aprobaciones; un producto web con muchos escenarios requiere más tiempo. El calendario de etapas lo acordamos tras el brief.
¿Hacen el diseño del sitio en Figma? ¿Recibiré los archivos fuente?
Sí, hacemos los prototipos y los diseños en Figma y, al terminar, te entregamos todos los archivos. Recibes las páginas con sus versiones responsive, el UI kit con componentes y estilos, y acceso para tu equipo. Con estos archivos, cualquier diseñador o desarrollador podrá hacer crecer el sitio sin nosotros.
¿Puedo encargar solo el diseño si el desarrollo lo hará otro equipo?
Sí, el diseño se puede encargar por separado y dejar el desarrollo a tu equipo o a un proveedor. Preparamos archivos de Figma con versiones responsive, UI kit, estados de los elementos y descripción de las animaciones, explicamos a los desarrolladores la lógica de las pantallas y respondemos sus preguntas durante la maquetación. Si te resulta más cómodo, también nos encargamos del desarrollo: WordPress, React y Next.js, Node.js o Python.
¿Hacen rediseños de sitios web existentes?
Sí. Empezamos el rediseño analizando lo que ya existe: la analítica, el recorrido del cliente y los puntos donde la gente abandona el sitio. Después decidimos qué conservar —el estilo reconocible, las URL de las páginas, lo ganado en el buscador— y qué diseñar de nuevo. Así rehicimos la tienda online Air Soft Shop, con filtros más cómodos en el catálogo y un proceso de compra más sencillo.
¿Cuántas rondas de cambios incluye el diseño?
El trabajo incluye dos rondas de cambios en la etapa de diseño UI. El prototipo lo aprobamos por separado, antes de lo visual, así que al final no suele haber grandes cambios. Lo más cómodo es dejar los cambios como comentarios directamente en los diseños de Figma. Si después de las dos rondas surgen tareas nuevas, las presupuestamos aparte y de antemano.
Otros formatos
Sitio web corporativo
Sitio web de empresa de varias páginas, con servicios, blog y formularios. Refuerza la confianza y el prestigio de la marca. Más información
Landing page
Sitio de una sola página con un único objetivo: lanzar un producto, una promoción o una campaña publicitaria. Máxima conversión. Más información
Tienda online
E-commerce con catálogo, carrito, pagos e integraciones. Ventas online 24/7. Más información
Aplicaciones web y SaaS
SaaS, portales de cliente, MVP y herramientas internas: diseño y desarrollo en un mismo equipo. Más información
Auditoría UX del sitio web
Análisis de usabilidad y del recorrido del cliente: encontramos por qué tu web no vende y te damos un plan de correcciones con capturas. Más información
Branding e identidad visual
Posicionamiento, logotipo, estilo corporativo y manual de marca: la marca sobre la que construimos el sitio web. Más información
Proyecto cripto
Sitios web para Web3, tokens y DeFi: diseño actual, integración de wallets y gran velocidad. Más información
Marketplace
Plataforma con muchos vendedores, áreas personales y lógica compleja. Escala a medida que creces. Más información
Te mostramos cómo será tu sitio y cuánto costará
Consulta gratuita: analizamos tu nicho y tu competencia y te proponemos estructura, presupuesto y plazos — aunque todavía estés comparando proveedores.
- Presupuesto y plazos — antes de empezar
- Pago por etapas
- El sitio y todos los accesos son tuyos
Después de tu solicitud, te contactará un project manager sénior: te ofrecerá una consulta gratuita, hablará de tus objetivos y responderá a tus dudas sobre estrategia.