Quien utiliza Internet ve ejemplos de diseño de webs a diario. Sin embargo, a menos que seas diseñador o estés creando tu propio sitio, pocos de nosotros nos paramos a pensar en qué hace que la estructura de una página web sea buena.
Quizá sepas de manera intuitiva que una página no es del todo acertada solo con verla. Pero ¿sabes cómo crear un diseño que sea agradable para los visitantes y que te permita cumplir los objetivos que quieres alcanzar con tu sitio?
Si la respuesta a esa pregunta es “no”, para eso está precisamente este artículo. A continuación, explicaremos qué es el diseño de una web y qué elementos son importantes en su creación. Después, veremos diferentes tipos de diseño, con algunos ejemplos. Por último, te diremos cómo elegir el diseño para tu propia web y cómo crear una maqueta para visualizarlo.
Diseño de una web: definición
Empecemos con la pregunta más básica. ¿Qué queremos decir cuando hablamos del “diseño de una web”? En una sola frase, se puede decir que hablamos de la manera en que se organizan los elementos de tus páginas web (contenido, navegación, cabecera, pie de página y todo lo visible) para presentar la información que contienen.
A diferencia de la estructura de la web, el diseño se centra en la experiencia que ofrece cada página y en cómo los usuarios consumen el contenido que incluyen. El objetivo principal no es guiarlos por tu sitio como un conjunto (aunque, naturalmente, también es una parte del proceso).
Si bien las diferentes páginas web de tu sitio pueden (y deben) tener distintos diseños, la estructura básica suele ser la misma. Por ejemplo, la información que necesita una página de compra es muy distinta a la de una página de producto o la de un elemento como la sección Acerca de. Al mismo tiempo, los elementos básicos del diseño, especialmente la cabecera y el pie de página, suelen ser iguales en la mayoría de las páginas.
De este modo, la experiencia de usuario es más homogénea, pero también ofrece cierta flexibilidad a la hora de mostrar distintos tipos de contenido a los usuarios.
¿Cuál es el objetivo del diseño de tu web?
Un buen diseño tiene la capacidad de atraer a los usuarios a tu página y de hacer que permanezcan más tiempo en ella. Un mal diseño puede tener el efecto contrario. Hoy en día, la mayor parte de los visitantes abandonan un sitio en cuestión de segundos, por lo que vas a tener que aprovechar todas las herramientas que tengas a tu alcance. Esto es, entre otras cosas, lo que se consigue con un buen diseño de web:
- Causar una primera impresión positiva. Los usuarios deciden en menos de medio segundo si les gusta tu sitio o no, así que más vale que tu diseño sea impecable.
- Dirigir la atención al contenido importante de manera natural. La esencia de todas las webs es el contenido, tanto si se trata de productos como si se ofrece información. La estructura de la página puede atraer a los usuarios a ella o alejarlos de ella.
- Proporcionar una buena experiencia de usuario. Un buen diseño ayuda a los visitantes a encontrar lo que buscan, tanto en la página como en todo el sitio. También establece una relación entre los elementos, determina su secuencia y da relevancia a los elementos adecuados.
- Guía. El diseño ofrece a los usuarios una especie de guía. Sitúa el contenido más importante en la parte superior y los dirige hacia el objetivo en la parte inferior de la página.
El mejor diseño de una web es aquel que apenas llama la atención, ya que te permite encontrar fácilmente los elementos que buscas. Además, se orienta a un grupo de destino y a sus preferencias, comportamientos y necesidades.
Los 11 tipos más comunes de diseño de webs
Para que te hagas una idea del aspecto que puede tener el diseño de tu web, vamos a ver los tipos más comunes, la clase de webs para las que son adecuados y varios ejemplos. Ten en cuenta que la diferencia entre algunos de estos tipos es fluida. Puedes aplicar más de un principio de diseño a un mismo sitio.
1. Patrón Z
El diseño de patrón Z se basa en la manera natural que tienen las personas de mirar el contenido de la web. Empiezan en la parte superior izquierda, exploran hasta la parte superior derecha, bajan hacia la izquierda y vuelven a dirigir la mirada a la derecha.
Por ejemplo, puedes sacar partido a esta distribución colocando el logotipo en la esquina superior izquierda y el menú de navegación al otro lado. La información más importante, como la cabecera y los elementos visuales, aparecen en sentido diagonal descendente hacia la izquierda, mientras que la llamada a la acción se sitúa a la derecha de nuevo.
Este diseño web permite identificar fácilmente el contenido de un vistazo y es idóneo para sitios con relativamente poco contenido y elementos a los que quieras dirigir la máxima atención posible, como las CTA y los botones.
También puedes alinear varios patrones Z con elementos alternos para guiar a los visitantes hacia abajo en zigzag y mantener así su atención.
2. Patrón F
Este diseño también se basa en el comportamiento habitual de exploración de la página, descubierto y definido por primera vez por Nielsen Norman Group.
Se observa tanto en ordenadores como en dispositivos móviles, sobre todo en sitios con más cantidad de texto. Es idóneo para webs con muchas opciones o con mucho contenido escrito que hay que explorar rápidamente, como, por ejemplo, los sitios de noticias o las páginas de resultados de búsqueda. Puedes sacar partido a este tipo de diseño usando la parte izquierda como anclaje.
No obstante, es importante tener en cuenta que NNG ha declarado en los últimos años que, aunque el patrón F es una secuencia natural de lectura, no es adecuado para los usuarios y las webs. Afirman que se debe incitar a los lectores a consumir el resto de tus contenidos a través de formatos de texto como viñetas o visuales (iconos e imágenes).
3. Revista
Los diseños de revista se inspiran en los periódicos y revistas. Existen muchos ejemplos de este tipo de web. Suele constar de varias columnas formadas por contenedores individuales que crean una compleja jerarquía visual.
En este tipo de web, cada elemento tiene asignado un peso distinto con el fin de mostrar su importancia sobre el conjunto. Esto se consigue, por ejemplo, con encabezados más grandes o mediante el uso de imágenes. Así se crea una jerarquía de varios niveles.
El objetivo es que los visitantes puedan explorar rápidamente una gran cantidad de información. Es una buena opción para webs con mucho contenido, especialmente las que cubren muchos temas diferentes. También es un diseño adecuado para escritorios, como los de las aplicaciones web. El tema Gazette es otro ejemplo de cómo se usa un diseño de revista.
4. Cuadrícula
Este diseño, también denominado “diseño de web con estructura de cajas”, distribuye los elementos por la página según un orden subyacente evidente.
El resultado es un diseño bien estructurado y organizado geométricamente. Es ideal para sitios con mucho contenido de similar importancia, como los portafolios. Las páginas vinculadas suelen aparecer en forma de imagen con un título y un breve resumen.
Si los elementos de tu contenido no tienen la misma prioridad, también hay muchas opciones para determinar la importancia relativa de cada uno de ellos.
5. Modular
El siguiente tipo de nuestra lista de ejemplos de diseño para una web es una estructura especial de cuadrícula, que también se conoce como “diseño de bloques”. Aquí, cada unidad de contenido ocupa su propio espacio y una distribución uniforme, por lo que es fácil de localizar. Este diseño te sonará gracias a Pinterest y otros sitios que usan un diseño de tarjetas.
Este diseño de web también es óptimo para dispositivos móviles, ya que permite reorganizar el contenido en pantallas más pequeñas. Si quieres optar por este tipo, es idóneo para webs corporativas, colecciones de contenido como las páginas de producto o para la visualización de tipos de entrada personalizada.
6. Una columna
El siguiente ejemplo de diseño para una web organiza todo el contenido en una sola columna y lo ordena secuencialmente.
Los diseños de una columna son populares y fáciles de usar, especialmente en dispositivos móviles, donde los usuarios prefieren desplazarse por la página en vez de hacer clic de una página a otra. Para ello, cuenta con un botón que permite volver al principio y un menú fijo.
Si tu contenido es muy pesado, sepáralo con imágenes para facilitar la lectura. Como te imaginarás, este diseño se usa a menudo en blogs y cualquier otra página que tenga un cauce de contenido basado en feeds. También es una buena opción para las páginas de destino.
7. Centrado en el contenido
Como sugiere el nombre, este diseño es adecuado para webs cuyo atractivo principal es el contenido (escrito). Se parece al diseño de una columna, ya que suele constar de una columna principal y una o varias columnas laterales con información adicional.
Aunque el foco se sitúa en el contenido principal, este puede estar rodeado de otros elementos que quieras que los visitantes vean tras llegar a la página. Puede tratarse de un formulario de suscripción a la newsletter situado en la barra lateral, un anuncio de tu producto o servicio, o un banner de ventas.
Naturalmente, esta estructura de página es idónea para blogs o webs que ofrecen principalmente contenido escrito. Del mismo modo, hay páginas concretas de webs con un diseño diferente que también pueden sacar partido de un modelo centrado en el contenido.
8. Pantalla completa
Se trata de un diseño de web que cubre toda la página. No hay barras laterales y la pantalla se presenta como una única unidad.
En ocasiones, este diseño se complementa con una estructura modular que se desplaza de pantalla a pantalla, de modo que cada sección es como una página independiente. Suele tener una imagen e incluso un vídeo de fondo.
Los diseños de pantalla completa son la mejor opción para diseños de una página, formatos narrativos y páginas de producto. Son más efectivos si se combinan con colores o elementos visuales atractivos. Si te gusta este estilo, el tema Afterlight puede ser una buena opción para ti.
9. Principal
Este es un tipo de diseño de pantalla completa para la web. Cuenta con una gran imagen en la parte superior (también llamada “imagen principal”) que contiene los elementos más importantes, como el título del sitio, la CTA, etc.
Los diseños de imagen principal captan rápidamente la atención y transmiten de forma clara el tema de la página, sobre todo, de productos. Es una expresión visual impactante que presenta información adicional a través de elementos textuales.
Es un diseño adecuado para páginas de producto y webs de comercio electrónico en general. Sin embargo, también se usa en algunos blogs.
10. Pantalla dividida
En este diseño de web, la pantalla se divide por la mitad.
Los diseños de pantalla dividida proporcionan una simetría que permite representar dos ideas diferentes y dotarlas de la misma importancia. Por otro lado, también se puede mostrar la misma idea desde distintos ángulos o usarla para separar a los clientes de comercio electrónico al principio de su recorrido.
La pantalla dividida es ideal para webs que utilizan dos tipos distintos de contenido (p. ej., imágenes y texto) o que ofrecen dos recorridos diferentes a sus clientes. También es una buena opción para quien quiera darle a su web un aspecto moderno. No obstante, no es un diseño práctico para webs con mucho texto, ya que no se adapta bien, especialmente en dispositivos móviles.
11. Asimétrico
Este diseño es similar al de pantalla dividida o de cuadrícula, pero con una distribución irregular que aporta más dinamismo.
Puedes usar la escala, el color, la anchura, etc., para crear distintos puntos focales y elementos destacados en la página. Pero que sea asimétrico no significa que sea caótico. Existe un orden implícito que aporta elegancia y coherencia.
¿Para qué webs es idóneo el diseño asimétrico?
Por ejemplo, para webs que apuestan por un estilo moderno e innovador, y que guían la atención del usuario de manera dinámica. Es especialmente adecuado para webs corporativas, portafolios en línea o páginas de destino.
Cómo elegir el diseño de una web
Ahora que te has hecho una idea de los tipos de diseño de web que hay, ¿cómo puedes elegir el adecuado para tu web? Aquí te damos algunos consejos prácticos para hacerlo.
Piensa en el tipo de web que vas a crear
Como ya has visto, cada diseño es más o menos idóneo para cada tipo de web. Por lo tanto, para poder elegir el más adecuado para ti, primero debes tener claro el tipo de sitio que vas a crear.
Sitios de negocios, tiendas, blogs… Cada uno cuenta con puntos focales diferentes y requieren diseños distintos. Tener claro este aspecto es el primer paso para tomar la decisión acertada.
Define tus objetivos
Además, el diseño también está sujeto al objetivo que quieres alcanzar. Cuando crees uno, ten siempre en mente tu meta. ¿Qué es el éxito para ti? ¿Qué comportamiento pretendes alentar en los usuarios?
Si sabes todo esto de antemano, podrás tomar decisiones de diseño que complementen tus objetivos.
Investiga
Tu web no está aislada en un espacio vacío. Echa un vistazo a webs del mismo estilo que la tuya (p. ej., blogs, sitios de comercio electrónico, B2B, B2C, etc.), pero que venden productos o servicios de otro tipo, o que se orientan a sectores o nichos diferentes al tuyo.
Cuando lo hagas, identifica los diseños de web más comunes, las prácticas recomendadas, lo que queda bien, etc., y piensa en lo que puedes mejorar con tu diseño.
Piensa en lo que te gusta
Sí, una web existe primordialmente para dar servicio a otras personas. No obstante, también tiene que ser de tu gusto. Si tu propia web no es de tu agrado, es poco probable que le dediques la energía y el entusiasmo que hacen falta para ponerla en marcha y llevarla al éxito.
Por ese motivo, mientras sopesas el tipo de diseño de web que vas a elegir, reflexiona de forma introspectiva. Piensa en lo que te gusta a ti y en lo que te gustaría ver en tu sitio.
Basa tu diseño en modelos comunes
Los diseños que hemos visto antes son conocidos porque funcionan. Han demostrado su eficacia a lo largo del tiempo, los usuarios están familiarizados con ellos y están listos para usar. Por lo tanto, es conveniente optar por uno de esos diseños establecidos y añadirle tu toque personal.
Crear una maqueta del diseño de tu web
Los temas de WordPress son lo bastante flexibles como para ser compatibles con estructuras de página no convencionales. Pero ¿qué pasa si diseñas tu propio tema o trabajas con un desarrollador de webs? En ese caso, es recomendable crear un contorno reticular, que te servirá para trazar la estructura de tu página, además de ayudarte a aclarar ideas y plasmarlas sobre el papel.
¿Qué es el contorno reticular y cómo se crea?
Un contorno reticular es como un mapa de tu sitio. No es el diseño definitivo, pero sí refleja su estructura.
Te explicamos cómo crear un contorno reticular sencillo:
- Piensa en el recorrido del usuario. Ten en mente los objetivos que quieres alcanzar con tu diseño, hacia dónde quieres guiar a los visitantes y qué quieres que hagan.
- Haz bocetos (y empieza con ideas para dispositivos móviles). Un contorno reticular no tiene por qué ser muy sofisticado o detallado. Por lo tanto, puedes empezar ya mismo a hacer uno (consulta más abajo las herramientas de las que dispones). Una buena idea es empezar con un diseño para dispositivos móviles y pasar después a tamaños de pantalla más amplios.
- Crea la estructura básica. Elabora una vista general y aborda primero los problemas básicos de diseño. Piensa en dónde vas a colocar la navegación y otros elementos esenciales de la IU.
- Identifica las áreas de contenido. Marca dónde debe ir cada contenido. Para ello, es importante saber con antelación el contenido que vas a usar (número de palabras e imágenes) para incluirlo de manera precisa en el mapa.
- Repite el proceso. Aunque tu primera idea te parezca satisfactoria, haz varias pasadas más para contar con varias opciones. Las mejores ideas suelen tardar un poco en surgir.
- Haz pruebas. Cuando hayas reunido varias ideas para el diseño de tu web, es el momento de dárselas a conocer a los usuarios y escuchar sus comentarios. Para ello, te pueden venir bien las herramientas que se indican más abajo. Recibir opiniones y comentarios de usuarios reales te ayuda a mejorar y a acercarte cada vez más a la versión definitiva.
- Repite, repite y repite. Haz el mismo proceso una y otra vez hasta que el resultado sea completamente satisfactorio y sientas que ha llegado el momento de pasar a la fase de diseño.
Consejo profesional: ¿Sabías que los sitios alojados en WordPress.com incluyen patrones de bloques de contorno reticular que puedes usar? Son patrones parecidos a un lienzo en blanco, sin mucho diseño, pero que incluyen un diseño estructural básico. Elige un patrón de contorno reticular en la biblioteca de patrones y personalízalo según tus necesidades.
Consejos adicionales
Para crear el mejor diseño posible para tu web, te ofrecemos algunos consejos y conceptos que conviene tener en cuenta:
- Crea una jerarquía visual. Decide qué elementos son los más importantes y crea el diseño en torno a ellos. Sitúalos en un lugar donde se puedan observar e identificar con facilidad.
- Usa una cuadrícula. Casi todos los diseños de sitios web se basan en algún tipo de cuadrícula. Proporciona una estructura básica y una organización para disponer los elementos de tu página.
- Aplica la regla de los impares. Utiliza un número impar de elementos, en lugar de un número par. De esta manera, la atención se centrará siempre en un solo elemento, no entre dos.
- Favorece la lectura rápida. Ya hemos hablado de los patrones de lectura. Al crear el diseño de tu web, ten en cuenta la forma que tienen los visitantes de consumir el contenido, para que les resulte más fácil captar la esencia de tu sitio.
- Céntrate en el pliegue. El pliegue es la parte donde se corta la pantalla cuando alguien accede por primera vez a tu sitio. Por encima del pliegue, en la parte que ven primero los visitantes, debes incluir el contenido más importante y la llamada a la acción.
- Deja suficiente espacio en blanco. El espacio negativo, es decir, la parte sin contenido, es igual de importante que el contenido en sí mismo. Proporciona espacio libre y ayuda a enfatizar la parte en la que quieres que se concentren los usuarios.
Herramientas para crear un contorno reticular
Para crear contornos reticulares, existen diferentes tipos de herramientas:
- Pen and paper. Clásica, potente, fácil de usar y muy práctica para anotar rápidamente ideas para el diseño de tu web sin tener que aprender a usar una herramienta nueva.
- Whimsical. Una herramienta colaborativa que te ayuda a crear contornos reticulares y te permite recibir comentarios. Es fácil de usar y cuenta con un plan gratuito.
- Invision. Es similar a Whimsical. También ofrece un diseño colaborativo. Tiene plantillas de contorno reticular y un plan gratuito con hasta tres pizarras virtuales.
- Figma. Una popular herramienta para crear diseños y prototipos. Tiene kits de creación de contornos reticulares para que empieces con buen pie. Elige el plan gratuito para empezar a usarlo sin coste.
- Patrones de contorno reticular de WordPress.com. Si quieres comenzar con una plantilla de contorno reticular prediseñada y realizar ajustes a partir de ahí, WordPress.com tiene varios patrones que lo hacen más fácil.
Encuentra el diseño adecuado para tu sitio de WordPress
El diseño es uno de los factores más decisivos en cuanto a la usabilidad de tu web. Por esa razón, merece una amplia reflexión, con el fin de ofrecer a tus visitantes el mejor servicio posible.
Una buena forma de comenzar son las estructuras de página establecidas. Han demostrado su fiabilidad a lo largo del tiempo y satisfacen las expectativas habituales de los usuarios. Aunque puedes (y debes) darle tu toque personal, no aspires a reinventar la rueda. También es una idea factible y recomendable utilizar más de un diseño en tu web, sobre todo, en las distintas páginas.
A la hora de tomar decisiones, ten en cuenta el tipo de web que quieres, tus objetivos, tu sector y tus gustos personales. Además, el contorno reticular te ayudará a plasmar las ideas que tengas para el diseño de tu web. Y recuerda que el eje central son tus usuarios. Los mejores diseños son los que apenas se notan.
¿Quieres más consejos? Recibe notificaciones por correo electrónico de nuevas publicaciones.
Plugins premium para optimizar tu negocio
Puedes programar citas, crear productos de suscripción, automatizar tus actividades de marketing y mucho más.
INFORMACIÓN SOBRE EL AUTOR
Go WordPress - WordPress.com 