Qué incluye el diseño UI/UX de un sitio de marketing
El trabajo cubre cada decisión entre el primer segundo de una visita en el sitio y la acción que quieres que tome. Ajustamos el alcance a tu brief, y la propuesta dice cuáles de estos entregables se incluyen y cómo se aprueba cada uno.
- Resumen de investigación: analítica, búsquedas, preguntas de ventas y soporte, sitios de la competencia
- Mapa del sitio, navegación y lista de plantillas de página
- Wireframes con contenido real para cada plantilla, con titulares de verdad en lugar de texto de relleno
- Diseño de interfaz para escritorio y móvil, con todos los estados de cada componente
- Un sistema de diseño en Figma cuyos componentes corresponden al CMS, para que los editores armen páginas nuevas
- Un prototipo navegable y los hallazgos de las pruebas de usabilidad
Cómo avanza el trabajo, de la investigación al prototipo probado
Cada etapa termina con algo que tú apruebas, para detectar un error de rumbo antes de que cueste rehacer el sitio. El orden importa: estructura antes que apariencia y pruebas antes que código.
| Etapa | Qué hacemos | Qué apruebas |
|---|---|---|
| Investigación | Leemos analítica y búsquedas, entrevistamos a ventas y soporte, revisamos la competencia | El público, sus tareas principales y las preguntas que cada página debe responder |
| Estructura | Mapa del sitio, navegación y lista de plantillas | Qué páginas existen y cómo se pasa de una a otra |
| Wireframes | Diagramas con contenido real para cada plantilla, escritorio y móvil | El orden de la información en cada plantilla |
| Interfaz | Diseño visual, componentes y sus estados, sistema de diseño | La apariencia del sitio y sus componentes |
| Prototipo y prueba | Un prototipo navegable probado con unas cinco personas por ronda | Los ajustes de cada ronda |
| Construcción | El diseño aprobado construido en Webflow, Framer, Astro o Next.js | El sitio en vivo, página por página |
Experiencia de un sitio de marketing, no de un producto
Un sitio de marketing tiene un trabajo distinto al de un producto de software. La interfaz de un producto ayuda a quien ya se registró a hacer su trabajo; un sitio de marketing tiene que explicar, generar confianza y llevar a un desconocido a una acción. Eso cambia lo que investigamos y probamos: primeras impresiones, lectura rápida, comparaciones, páginas de precios y formularios.
Dardo diseña solo sitios de marketing. Para la interfaz de una app, un panel o un portal de clientes, contrata un equipo de diseño de producto. Si la estructura de tu sitio funciona y solo necesita una imagen nueva, encaja mejor nuestro servicio de rediseño web.
La accesibilidad y la velocidad se deciden en el diseño
La accesibilidad y la velocidad se resuelven en el diseño, no con parches después del lanzamiento. Diseñamos con WCAG 2.2 nivel AA, el estándar de accesibilidad vigente del W3C: contraste, orden del foco, tamaño de los objetivos táctiles, etiquetas y mensajes de error son parte de cada componente, no una revisión final.
La velocidad empieza en los mismos archivos. Las Core Web Vitals de Google consideran buena una página cuando su contenido principal carga en menos de 2,5 segundos, responde a una interacción en 200 milisegundos o menos y su puntaje de desplazamiento del diseño no pasa de 0,1, así que elegimos tamaños de imagen, fuentes y animaciones con esos límites en mente.
En la práctica: el sitio de Gissi
Gissi es una escuela de música en Bogotá cuyo sitio diseñó y construyó Dardo. Las visitas llegan con preguntas prácticas (qué instrumento, qué profesor, en línea o a domicilio, cómo empezar), y la estructura las responde en ese orden.
- Una página de instrumento se publica solo cuando al menos un profesor lo enseña, para que nadie llegue a una clase que no puede reservar
- Cada perfil de profesor muestra el instrumento, la zona y las modalidades, y su enlace de contacto abre WhatsApp con el nombre del profesor ya escrito en el mensaje
- Una página para cada forma de aprender: en línea, a domicilio en Bogotá y preparación para el examen de admisión a la universidad
- El sitio funciona en español, inglés y portugués, cada idioma con sus propias direcciones
Los clics de Google pasaron de 34 en los tres meses previos al relanzamiento a 416 en sus primeros nueve días, tras su paso a Cloudflare y el lanzamiento en cuatro idiomas; el caso cuenta cómo.
Plataformas, archivos y propiedad
Diseñamos en Figma y construimos en la plataforma que tu equipo va a editar: Webflow o Framer cuando el equipo de marketing publica sus propias páginas, Astro o Next.js con un CMS headless cuando el sitio tiene un desarrollador o muchas integraciones. Los componentes del sistema de diseño se vuelven los bloques del CMS, así las páginas nuevas siguen siendo coherentes después del lanzamiento.
Tu empresa es dueña de los archivos de Figma, del código y de todas las cuentas desde el principio. Dardo cotiza cada proyecto por alcance en una propuesta escrita y detallada, sin presupuesto mínimo.
Preguntas antes de elegir
¿Qué incluye un servicio de diseño UI/UX para un sitio web de marketing?
Investigación sobre quién visita el sitio y qué necesita, un mapa del sitio y la navegación, wireframes para cada plantilla, la interfaz visual para escritorio y móvil, un sistema de diseño y un prototipo navegable probado con usuarios reales. Cuando Dardo también construye el sitio, el mismo equipo convierte el diseño aprobado en las páginas en vivo, sin pérdidas en una entrega.
¿Cuánto cuesta el diseño UI/UX de un sitio web?
Dardo cotiza cada proyecto por alcance en una propuesta escrita y detallada, sin presupuesto mínimo. Lo que más mueve el precio es el número de plantillas, cuánta investigación y cuántas pruebas necesita el proyecto, el número de idiomas y si Dardo también construye el sitio. Solo el diseño cuesta menos que diseño y construcción, pero después necesitas un equipo que lo construya con fidelidad.
¿Diseñan interfaces de apps o de productos?
No. Dardo diseña sitios web de marketing: las páginas que explican un producto o servicio y llevan a una demo, una cotización, una reserva o un registro. La interfaz de un producto de software, como una app, un panel o un portal de clientes, necesita un equipo de diseño de producto, y te lo diremos si eso es lo que describe tu brief.
¿Pueden mejorar la experiencia de un sitio sin rehacerlo?
Muchas veces sí. Empezamos con una auditoría de la analítica, los datos de búsqueda y una prueba corta con usuarios; después rediseñamos las plantillas que pierden visitas e implementamos los cambios en tu plataforma actual. Si la plataforma misma impide los cambios, la auditoría lo dice y el trabajo pasa a ser un rediseño o una migración.
¿Hacen pruebas de usabilidad?
Sí. Probamos los prototipos con un grupo pequeño de personas de tu público antes de construir, en rondas de unos cinco participantes, el tamaño que Nielsen Norman Group recomienda para encontrar la mayoría de problemas en una prueba cualitativa. Cada ronda termina con una lista corta de problemas y los cambios de diseño que los resuelven.
¿Qué recibimos al final?
El resumen de investigación, el mapa del sitio, los archivos de Figma con el sistema de diseño y todas las plantillas, el prototipo y los hallazgos de las pruebas. Si Dardo construye el sitio, también recibes el sitio en vivo con su CMS listo para tus editores. Los archivos, el código y todas las cuentas quedan a nombre de tu empresa.
¿Diseñan sitios en varios idiomas?
Sí. Dardo trabaja en español e inglés y planea la navegación, las direcciones y el largo de los textos de cada idioma desde el primer wireframe. Gissi, una escuela de música, funciona en español, inglés y portugués en un sitio que Dardo diseñó y construyó.
Diseño UX/UI por ciudad
Fuentes y lecturas
Fuentes de esta página, con más detalles de sus publicaciones originales.
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2w3.org
- Google Search Central: Core Web Vitalsdevelopers.google.com
- Nielsen Norman Group: Why you only need to test with 5 usersnngroup.com
- Nielsen Norman Group: Usability testing 101nngroup.com
- Gissi Music Academy (live site)gissimusic.com
