Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Entendiendo el diseño en forma de Z en diseño web

by
Length:ShortLanguages:
This post is part of a series called Web Design Theory.
Understanding the F-Layout in Web Design
Concept and Inspiration: Design Theory for Web Designers

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

El diseño en forma de Z es una excelente manera para empezar casi cualquier proyecto web porque se ocupa de los requisitos básicos para cualquier sitio efectivo, ¿cuáles? Marca, jerarquía, estructura y llamados a la acción. Sin embargo no significa que el diseño en forma de Z vaya a ser la solución perfecta para todos y cada uno de los sitios web que se encuentran en toda la red, efectivamente, por supuesto, es un diseño que es lo suficientemente efectivo para garantizar la inclusión en el arsenal de diseños de ideas de cualquier diseñador web.

“Lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento de los usuarios, es uno de los principios centrales para la creación de una experiencia efectiva para los usuarios”.

Este artículo es el segundo de una serie dónde examinaremos la amplia variedad de diseños paradigmáticos que existen en el mundo del diseño web. El objetivo, mejorar la comprensión de por qué podrías escoger un concepto de diseño en lugar de otro. En estas series, también estaremos viendo el “diseño en forma de F”, el diseño abierto, y algunos de los diseños de caja que estoy seguro que te darán algunas buenas ideas. Pero, ¿de qué se trata todo esto? De lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento de los usuarios es uno de los principios centrales para la creación de una experiencia efectiva para los usuarios.

Introducción al Diseño en forma de F

La premisa del diseño en forma de Z en realidad es muy sencillo: superponer la letra Z sobre la página. Coloca los archivos que quieres que los lectores vean primero a lo largo de la parte superior de la Z. Luego, naturalmente el ojo seguirá la trayectoria de la Z, por lo tanto el objetivo es colocar los llamados a la acción en el final de los puntos de intersección de la letra Z. A lo largo de la trayectoria puedes incluir fragmentos de información que se forman para el “llamado a la acción”. Echemos un vistazo al diagrama:

Observe que hemos enumerado los puntos claves a lo largo de la trayectoria. Estos “puntos clave”, representan el orden en el cuál un lector es probable que vea el contenido de la página. Ahora veamos como se traduce esto en el diseño real:

Ahora vamos a superponer el diagrama de Z arriba del diseño actual:

¡Sencillo!, ¿cierto? En realidad, no hay nada complicado relacionado a este tipo de diseño. Nada más observemos cómo se mueve el ojo rápida y efectivamente desde el Punto 1 hasta el Punto 4 en un orden sencillamente lógico, y sobre todo; concluyendo en un poderoso llamado a la acción. Sin embargo, todavía hay algunas cosas que podemos hacer para condimentar esta composición… Así que vamos añadir algunas cosas al diseño:

  • Un fondo como separación para enfocar el movimiento de los ojos dentro del marco de nuestro diseño.
  • Un logo con estilo para captar inmediatamente la atención de los usuarios justo en el Punto # 1
  • Un botón con mucho color de “Contratar” en el punto # 2: esto por supuesto refuerza el deseo del movimiento del ojo.
  • Una foto principal con un control de deslizamiento en el centro de la página: esto separará la sección superior del diseño del fondo y facilitará el movimiento del ojo hacia abajo.
  • Los iconos en el punto # 3 y a lo largo del eje inferior: esto estimulará el “análisis de los títulos” así el ojo se mueve al llamado a la acción.
  • Un enorme “llamado a la acción” en el punto # 4: gracias al nuevo fondo de separación esta función debe destacarse aún más.

Aquí puedes ver que el nuevo botón “Firmar Contrato Ahora” en la navegación se destaca más. El “control deslizable” que hemos agregado a la zona de clasificación ayuda a conservar la atención de los usuarios dentro del centro del marco. Los 2 iconos a la par de los bloques de contenido en el punto # 3 también ayudan hacer los bloques, visualmente un poco más interesantes. De nuevo, ¡se trata de ser tan simple como se pueda ser, pero lo simple puede ser bueno cuando se trata de diseños de sitios web! Puede agregar capas de complejidad a su gusto, pero no hay que ignorar el poder de un diseño simple y efectivo.

¿Por qué funciona?

Realmente el diseño en forma de Z no necesita ser la concreta solución final para todos los sitios, pero igual como lo mencione anteriormente; a menudo es un gran punto de partida para cualquier diseño de proyecto porque aborda los 4 grandes principios de un diseño web efectivo:

  • La marca
  • La jerarquía
  • La estructura
  • Un llamado a la acción

También funciona porque la mayoría de los lectores de Occidente, analizan el sitio de la misma manera que lo hacen con un libro: de arriba hacia abajo, de izquierda a derecha. Y desde esta sencilla base puedes ir a casi cualquier parte, por ejemplo; agregar múltiples llamados a la acción, reducir la altura de la Z, o extenderla, hacer lo que sea que quieras que tenga sentido para el objetivo principal del sitio.

Ahora echemos un vistazo a algunos sitios que están bien diseñados y que usan el diseño en forma de Z como su estructura básica. Una cosa que seguramente observarás en estos ejemplos es cómo el diseño en forma de Z es capaz de adaptarse. El Llamado a la Acción puede no siempre ser el mismo (es decir que algunos querrán guiarte a su portafolio en lugar del botón de “Firmar Contrato”), el contenido a lo largo de la trayectoria puede parecer muy diferente de nuestro breve ejemplo. Lo qué hay que notar es cómo el aspecto de la narración se realiza a través de: 1, 2, 3… y ¡Acción! Con tan sólo mover el ojo a lo largo de la trayectoria de la Z, y las posibilidades de que un visitante termine haciendo lo que usted quiere que haga han incrementado enormemente.

Mientras vea estos ejemplos, procura encontrar la trayectoria de la Z que el diseñador quiere que sigas.

Ejemplos del diseño en forma de Z en acción

Evernote parece complejo a primera vista, pero una inspección más de cerca revela un camino en forma de Z que finaliza con el botón de “descarga”.
Mucho más simple, el sitio web de Daina Reed ofrece un par de trozos de información, luego te pide la acción “Ponerme en contacto”.
La trayectoria en el sitio CodeMonkey empieza en el logo y termina en el llamado a la acción “Empezar”.
Aunque en éste sitio es un poco más difícil de ver debido a la paleta de color dúo cromo, pero el diseño en forma de Z crea la estructura en general.
Este ejemplo finaliza con un brillante y resaltado precio en rojo.
Este es probablemente uno de los usos más claros del diseño en forma de Z, el diseño de Blue Acorn llega a cada punto de la Z a lo largo del trazo.
El diseño de Campaign Monitors, está diseñado por una mezcla de diseño, pero los pasos 1, 2, 3 y 4, están intactos.

Advertencias que valen la pena mencionar.

Es muy importante observar que el diseño en forma de Z no es el único paradigma de diseño que hay ahí afuera. De hecho, hay tantas formas de composición como letras en el alfabeto. El diseño en forma de Z es una de las principales composiciones porque es sencillo de usar, pero tomando en cuenta que como base. Sin embargo, siempre querrás confiar en tus instintos cuando es el momento de tomar la decisión final en el diseño.

…independientemente de cualquier forma de diseño específico los espectadores están más propensos a buscar primero los elementos más grande, más brillantes y con más alto contraste que se encuentre en la página.

Ha habido un montón de estudios interesantes hechos al rastreo del ojo para tratar de conseguir predecir el movimiento del ojo a través de un sitio web y es tan errático como tratar de enviar 1000 niños a una tienda de caramelos. Varios estudios también han mostrado que el diseño en forma de F, es mucho más efectivo en controlar el movimiento de los ojos de los visitantes a través de la página. La verdad es simple, independientemente de cualquier forma de diseño específico los espectadores están más propensos a buscar primero los elementos más grande, más brillantes y con más alto contraste que se encuentre en la página. Siempre ten en mente esto; que si tu objetivo es guiar a los visitantes a través del diseño de Z, entonces no les des ninguna oportunidad de distraerse a lo largo de la forma de lo que ya lo están.

Dónde brilla realmente el diseño en forma de Z es en proyectos de diseño donde la sencillez y los llamados a la acción son los principalmente más importantes. Tratando de forzar a un diseño Z en una estructura complicada probablemente no funcionará bien, pero si permitimos que el patrón en forma de Z forme una estructura para un sitio básicamente sencillo puede darle una sensación de orden que puede ayudar a incrementar su taza de conversión.

¡Asegurate de revisar también el diseño en forma de "F"

¡Oh! Revisa una lista de plantillas que usan el diseño en forma de Z aquí.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.