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 otras pƔ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 los tipos 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 para diseƱ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.

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 *

Para cumplir con el nuevo RGPD y que tus datos estƩn a salvo, debes leer y aceptar mi polƭtica de privacidad. Tus datos serƔn guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

ĀæNecesitas una pĆ”gina web, blog, landing o tienda online?
Ā”PIDE TU
PRESUPUESTO!

DiseƱa
tu web

DiseƱa
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

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