Diseño web. En que se diferencia el diseño web y el diseño gráfico a nivel de formato
Actualizado: 24 / 06 / 2022

Diferencias entre diseño web y diseño gráfico

Francesc Sánchez CEO La Teva Web
Francesc Sánchez
Experto en marketing digital
SectorHablamos de

Un diseñador gráfico y un diseñador web, aunque comparten bases teóricas, no tienen nada que ver

¿Qué es el diseño gráfico?

El diseño gráfico consiste en el uso de la comunicación visual para transmitir mensajes concretos a un colectivo concreto con un objetivo determinado. Los diseñadores gráficos elaboran esta comunicación visual mediante el uso y combinación de gráficos, tipografías, ilustraciones e imágenes con el objetivo de comunicar una idea. Así los profesionales del diseño gráfico deben dominar campos como la teoría del color, jerarquía visual, composición visual y el uso de la tipografía.

El uso de la tecnología ha supuesto un salto cualitativo en la vida de los diseñadores gráficos que disponen de potentes programas de edición digital como el pack Adobe que es el más popular con su triada Photoshop, Illustrator e InDesign. La tecnología ha abierto nuevas opciones al diseño gráfico que evoluciona del papel a otros soportes como el digital. Y aquí es donde aparece el diseño web.

¿Qué es el diseño web?

El diseño web consiste, como bien indica su nombre, en el diseño de páginas web. Es importante detallar la palabra diseño y no creación. Si en el diseño gráfico aparecen las figuras del maquetador y del impresor como figuras que acaban convirtiendo el diseño visual creado por el diseñador en un cartel o un libro; en el diseño web estas figuras se convierten en la del maquetador web o programador web que son imprescindibles para convertir el diseño web en una página web propiamente. El diseño web se acaba en la creación visual de lo que será la página web, convertirla en página web corresponde a los maquetadores y programadores web.

El diseño web tiene la base en el diseño gráfico y debe tener los mismos conocimientos técnicos y teóricos. Sin embargo, hay una diferencia clave: el soporte ja que en este caso se trabaja directamente sobre pantalla. Parece un tema menor, pero supone un impacto inmenso en la conceptualización y aplicación del diseño, es por ello que consideramos el diseño web como una disciplina en sí misma.

Si quieres profundizar más, consulta nuestro post¿Qué es el diseño web?.


diseño web vs diseño gráfico

Grandes diferencias

Habilidades técnicas

Como ya hemos dicho, los diseñadores web -como los diseñadores gráficos, también necesitan dominar los fundamentos del diseño. Deben dominar el uso la tipografía, el color y la jerarquía y ambos tipos de diseñadores deben estar al día de las nuevas tendencias en el mundo del diseño.

A nivel técnico los diseñadores gráficos y diseñadores web suelen utilizar los mismos programas o software de diseño, sin embargo, el diseñador web debe estar familiarizado con los lenguajes de programación, concepto de SEO, usabilidad web y arquitectura web. Todo ello supone limitaciones al diseño web, limitaciones o restricciones técnicas que van desde el tiempo de carga a los requisitos necesarios para poder realizar posteriormente un buen posicionamiento web.


Papel vs pantalla

Si el diseño gráfico se explica sobre múltiples soportes (papel, metal, etc) el diseño web trabaja con un único soporte: la pantalla. Sin embargo, si bien los soportes del diseñador gráfico son múltiples siempre tienen una superficie delimitada, pero en el caso del diseñador web este soporte único, pero altamente variable. Un ejemplo: cuando un diseñador gráfico diseña un cartel, sabe que las medidas del cartel serán siempre las mismas y puede trabajar “al píxel”. Por el contrario, un diseñador web no sabe nunca en que pantalla se va a mostrar su diseño web: ¿en una pantalla de móvil? ¿en una pantalla de tablet?, ¿de pc? ¿Y a que resolución?... es lo que se denomina trabajar sobre un soporte líquido. El uso del diseño web responsive o líquido ha facilitado mucho la vida a los diseñadores, que pueden crear un diseño que se adapta a los dispositives y pantallas de forma natural.


El diseño web es dinámico, el diseño gráfico es estático

Una de las grandes virtudes del diseño web es que se basa en la interacción, interactuamos con botones, usamos buscadores, navegamos por varias páginas web, arrastramos elementos, desplegamos menús, utilizamos gráficos en movimiento y videos en una misma página web. El diseño gráfico es menos interactivo, puedes mirarlo, pero no cambia cuando interactúas con él.

Todo ello nos dirige al concepto de usabilidad web que nos va a condicionar profundamente un diseño web. Debemos estudiar previamente la experiencia del usuario y como situar los elementos gráficos para facilitar una navegación intuitiva a través del sitio web.

diferencias diseño web y diseño grafico

El uso de la tipografía

Por suerte queda lejos el tener de trabajar con fuentes de sistema y hoy en día se puede utilizar usar casi todas las fuentes en el diseño web, de hecho, hay incluso librerías como Google Fonts ideadas para su uso en web. Dicho esto, cada navegador renderiza de forma diferente una misma fuente y no podemos conseguir que una fuente en una misma página web se vea exactamente igual en todos los navegadores.


El concepto de usabilidad o UX

La usabilidad web (UX o user experience, en inglés) es el grado de facilidad de uso que tiene una página web para los usuarios que acceden e interactúan con ella. Una de las misiones principales del diseñador web es hacer que una página web tenga un diseño web usable. Jakob Nielsen está considerado el padre de la usabilidad y, en 2000 lanzó al mercado el libro Designing Web Usability donde expone los 10 principios que deben regir la usabilidad de cualquier web.

Designing Web Usability


Estos principios són:

1. Visibilidad del estado del sistema

El sistema, es decir la web o aplicación, siempre debe mantener en todo momento a los usuarios informados sobre lo que está sucediendo, a través de mensajes en tiempo y forma. Por ejemplo, cuando alguien envía un formulario diseñar una respuesta de formulario enviado y así hacemos saber al usuario que su acción se ha ejecutado correctamente. Las barras de carga o estados en procesos de pago son otros ejemplos habituales.

2. Coincidencia entre el sistema y el mundo real

El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario y no con términos técnicos. Debemos diseñar la información y mostrarla de forma lógica, natural y sobre todo intuitiva. El uso de un dibujo de un carrito de supermercado como carrito de la compra en las tiendas online es el mejor ejemplo

3. Control y libertad del usuario

Dar la posibilidad a los usuarios a corregir sus errores en la navegación por la página web. El botón de volver atrás sería un buen ejemplo. Debemos ofrecer siempre al usuario un diseño web que contemple puntos de salida de los procesos que está ejecutando.

4. Consistencia y estándares

Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Uno de los grandes retos como diseñadores es saber usar de forma habitual las convenciones o recursos habituales de las páginas web. Por ejemplo, situar los menús de navegación en la parte superior de la página web y, en el caso del móvil, usar en el diseño responsive el menú hamburgesa de tres líneas. Todo el mundo espera encontrar el menú arribar y el carrito de la compra en la parte superior derecha.

5. Prevención de errores

Incluso mejor que los buenos mensajes de error es un diseño cuidadoso que evita que nos equivoquemos. Un buen diseño web debe eliminar las condiciones propensas a errores o comprobarlas y presentar a los usuarios una opción de confirmación antes de que se comprometan con la acción. Un ejemplo sería el uso de autocompletar en los buscadores o, en el caso de formularios, verificar que los campos se rellenen correctamente.

6. Reconocimiento en lugar de recuerdo

Debemos minimizar en lo posible que el usuario haya de recordar de que ha hecho previamente haciendo visibles los objetos, las acciones y las opciones. El usuario no debería tener que recordar información de una parte de la página web a otra. Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables siempre que sea necesario. El uso de autocompletar de formularios es un buen ejemplo.

7. Flexibilidad y eficiencia de uso

Los aceleradores, que no son vistos por el usuario novato, a menudo pueden acelerar la interacción para el usuario experto, de modo que el sistema puede atender tanto a usuarios inexpertos como experimentados. Permita a los usuarios adaptar las acciones frecuentes. El uso de buscadores con opción de búsqueda avanzada es un ejemplo, a nivel de diseño web debemos considerar poner desplegables de búsqueda avanzada en los buscadores.

8. Diseño estético y minimalista

En diseño web menos es más. Debemos mostrar la información estrictamente necesaria para que el usuario no se pierda o marche. Debemos conducirlo por donde nos interesa. Por ejemplo esto es especialmente importante en los funnels o embudos de venta en las tiendas online. Por eso en los carritos de la compra solemos evitar puntos de fuga. Cada unidad adicional de información en una página web compite con las unidades de información relevantes y disminuye su visibilidad relativa.

9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores

Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos), indicar con precisión el problema y sugerir constructivamente una solución. Si le damos a un usuario un error de 404 no le dirá mucho, debemos diseñar un mensaje de página no encontrada.

10. Ayuda y documentación

Aunque es mejor si el sistema se puede utilizar sin documentación, puede ser necesario proporcionar ayuda y documentación. Cualquier información de este tipo debe ser fácil de encontrar, concreta y no extensa. Un ejemplo es el uso de tooltips (también llamado descripción emergente o texto alternativo) en los menús de una página web, el uso de secciones de ¿cómo funciona? o de preguntas frecuentes en la página web.

diseño UX

Conclusiones

Es importante destacar que un diseñador web tenga los conocimientos técnicos y la base teórica de un diseñador gráfico como punto de partida para después profundizar en las técnicas más propias del diseño web. Sin embargo el diseñador web debe dominar conceptos como UX o usabilidad web, diseño web responsive o el uso de la interacción. Es pues siempre recomendable que una página web sea diseñada por un diseñador web que, aparte de comunicación, entienda la variedad de temas técnicos (velocidad de carga, arquitectura de la web, SEO, usabilidad, etc) que tienen un impacto directo en el diseño de la página web.

Francesc Sánchez CEO La Teva Web
Sobre el autor/a
Francesc Sánchez — Experto en marketing digital
Barcelonés, experto en marketing digital. Fundador y CEO de La Teva Web e inaugurador de nuestro magnífico blog. Me entusiasma haber colocado la primera piedra de los cimientos que sostienen nuestros valores: clientes felices y proyectos que dejan huella.

Noticias relacionadas

¿Tienes un proyecto en mente? Cuéntanoslo