Maquetación web: recursos para diseñar una página web con gancho

Hace unos meses, mis amigos de SiteGround me invitaron a un webinar y me dieron total libertad para elegir el tema. Y como no puede ser de otra manera, elegí hablar sobre recursos de maquetación para diseñar una página web con gancho, además de unos consejos para estructurar un sitio web.

¡Tranqui! Si no pudiste asistir en directo, ya está disponible la grabación completa del webinar y además te la dejo al final de este post.

¿Qué debes tener en cuenta a la hora de diseñar una página web?

Antes de empezara diseñar una página web, te recomiendo tomarte un tiempo para planificar sus diferentes elementos y apartados.

En concreto:

• Qué elementos incluir en la cabecera o header.
• Cómo vas a maquetar el contenido de las distintas páginas: estilo, formato, colores, etc.
• Qué contenido y formato tendrá el pie de página o footer.
• Muy importante: qué estructura va a tener la web y sus contenidos (servicios, entradas, productos si es un ecommerce, etc).

Cómo diseñar la cabecera de tu web

Ahora que ya sabes cuáles son los elementos que debes planificar antes de empezar a diseñar una página web, voy a centrarme en cada uno de ellos y quiero empezar por la cabecera o header, que es el primer elemento que visualizan los usuarios cuando llegan a una web.

¿Qué debe incluir la cabecera de una web?

Estos son algunos de los elementos que puede incluir la cabecera. Por supuesto, no son obligatorios; simplemente tienes que elegir los que necesitas en tu web.

• Logotipo: fundamental para identificar la marca.
• Menú: fundamental también para que el usuario pueda navegar.
• Botón destacado: si necesitas destacar alguna parte o contenido del sitio, incluir una llamada a la acción en el header es muy buena opción.
• Buscador para que el usuario encuentre lo que está buscando.
• Avisos o notificaciones: horarios especiales, descuentos, cupones, etc. Si necesitas incluirlos, este es el lugar adecuado.
• Otros elementos: tales como las banderas de idiomas si es una web multi-lenguje, o el carrito y el login si es un ecommerce.
• Datos de contacto: no es el lugar más adecuado para mostrarlo, aunque muchas webs lo incluyen en la cabecera. Puede ser una forma rápida de mostrar tu correo o teléfono, aunque si tienes una página de contacto, lo ideal es colocarlos en ella.
• Redes sociales ✘ Nunca recomiendo poner los botones de redes sociales en el header ¿Por qué? Porque cuesta mucho captar tráfico y que el usuario llegue hasta tu web. Y una vez que lo ha hecho, la primera acción a realizar no debería ser expulsarle de tu web. Si lo llevas a tus redes sociales, posiblemente se pierda entre tanto contenido y ya no vuelva a la web. Por lo tanto, las redes sociales mucho mejor en el footer.

Formatos y estilos para el menú

Hay infinidad de opciones para mostrar el menú en la cabecera de una web, pero los más habituales son estos:

Ejemplos e ideas

A continuación, te muestro varios ejemplos reales para que veas qué elementos se pueden incluir y como conjugarlos todos:

Recursos para maquetar contenido web

Ahora que ya tienes claro qué elementos vas a incluir en la cabecera de tu web, así como su estilo y formato, quiero hablarte de recursos para maquetar el contenido de tu sitio.

Lo primero que debes tener en cuenta es que existen diferentes editores visuales o builders para maquetar páginas en WordPress. Algunos de ellos son:

Como ves, hay numerosas opciones. En mi caso, uso Divi Builder desde hace años, pero solo tienes que buscar el que más te guste, con el que más cómodo estés o más sencillo te parezca y usarlo en tu web. No hay ninguno mejor o peor que otro.

Ejemplos para maquetar contenido web

Y ahora que ya sabes cuáles son algunos de los maquetadores visuales habituales, te dejo unas cuantas ideas para maquetar el contenido de tu web.

Los ejemplos son infinitos, así que he seleccionado varios de algunos de mis trabajos.

➔ Slider / carrusel: utilízalos solo cuando no te quede otra opción para mostrar, por ejemplo, trabajos en un portfolio, logos de las empresas con las que colaboras, varias entradas en un blog, etc. Pero si puedes prescindir de ellos, no los uses. Consumen muchos recursos y además son un recurso algo desfasado en cuanto a tendencias en diseño web.

➔ Listados (con una o varias columnas): un recurso muy habitual que gana si además lo combinas con iconos.

➔ Iconos (de todo tipo): muy usados en diseño web para mostrar servicios, categorías o listar cualquier tipo de contenido.

➔ Hero: son bloques que ocupan el ancho completo de la web y que incluyen una imagen o vídeo de fondo. Pueden incluir textos o botones.

➔ Tablas: son ideales para mostrar precios, servicios o modalidades de estos de forma creativa. Además, pueden incluir listados descriptivos, llamadas a la acción, desplegables, etc.

➔ Rejillas / parrillas / grid: consiste en maquetar contenido en forma de cuadrícula con columnas (suelen tener 3 o 4) que dividen el contenido. Es uno de los recursos más utilizados a la hora de diseñar páginas web.

➔ Conmutadores / acordeones / pestañas: sirven para maquetar un contenido extenso de forma que no ocupe mucho espacio en la web, ya que cada uno de sus elementos se pueden desplegar y replegar o abrir y cerrar según las necesidades del usuario.

➔ Contadores / barras de progreso: son un recursos muy interesante para mostrar cifras o datos numéricos de forma visual. Además, las barras de progreso pueden tener un efecto movimiento que crece o decrece según el usuario hace scroll por la página.

Cómo diseñar el pie de página de tu web

Ahora que ya tienes claro cómo será la cabecera de tu web y cómo vas a maquetar su contenido, es el momento de ver qué elementos y formato tendrá el pie de página o footer.

Lo primero que debes tener en cuenta es que el footer es el último apartado que verá el usuario cuando navegue por tu sitio, por lo que el contenido que se suele mostrar en él siempre el más secundario y prescindible de toda la web. Es decir, el contenido importante nunca va en esta zona.

¿Qué puede incluir el footer de una web?

• Logo: es habitual colocar el logotipo en el pie de página.
• Redes sociales: es el lugar idóneo para colocarlas.
• Copyright.
• Textos legales: que además son obligatorios.
• Menú: también es una opción mostrar un listado con las páginas, secciones o productos destacados.
• Créditos: nombre del diseñador, fotógrafo, etc.

Ideas, ejemplos y diferentes estructuras

Y como no puede ser de otra manera, la mejor forma de verlo es con ejemplos. Así que te dejo varias ideas con diferentes contenidos y tipos de estructuras para el footer de tu web.

Consejos para estructurar una página web

Estructurar correctamente una página web es fundamental incluso antes de empezar a diseñarla, instalar WordPress o configurar los plugins. Es una de las primeras tareas y es importante para organizar el contenido y los diferentes apartados del sitio web.

Por ese motivo, debes tener en cuanta algunos elementos que te explico a continuación.

Páginas principales

Toda web tiene unas secciones o páginas principales y otras más secundarias. Las principales suelen ser las que se colocan en el menú superior y están a la vista del usuario en todo momento.

Son páginas que puedes encontrar en la mayoría de sitios web y que seguro no te cuesta identificar, tales como:

• Inicio.
• Sobre mí / equipo / nosotros.
• Servicios (una o varias páginas).
• Blog.
• Contacto.

Páginas secundarias

Además de las principales, existen otraspáginas complementarias que también son habituales en muchos sitios web, pero tienen una menor relevancia. Algunos ejemplos:

• Landings.
• Portfolio / trabajos.
• Testimonios / referencias.
• Recursos: herramientas, descargables…

Textos legales

Los textos legales son obligatorios para tener una web legal y cumplir el RGPD. Además, deben ser accesibles desde todas las partes de la web, por lo que el footer es el mejor lugar para colocarlos.

¿Qué páginas de textos legales necesitas?

• Obligatoriamente son tres: aviso legal, política de privacidad y política de cookies.
• Si tienes una tienda online, además necesitas una página con las condiciones de venta para aclarar puntos como el proceso de pago, envíos, devoluciones o garantía de los productos.

Cómo estructurar una web de servicios

Si ofreces servicios en tu web (como puede ser mi caso), debes tener en cuenta la forma de mostrarlos y presentárselos al usuario. Este punto es clave en una web que incluye servicios.

Hay varias formas de estructurar los servicios y te las explico todas a continuación:

➤ Todos los servicios en la misma página

Puedes listar todos los servicios que ofreces en la misma página, explicando en qué consiste cada uno. No es mi opción favorita, pero es una de las posibilidades.

Te lo muestro con ejemplos:

• Ejemplo 1: web de un centro de belleza que ofrece 4 servicios diferentes y aparecen explicados en una página.
• Ejemplo 2: web de un fotógrafo que ofrece sesiones de fotos. Dispone de un único servicio con diferentes modalidades (bodas, bautizos y fotografía corporativa) que aparecen explicadas en la misma página.

➤ Una página por servicio

La segunda opción, que personalmente es la que más me gusta, consiste en mostrar cada servicio en su propia página para que aparezcan separados y cada uno tenga su propia URL.

Dos ejemplos:

• Ejemplo 1: agencia de marketing. Imagina una agencia que ofrece distintos servicios a sus clientes (redes sociales, SEO y marketing online). El menú de la web incluye una pestaña llamada "servicios" con 3 desplegables, que corresponden a los diferentes servicios. El usuario puede acceder a cada uno de ellos a través de ese desplegable.
• Ejemplo 2: diseñador (este es mi propio caso). En esta web ofrezco dos servicios diferentes (diseño web y diseño gráfico), pero uno es el principal y el otro es secundario. Ambos tienen su propia página y aparecen en el menú como desplegable, pero uno de ellos -el principal- es el protagonista de la web, el que ocupa más espacio y el que está destacado en las diferentes llamadas a la acción.

Cómo estructurar un blog

Si tienes un blog o tu web dispone de una zona donde publicas contenido de forma habitual, es necesario organizar bien las entradas, especialmente si el blog es antiguo y cuenta con un gran número de publicaciones.

La forma más frecuente de estructurar un blog es utilizar categorías para agrupar el contenido de la misma temática y las etiquetas (tags) para los temas secundarios o subtemas.

Si eliges esta opción, mi consejo es que muestres las categorías en un listado que cuelgue de la pestaña "blog" en el menú. Las etiquetas te recomiendo colocarlas en la barra lateral y, si no dispones de sidebar, mostrarlas al final de cada publicación.

Un ejemplo: web de una agencia de viajes. Las entradas aparecen organizadas por destinos (categorías) y lostipos viajes son las etiquetas. Quedaría de esta forma:

• Categorías: España, Francia, Italia, etc.
• Etiquetas: viajes con niños, viajes aventura y viajes para parejas.

Cómo estructurar un ecommerce

En el caso de una tienda online, organizar y mostrar los productos de forma ordenada es de vital importancia para que el usuario encuentre lo que está buscando y pueda comprarlo con facilidad.

La forma de organizar los productos de un ecommerce se parece a la de un blog, aunque entra en juego algún elemento más. En concreto:

1. Categorías
2. Subcategorías
3. Etiquetas

Seguro que lo entiendes mejor con el ejemplo de una tienda de ropa, donde habría unas grandes categorías para la moda de hombre / mujer / niños, subcategorías por prendas y etiquetas por tipo de material. Quedaría de la siguiente forma:

Y así quedaría estructurado cada producto siguiendo este ejemplo:

EXTRA: recursos paradiseñar una página web

Para cerrar estos consejos que te recomiendo planificar a la hora de diseñar una página web, he recopilado una serie de herramientas de donde puedes descargar material y recursos con formatos diversos y que son muy útiles el proceso de maquetación web.

Los he organizado por tipo de contenido.

Por último, aquí está la grabación completa del webinar de SiteGround con la presentación y también la parte de preguntas y respuestas por parte de los asistentes.