Qué hace un diseñador web y cuándo necesitas uno

Una web se crea para alguien y con algún propósito. Puede servir para presentar los servicios de un profesional, vender productos, captar clientes, informar, gestionar determinadas tareas o cumplir objetivos muy diferentes. Antes de decidir cómo será visualmente, hay que entender quién está detrás del proyecto, a quién se dirige, qué espera conseguir y en qué contexto tendrá que funcionar.

También hay condicionantes que no siempre resultan tan evidentes. Una empresa puede contar con una identidad corporativa consolidada que habrá que respetar o partir prácticamente de cero. Puede necesitar una web que administrará posteriormente un equipo especializado o una que deberá actualizar alguien sin apenas conocimientos técnicos. Incluso una decisión aparentemente puramente creativa puede tener consecuencias en la maquetación, la programación o el mantenimiento posterior.

Por eso, para mí un buen diseño web no consiste simplemente en crear una interfaz bonita. La estética importa (y mucho), pero debe trabajar a favor de las necesidades del proyecto y no competir con ellas. La creatividad del diseñador tampoco debería imponerse a los objetivos de quien le ha contratado. Lo realmente interesante está en conseguir que ambas cosas encajen.

A lo largo de este artículo voy a explicar qué hace exactamente un diseñador web, qué papel ocupa dentro de un proyecto y en qué situaciones tiene sentido contar con uno.

Qué hace exactamente un diseñador web

El trabajo de un diseñador web comienza bastante antes de elegir una tipografía, definir una paleta de colores o decidir cómo distribuir los elementos de una página.

Antes hay que entender el proyecto y las personas a las que se dirige. A partir de ahí comienza un proceso en el que se van tomando decisiones sobre la estructura, la jerarquía de la información, la apariencia visual y la manera en la que el usuario interactuará con la interfaz.

Definir una línea gráfica para el proyecto

Una de las primeras tareas consiste en establecer el lenguaje visual que tendrá la web. Aquí entran en juego la tipografía, los colores, las imágenes, los espacios, las proporciones y todos aquellos elementos que terminarán dando coherencia al conjunto.

Esta línea gráfica no debería aparecer de forma aislada. Si existe una identidad corporativa previa, el diseño web tendrá que convivir con ella y trasladarla a un medio con sus propias características. Cuando no existe, puede ser necesario realizar previamente un trabajo de identidad visual, aunque eso pertenezca propiamente al terreno del diseño gráfico.

En mi caso no suelo diseñar todas las pantallas de una web antes de comenzar a maquetar. Normalmente preparo la página de inicio y alguna página interior que permitan establecer esa línea gráfica, trabajarla con el cliente y cerrar una dirección visual antes de desarrollar el resto del proyecto.

Diseñar incluso cuando todavía no existe todo el contenido

Lo ideal sería disponer desde el principio de todos los textos, fotografías y demás materiales definitivos, pero la realidad de muchos proyectos es bastante diferente.

Recopilar contenidos lleva tiempo y no siempre el cliente puede proporcionarlos al comenzar. Otras veces ni siquiera existen todavía porque estamos trabajando con un negocio nuevo que también está definiendo qué necesita comunicar.

Esperar indefinidamente no suele ser una opción, así que es habitual comenzar con el material disponible, buscar recursos provisionales cuando sea necesario y utilizar contenido de ejemplo para construir una primera propuesta.

Esto no significa que el contenido carezca de importancia. Al contrario, diseño y contenido se condicionan mutuamente. Lo que ocurre es que muchas veces ambos tienen que evolucionar en paralelo. De hecho, contar con una primera estructura visual suele ayudar también al cliente a comprender mejor qué contenidos necesita preparar y cómo se van a presentar.

Pensar en cómo utilizará la web el usuario

Una interfaz puede ser atractiva y, sin embargo, dificultar aquello que el usuario ha venido a hacer. El diseño debe establecer jerarquías, facilitar la navegación, hacer comprensibles las acciones disponibles y organizar la información de manera que responda tanto a las necesidades del usuario como a las del proyecto.

Aquí entran en juego muchas de las decisiones que habitualmente asociamos al diseño UX y UI. Son conceptos con suficiente entidad como para tratarlos por separado, pero forman parte de las preocupaciones que debe tener presentes quien diseña una interfaz web.

Esto obliga a mirar más allá de cada pantalla de forma aislada. Una decisión visual puede afectar al recorrido del usuario, a la forma de localizar un contenido o a la facilidad con la que entiende qué debe hacer a continuación.

Diseñar para un medio flexible

Una web tampoco es una composición cerrada. Se visualizará en pantallas diferentes, contendrá textos cuya longitud puede cambiar y probablemente evolucionará con el tiempo.

Por eso no entiendo el diseño web como la creación de una colección de imágenes que posteriormente deban reproducirse de manera exacta en cada resolución. En mis propios proyectos suelo definir la dirección visual y resolver buena parte de las adaptaciones durante la fase de maquetación, donde puedo comprobar directamente cómo responde la interfaz ante diferentes tamaños y contenidos.

Es una forma de trabajar muy relacionada con el diseño web intrínseco, en el que se acepta desde el principio la naturaleza flexible del medio en lugar de intentar definir una representación cerrada para cada posible pantalla.

Tener presente lo que ocurrirá después del diseño

Hay decisiones que pueden resultar atractivas sobre una pantalla estática pero complicar considerablemente la maquetación, el desarrollo o incluso la gestión posterior de la web. Por eso resulta útil tener presente cómo se construirá y utilizará aquello que se está diseñando.

Un ejemplo que suelo tener en cuenta es quién administrará posteriormente el sitio. No tiene las mismas necesidades una web gestionada por un equipo técnico que otra que deberá actualizar habitualmente una persona sin conocimientos específicos. Una solución muy creativa puede perder buena parte de su sentido si convierte cada modificación cotidiana en un problema.

Diseñar una web implica, por tanto, encontrar un equilibrio entre identidad, estética, usabilidad y las condiciones reales en las que tendrá que funcionar el proyecto.

Diseñador web, maquetador web y programador web: diferencias

Diseño, maquetación y programación forman parte de un mismo proceso, pero resuelven problemas diferentes. Las fronteras entre estos perfiles no siempre son completamente rígidas y es habitual encontrar profesionales que abarcan más de una disciplina, pero distinguirlas ayuda a entender qué aporta cada uno al proyecto.

Perfil	Función principal
Diseñador web	Define cómo será la interfaz, cómo se organiza visualmente la información y cómo interactuará el usuario con ella.
Maquetador web	Convierte el diseño en una interfaz real mediante HTML, CSS y JavaScript y la adapta a los distintos dispositivos.
Programador web	Desarrolla la lógica y las funcionalidades que permiten que la aplicación o el sitio web haga aquello para lo que ha sido creado.

Visto de una forma muy simplificada, el diseñador plantea cómo debe ser y comportarse la interfaz, el maquetador la construye y el programador desarrolla la lógica necesaria para que funcione. En un proyecto real, sin embargo, las fronteras no siempre están tan delimitadas.

El diseño como punto de partida

En muchos proyectos el trabajo del diseñador se produce antes de que comience la maquetación. A partir de las necesidades planteadas establece una propuesta visual que posteriormente deberá convertirse en una interfaz real.

Cuando cada fase está en manos de un profesional diferente, el diseño suele necesitar un grado de definición bastante alto. No basta con establecer una estética general si después otra persona tiene que interpretar cómo se comportan los distintos elementos, qué ocurre en otras resoluciones o cómo deben resolverse determinadas situaciones que no aparecen en una pantalla concreta.

Es algo que veo habitualmente cuando trabajo como maquetador para agencias. El diseño suele llegar bastante cerrado porque ha sido previamente trabajado y aprobado con el cliente. En ese contexto mi papel no es continuar diseñándolo libremente, sino trasladarlo a la web respetando la propuesta y resolviendo los problemas que puedan aparecer durante su implementación.

Mi forma de trabajar cambia cuando soy responsable del proyecto completo. Al ocuparme también de la maquetación y la programación, no necesito dejar resueltas de antemano determinadas decisiones para comunicárselas al siguiente profesional. Puedo establecer una línea visual y continuar desarrollándola directamente en el navegador conforme avanza el proyecto.

Son dos formas de organizar el trabajo que responden a situaciones diferentes. Un diseño que debe pasar de unas manos a otras necesita dejar menos espacio a la interpretación que uno cuyo responsable continuará trabajando sobre él en las siguientes fases.

La importancia de conocer las fases posteriores

Un diseñador web no tiene por qué ser maquetador ni programador, del mismo modo que un maquetador no necesita desarrollar toda la lógica de una aplicación. Sin embargo, conocer las particularidades del medio ayuda a tomar mejores decisiones.

Una propuesta puede funcionar perfectamente sobre una imagen estática y resultar complicada de trasladar a una interfaz real. También puede plantear comportamientos técnicamente posibles pero desproporcionadamente costosos para lo que aportan, o crear estructuras que posteriormente sean difíciles de mantener y administrar.

Esto no significa que el diseñador deba limitar su creatividad pensando constantemente en las dificultades técnicas. Precisamente parte del trabajo consiste en explorar soluciones. Pero cuanto mejor conozca las implicaciones de lo que propone, más fácil será encontrar un equilibrio entre la idea visual y su aplicación real.

La colaboración entre perfiles

Aunque podamos representar el proceso como una sucesión entre diseño, maquetación y programación, no creo que deban entenderse como compartimentos estancos.

El maquetador puede detectar durante la implementación situaciones que no se habían previsto en el diseño. El programador puede encontrar condicionantes que afecten a la interfaz y el diseñador puede aportar una solución cuando una necesidad técnica obliga a replantear alguna parte del proyecto. Que cada profesional tenga una responsabilidad principal no significa que deba trabajar de espaldas a los demás.

Esta comunicación resulta especialmente importante porque cada disciplina observa el proyecto desde un prisma diferente. El diseñador se preocupa principalmente por la experiencia y la propuesta visual, mientras que maquetación y programación introducen progresivamente las condiciones del medio en el que esa propuesta tendrá que funcionar.

Cuando esas perspectivas se complementan, el resultado suele ser mucho más sólido que cuando cada fase se limita a entregar su parte y olvidarse de lo que ocurre después.

Cuándo merece la pena contratar un diseñador web freelance

No siempre quien necesita un diseñador web empieza buscándolo como tal. De hecho, en mi experiencia es mucho más habitual que un cliente llegue porque necesita una web nueva o quiere renovar la que ya tiene.

En mi caso el diseño forma parte del propio proceso de desarrollo. No trabajo habitualmente partiendo de plantillas comerciales, sino que creo una propuesta específica para cada proyecto, por lo que esa fase está presente aunque el cliente inicialmente no la haya identificado como una necesidad independiente.

Esto también hace que mis clientes de diseño sean principalmente clientes finales. Las agencias suelen contar con sus propios diseñadores y, cuando recurren a mí, normalmente lo hacen para las fases posteriores de maquetación o programación.

Cuando se crea una web desde cero

Si un negocio, profesional u organización necesita una nueva web, alguien tendrá que decidir cómo trasladar sus necesidades a una interfaz.

Cuando se busca una solución a medida, no se trata simplemente de escoger una apariencia que resulte atractiva. Hay que estudiar qué se quiere comunicar, a quién, qué contenidos tendrán mayor importancia, cómo se organizarán y qué identidad debe transmitir el conjunto.

A veces el cliente llega buscando expresamente esa diferenciación y tiene claro que quiere un diseño creado para su proyecto. Otras veces no concede demasiada importancia inicialmente a esta fase porque lo que percibe como necesidad es, sencillamente, «tener una web».

Ambas situaciones son perfectamente normales. El cliente no tiene por qué conocer las disciplinas que intervienen en su desarrollo. Parte de mi trabajo consiste precisamente en entender qué necesita y explicarle cómo las distintas decisiones pueden contribuir al resultado.

Cuando una web necesita algo más que un lavado de cara

Otro escenario habitual es el rediseño de una web existente. Muchas veces la petición inicial se formula de una manera bastante sencilla: renovar su aspecto, modernizarla o, como se suele decir, lavarle la cara.

Sin embargo, antes de cambiar colores, tipografías o cualquier otro elemento visual conviene mirar qué hay debajo. Si la arquitectura de la información no funciona, determinados contenidos han perdido sentido o la estructura ya no responde a las necesidades actuales del negocio, conservar todo exactamente igual y limitarse a cambiar su apariencia puede significar arrastrar los mismos problemas con un envoltorio nuevo.

Por eso, cuando afronto un rediseño, primero reviso la estructura y los contenidos. Después podemos entrar en la parte gráfica, valorar qué merece la pena conservar y decidir hacia dónde queremos llevar visualmente la nueva web.

No todos los casos requieren una transformación radical. Hay webs cuyo diseño ha envejecido mal o presenta problemas evidentes, pero también encuentro proyectos con una base perfectamente válida en los que basta con afinar la dirección visual y adaptarla a lo que el cliente necesita actualmente.

Cuando una solución genérica no representa bien al proyecto

Las plantillas y los temas comerciales pueden resolver perfectamente las necesidades de determinados proyectos. No considero que recurrir a ellos sea, por definición, una mala decisión.

El diseño a medida cobra sentido cuando queremos que la interfaz responda específicamente al contenido, la identidad y los objetivos del proyecto, en lugar de adaptar todo ello a una estructura previamente creada para servir a muchos tipos de web.

Esa diferencia no siempre es una prioridad para el cliente. Hay quien valora especialmente disponer de una solución propia y quien estaría perfectamente satisfecho utilizando un tema comercial. También ocurre que alguien llega sin conceder demasiada importancia al diseño y, al estudiar el proyecto, veo oportunidades claras de mejorar su presentación y funcionamiento mediante una propuesta pensada expresamente para él.

En esos casos mi papel no consiste en imponerle esa necesidad, sino en explicarle qué creo que puede aportar y dejar que valore si encaja con sus prioridades y su presupuesto.

Cuando el diseño actual limita lo que la web debería conseguir

También puede ocurrir que el motivo inicial de una consulta sea otro y que, al analizar la web, aparezcan problemas relacionados con el diseño.

Una jerarquía poco clara, contenidos difíciles de localizar, una presentación que ya no representa al negocio o una interfaz que dificulta determinadas acciones pueden estar interfiriendo con los objetivos de la web aunque técnicamente todo funcione correctamente.

Eso no significa que cualquier web antigua necesite un rediseño. Antes hay que entender qué pretende conseguir, qué está funcionando y qué problemas existen realmente. El diseño tiene sentido cuando responde a esas necesidades, no simplemente porque haya pasado cierto tiempo desde la última renovación.

Qué diferencia un buen diseño web de uno mediocre

Valorar un diseño web tiene inevitablemente una parte subjetiva. Dos personas pueden tener preferencias estéticas completamente diferentes y ninguna de ellas tiene por qué estar equivocada.

Sin embargo, diseñar una web no consiste únicamente en decidir si algo nos parece bonito o feo. Hay otros criterios que permiten valorar si las decisiones tomadas tienen sentido dentro del proyecto, si ayudan al usuario y si pueden trasladarse correctamente al medio para el que han sido concebidas.

Diseñar para un objetivo y no para lucirse

La creatividad forma parte del trabajo de un diseñador y es precisamente una de las cosas que pueden aportar personalidad a un proyecto. El problema aparece cuando esa creatividad se convierte en un objetivo en sí misma.

Una web puede ser visualmente espectacular y, al mismo tiempo, dificultar que alguien encuentre un servicio, entienda qué hace una empresa o complete una acción importante. En ese caso el diseño está llamando mucho la atención sobre sí mismo, pero no necesariamente está haciendo bien su trabajo.

Para mí, el reto está en conseguir que los objetivos del proyecto y una propuesta visual atractiva vayan en la misma dirección. No se trata de renunciar a la creatividad, sino de utilizarla para construir una experiencia que tenga sentido para quien va a utilizar la web.

Entender que una web no es un soporte estático

Una de las diferencias fundamentales entre diseñar para web y hacerlo para otros soportes es que no podemos controlar completamente el resultado final.

El tamaño de la pantalla cambia, los contenidos pueden crecer, determinados elementos aparecerán o desaparecerán y el usuario interactuará con aquello que estamos diseñando. Una composición que funciona perfectamente como imagen puede dejar de hacerlo cuando se convierte en una interfaz real.

Por eso considero importante diseñar teniendo presente la naturaleza del medio. Un diseñador web sigue siendo un diseñador, pero se ha especializado en un soporte con unas características concretas, igual que ocurre en otras ramas del diseño.

Esto se aprecia especialmente cuando alguien procede del diseño gráfico tradicional y plantea una web como si estuviera componiendo un cartel, un folleto o una revista. No significa que sus conocimientos de diseño dejen de ser válidos, sino que necesita trasladarlos a un medio que funciona de otra manera.

Mantener una jerarquía y una coherencia visual

Cada página forma parte de un conjunto. Tipografías, colores, espacios, botones, formularios y demás componentes deberían mantener un lenguaje reconocible que permita al usuario entender la interfaz sin tener que aprenderla de nuevo a cada paso.

La consistencia no obliga a que todas las páginas sean iguales. Puede haber composiciones diferentes, excepciones justificadas y elementos con mayor protagonismo cuando el contenido lo requiere. Lo importante es que esas diferencias respondan a una decisión y no a una acumulación de soluciones independientes.

Algo parecido ocurre con la jerarquía visual. No todo puede tener la misma importancia ni competir simultáneamente por la atención. El diseño debe ayudar a entender qué es principal, qué es secundario y qué relaciones existen entre los diferentes contenidos.

Diseñar con contenido, no alrededor de un rectángulo vacío

El contenido condiciona profundamente un diseño. Un titular puede ocupar una o tres líneas, una ficha puede contener más información que otra y una fotografía real probablemente no tendrá exactamente las mismas características que la imagen provisional utilizada durante la propuesta.

Como comentaba antes, muchas veces comienzo a diseñar sin disponer todavía de todo el material definitivo. Es una realidad con la que hay que trabajar, pero precisamente por eso intento que la propuesta no dependa de que cada contenido tenga unas dimensiones perfectas.

Un diseño excesivamente rígido puede funcionar muy bien mientras utilizamos el texto y las imágenes con los que fue creado y empezar a romperse en cuanto llegan los contenidos reales. Diseñar para web también significa dejar espacio para esa variabilidad.

Pensar en lo que ocurrirá cuando la web esté terminada

Una web no deja de existir cuando se publica. Tendrá que actualizarse, incorporar contenidos y, en muchos casos, evolucionar con el negocio.

Esto introduce condicionantes que no siempre se perciben en una propuesta visual. Si cada nueva página requiere una composición completamente diferente o una actualización cotidiana obliga a realizar un trabajo técnico complejo, quizá hayamos creado una solución atractiva pero difícil de mantener.

Aquí mi experiencia como maquetador y programador influye inevitablemente en mi forma de diseñar. Mientras trabajo en una propuesta ya estoy pensando en cómo se construirá, qué ocurrirá cuando cambien los contenidos y cómo podrá gestionarla posteriormente el cliente.

No es imprescindible que todos los diseñadores tengan ese mismo perfil. Lo importante es que esas cuestiones formen parte del proyecto, ya sea porque el propio diseñador puede anticiparlas o porque existe comunicación con los profesionales que se ocuparán de las siguientes fases.

Al final, un buen diseño web no es necesariamente el que más llama la atención cuando vemos una captura de pantalla. Es el que consigue construir una identidad visual atractiva sin perder de vista para quién se ha creado, qué debe conseguir y qué ocurrirá cuando deje de ser un diseño y se convierta en una web real.

Cómo suelo abordar un proyecto de diseño web

No todos los proyectos siguen exactamente el mismo recorrido, pero con los años he ido estableciendo una forma de trabajar que me permite avanzar sin depender de que el cliente tenga absolutamente todo preparado desde el primer día.

Una vez firmado el contrato, el primer paso es reunirnos y hablar del proyecto. Necesito conocer su empresa o actividad, los objetivos de la nueva web, a quién se dirige, qué expectativas tiene y qué referencias pueden ayudarme a entender lo que busca. También hablamos de preferencias personales y de aquello que, por el motivo que sea, quiere evitar.

A partir de esa reunión ya tengo un briefing inicial, pero necesito algo de material real con el que empezar a trabajar. Si existe un logotipo o un manual de identidad corporativa, es una referencia fundamental. También pido fotografías, textos, gráficos y cualquier otro contenido disponible.

No hace falta que todo esté preparado inmediatamente. De hecho, suelo pedir al cliente que vaya recopilando el material mientras yo comienzo a trabajar. A veces unas fotografías y algunos textos son suficientes; otras, un dossier comercial me proporciona ya una buena cantidad de información real sobre la empresa, sus servicios y su manera de comunicarse.

Las primeras propuestas

En mis presupuestos de diseño incluyo normalmente dos propuestas diferentes para la página de inicio. No se trata simplemente de cambiar colores o mover algunos elementos, sino de explorar dos posibles direcciones que respondan a los objetivos que hemos establecido.

El cliente elige una de ellas y trabajamos sobre esa propuesta realizando los ajustes necesarios. Si ninguna funcionase, preparo una tercera a partir del feedback obtenido con las dos primeras, aunque en la práctica rara vez he tenido que llegar a ese punto.

La página de inicio me permite definir buena parte del lenguaje visual del proyecto. Una vez aprobada, diseño dos o tres páginas interiores que tengan suficiente entidad para comprobar cómo se extiende esa misma línea gráfica al resto de la web. Dependiendo del proyecto puede tratarse de una tienda, una ficha de producto, un portfolio, un listado de artículos o cualquier otro apartado especialmente representativo.

No diseño previamente todas las páginas porque, como he explicado antes, mi trabajo no termina aquí. Después voy a ocuparme también de la maquetación y puedo continuar desarrollando esa línea visual directamente sobre la interfaz real.

Buscar una dirección visual

La parte creativa es bastante menos previsible. No tengo un procedimiento que me lleve siempre desde el mismo punto A hasta el mismo punto B.

Suelo comenzar estudiando qué hace la competencia y observando tendencias dentro del sector. No necesariamente para seguirlas, sino para conocer el contexto en el que se moverá el proyecto y encontrar posibles caminos.

A partir de ahí las referencias pueden aparecer prácticamente en cualquier sitio. Utilizo portales especializados, pero también libros. Por ejemplo, conservo una colección de diez volúmenes de Web Design Index que recopila webs visualmente interesantes de diferentes épocas. Un diseño creado hace años puede contener una idea, una composición o una solución gráfica que sirva como punto de partida para hacer algo completamente actual.

Otras veces la inspiración procede de un artista, de algo que he visto en un museo o del propio producto del cliente. No suelo buscar una referencia que pueda trasladar directamente a la web. Se trata más bien de encontrar una veta interesante y empezar a trabajar sobre ella, mezclar ideas, probar soluciones y ver hacia dónde conduce.

Para poder hacer eso necesito contar al menos con una arquitectura inicial. No tiene por qué estar completamente cerrada todavía, pero sí necesito conocer las piezas principales y qué papel desempeñará cada una. La creatividad necesita cierto espacio para moverse, pero también un problema concreto que resolver.

Cerrar el diseño antes de comenzar a maquetar

Durante todo este proceso el cliente va viendo las propuestas y realizando los cambios que considere necesarios. Su aprobación de la línea gráfica y de las pantallas que hemos trabajado marca el final de la fase de diseño.

Para entonces también suele haber avanzado bastante en la recopilación de contenidos. Tener ya el diseño delante ayuda muchas veces a entender mejor qué textos, imágenes y demás materiales hacen falta, así que es en este momento cuando normalmente puedo terminar de cerrar la arquitectura de la web con el contenido definitivo o prácticamente definitivo.

Cerrar la fase de diseño antes de comenzar a maquetar también establece un punto de acuerdo. Evita que decisiones visuales fundamentales continúen cambiando cuando ya estoy construyendo la interfaz, con todo el trabajo adicional que eso podría provocar.

Eso no significa que el diseño se vuelva intocable. Durante la maquetación pueden aparecer necesidades que aconsejen reajustar alguna solución, especialmente porque es entonces cuando el diseño empieza a enfrentarse a contenidos y situaciones reales. La diferencia es que esos cambios responden a la evolución del proyecto y no a que sigamos decidiendo cuál debe ser su dirección visual.

A partir de ahí comienza para mí otra etapa. El diseño deja de ser una propuesta y pasa a convertirse en una interfaz real, que es precisamente el terreno de la maquetación web.