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

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

14/10/2021

Shutterstock MPFphotography

14/10/2021
Tiempo lectura:

Shutterstock MPFphotography

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:

  • ClĆ”sico
  • Centrado
  • Centrado en lĆ­nea
  • Transparente
  • Pantalla completa
  • Vertical
  • Superpuesto

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.

diseƱar pƔgina web: maquetar contenido

āž” Listados (con una o varias columnas): un recurso muy habitual que gana si ademĆ”s lo combinas con iconos.

diseƱar pƔgina web: maquetar contenido

āž” Iconos (de todo tipo): muy usados en diseƱo web para mostrar servicios, categorĆ­as o listar cualquier tipo de contenido.

diseƱar pƔgina web: maquetar contenido
diseƱar pƔgina web: maquetar 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.

diseƱar pƔgina web: maquetar contenido

āž” 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.

diseƱar pƔgina web: maquetar contenido

āž” 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.

diseƱar pƔgina web: maquetar contenido

āž” 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.

diseƱar pƔgina web: maquetar contenido
diseƱar pƔgina web: maquetar contenido

āž” 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.

diseƱar pƔgina web: maquetar contenido

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.

Maquetación web: recursos para diseñar una pÔgina web con gancho
Footer con 3 columnas: datos de contacto, logo, redes sociales, textos legales y crƩditos.
Maquetación web: recursos para diseñar una pÔgina web con gancho
Footer doble (2 secciones): feed de Instagram, about, categorías de la tienda, redes sociales, textos legales, formulario de suscripción, copyright y créditos.
Maquetación web: recursos para diseñar una pÔgina web con gancho
Footer a 2 columnas: formulario de suscripción, datos de contacto, textos legales, logo, créditos y fuente de financiación.
Maquetación web: recursos para diseñar una pÔgina web con gancho
Doble footer: feed de Instagram, textos legales, logo + redes sociales, enlaces a las pƔginas principales, copyright + datos de contacto.
Maquetación web: recursos para diseñar una pÔgina web con gancho
Footer doble con 6 columnas: secciones principales de la web, ayuda, servicios, categorĆ­as del ecommerce, ofertas, logo, redes sociales, textos legales y contacto.
Maquetación web: recursos para diseñar una pÔgina web con gancho
Footer doble: logo, listado de cursos (productos), formulario de suscripción, contacto, textos legales, redes sociales y copyright.

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:

CategorĆ­aSubcategorĆ­aEtiquetas
Moda de hombreChaquetasCuero
Vaqueras
Forros polares

Y asĆ­ quedarĆ­a estructurado cada producto siguiendo este ejemplo:

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

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.

ImƔgenesVectoresIconos
Shutterstock
Unsplash
Freepik
Vecteezy
Flaticon
Font Awesome
FondosVĆ­deosCSS
Hero Patterns
SVG backgrounds
Mixkit
Pexels
CSS button generator
StyleBot (extensión Chrome)

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.

”Comparte este hilo!

Summary
šŸŽØ Maquetación web: recursos para diseƱar una pĆ”gina web con gancho
Article Name
šŸŽØ Maquetación web: recursos para diseƱar una pĆ”gina web con gancho
Description
¿Quieres diseñar una web con gancho? Te doy un montón de recursos y ejemplos sobre maquetación web y te enseño a estructurar una web.
Author
Publisher Name
Max CamuƱas
Publisher Logo

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no serÔ publicada. Los campos obligatorios estÔn marcados con *

[Información BÔsica sobre Protección de Datos] Responsable: MÔximo Camuñas FernÔndez. Finalidad: moderar y responder comentarios. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: PodrÔs ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@maxcf.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en mi política de privacidad encontrarÔs información adicional sobre la recopilación y el uso de su información personal ,incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.

¿Necesitas una pÔgina web, blog, landing o tienda online?
”PIDE TU
PRESUPUESTO!
masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĆ­a

PARA DISEƑAR LOGOTIPOS MEMORABLES

GUƍA para diseƱar logotipos memorables