Diseño web: tres trabajos distintos bajo una misma expresión y cómo elegir

Qué se llama realmente diseño web

El mercado usa «diseño web» para tres trabajos distintos, y confundirlos es la causa principal de expectativas que no encajan. El primero es el acabado: coger una estructura existente y dejarla ordenada. El segundo es proyectar: decidir de qué pantallas se compone el sitio, qué es lo principal en cada una y adónde va después la persona. El tercero es un sistema: componentes y reglas que permiten que el sitio crezca sin diseñador.

El precio y el plazo se diferencian varias veces justamente porque una sola expresión abarca tres alcances. Cuando un cliente pide diseño web y recibe acabado, ambas partes se sienten engañadas: el proveedor entregó exactamente lo que nombró y el cliente esperaba otra cosa.

La conversación se vuelve útil en cuanto el briefing dice cuál de los tres se quiere: rehacer el aspecto de lo que hay, proyectarlo de nuevo o construir un sistema que crezca. Todo lo demás —precio, plazo, qué llega al final— se deduce de esa elección.

A continuación se detalla cada nivel: qué contiene, cuándo basta y cómo saber que has contratado el que no era.

Nivel uno: el acabado

Es el trabajo más común y más barato. La estructura ya existe: viene de una plantilla, de un proveedor anterior o de años de acumulación. La tarea del diseñador es ordenarla: tipografía, espaciados, retícula, estados de los botones, un lenguaje visual coherente.

Ese alcance es el correcto cuando el sitio funciona en general: la gente llega a las páginas que necesita, entran solicitudes, pero todo parece montado de fuentes distintas. El acabado quita la sensación de casero y apenas toca la lógica.

Lo que el acabado no hace es arreglar la estructura. Si una persona no encuentra una sección o no entiende qué ofreces, una tipografía cuidada no lo repara. Dejará bonito algo que sigue sin entenderse.

La señal de que este es tu nivel: puedes nombrar todas las páginas del sitio, estás de acuerdo con ese conjunto y tu queja es sobre cómo se ven.

Nivel dos: proyectar

Aquí el trabajo empieza antes de la primera pantalla. El diseñador averigua quién llega, con qué pregunta y qué debe ocurrir, y solo entonces decide qué páginas existen y qué manda en cada una.

El resultado principal de este nivel no son imágenes sino decisiones: qué secciones hacen falta, cuáles sobran, qué aparece primero, dónde va la acción objetivo, en qué se diferencia una página de servicio de una de producto. Lo visual viene después.

Este nivel hace falta cuando el sitio se hace por primera vez, cuando el negocio ha cambiado o cuando el sitio antiguo dejó de responder a las preguntas con las que llega la gente. El síntoma es sencillo: repites por correo lo que debería decir el sitio.

Proyectar cuesta más que el acabado porque incluye trabajo previo al dibujo. Y suele ser lo que se amortiza, porque la mayoría de los problemas de un sitio viven en la estructura y no en la superficie.

Nivel tres: el sistema

Un sistema es un conjunto de componentes y reglas que permiten montar páginas nuevas sin diseñador. Retícula, escala tipográfica, tarjetas, formularios, estados y comportamiento en distintos tamaños de pantalla.

Hace falta cuando el sitio va a crecer: nuevos servicios, nuevas secciones, páginas de campaña. Sin él, cada página nueva es un encargo aparte y en un año el sitio vuelve a parecer montado de fuentes distintas.

Un sistema no tiene por qué ser grande. Para un sitio de diez páginas basta describir la retícula, la escala, tres tipos de tarjeta y las reglas de los formularios. Un manual de cien páginas para ese proyecto es sobrecoste.

La prueba de que un sistema funciona es la misma que la de una identidad: alguien que no lo construyó puede montar una página con él.

Qué influye más en el resultado

Lo primero, la claridad de la oferta. Un sitio no puede explicar lo que no se ha formulado. Si dentro de la empresa no hay acuerdo sobre en qué os diferenciáis del negocio de al lado, el diseño no lo resolverá y lo dejará a la vista.

Lo segundo, el material. Fotografías reales del trabajo, cifras, qué incluye un servicio y cuánto cuesta mueven la confianza más que cualquier idea visual. Un sitio con diseño mediocre y pruebas reales suele recoger más que uno bonito lleno de generalidades.

Lo tercero, la velocidad. Imágenes y tipografías pesadas retrasan el texto, y quien va con el móvil no espera. No es un tema técnico aparte: las decisiones sobre el tamaño y la cantidad de imágenes se toman durante el diseño.

Lo cuarto, la accesibilidad. Contraste del texto, tamaño de letra, legibilidad al sol y en pantalla pequeña. No es caridad: los mismos requisitos hacen el sitio más claro para todos, incluida la gente con prisa.

Conviene acordar por separado quién escribe los textos. Una maquetación hecha sobre texto de relleno casi siempre se rehace cuando llegan las palabras reales: los titulares auténticos son más largos, las listas más cortas y el párrafo prometido a veces no existe.

Cómo transcurre el proceso

El orden sensato es el mismo en cualquier nivel. Primero la tarea y el material: qué debe cambiar, quién llega, qué hay ya. Después la estructura: la lista de páginas y qué manda en cada una.

Luego las pantallas clave en dos estados, ancha y móvil. No todas las páginas: las que deciden, que suelen ser la portada, una página de servicio y un formulario. El resto se monta siguiendo su patrón.

Después los estados y los detalles que se saltan: listas vacías, errores de formulario, titulares largos, imágenes que faltan. Son exactamente lo que estropea la impresión cuando llega el contenido real.

Y la entrega: archivos, reglas y qué hacer con las páginas nuevas. Sin ese último paso el sitio empieza a dispersarse a las dos o tres actualizaciones.

Qué debe incluir la entrega: «» son tres alcances de trabajo distintos, no uno.

Como mínimo: los archivos de maquetación editables, las imágenes exportadas en los formatos y tamaños necesarios, las tipografías con su licencia indicada y una descripción de la retícula y la escala tipográfica.

Aparte, los estados de los componentes: cómo se ve un botón al pasar por encima y al pulsarlo, cómo se ve un formulario con error, qué pasa con una lista vacía. Quien programe sin eso se lo inventará, y se lo inventará distinto en cada sitio.

Conviene dejar por escrito qué no formaba parte del trabajo. Eso elimina la mayoría de las discusiones en la aceptación y hace visibles los límites del proyecto para ambas partes.

Y una nota sobre qué imágenes se pueden usar y en qué condiciones: fotografía propia, banco de imágenes con licencia o material generado tienen restricciones distintas.

Cómo elegir el nivel para tu caso

Tres preguntas responden esto más rápido que cualquier reunión. Primera: ¿estás de acuerdo con el conjunto actual de páginas? Si no, necesitas proyectar y el acabado no servirá.

Segunda: ¿cuántas páginas nuevas aparecerán este año? Si son más de cinco, o las harán personas distintas, necesitas un sistema o el sitio se dispersará en un año.

Tercera: ¿qué falla ahora exactamente: la gente no llega, no entiende o no confía? Lo primero se arregla con estructura, lo segundo con estructura y textos, lo tercero con pruebas y acabado.

En VITON13 el servicio de diseño empieza en 70 $ por una ruta de logotipo suelta, incluye un alcance enfocado por 120 $, el nivel de página lista para lanzar por 290 $ y el sistema por 540 $, con plazos de uno a ocho días laborables según el volumen.

Y por último, acordad de antemano quién se encarga de llevar la maquetación al código. Un diseño que nadie piensa implementar con precisión dura exactamente hasta el primer cambio del lado del desarrollo.