Los mejores patrones de diseño web para comunicar tu mensaje con éxito
Elegir un patrón de diseño web es una de las primeras decisiones que debes tomar al crear una página web, y acertar con el adecuado es crucial. Además de definir su diseño, el patrón que elijas puede tener un gran impacto en la capacidad de tu página web para comunicar un mensaje y hacerla más intuitiva.
Qué es un patrón de diseño web
Un patrón de diseño web es una forma determinada de distribuir los elementos visuales de una página web y optimizar la relación entre ellos. Aunque los elementos se pueden distribuir como uno quiera, seguir un patrón de diseño web ayuda a transmitir mejor el mensaje de la página web y a mejorar su usabilidad.
El patrón del diseño es esencial en el diseño web. Establece un orden jerárquico visual de los elementos, define aquellos que deben captar mayor la atención del usuario, y contribuye al equilibrio general del diseño de la página web.
Por decirlo llanamente, un buen patrón de diseño web puede ayudar a que el usuario preste atención primero a lo más importante de una página web y luego a otras secciones por orden de importancia.
Cómo elegir un patrón de diseño web
Cuando se acerca el momento de elegir el patrón del diseño de una página web, existen dos factores que hay que tener en cuenta:
Ajustar tu contenido: el diseño web de una página debe apoyar el mensaje que deseas transmitir. Algunos patrones son mejores para mostrar productos, mientras que otros son preferibles para transmitir información rápida y eficazmente (un blog o un portal de noticias). El patrón de diseño web que elijas debe ajustarse a tu tipo de contenido.
Usar patrones estándar: aunque admiten cierta creatividad, estos patrones de diseño web son generalmente la mejor opción porque han demostrado una y mil veces que funcionan. Como son muy comunes, cumplen las expectativas del usuario que ya está acostumbrado a ellos: son más intuitivos y fáciles de usar.
En este artículo hemos listado diez de los patrones de diseño web más efectivos y extendidos que existen y te explicamos por qué funcionan y el tipo de contenido idóneo para cada uno ellos. Los ejemplos que mostramos aquí fueron creados con plantillas de Wix personalizables a cualquier estilo.
Los 10 mejores patrones de diseño web
Diseño web con patrón Z
Diseño web con patrón F
Diseño web con imagen a toda pantalla
Diseño web con pantalla dividida
Diseño web asimétrico
Diseño web de columna única
Diseño web en bloques
Diseño web en mosaico
Diseño web estilo revista
Diseño web en franjas horizontales
1. Diseño web con patrón Z
Cuando nos topamos con una página web por primera vez, enseguida le echamos un vistazo rápido para tener una idea de qué trata. Esta forma de "escanear" con los ojos la página se conoce como lectura rápida y la realizamos siguiendo un patrón parecido a la letra Z. Nuestros ojos hacen un barrido en forma de zigzag desde la esquina superior derecha de la página hacia su esquina inferior izquierda para luego desplazarse hacia la derecha.
Una página web con patrón Z se sirve de nuestro hábito de lectura rápida para distribuir la información más importante en forma de Z. El logotipo se suele colocar generalmente en la esquina superior izquierda para que sea lo primero que perciba el usuario. En frente, a la derecha, se suele colocar el menú de navegación junto a un llamado a la acción que destaque.
La diagonal que se extiende a lo ancho de la página, de arriba a abajo, es donde se coloca la información que más nos interesa que capte la atención. Esto se consigue usando imágenes seductoras acompañadas de un breve texto que explique de qué trata la página web.
La recta final del patrón Z debe ser la culminación de todo lo que la ha precedido hasta ahora. Tanto si has intentado seducir o convencer al usuario para que compre un producto o reserve un servicio, este es el momento y lugar para que lo hagan. Coloca el llamado a la acción (CTA) más importante al final del patrón Z con un botón que anime o urja al usuario a la acción.
Ideal para: páginas de alto contenido visual y muy poco escrito. Este patrón es el idóneo para landing pages que tienen como objetivo una conversión muy específica.
2. Diseño web con patrón F
Al igual que el patrón Z, este patrón de diseño web se basa en otro tipo de hábito de lectura. En las páginas web con mucho contenido escrito, tendemos a "escanear" el texto siguiendo un patrón de lectura en forma de F. Es decir, la sección superior horizontal de la página recibe gran parte de nuestra atención y, a continuación, dejamos caer nuestra mirada verticalmente hacia la izquierda que se convierte en nuestro punto de referencia.
Si decides usar este patrón de diseño, invierte lo mejor de tus recursos en la sección superior de tu página donde tus visitantes probablemente permanezcan más tiempo. Escribe en esa franja horizontal un contenido que sintetice de forma convincente de qué trata tu página. En la parte superior de la F se suele incluir un encabezado, un subtítulo y una imagen.
La línea vertical de la F del lado izquierdo tiene como propósito apoyar y hacer más atractiva la sección horizontal. Puedes conseguirlo usando todo tipo de imágenes e íconos o con otros elementos como una lista de puntos o numeración.
Ideal para: páginas web de gran contenido escrito. Al crear un blog, por ejemplo, este patrón de diseño web es aplicable tanto a la página de inicio como a las distintas entradas del blog.
3. Diseño web con imagen a pantalla completa
Este patrón de diseño web incluye poco texto sobre una imagen que suele ser grande u ocupar toda la pantalla. Colocar un elemento visual como protagonista en la pantalla consigue captar formidablemente la atención de los usuarios y generar una poderosa experiencia visual en la página de inicio. Además, también ayuda a comunicar tu mensaje de forma inmediata y eficaz.
Los elementos visuales (fotografías, ilustraciones o videos) de gran tamaño son capaces de expresar eficazmente y al instante lo que eres y lo que haces. Por tanto, elige un elemento visual de alta calidad y que guarde relación con tu producto, servicio y el tono de tu marca.
En este tipo de diseño web, el elemento visual siempre viene acompañado de una breve frase para presentar y explicar lo que ofreces. Por tanto, es conveniente incluir aquí un eslogan con gancho que despierte el interés y la curiosidad de tus usuarios.
Un apunte: este patrón de diseño web funciona estupendamente en su versión para móviles.
Ideal para: negocios que quieran destacar en un nicho de mercado específico o un producto en partículas. Por ejemplo, la página web de un restaurante puede presentar su plato estrella, mientras que una página web de boda a la pareja de novios felices y sonrientes.
4. Diseño web con pantalla dividida
El diseño con pantalla dividida es una de las principales tendencias en diseño web. Dividiendo verticalmente la pantalla por la mitad se logra un equilibrio simétrico perfecto - un importante principio de diseño. La división en dos partes permite que cada sección exprese dos ideas de forma completamente diferente o una misma idea pero desde un ángulo distinto.
El diseño web de la plantilla que indicamos en este ejemplo presenta una experiencia culinaria mediante una imagen a la izquierda para captar la atención, y mediante texto y arte vectorial a la derecha. El diseño permite que ambas mitades se complementen en lugar de competir entre ellas. Este diseño también funciona bien cuando se le pide al usuario elegir entre dos opciones opuestas como las categorías de 'Hombre' y 'Mujer' de una tienda online de moda.
Para sacarle todo el partido a este diseño web, una buena idea es agregar cierto movimiento para que cada sección responda de forma ligeramente distinta. Puedes hacerlo usando el efecto parallax en una de las mitades. Otra opción es extender este diseño web a la segunda mitad inferior de la página pero intercambiando el contenido de ambas secciones para añadir interés visual al diseño general.
Ideal para: páginas web que ofrecen contenido distinto de forma significativa, o páginas web que combinan contenido visual y escrito a partes iguales. Las tiendas web que segmentan a sus usuarios por sexo o edad también encajan con este patrón de diseño web.
5. Diseño web asimétrico
Al igual que el diseño de pantalla dividida, este diseño web también divide la pantalla en dos partes, solo que difieren en tamaño y densidad de contenido. La asimetría de ambas partes genera tensión visual en la pantalla añadiendo dinamismo a la página. Se trata de un diseño llamativo que sirve de herramienta para generar – y retener – el engagement del usuario.
Gracias a la desigual distribución de la escala, color y anchura de la página, se puede atraer la atención del usuario en algunos elementos antes que en otros. Para lograrlo, basta con darle más protagonismo a ciertos elementos visuales para convertirlos en puntos de atracción.
Decide qué contenido deseas destacar. Puedes elegir desde una imagen o un producto, hasta formularios online para que lo completen los usuarios. Luego, hazlo destacar usando colores de alto contraste, aumentando las proporciones y resaltando todo tipo de elementos visuales.
Ideal para: páginas web que buscan un look innovador y contemporáneo y están interesadas en generar engagement en el usuario. Una página web para negocios o el portafolio de una agencia de diseño son buenos ejemplos.
6. Diseño web de columna única
Este patrón de diseño web presenta todo su contenido en una columna vertical. Es un diseño sencillo y directo (de hecho, es el que usa esta página).
La navegación aquí es fácil de entender, basta con hacer scroll hacia abajo para obtener más información. Sin embargo, en este tipo de diseño hay un consejo sobre navegación web que conviene seguir: agregar siempre un botón 'Volver al principio' o un menú flotante fijo para ayudar al usuario a explorar mejor la página.
Cuando utilices el diseño web de columna única para una página con bastante texto, procura fragmentarlo intercalando imágenes, títulos o subtítulos.
Ideal para: páginas web con contenido de gran formato o páginas que presentan su contenido de forma cronológica. Idóneo tanto para blogs como para los feeds de redes sociales.
7. Diseño web en bloques
El diseño web en bloques combina muchas piezas de contenido en un solo diseño geométrico. Gracias a la hábil distribución de la información en cada bloque, los elementos no se solapan entre ellos, sino que contribuyen a dar uniformidad al look general del diseño. En este patrón, cada bloque conduce a una página interior distinta donde el usuario puede acceder a más información sobre el tema que más le interese.
Una práctica muy recomendable es añadir un bloque de gran tamaño que sirva de encabezado y nexo de unión entre todos los bloques. Este bloque puede incluir el título de la página y una explicación breve de su contenido. Otro buen consejo es organizar los elementos visuales de cada bloque para que funcionen bien juntos y añadan coherencia a la identidad de marca.
Si estás creando tu página web con Wix, la Galería Wix Pro es una estupenda forma de crear este patrón de diseño web. Gracias a la calidad de las imágenes de esta herramienta, tendrás absoluto control sobre tu diseño en bloques: desde el número de filas y columnas hasta el tamaño y espacio entre los bloques.
Ideal para: páginas web ricas en contenido. Este patrón de diseño web es una buena solución para un portafolio de diseño gráfico en el que cado bloque conduce a un proyecto diferente.
8. Diseño web en mosaico
Al igual que el anterior, el diseño web en mosaico también se sirve de bloques y receptáculos rectangulares para mostrar contenido variado. Este diseño web no es jerárquico, es decir, ningún bloque recibe más protagonismo que otro. Toda la información se trata por igual.
Como cada bloque es idéntico (fuente tipográfica, tamaño, etc.), importar contenido en ellos es fácil. Como resultado, el diseño adquiere un aspecto modular que se adapta perfectamente al tamaño de todo tipo de pantallas. A pesar de la elevada cantidad de contenido que puede albergar, facilita una navegación intuitiva mejorando la experiencia del usuario.
Ideal para: páginas web con mucho contenido. Este patrón de diseño web es idóneo para un vlog o una tienda online.
9. Diseño web estilo revista
Inspirado en la prensa escrita, este patrón de diseño web consiste en distribuir el contenido en varias columnas de estilo periodístico creando una compleja jerarquía visual. Insertando columnas que se pueden modificar individualmente, el diseño web de estilo revista te permite priorizar los principales titulares o encabezados sobre los artículos más pequeños.
Esto se puede conseguir a través del tamaño (las imágenes y los títulos de mayor tamaño son los primeros en captar la atención), la distribución de los elementos (el artículo superior será el primero en leerse), o con el nivel de elaboración del diseño (un artículo acompañado de imágenes atrae más la atención que uno con únicamente texto).
Fíjate que el diseño web estilo revista utiliza el patrón de lectura en F que es capaz de combatir la atención decreciente de tus lectores. Cuando combinas el patrón F con una estructura más compleja consigues desmenuzar grandes cantidades de información para facilitar su lectura, y al mismo tiempo también mantienes el diseño de la página despejado y ordenado.
Ideal para: páginas web con mucho contenido como portales de noticias y blogs.
10. Diseño en franjas horizontales
Este patrón de diseño web divide el largo scroll de una página en franjas horizontales. Cada franja actúa a modo de pantalla completa (o casi) y convierte su contenido en una sorpresa para el usuario cada vez que hace scroll.
Para diferenciar cada franja de la anterior, procura variar el estilo entre una y otra. Puedes hacerlo usando para cada franja un color distinto de tu paleta de colores web, o incluyendo texto en una franja e imágenes en otra. Además, si agregas efectos de scroll a cada franja, le dotarás al diseño de un sutil efecto de movimiento y profundidad.
Ideal para: páginas web de largo scroll. Este patrón de diseño web es perfecto para sitios web de una sola página.
¿Listo para aplicar estos conocimientos? Crea tu página web profesional.
Publicado por equipo Wix
