comparte el articulo 

Patrones de diseño web: Patrón Z y diagrama de Gutenberg

Actualizado el 05/10/2013 < > 1 Comentario

Resumen: Primera parte de un artículo donde exponemos algunos de los patrones de diseño web más comunes para realizar un layout, en esta entrega nos enfocamos en el patrón Z y el diagrama de Gutenberg.

Uno de los principales objetivos que se buscan al llevar a cabo la estructuración de una página web, es que el contenido sea mostrado de manera adecuada para que el mensaje que se busca transmitir al usuario sea recibido de forma efectiva. Para lograr esto se recurre al uso de patrones de diseño web, los cuales ofrecen soluciones a problemas de percepción que se pueden presentar dentro de nuestro layout.

Con los patrones de diseño se buscan crear estándares que de algún modo dicten las formas adecuadas de mostrar el contenido de un sitio web. Sin embargo no debemos pensar en ellos como reglas o imposiciones sobre la creatividad y alternancia que se puede presentar en un sitio, simplemente son sugerencias para el desarrollo las cuales nos indican qué partes son de mayor interés para la vista de los usuarios.

Son muchos los patrones de diseño que se han planteado a lo largo del tiempo, tenemos que especificar que esto viene de mucho tiempo antes a la creación de las páginas web. Con la imprenta y la creación de los primeros textos mediante este método, se empezaron a utilizar estructuras, las cuales con el tiempo demostraron que hay ciertas áreas donde la gente suele explorar o fijar más la vista.

En la actualidad aún seguimos utilizando esta clase de patrones de diseño web, la diferencia radica en que ahora con las páginas web tenemos más control sobre los tamaños y formas de presentación, por lo que se puede optar por un patrón no tan tradicional.

Diagrama de Gutenberg en diseño web

Este es quizás el patrón de diseño más utilizado en la historia, ya que la estructura que propone se puede ver representada tanto en escritos, carteles, publicidad e inclusive en la televisión. Lo que nos define este diagrama, en principio, es una estructura basada en el movimiento que sigue el ojo humano por inercia, este movimiento hace que se termine presentando más atención a ciertas partes del objeto desplegado, por lo que dichas partes toman más relevancia en el diseño.

Si nos decidimos en utilizar este patrón, entonces a la hora de realizar un diseño web debemos de tener muy en cuenta las siguientes indicaciones para distribuir ordenadamente todos los elementos:

  • Nuestra área de exposición estará dividida en cuatro partes.
  • Cada cuadrante representa una zona óptica.
  • La más importante de ellas es la ubicada en la parte superior izquierda y recibe el nombre de zona primaria.
  • La siguiente en la estructura es la zona de barbecho fuerte, que se encuentra ubicada en el extremo superior derecho.
  • En la parte inferior izquierda encontramos la zona que presenta menos atención, la zona de barbecho débil.
  • Finalmente en la parte inferior derecha se encuentra la zona terminal.

El hecho de utilizar este diagrama para la realización de nuestros diseños, traerá consigo una armonía con la gravedad normal de lectura, permitiendo al usuario seguir una orientación familiar, mejorando de esta manera la comprensión del contenido.

Este resultado se logra gracias a la costumbre, ya que las personas occidentales comúnmente realizan una lectura que va descendiendo por una serie de barridos hasta llegar a la zona terminal.

Para este patrón de diseño las zonas que presentan menor atención son la esquina superior derecha e inferior izquierda, y en caso de querer atraer atención a esas partes es necesario incluir un elemento llamativo que enfatice de alguna manera la zona. Es por esto que el contenido relevante debe seguir la diagonal que va de la esquina superior izquierda a la inferior derecha.

Un uso a este patrón que generalmente se da en los sitios web, es cuando se coloca el logo en la zona principal, el contenido importante se despliega en la zona de en medio y alguna información de contacto o de registro se coloca en la zona terminal.

Es recomendado utilizar este patrón cuando presentamos grandes cantidades de texto, si este no es tu caso y tienes bien definida una jerarquía visual, quizás sea recomendable utilizar otro tipo de patrón.

Patrón Z en diseño web

Como su nombre lo dice, este patrón se encarga de definir el diseño de un sitio en base a la forma de la letra Z. Los usuarios empezarán a percibir la información de la esquina superior izquierda, moviéndose horizontalmente hacia la esquina superior derecha, después de manera diagonal irán hasta la parte inferior izquierda para finalmente terminar con la parte inferior derecha.

Este patrón puede ser considerado como una contraparte al diagrama de Gutenberg, ya que propone un desplace diagonal inverso, y toma en cuenta las dos zonas que el diagrama considera poco relevantes.

Sin embargo, esta contraparte no se ve tan reflejada al momento de determinar las zonas de mayor relevancia, ya que en los dos patrones esta funcionalidad recae en la zona principal y terminal.

El patrón Z es recomendable para páginas con un diseño web simple, con pocos elementos que necesiten de completa atención, pero no por esto queremos dar a entender que sólo debe ser limitado a esta clase de diseños. Este tipo de layout puede ser aplicado a casi cualquier proyecto de diseño web, ya que cumple con las necesidades básicas de cualquier sitio, presentar una marca, tener jerarquía, establecer una estructura y llamar a la interacción.

Existen otros patrones que se derivan de este, tal es el caso del patrón zig zag, que básicamente consiste en un conjunto de patrones Z que se van uniendo a lo largo de la página desplegada para continuar con el mismo seguimiento visual del contenido. Este podría ser considerado el movimiento natural en caso de que el usuario continuará leyendo la información que se encuentra debajo de la primera vista en nuestra página de inicio.

También encontramos al patrón del triángulo rectángulo que básicamente consiste en utilizar el patrón Z dando un movimiento de clausura distinto, en vez de mandar la atención a la zona inferior derecha, regresamos a la zona superior izquierda. De esta forma se forma un triángulo, dentro del cual debe de ir la información más relevante.

Publicado el 16/05/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Fernando

    Muy valiosa esta información. Valdría la pena agregar algunos diagramas o dibujos para enriquecer más la información.

    Gracias.

    Domingo, 3 de febrero 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras