5 parecidos entre el diseño gráfico y el diseño web

Diseño gráfico y web esbozo

Entendemos como diseño gráfico, el diseño que implica un proceso de impresión y al que también podemos llamar diseño sobre papel, y como diseño web, el diseño de sitios web.

Si googleamos diseño gráfico vs diseño web, seguro que aparecen numerosas diferencias que hacen pensar que estas dos disciplinas del diseño son muy distintas, aunque en el fondo son más parecidas de lo que uno podría pensar.

Google Material Design, una de las referencias actuales a la hora de diseñar webs y apps, toma muchos aspectos del diseño sobre papel para definir proporciones, colores, usos tipográficos o espacios en blanco intencionales.

 

Diseño gráfico web proporciones

Pero qué mejor que buscar algunas similitudes más, sean técnicas o no para comprobar que no son tan diferentes:

1. Proporcionalidad y medidas

Antes de nada hay que pensar en el formato, en sus proporcionalidades, y para ello cogeremos de muestra los tamaños de papel referencia en imprentas offsset, la serie DIN-A.

La proporción de medidas DIN-A es de 1,414, para saber la proporcionalidad de cada formato, nos basta con dividir el largo del papel por el ancho. En este caso dividimos 297/210, que es lo que mide un DIN-A4.

En medios digitales, y a pesar de que hay muchos tamaños de pantalla en la actualidad, podemos observar que tienen cierta similitud en su proporcionalidad con el papel. Por ejemplo, en smartphones, tomando como referencia el Iphone 7 ó 6 su proporción es de 1,778 y en tablet, un Ipad tiene una proporción de 1,333. Una pantalla panorámica de 16:9 tiene la proporción de 1,778. Así, comprobamos que las medidas proporcionales, siempre siguen una estructura más rectangular que cuadrada. Y esta similitud, como decíamos, viene heredada del papel, en concreto de todas las series DIN.

Otra cosa en qué fijarnos es cómo dividimos la pantalla y cómo doblamos el papel para definir diferentes espacios. Una división de pantalla en web standard parte de dividirla 2,3 ó 4 partes (es decir, 50%, 33% y 25%). En papel pasa lo mismo, doblamos por la mitad, un tercio (el típico tríptico) y un cuarto (la mitad de la mitad).

2.- Grids

Las retículas en papel son bastante variables pero como comenté en mi anterior post sobre El diseño gráfico y la sucesión de Fibonacci, las retículas que más uso son de 2, 3 y 5 columnas. Vignelli, por ejemplo, usaba 2, 3, 4 y 6 columnas. En nuestro estudio de diseño, por ejemplo, utilizamos para el diseño web una retícula base variable de 12 o 16 columnas. De esta manera es bastante fácil implementar 1, 2, 3 y 4 columnas, que son más que suficientes en un medio digital que se tiene que poder adaptar a diferentes formatos de pantalla.

 

Diseño gráfico web reticulas

3. Usabilidad/interacción y composición

¡Si! el papel también tiene interacción, mucha más restrictiva que una app o una web pero tiene. Además tiene una cosa de la que un dispositivo digital carece totalmente: el tacto.

Una web o app tiene que tener una usabilidad intuitiva y fácil, que podría compararse con la forma natural que tenemos interiorizada de pasar páginas de un periódico o revista.

Es más, podemos decir que la composición de los elementos (la distribución, los tamaños, los pesos de cada elemento, etc.) también viene heredada del diseño gráfico. Este hecho tiene un fin claro: hacer cómoda la lectura y visualización del usuario, ya que está acostumbrado a leer en papel y de esta manera no es tan intrusivo o brusco el cambio entre un soporte y otro.

4. Escalas tipográficas

En cuanto a mi gran pasión, la tipografía, últimamente se ha mejorado mucho la renderización de gran variedad de tipos para pantalla. De hecho, Adobe está desarrollando una nueva tecnología que optimiza el peso de la tipo dependiendo del viewport del dispositivo. Esto significa que cada vez, habrá mejores tipografías implementadas en webs y apps, rozando la nitidez de una buena impresión offsset.

En cuanto a las métricas, pesos y tamaños de implementación de las fuentes, también, en web se heredan del papel, a excepción de los puntos y los cíceros, ya que el punto pasa a ser un píxel exacto, y el cícero desaparece. En cambio, se ha recuperado una medida poco utilizada en papel y casi tan antigua como la imprenta, el em, que de forma modernizada se conoce como rem (Relative em).

5. Distribución e inserción de contenidos según formato

Volviendo a la introducción del post, la distribución típica de los contenidos en los diferentes soportes digitales también tiene similitudes a los formatos en papel clásicos. Por ejemplo:

  • Mobile: es muy similar a un flyer, en el que se reducen y/o eliminan elementos, y los textos son más cortos. Su composición suele tener una distribución puramente vertical.
  • Tablet: vendría a ser como un tríptico o brochure en el cual se amplía información con respecto a mobile, pero limitada si se compara a desktop. En este caso, la distribución sería a dos y tres columnas.
  • Desktop: aquí ya entramos en un diseño editorial como una revista o periódico, en el que se da una información más ampliada y se insertan más fotografías e ilustraciones. Su composición sería a cuatro o cinco columnas.

En definitiva, en diseño web al igual que en diseño gráfico, también se priorizan contenidos a mostrar en función del dispositivo, se utilizan las mismas reglas para componer y hay que saber adaptarse a formatos de pantalla muy parecidos al papel. Si os queda alguna duda de todo esto, o tenéis otra opinión, nos encantaría escucharla en nuestras redes sociales (Facebook o Twitter). ¡Feliz fin de semana!

 

 

Juan Gavilán
Juan Gavilán
Director de arte
Mandarina Brand Society Mandarina Brand Society

We are in Palma, we are in San Sebastian, Ibiza, Madrid, or Barcelona…
We are on the other side of the telephone, or replying you an email. Because what it really matters is to be where you are and whenever you need us.