Share
Z-Layout es una excelente manera de comenzar casi cualquier proyecto de diseño web, ya que cumple con los requisitos básicos para cualquier sitio efectivo: creación de marca, jerarquía, estructura y llamada a la acción. Si bien el clásico "Z-Layout" no va a ser la solución perfecta para todos y cada uno de los sitios web, es ciertamente un diseño que es lo suficientemente efectivo como para justificar la inclusión en el arsenal de diseños de cualquier diseñador web..
Lograr una mejor comprensión de cómo diferentes diseños pueden cambiar el comportamiento del usuario es uno de los principios centrales para crear una experiencia de usuario efectiva..
Esta publicación marca la primera de una serie en la que examinaremos la gran variedad de paradigmas de diseño que existen en el mundo del diseño web. El objetivo: entender mejor. por qué Usted podría elegir un concepto de diseño sobre otro. En esta serie, también veremos el patrón en forma de "F", el diseño abierto y algunos diseños listos para usar que seguramente te darán algunas ideas geniales. Lograr una mejor comprensión de cómo los diferentes diseños pueden cambiar el comportamiento del usuario es uno de los principios centrales para crear una experiencia de usuario efectiva..
La premisa de Z-Layout es en realidad bastante simple: superponer la letra Z en la página. Coloque los elementos que desea que el lector vea primero en la parte superior de la Z. El ojo, naturalmente, seguirá el camino de la Z, por lo que el objetivo es colocar su "llamada a la acción" al final. A lo largo de la ruta puede incluir bits de información que se acumulan para la llamada a la acción. Echemos un vistazo al diagrama:
Tenga en cuenta que hemos numerado los puntos clave a lo largo de la ruta, que representan el orden en que un lector puede ver el contenido de la página. Veamos cómo se traduce esto en un diseño real:
Ahora vamos a superponer el diagrama Z en la parte superior del diseño:
Simple, ¿verdad? Ciertamente, no hay nada complicado en este diseño, pero de manera rápida y efectiva mueve el ojo del Punto 1 al Punto 4 en un orden lógico, concluyendo con un poderoso llamado a la acción. Sin embargo, todavía hay algunas cosas que podemos hacer para mejorar este diseño ... así que vamos a agregar algunas cosas al diseño:
Aquí puede ver que el nuevo botón "registrarse" en la navegación se destaca más; El "control deslizante" que hemos agregado al área de la tabla de clasificación ayuda a mantener la atención del usuario dentro del centro del marco; Los 2 íconos junto a los bloques de contenido en el Punto 3 también ayudan a hacerlos un poco más interesantes visualmente. Una vez más, esto es tan simple como puede ser, pero simple puede ser bueno cuando se trata de diseño de sitios web. Puede crear capas de complejidad como desee, pero no pase por alto el poder de un diseño simple y efectivo.
El Z-Layout ciertamente no necesita ser la solución concreta final para todos los sitios, pero como mencioné anteriormente, a menudo es un gran punto de partida para cualquier proyecto de diseño porque aborda los 4 de los grandes principios de un diseño efectivo:
Funciona porque la mayoría de los lectores occidentales escanearán un sitio de la misma manera que escanearían un libro: de arriba abajo, de izquierda a derecha. Desde esta sencilla base, puede ir prácticamente a cualquier parte: agregue múltiples llamadas a la acción, reduzca la altura de la Z, extiéndala, haga lo que desee que tenga sentido para el objetivo del sitio.
Echemos un vistazo a algunos de los grandes diseños de sitios que utilizan Z-Layout como estructura básica. Una cosa que querrá observar en estos ejemplos es cómo el diseño z puede adaptarse. Es posible que la Llamada a la acción no sea siempre la misma (algunos sitios pueden querer llevarlo a su cartera más de lo que quieren "Registrarse"); El contenido a lo largo del camino puede verse marcadamente diferente a nuestro ejemplo. Lo que hay que notar es cómo se lleva a cabo el aspecto de la narración: 1, 2, 3, ¡Acción! Al mover el ojo a lo largo de la ruta Z, aumentan las posibilidades de que un espectador termine haciendo lo que usted desea que haga..
Mientras ve estos ejemplos, intente encontrar la ruta Z que el diseñador quiere que siga.
Evernote parece complejo a primera vista, pero una inspección más cercana revela un camino z que termina con el botón "descargar". 
Mucho más sencillo, el sitio de Daina Reed proporciona un par de bits de información rápida y luego solicita una acción de "ponerse en contacto". 
La ruta en CodeMonkey comienza en el logotipo y termina en "Comenzar". 
Es un poco más difícil de ver aquí debido a la paleta de duo-chrome, pero el diseño z crea el marco general. 
Este ejemplo termina con una etiqueta de precio brillante y audaz. 
Probablemente uno de los usos más claros del Z-Layout, el diseño Blue Acorn alcanza cada punto del camino.. 
El diseño de Campaign Monitor mezcla el diseño, pero los pasos 1, 2, 3, 4 están intactos.. Es importante tener en cuenta que el Z-Layout no es el único paradigma de diseño que existe. Heck, hay tantos diseños como hay letras en el alfabeto. Z-Layout es uno de los diseños principales porque es muy fácil de usar como base, pero siempre querrá confiar en sus instintos cuando sea el momento de tomar una decisión final de diseño..
... Independientemente de cualquier diseño de diseño específico, es más probable que los espectadores vean primero los elementos más grandes, más brillantes y más contrastados de una página..
Se han realizado muchos estudios interesantes sobre seguimiento ocular que sugieren que tratar de predecir el movimiento ocular en un sitio web es tan errático como enviar a 1,000 niños a una tienda de golosinas. Varios estudios también han demostrado que el diseño en forma de "F" (que veremos a continuación en esta serie) es más efectivo para controlar el movimiento de los ojos del espectador en una página. La simple verdad es que, independientemente de cualquier diseño de diseño específico, es más probable que los espectadores vean primero los elementos más grandes, brillantes y más contrastados de una página. Mantén esto en mente; Si su objetivo es guiar a un espectador a través de Z-Layout, no les dé más oportunidades para distraerse en el camino de lo que ya tienen..
Donde Z-Layout realmente brilla es en los proyectos de diseño donde la simplicidad y una llamada a la acción son los principios más importantes. Tratar de forzar un Z-Layout en una estructura de contenido complicada probablemente no funcione bien, pero permitir que el patrón Z forme un marco para un sitio muy básico puede traer una sensación de orden que puede ayudar a aumentar su tasa de conversión.
Echa un vistazo a la "F" en forma de mensaje!
Oh! Echa un vistazo a una lista de plantillas de stock que utilizan el diseño Z aquí.
Accentsconagua