Consideramos que hemos sido afortunados de ser parte del diseño web a medida que alcanza su madurez. Con los avances tecnológicos y los bloggers prominentes que publican gran información sobre conceptos de diseño, como el uso de cuadrículas, líneas de base, dirección de arte y la regla de los tercios (entre otros), podemos trabajar con el diseño de sitios web en un nivel mucho más alto que incluso hace unos pocos años. Sin embargo, hay otros principios de diseño que aún no han recibido suficiente atención o uso. Uno de estos principios es el «Diagrama de Gutenberg «, que probablemente han utilizado en algún nivel sin darse cuenta.
Menú del Artículo
Cómo el diagrama de Gutenberg mejorará su diseño
El diagrama de Gutenberg es un método para comprender cómo las culturas que leen de derecha a izquierda, visualmente navegan por una composición y cómo optimizar el diseño como resultado de ello.
Como estamos capacitados para leer desde la parte superior izquierda a la parte inferior derecha de forma natural, instintivamente barremos una composición comenzando desde la parte superior izquierda hacia la parte inferior derecha (a menudo varias veces). Como la jerarquía de información y el énfasis visual son partes críticas del diseño, saber cómo un usuario va a mirar su sitio a pesar del diseño puede conducir a un diseño mucho más efectivo.
Cómo funciona el diagrama
El diagrama disecciona la composición en cuatro cuadrantes. En este caso, ya que estamos diseñando para la web, será dictado por la resolución de la pantalla y la ubicación del pliegue. El cuadrante superior izquierdo es la primera área en la que se centrará el ojo del usuario. El ojo se desplazará hacia abajo cruzando el centro o la intersección de los cuatro cuadrantes, antes de bajar al cuadrante inferior derecho.
El cuadrante superior derecho y el cuadrante inferior izquierdo se denominan áreas en barbecho. La parte superior derecha es un área de seguimiento fuerte, donde la parte inferior izquierda es un área de seguimiento débil. Estas áreas recibirán poca atención visual a menos que se enfaticen a través del diseño. La parte superior derecha recibirá más atención que la parte inferior izquierda, todas las demás cosas iguales.
Usando el diagrama para un excelente diseño web
Al comprender y trabajar con el diagrama, podemos maximizar la efectividad de nuestros diseños utilizándolo para nuestro beneficio. Probablemente sea bueno que en su diseño web coloque el logotipo en la esquina superior izquierda de la pantalla. Será lo primero que verán los usuarios, les dirán dónde están y ayudarán a marcar el sitio web.
Des acentuar
Como sabemos que los cuadrantes inferior izquierdo y superior derecho recibirán menos atención visual, podemos poner elementos menos importantes en esas áreas. Es posible que haya notado que los diseñadores colocan enlaces de navegación secundarios en esa área, como inicio de sesión del cliente, rss, feed, etc. Este es un uso perfecto del diagrama de Gutenberg, ya que dicha navegación no es tan crítica como la navegación primaria. Sin embargo, aquellos que lo buscan aún pueden encontrarlo y usarlo cuando sea necesario.
Coloque elementos visuales y contenidos importantes conscientemente
A medida que diseña la página, es posible que también desee considerar mover contenido o imágenes más importantes en la ruta del diagrama. Si tiene una opción, coloque contenido importante en el pliegue a la derecha del diseño en lugar de a la izquierda. Una ocurrencia común sería intercambiar contenido por una imagen de izquierda a derecha, para poner mayor énfasis en uno u otro.
También es posible que desee reconsiderar colocar la navegación alineada a la derecha, ya que es poco probable que la coloque en la parte inferior de la composición.
Algunos ejemplos del diagrama de Gutenberg
Pepsi
GoDaddy
Museum of Modern Art
Conclusiones
El diagrama de Gutenberg no es el santo grial . Pero considera que una vez que comienzas a jugar con énfasis visual y peso, la forma en que un usuario mira un diseño puede modificarse drásticamente. La idea es utilizar el diagrama para su ventaja y conducir a consumir visualmente nuestros diseños de forma instintiva para fortalecer el diseño y la composición.
Comentarios recientes