Diseño gráfico y diseño web comparten mucho más que la palabra «diseño». En ambos casos entran en juego el color, la tipografía, la composición, la jerarquía visual o el uso de imágenes para comunicar. No resulta extraño, por tanto, que a veces se consideren disciplinas casi intercambiables o que se dé por hecho que quien trabaja en una puede desenvolverse sin demasiados problemas en la otra.
Sin embargo, diseñar un cartel, un catálogo o la identidad corporativa de una marca no es lo mismo que diseñar una página web. No solo cambia el soporte. Cambia la forma en la que se consume el contenido, el grado de control que tenemos sobre el resultado, la posibilidad de interactuar con él y una buena parte de los condicionantes que hay que tener presentes durante el proceso de diseño.
A lo largo del artículo veremos qué comparten el diseño gráfico y el diseño web, pero sobre todo dónde empiezan a separarse. Entender sus diferencias no consiste tanto en decidir qué elementos pertenecen a una disciplina y cuáles a la otra, se trata más bien de comprender cómo cambia el trabajo del diseñador cuando cambia el medio para el que está diseñando.
Qué es el diseño gráfico
El diseño gráfico es una disciplina orientada a comunicar visualmente una idea, un mensaje o una información. Para ello combina elementos como tipografías, colores, imágenes, formas y espacios, organizándolos de manera que el resultado no solo tenga una determinada apariencia, sino que cumpla una función comunicativa.
Su campo de aplicación es muy amplio. Una identidad corporativa, un cartel, el envase de un producto, una revista, un catálogo o una pieza publicitaria son trabajos de naturaleza muy diferente, pero todos pueden formar parte del diseño gráfico.
Esto hace que tampoco debamos identificarlo exclusivamente con el diseño para impresión. Buena parte del diseño gráfico actual se crea para medios digitales, desde publicaciones para redes sociales hasta creatividades publicitarias que nunca llegarán a imprimirse. Que un diseño se muestre en una pantalla no lo convierte automáticamente en diseño web.
Lo importante para la comparación que nos ocupa es que el diseñador gráfico trabaja sobre la comunicación visual y toma decisiones para conseguir que un determinado contenido transmita lo que debe transmitir de una forma clara, coherente y adecuada al contexto en el que va a utilizarse.
Qué es el diseño web
El diseño web se ocupa de definir la apariencia y la experiencia de uso de sitios y aplicaciones web. La diferencia empieza a aparecer cuando esas decisiones visuales se aplican a un medio con características propias.
Cuando diseñamos una web no estamos creando únicamente una composición visual. Estamos definiendo una interfaz que posteriormente tendrá que funcionar, permitir que el usuario se mueva por ella, responder a sus acciones y mostrar contenidos que no siempre conocemos de antemano.
Esto significa pensar en páginas, pero también en elementos que se repiten, relaciones entre ellos y diferentes formas de utilizarlos. Un botón puede tener varios estados, un menú debe poder abrirse y cerrarse, un formulario tiene que contemplar errores y confirmaciones, y una misma estructura tendrá que funcionar con contenidos de distinta longitud.
A todo ello se suma que una web no tiene unas dimensiones únicas. Puede consultarse desde pantallas muy diferentes y el diseño debe ser capaz de adaptarse a ellas manteniendo tanto su coherencia visual como su facilidad de uso.
Por eso, aunque el resultado que vemos en pantalla tenga una evidente dimensión gráfica, el diseño web no consiste simplemente en componer visualmente cada página. También implica decidir cómo se comportará y cómo se utilizará aquello que estamos diseñando.
Qué tienen en común el diseño gráfico y el diseño web
El diseño gráfico y el diseño web no son dos disciplinas independientes que casualmente hayan terminado compartiendo principios y recursos. Ambas forman parte de un ámbito más amplio, el diseño, y de ahí procede buena parte de la base común sobre la que trabajan.
Principios como el equilibrio, el contraste, la proximidad, la alineación o el uso del espacio no pertenecen en exclusiva a ninguna de las dos disciplinas. Lo mismo ocurre con la jerarquía visual, la tipografía o el color. Elegir una fuente porque resulta apropiada para el mensaje, establecer una relación clara entre títulos y textos o construir una paleta coherente son decisiones de diseño que después se aplican teniendo en cuenta las características del medio.
También comparten buena parte del trabajo relacionado con las imágenes. Seleccionarlas, encuadrarlas, retocarlas o decidir qué protagonismo tendrán dentro de una composición son tareas que no pertenecen en exclusiva a ninguno de los dos ámbitos.
Pensemos en la promoción de un festival de música. Tanto el cartel que encontramos en la calle como su página web pueden utilizar la misma identidad visual, fotografías, colores y tipografías. Ambos deben permitir reconocer el festival, transmitir su personalidad y presentar la información con una jerarquía que ayude a entender qué es importante.
Hasta ese punto, las dos disciplinas pueden caminar bastante juntas. El cambio empieza cuando pensamos en lo que tendrá que ocurrir con cada diseño una vez terminado. El cartel tendrá unas dimensiones concretas y el público recibirá visualmente la información que contiene. En la web, en cambio, ese mismo público podrá navegar, pulsar, consultar información adicional y acceder al contenido desde dispositivos y pantallas muy diferentes.
Principales diferencias entre diseño gráfico y diseño web
El medio para el que se diseña introduce unas condiciones de trabajo muy diferentes. Algunas son evidentes y otras solo empiezan a apreciarse cuando dejamos de pensar en cómo se ve un diseño y pensamos en todo lo que tendrá que ocurrir con él.
Un formato definido frente a un espacio que cambia
En buena parte del diseño gráfico conocemos las dimensiones del soporte antes de empezar a trabajar. Un cartel tendrá un tamaño determinado, una revista contará con unas páginas de ciertas proporciones y el envase de un producto deberá ajustarse a unas medidas concretas. El diseñador puede componer teniendo como referencia un espacio conocido.
En una web ese espacio no existe de la misma manera. Podemos diseñarla inicialmente tomando como referencia determinadas dimensiones, pero el resultado tendrá que funcionar en pantallas mucho más grandes y mucho más pequeñas, con distintas proporciones e incluso con configuraciones del usuario que alteren cómo se muestra el contenido.
Esto cambia bastante la forma de entender la composición. No basta con decidir dónde debe estar cada elemento, también hay que prever qué ocurrirá cuando deje de haber sitio para mantenerlo ahí. Dos columnas pueden convertirse en una, un menú puede cambiar completamente su presentación y una imagen puede necesitar diferentes encuadres dependiendo del espacio disponible.
Si volvemos al festival del ejemplo anterior, en el cartel podemos decidir con bastante precisión cuánto espacio ocupa el nombre de cada artista y dónde aparece cada elemento. En su web debemos asumir que esa misma información tendrá que reorganizarse cuando alguien la consulte desde un móvil, un portátil o una pantalla de escritorio de gran tamaño.
Por eso el diseño web no debería entenderse como una colección de composiciones cerradas para distintos tamaños de pantalla. Lo que realmente se diseña es un sistema capaz de adaptarse entre unos tamaños y otros sin perder su estructura, su jerarquía ni su utilidad.
De contemplar el diseño a interactuar con él
Un diseño gráfico puede conducir nuestra mirada, destacar determinada información o conseguir que prestemos atención a unos elementos antes que a otros. Existe, por tanto, una forma de guiar a quien lo observa, pero normalmente el propio diseño no cambia como consecuencia de sus acciones.
En una web el usuario forma parte de lo que ocurre. Puede abrir un menú, desplegar información, enviar un formulario, avanzar por una galería, reproducir un vídeo, aplicar un filtro o realizar una compra. El diseño debe permitir realizar esas acciones y, además, ayudar a entender que pueden realizarse.
Por eso un elemento no siempre tiene una única apariencia. Un botón puede cambiar cuando pasamos el cursor sobre él, mostrar que tiene el foco al navegar con teclado o quedar desactivado cuando una acción no está disponible. Un formulario necesita comunicar qué campos son obligatorios, señalar los errores y confirmar cuándo se ha completado correctamente el envío.
Diseñar una interfaz implica pensar también en esos estados y en la respuesta que recibirá el usuario después de actuar. No diseñamos únicamente aquello que se encuentra al cargar una página, sino las distintas situaciones que pueden producirse mientras se utiliza.
En la web de nuestro festival, por ejemplo, un cartel con el texto «Comprar entradas» puede convertirse en un botón. Desde el punto de vista visual quizá conserve colores, tipografía y buena parte de la identidad gráfica, pero ahora tiene que parecer accionable, responder cuando interactuamos con él y conducir al usuario al siguiente paso. Ya no basta con que comunique visualmente, también tiene que funcionar.
El contenido no siempre es el que teníamos delante al diseñar
En muchos trabajos de diseño gráfico, el contenido forma parte del material con el que se realiza la composición. Sabemos cuál es el titular de un cartel, qué textos contiene un folleto o cuántas fotografías aparecerán en una página de una revista. Puede haber cambios durante el proceso, naturalmente, pero el diseño termina ajustándose a un contenido concreto.
En una web esto no siempre es posible. Hay contenidos que se introducen o modifican después, otros proceden de una base de datos y algunos incluso dependen del propio usuario. El diseñador puede conocer qué tipo de información aparecerá en un espacio sin saber exactamente cuál será.
Pensemos de nuevo en la web del festival. Podemos diseñar una ficha para cada artista utilizando como ejemplo un nombre como «Mark Knopfler», pero el mismo componente tendrá que funcionar si después aparece uno considerablemente más largo. Lo mismo puede ocurrir con la descripción, la fotografía, el escenario en el que actuará o cualquier otro dato que forme parte de esa ficha.
Diseñar pensando únicamente en el contenido utilizado en la maqueta puede producir resultados aparentemente perfectos que empiezan a romperse en cuanto llega el contenido real. Un título ocupa dos líneas en lugar de una, una descripción es mucho más extensa de lo previsto o una imagen tiene unas proporciones diferentes a las que utilizamos como referencia.
Por eso en diseño web no solo importa cómo queda una composición con unos contenidos determinados. También hay que pensar qué margen de variación puede admitir, qué ocurrirá en situaciones menos favorables y cómo debe comportarse cuando el contenido disponible no coincide con nuestro ejemplo ideal.
Esto también explica por qué abusar del típico texto de relleno durante el diseño puede esconder problemas. Un bloque de Lorem ipsum puede tener exactamente la longitud que nos viene bien para que todo encaje. El contenido real rara vez tiene esa consideración con nuestro diseño.
El control sobre el resultado final
Cuando un trabajo de diseño gráfico se prepara para un soporte concreto, existe normalmente un grado de control bastante alto sobre el resultado. Si diseñamos un cartel de 70 × 100 centímetros, sabemos qué dimensiones tendrá, dónde estará cada elemento y qué relación de tamaño existirá entre ellos. En impresión habrá que tener en cuenta cuestiones como el papel, las tintas o el propio proceso de producción, pero trabajamos para obtener un resultado físico definido.
En diseño web hay que aceptar una cierta pérdida de ese control. Podemos establecer cómo queremos que se comporte la interfaz y definir cuidadosamente sus estilos, pero no decidimos en qué dispositivo, navegador o sistema operativo terminará viéndola cada usuario.
Tampoco podemos dar por hecho que todos utilizarán la web en las mismas condiciones. Alguien puede aumentar el tamaño del texto porque le resulta más cómodo, utilizar el zoom del navegador, tener configurado un modo de alto contraste o navegar sin cargar determinadas fuentes o imágenes. Incluso elementos proporcionados por el propio sistema, como algunos controles de formulario, pueden presentar diferencias entre entornos.
Esto no significa que el resultado sea imprevisible ni que el diseñador web tenga que renunciar al control. Significa que ese control se ejerce de otra manera. En lugar de intentar garantizar una reproducción idéntica en cualquier circunstancia, se establecen reglas para que el diseño siga funcionando correctamente dentro de un margen razonable de variación.
Para alguien acostumbrado a trabajar con composiciones cerradas, esta diferencia puede resultar especialmente importante. En diseño web, que una página no se vea exactamente igual en todas partes no implica necesariamente que algo esté mal. Lo importante es que conserve su identidad, su jerarquía y su utilidad cuando cambian las condiciones en las que se muestra.
La accesibilidad también condiciona el diseño
La accesibilidad no es una preocupación exclusiva del diseño web. Un texto con poco contraste, una tipografía difícil de leer o una información que depende únicamente del color pueden plantear problemas independientemente de que aparezcan en una página web, un cartel o un folleto.
Sin embargo, el carácter interactivo de la web y las distintas formas en las que puede utilizarse amplían considerablemente lo que debemos tener en cuenta al diseñarla. No todos los usuarios perciben el contenido de la misma manera ni interactúan con él utilizando los mismos dispositivos.
Una persona puede navegar con teclado en lugar de utilizar un ratón, ampliar considerablemente el contenido, modificar determinados ajustes de visualización o acceder a la información mediante un lector de pantalla. Algunas de estas situaciones tienen consecuencias directas sobre decisiones que, a primera vista, podrían parecer puramente visuales.
Por ejemplo, eliminar el indicador de foco porque no encaja estéticamente con el diseño puede hacer muy difícil saber dónde nos encontramos al navegar con teclado. Utilizar únicamente un cambio de color para comunicar un error puede impedir que algunos usuarios lo identifiquen. Y fijar estructuras demasiado rígidas puede provocar que la interfaz deje de ser utilizable cuando se aumenta el tamaño del texto.
Esto obliga a entender el diseño web más allá de la apariencia que presenta en unas condiciones ideales. La interfaz debe seguir comunicando y permitiendo realizar las acciones previstas cuando cambia la manera de percibirla o de interactuar con ella.
En ese sentido, la accesibilidad no es una capa que se añade cuando el diseño ya está terminado. Muchas de las decisiones que determinan si una web será más o menos accesible se están tomando mientras se diseña.
Un diseño web tiene que convertirse en una web
Un proyecto de diseño gráfico también está condicionado por la forma en la que finalmente se producirá. Diseñar para impresión implica conocer las características del soporte, los sistemas de color, la resolución necesaria o las limitaciones del proceso de impresión. El diseño no existe completamente al margen de cómo va a materializarse.
En diseño web ocurre algo parecido, aunque el proceso es diferente. Lo que se diseña terminará convirtiéndose en HTML, CSS y, cuando sea necesario, JavaScript, además de integrarse posiblemente con un gestor de contenidos, una aplicación u otros sistemas. El resultado final no es el archivo de diseño, sino la web que utilizarán los usuarios.
Esto no significa que un diseñador web tenga que saber programar o encargarse de la maquetación. Son trabajos distintos. Pero conocer razonablemente el medio para el que se diseña ayuda a tomar decisiones que puedan trasladarse correctamente al resultado final.
Hay soluciones visuales que sobre una herramienta de diseño funcionan perfectamente porque podemos colocar cada elemento exactamente donde queremos. Al llevarlas al navegador, sin embargo, pueden resultar innecesariamente complejas, poco flexibles o difíciles de mantener cuando cambian el contenido y las dimensiones disponibles.
También ocurre lo contrario. Conocer las posibilidades de HTML y CSS permite plantear soluciones que quizá no surgirían si pensamos la web únicamente como una superficie sobre la que colocar elementos. El medio no solo establece limitaciones, también ofrece recursos propios que pueden formar parte del diseño.
Por eso, aunque las responsabilidades puedan estar claramente separadas, las decisiones tomadas durante el diseño tendrán consecuencias en la implementación y las características del medio condicionan desde el principio lo que tiene sentido diseñar.
Color, tipografía e imágenes dependen del medio
El diseño gráfico y el diseño web utilizan los mismos tipos de recursos visuales, pero el soporte en el que terminarán utilizándose introduce condicionantes diferentes.
El color es uno de los ejemplos más evidentes. Un trabajo destinado a impresión puede requerir trabajar pensando en CMYK, tintas concretas y perfiles de color, mientras que una web se mostrará en pantallas y utilizará color RGB. En ninguno de los dos casos podemos garantizar que todo el mundo perciba exactamente el mismo color: una impresión depende del soporte y del proceso utilizado, mientras que en una web entran en juego las características y la configuración de cada pantalla.
Con la tipografía ocurre algo parecido. En una pieza gráfica podemos utilizar una fuente y convertirla en parte del resultado final según las necesidades de producción. En una web, en cambio, la tipografía tendrá que estar disponible para el navegador, contar con la licencia adecuada para su uso como fuente web y cargarse junto con el resto de recursos. Además, debe seguir funcionando cuando el texto cambia de longitud, aumenta de tamaño o se reorganiza la interfaz.
Las imágenes también responden a necesidades distintas. En impresión necesitamos una resolución suficiente para el tamaño al que se reproducirán. En una web, utilizar una imagen enorme simplemente porque ofrece mucha resolución puede convertirse en un problema: tendrá que descargarse y su peso afectará al tiempo que tarda la página en mostrarse.
Esto introduce en el diseño web un condicionante que a veces resulta menos visible durante la fase puramente gráfica: el rendimiento. Una fotografía a gran tamaño, una familia tipográfica con numerosos archivos o determinados recursos visuales pueden tener un coste que no apreciamos mirando una maqueta, pero que sí sufrirá quien tenga que descargar la página.
No se trata de renunciar a esos recursos, sino de utilizarlos siendo conscientes del medio. Una decisión visual no termina en cómo queda sobre la pantalla de quien diseña; también importa cómo llegará hasta la pantalla de quien visita la web.
Un diseño que puede seguir cambiando después de publicarse
Cuando un trabajo gráfico llega a producción, normalmente existe un momento en el que el diseño queda cerrado. Una vez impresos los carteles, publicados los anuncios o fabricados los envases, cualquier modificación implica producir una nueva versión.
Una web funciona de otra manera. Publicarla no impide seguir modificando su diseño. Podemos corregir un problema que solo se ha hecho evidente al utilizarla, adaptar una sección a nuevos contenidos, incorporar funcionalidades o replantear una solución que con el tiempo ha dejado de funcionar bien.
Volvamos una última vez al festival. Si después de imprimir 5.000 carteles descubrimos que una información debería tener más protagonismo, podemos tomar nota para la siguiente tirada, pero los carteles que ya existen seguirán siendo los mismos. En la web podemos realizar el cambio y conseguir que, desde ese momento, lo vea cualquier persona que acceda a ella.
Esta posibilidad también permite observar cómo se comporta el diseño una vez que está en manos de usuarios reales. Algunas decisiones que parecían claras durante el proceso pueden no funcionar como esperábamos, y la web ofrece la posibilidad de revisarlas a partir de lo aprendido.
Esto no significa que el diseño web deba publicarse a medio terminar bajo la idea de que siempre podremos arreglarlo después. Significa que el resultado no tiene necesariamente el mismo carácter definitivo que una pieza ya producida y que puede evolucionar junto con el propio sitio web.
Del diseño gráfico al diseño web (y viceversa)
Que diseño gráfico y diseño web sean disciplinas diferentes no significa que exista una frontera infranqueable entre ellas. Precisamente por la base que comparten, buena parte de los conocimientos y de la experiencia adquirida en una pueden resultar muy útiles en la otra.
Un diseñador gráfico que empieza a trabajar en diseño web no tiene que volver a aprender qué es una jerarquía visual, cómo combinar tipografías o por qué el espacio en blanco puede ser tan importante como los elementos que lo ocupan. Lo que necesita es aprender a aplicar esos conocimientos en un medio que se adapta, responde a las acciones del usuario y está sujeto a los condicionantes que hemos visto a lo largo del artículo.
También tendrá que acostumbrarse a no controlar cada detalle de una composición cerrada. A veces la solución no será encontrar la posición perfecta para un elemento, sino establecer unas reglas para que siga funcionando cuando cambien el espacio disponible, el contenido o las condiciones de uso.
El camino contrario tampoco es automático. Un diseñador web que empieza a realizar trabajos gráficos puede encontrarse con procesos y conocimientos que hasta entonces apenas había necesitado. Preparar correctamente un archivo para imprenta, trabajar teniendo en cuenta sangrados, sistemas y perfiles de color o saber qué resolución necesita una imagen según su tamaño de reproducción son algunos ejemplos bastante básicos.
También cambia la relación con el resultado final. En una web estamos acostumbrados a poder corregir un detalle después de publicar. Cuando acabamos de recibir 5.000 folletos de imprenta no existe un CSS que podamos modificar para desplazar dos milímetros ese elemento que ahora nos molesta.
En ambos sentidos, la experiencia previa proporciona una base valiosa, pero hay que aprender el nuevo medio. Saber diseñar no consiste únicamente en manejar unas determinadas herramientas o tener criterio visual, sino también en conocer suficientemente el contexto en el que ese diseño terminará utilizándose.
Por eso un buen diseñador gráfico puede convertirse en un buen diseñador web y un buen diseñador web puede hacer lo propio en diseño gráfico. Lo que no conviene dar por hecho es que una cosa implica automáticamente la otra.
Deja una respuesta