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:
- Divi
- Elementor
- Thrive Architect (Thrive Content Builder)
- Visual Composer / WPBakery Page Builder
- Page Builder by SiteOrigin
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:
- CategorĆas
- SubcategorĆas
- 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Ća | SubcategorĆa | Etiquetas |
Moda de hombre | Chaquetas | Cuero Vaqueras Forros polares |
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.
ImƔgenes | Vectores | Iconos |
Shutterstock Unsplash | Freepik Vecteezy | Flaticon Font Awesome |
Fondos | VĆdeos | CSS |
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!
0 comentarios