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


  1. Diseño web con patrón Z

  2. Diseño web con patrón F

  3. Diseño web con imagen a toda pantalla

  4. Diseño web con pantalla dividida

  5. Diseño web asimétrico

  6. Diseño web de columna única

  7. Diseño web en bloques

  8. Diseño web en mosaico

  9. Diseño web estilo revista

  10. 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.



Ejemplo de web con patrón en forma de Z

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.


Ejemplo de web con patrón en forma de F

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.


Diseño de imagen a pantalla completa

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.


Ejemplo de diseño de pantalla dividida

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.


Ejemplo de diseño asimétrico

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.


Ejemplo de diseño con  columna única