≡En resumen
- El website design es el diseño de una web concreta; la disciplina general es el web design.
- La calidad del diseño depende de lo que prepara el cliente: objetivos medibles, público, referencias y activos de marca.
- El mapa del sitio y el contenido principal deben estar acordados antes de pasar al diseño visual.
- Pide entregables concretos: wireframes, diseños de cada plantilla en móvil y escritorio, prototipo y guía de estilo.
- Revisa cada entrega contra el brief, no contra gustos personales, y concentra el feedback en una sola persona.
01 ¿Qué es el website design?
Website design se usa en inglés para hablar del diseño de un sitio web concreto: la web de tu empresa, tu tienda o tu proyecto. La disciplina en general, con sus ramas (UX, UI, arquitectura de la información) y su historia, la explicamos en la ficha de web design. Aquí nos ponemos del lado del cliente: qué tienes que preparar antes de encargar el diseño de tu web y qué debes recibir a cambio.
02 Por qué lo que prepara el cliente decide el resultado
Un diseñador puede proponer soluciones, pero no puede adivinar los objetivos comerciales, los precios, el tipo de cliente o las restricciones internas de una empresa. Cuando esa información llega tarde, el diseño se rehace. Las rondas de cambios interminables casi nunca vienen de un mal diseñador, sino de decisiones que no se tomaron al principio.
Sin objetivos
El diseño se juzga por gusto y cada persona de la empresa pide algo distinto.
Sin contenido
Las plantillas se dibujan con texto de relleno y luego los textos reales no caben o sobran.
Sin activos de marca
El diseñador improvisa colores o tipografías que después hay que corregir en toda la web.
Sin mapa del sitio
El menú cambia a mitad de proyecto y obliga a rediseñar la navegación y varias plantillas.
03 Qué preparar antes de encargar el diseño de tu web
Todo lo que sigue cabe en un documento de pocas páginas: el briefing del proyecto. No hace falta que sea perfecto, pero sí que responda con datos a estas preguntas.
- ✓Objetivo principal medible: por ejemplo, 30 solicitudes de presupuesto al mes o ventas online en un año.
- ✓Público: quién visita la web, desde qué dispositivo y qué necesita encontrar rápido.
- ✓Acciones clave: llamar, reservar, comprar, descargar, pedir presupuesto.
- ✓Tres a cinco webs de referencia con lo que te gusta y lo que no de cada una, explicado.
- ✓Webs de competidores directos y en qué quieres diferenciarte.
- ✓Activos de marca: logotipo en vectorial, colores, tipografías, manual de marca si existe.
- ✓Fotografías e imágenes propias disponibles, o presupuesto para producirlas.
- ✓Funcionalidades necesarias: reservas, pagos, área de clientes, multidioma, integraciones.
- ✓Restricciones: fecha de lanzamiento, presupuesto, CMS obligatorio, requisitos legales o de accesibilidad.
- ✓Una persona con capacidad de decisión que centralice el feedback.
04 Activos de marca y mapa del sitio: las dos piezas que más retrasan
Si tu empresa no tiene definidos logotipo, colores y tipografías, conviene resolverlo antes o como fase previa del proyecto. Un manual de identidad corporativa evita que la web invente una marca paralela. Si ya lo tienes, entrega los archivos originales, no capturas de pantalla.
| Activo | Formato ideal | Problema si falta |
|---|---|---|
| Logotipo | SVG o vectorial, versión horizontal, vertical y monocromo | Logo pixelado en pantallas de alta densidad |
| Colores | Códigos HEX o RGB exactos | Colores aproximados y contraste insuficiente |
| Tipografías | Nombre, licencia para web o alternativa libre | Fuentes sin licencia web o sustituidas al programar |
| Fotografías | Originales en alta resolución y con derechos de uso | Bancos de imágenes genéricos o fotos sin permiso |
| Mapa del sitio | Lista jerárquica de páginas con su objetivo | Menú y plantillas que cambian a mitad de proyecto |
El mapa del sitio es la lista de páginas organizada por niveles. No tiene que ser definitivo, pero sí estar acordado antes del diseño visual; cómo construirlo y validar niveles y URL lo explicamos en la ficha de website architecture.
05 Entregables del website design: qué debes recibir
Un proyecto de diseño profesional se entrega por fases, y cada fase produce algo que puedes revisar. Si el presupuesto no nombra estos entregables, pregunta cuáles incluye.
| Entregable | Qué es | Qué revisar tú |
|---|---|---|
| Mapa del sitio | Estructura de páginas y navegación | Que estén todas las páginas y se llegue a las clave en pocos clics |
| Wireframes | Esquemas en gris de cada plantilla, sin estilo visual | Orden de los bloques, jerarquía y llamadas a la acción |
| Diseño visual | Plantillas con estilo final en móvil y escritorio | Coherencia con la marca, legibilidad y que el contenido real encaje |
| Prototipo navegable | Pantallas enlazadas que simulan la navegación | Recorridos completos: de la portada al formulario o al pago |
| Guía de estilo o sistema de diseño | Colores, tipografías, botones, formularios y componentes documentados | Que sirva para crear páginas nuevas sin volver a diseñar |
| Archivos fuente | Proyecto en la herramienta de diseño y recursos exportados | Que la propiedad y el acceso queden a tu nombre |
Los diseños visuales se presentan a menudo como mockups sobre pantallas de móvil y ordenador. Son útiles para ver el conjunto, pero pide también el prototipo: una imagen estática no muestra cómo se comportan menús, formularios o filtros.
06 Cómo revisar un diseño sin alargar el proyecto
-
1
Revisa contra el brief
Pregunta si la página cumple el objetivo acordado y si la acción principal se ve, antes de opinar sobre colores.
-
2
Mira primero el móvil
En la mayoría de webs de negocio local o de consumo, gran parte de las visitas llega desde el teléfono.
-
3
Prueba con contenido real
Sustituye los textos de ejemplo por los tuyos y comprueba títulos largos, precios y listas.
-
4
Agrupa el feedback
Envía una sola lista de cambios por ronda, consolidada por la persona que decide.
-
5
Describe problemas, no soluciones
«No se entiende que este botón reserva cita» ayuda más que «ponlo en rojo».
07 Presupuesto, plazos y siguiente paso
El coste de un website design depende del número de plantillas distintas, de si se parte de un tema o de un diseño a medida, de la investigación con usuarios y de cuántas funcionalidades hay que diseñar. Tienes rangos de precio actualizados en nuestra guía sobre cuánto cuesta una página web.
Una academia de idiomas llega con un objetivo (200 inscripciones online por curso), su público (padres que buscan clases para hijos, y adultos que preparan exámenes oficiales), el logotipo en SVG y los colores, cuatro webs de referencia comentadas, la lista de páginas y la necesidad de pago online. Con eso, la agencia de diseño web puede entregar wireframes en la primera semana, y el diseño UX se centra en el recorrido de inscripción en lugar de en descubrir qué vende la academia.
Preguntas frecuentes sobre Website Design
Significa diseño de un sitio web: definir la estructura, el aspecto y el comportamiento de una web concreta. Web design se usa más para la disciplina en general.
Un objetivo medible, la descripción del público, referencias comentadas, los activos de marca (logotipo, colores, tipografías), las fotografías disponibles, el mapa del sitio y las funcionalidades necesarias. Todo ello cabe en un briefing de pocas páginas.
Normalmente mapa del sitio, wireframes, diseño visual de cada plantilla en móvil y escritorio, prototipo navegable, guía de estilo y archivos fuente. Pide que el presupuesto los detalle.
El wireframe es un esquema sin estilo visual que fija el orden y la jerarquía de los bloques. El mockup muestra el diseño visual final, a menudo sobre la imagen de un dispositivo.
Lo habitual es pactar dos o tres rondas por fase en el presupuesto. Si se necesitan muchas más, suele faltar información en el brief o haber varias personas decidiendo.
Depende del contrato. Pide que la cesión de derechos y los archivos fuente queden a nombre de tu empresa al pagar el proyecto.
Depende del número de plantillas y de lo rápido que llegue el contenido y el feedback. Con el brief y los activos preparados, la fase de diseño de una web corporativa suele medirse en semanas, no en meses.
Fuentes consultadas
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.