Diseñar un increíble pie de página para un sitio web nunca está en la parte superior de la lista de cosas por hacer de todos los desarrolladores o diseñadores web. Dado que está en la parte inferior de la página, es bastante fácil descartarlo como algo que la mayoría de los visitantes casi nunca notan.
Sin embargo, el pie de página es un área importante de su sitio web. Según un estudio realizado por ClickTale , aproximadamente el 76 % de los visitantes se desplazarán más allá de la mitad de su sitio web y el 22 % se desplazarán hasta el final.
Un visitante que se desplaza hasta la parte inferior de su sitio claramente está buscando más información, lo que significa que debe brindársela de una manera intuitiva y convincente. Al echar un vistazo a algunos ejemplos de excelentes diseños de pie de página de toda la web, puede inspirarse y comenzar a experimentar con lo que podría funcionar mejor para su propio sitio y los tipos de visitantes que tiende a atraer.
En este artículo, comenzaremos sugiriendo los elementos que debe incluir en el pie de página de su sitio web, luego pasaremos a la portada de 15 elegantes diseños de pie de página para que pueda inspirarse.
Antes de diseñar su pie de página, debe preguntarse qué le gustaría que hicieran los visitantes una vez que lleguen al final de su sitio. Ya sea que desee que lean su página ‘Acerca de nosotros’, se suscriban a su boletín informativo o les guste su página de Facebook, no puede contar con que se desplacen hacia arriba para buscar esas opciones en el encabezado o la barra lateral.
Hágalo lo más conveniente posible recordando a los visitantes qué más deben revisar. Algunos de los componentes más comunes para poner en el pie de página de un sitio web incluyen:
- Informacion registrada
- Información de contacto (número de teléfono, dirección de correo electrónico)
- Dirección (con mapa e indicaciones opcionales)
- Enlaces a su mapa del sitio, política de privacidad, términos de uso, kit de prensa, etc.
- Enlaces de navegación
- Enlaces a temas populares y/o publicaciones de blog recientes
- Próximos Eventos
- Iconos y/o widgets de redes sociales
- Formulario de suscripción al boletín
- Campos de inicio de sesión para miembros
- Campo de búsqueda del sitio
- Minigalería de imágenes
- Logo o imágenes de marca
- Estado de la misión
- Garantía de devolución del dinero
- Premios, certificaciones, asociaciones
- Testimonios
- vídeo incrustado
- Botón grande de “llamada a la acción” (para donar, ordenar, contactar, suscribirse, etc.)
Evite tratar de meter absolutamente todo lo que se le ocurra incluir en su pie de página. En su lugar, elija solo algunas de las opciones de contenido más importantes y experimente mostrándolas de una manera limpia y atractiva, tal vez ampliando y enfatizando lo realmente importante que desea que hagan sus visitantes.
Si tiene mucha información que le gustaría incluir en un pie de página, es posible que desee aprovechar el diseño de ‘pie de página grande’, que son secciones de pie de página grandes que se extienden desde la parte inferior de la página y ocupan tanto como el visitante. toda la pantalla de la computadora cuando se desplazan hacia abajo. Hacer uso de columnas y evitar demasiado texto subrayado si hay muchos enlaces involucrados también puede ayudar a que su pie de página parezca más organizado y escaneable.
¡Ahora pasemos a esos 15 elegantes diseños de pie de página!
1. Tessmae es todo natural
Tessmae proporciona un ejemplo fantástico de un pie de página grueso que mantiene un aspecto minimalista. Si bien muchos sitios a menudo usan un fondo oscuro para sus pies de página como una forma de separarlo del resto de su contenido, este sigue siendo claro, lo que lo hace muy fácil de leer.
Hay un claro énfasis en la suscripción al boletín informativo en este pie de página, con texto más grande y un formulario de suscripción de gran tamaño que se extiende por todo el ancho del sitio. Debajo, se puede acceder a columnas perfectamente organizadas para enlaces de navegación, mientras que algunos íconos sociales de aspecto elegante se destacan en la parte inferior.
Lo que funciona bien con este pie de página en particular es que está claro que se alienta al visitante a tomar medidas suscribiéndose al boletín. Pero si no quieren hacer eso, lo segundo más obvio sería llamar al número de Tessmae o revisar sus perfiles sociales. Y, por último, esos enlaces de navegación están ahí si simplemente quieren buscar más información en el sitio.
2. Best Made Co.
Best Made Co. es otro sitio minorista en línea que extiende su fondo blanco hacia el pie de página y al mismo tiempo crea una separación clara de la parte principal del sitio. En este caso, se agrega un menú de navegación horizontal inteligente para crear esa separación.
Mantener el menú limitado a solo esos cuatro enlaces garantiza que los usuarios no se sientan abrumados por todo tipo de enlaces en los que hacer clic. En el mismo centro del pie de página, la empresa combina imágenes de marca con su garantía.
Si bien la imagen de la marca es lo que más se destaca, es bastante fácil notar el atractivo formulario de suscripción al boletín a la izquierda y la información de contacto a la derecha. Al mantener al mínimo la cantidad de opciones incluidas en este pie de página, los visitantes pueden obtener una comprensión clara de qué hacer a continuación.
3. Soluciones creativas de diseño de fusión
Fusion Design Creative Studios tiene un pie de página realmente elegante que organiza solo los componentes esenciales de navegación de una manera muy creativa. Si bien el pie de página en sí es oscuro y presenta una bonita imagen de fondo, en realidad complementa el contenido que se encuentra encima, en lugar de entrar en conflicto con él.
Tres columnas es casi la cantidad correcta necesaria para este pie de página en particular sin ensuciarse demasiado con esa imagen de fondo. Observe cómo la alineación del texto incluido en cada columna (alineado a la izquierda, centrado y luego alineado a la derecha) ayuda a crear un buen equilibrio. Por último, están los íconos sociales centrados que se destacan en la parte inferior.
Se pueden ver muchas secciones de imágenes de fondo en todo el sitio a medida que se desplaza hacia abajo, por lo que el pie de página se siente como otra parte del mismo en el que fluye muy bien. Luego, los visitantes pueden decidir si desean ver los detalles creativos de sus servicios, obtener más información sobre ellos en sus enlaces de navegación generales, contactarlos por teléfono o conectarse en las redes sociales.
4. Brian Gardner
Un pie de página no necesariamente necesita incluir una tonelada de información utilizando un conjunto de tres o cuatro columnas, incluso si es un pie de página «grueso». El sitio web personal de Brian Gardner es un gran ejemplo de esto, con una imagen de pie de página de fondo similar a la que vimos en el ejemplo anterior.
La imagen de fondo se adhiere a un esquema de color simple de dos colores que es elegante pero no demasiado abrumador. El único contenido incluido son algunas citas breves, íconos sociales y tres enlaces de navegación, que se ajustan al aspecto extremadamente minimalista del sitio en general.
Lo que funciona tan bien con este pie de página es que es tan simple y sutil, pero todavía les dice claramente a los visitantes exactamente qué hacer. Simplemente demuestra lo bien que puede hacer que se vea un pie de página sin tener que decorarlo con todos los enlaces de navegación que se le ocurran.
5. El píxel
Ciertamente, hay formas de incluir más información de la que a la mayoría de los visitantes probablemente les gustaría ver en un pie de página sin sobrecargarlo demasiado. Pixel logra esto muy bien mediante el uso de texto pequeño, tipos de letra simples, colores contrastantes y columnas de diferentes anchos.
Los visitantes saben exactamente en qué texto se puede hacer clic (representado por el texto turquesa brillante) frente a cuál está allí para informarles (caracterizado por el texto blanco). El texto más largo de la columna central también es más fácil de leer porque es más ancho que las otras dos columnas a cada lado.
En general, el pie de página hace un trabajo increíble al mantener todo organizado y agradable a la vista en términos de poder identificar rápidamente los diferentes tipos de información presentada. Los visitantes tienen la comodidad de elegir entre una amplia gama de opciones sobre qué hacer a continuación.
6. eRated
eRated tiene un pie de página del sitio web que muestra cuán limpio y fácil de leer puede hacerlo cuando usa un color muy oscuro como el negro como fondo. Aquí solo se utilizan tres columnas, todas las cuales brindan a los visitantes una opción única para elegir.
Lo que funciona particularmente bien es la combinación de íconos que resaltan diferentes tipos de información con colores claros y espacios generosos. Observe cómo los íconos sociales no están todos amontonados; ni tampoco los íconos de viñetas debajo de la columna Explorar.
Este pie de página brindaría una gran inspiración a cualquiera que no haya decidido enfatizar solo una llamada a la acción clara, pero tampoco tiene exactamente un montón de opciones para mostrar. Prácticamente cualquier sitio web podría aprovechar un diseño de pie de página simple y versátil como este.
7. Colaborar
Collabogive es un ejemplo con un pie de página un poco más pequeño que presenta simplicidad y un fuerte llamado a la acción. Aquí, el gran formulario de suscripción al boletín es el foco principal, ya que ocupa casi la mitad del pie de página.
Además del formulario de registro, es interesante ver cómo Collabogive hizo uso de la tendencia del pie de página de columna al hacerlo más pequeño y compacto en el lado izquierdo. Solo se han elegido tres opciones para cada una de las cuatro columnas para evitar abrumar a los visitantes.
Para aquellos que quieren lo mejor de ambos mundos en términos de un formulario de registro grande que se destaque más tres o cuatro columnas de opciones adicionales, este pie de página puede servir como un modelo ideal para eso. También es ideal para cualquiera que no sea un gran admirador del diseño de pie de página realmente grande que ocupa toda la pantalla de la computadora.
8. Diseño Grifla Inc.
Una gran llamada a la acción en el pie de página no necesariamente tiene que ser un formulario de registro de gran tamaño, como hemos visto en algunos de los ejemplos anteriores. Para Griflan Design Inc., queda claro por ese enorme botón rojo en el medio del pie de página que quieren que sus visitantes se comuniquen con ellos idealmente por correo electrónico.
De hecho, este es un ejemplo que hemos visto que en realidad no proporciona ningún enlace de navegación en el pie de página. Además del botón de correo electrónico y los coloridos íconos sociales en la parte inferior, que también se destacan muy bien, no hay nada más que mirar, ¡y eso está bien! Funciona bien para sitios como este.
Si tiene un sitio web personal o relacionado con una pequeña empresa donde sus resultados provienen de visitantes que se ponen en contacto directo con usted, un pie de página que omita los enlaces de navegación adicionales y, en su lugar, se centre enormemente en la información de contacto puede ser realmente efectivo para alentar más visitantes para ponerse en contacto con usted. Los visitantes siempre necesitan el recordatorio si desea que realicen algún tipo de acción.
9. Baxter de California
El diseño del pie de página del sitio web de Baxter of California es similar al que vimos en Collabogive, con minicolumnas en el lado izquierdo y un gran formulario de registro en el boletín a la derecha. Pero este tiene algunas diferencias que vale la pena mencionar.
Por un lado, es otro gran ejemplo de un pie de página con un fondo blanco. También es más grande que el pie de página de Collabogive, lo que significa que las columnas no parecen tan pequeñas. Hay espacio para más enlaces, y el texto del enlace es lo suficientemente pequeño como para que los íconos sociales encajen convenientemente debajo de ellos.
Si tiene instrucciones claras que necesita incluir y enfatizar en su pie de página, puede consultar el diseño de Baxter of California para obtener ideas sobre cómo lograr esto sin que se vea demasiado grande y desordenado. El texto del mensaje «reciba un 15% de descuento en su primera compra» debajo del formulario de registro es enorme para una oración de esa longitud, pero debido a que el resto del contenido es mínimo y está bien equilibrado, simplemente funciona.
10. Caja de chispas
Sparkbox tiene un diseño de pie de página que normalmente no se ve en otros sitios web. A primera vista, parece bastante simple, presenta un enlace para ver cómo se creó el sitio con información de dirección en el lado izquierdo y algunos íconos sociales en el lado derecho.
En el centro, hay un botón con la etiqueta «¿Más pie de página?» en el que puede hacer clic para ampliar y ver un mapa grande y los próximos eventos. ¡Hable sobre una forma única de hacer que sus visitantes curiosos exploren más de su sitio!
Esta podría ser una idea interesante para alguien que está buscando un diseño de pie de página verdaderamente único y tiene las habilidades para crearlo (o al menos el dinero para contratar a alguien para que lo haga). Las secciones expandibles y contraíbles son una tendencia de diseño ingeniosa que se usa a menudo en otras áreas principales de un sitio web, entonces, ¿por qué no el pie de página también?
11. Molamilo
Molamil tiene un sitio web que es realmente genial para navegar en general, y termina con un pie de página (que también funciona como su menú), que toma el diseño tradicional del pie de página y lo condimenta un poco para que coincida con la peculiaridad del sitio. Este es un pie de página que está destinado a ocupar la totalidad de la pantalla, proporcionando suficiente espacio alrededor del contenido para una apariencia mínima.
Hay una columna para la información de contacto, otra para la navegación y otra para las redes sociales. Una gran cantidad de espacio en blanco facilita la lectura de todas las opciones, y probablemente pueda salirse con la suya con fuentes más elegantes si lo desea con un estilo de diseño similar a este.
Esencialmente, este pie de página funciona bien porque pone todo al frente y al centro de la manera más limpia y simple posible cuando se desplaza hacia abajo a la página. Si tiene buen ojo para un diseño de pie de página extravagante y diferente, podría valer la pena recrearlo y modificarlo a su manera única.
12. El mundo de los tés de Jenier
Jenier World of Teas tiene un pie de página de sitio web brillante que tiene que ver con el diseño visual. La separación del pie de página se realiza creando un horizonte de un cuerpo de agua con olas que fluyen a lo largo de la página y la silueta de un barco flotando sobre él.
El contenido del pie de página está bellamente diseñado con imágenes de texto que invitan a los visitantes a suscribirse a su boletín informativo, ponerse en contacto o conectarse en las redes sociales. Este es un pie de página más que realmente se ve muy bien sin ninguna inclusión de enlaces de navegación.
Cualquiera que quiera traer más atractivo visual a su pie de página puede inspirarse en este. Los hermosos gráficos son una forma segura de hacer que tu pie de página y su contenido se den cuenta.
13. Ahorre batidos
Savse Smoothies muestra cómo puede convertir básicamente su pie de página en un formulario de suscripción de tamaño completo con múltiples campos. Suscribirse al boletín es el mensaje claro que quieren enviar a sus visitantes una vez que llegan al final de la página.
Debajo del formulario grande, los visitantes pueden ver fácilmente cómo ponerse en contacto con la empresa y seguirlos en las redes sociales. Es simple, fácil de leer y libre de desorden.
Este pie de página puede ser una gran inspiración para cualquier persona o empresa que esté tratando de aumentar las suscripciones a sus boletines. Y la mejor parte es que siempre que no tenga un montón de enlaces para incluir, también puede combinarlo con otras opciones comunes de contenido de pie de página.
14. función
Entonces, ¿cómo hace que su pie de página se vea increíble cuando no quiere llenarlo con opciones de navegación adicionales? fffunction lo hace incluyendo algunas estadísticas interesantes y mostrándolas en diferentes fuentes y colores.
Si tiene hechos, cifras u otra información que cree que podría valer la pena compartir con sus visitantes, usar su pie de página para mostrarlos de manera creativa podría ser una buena manera de educar, entretener e incluso relacionarse con sus visitantes. Este tipo de contenido no se ve muy a menudo en los pies de página, lo que lo hace aún más interesante.
15. 13 Creativo
Si bien el diseño del pie de página de 13 Creative puede ser bastante imposible de replicar en cualquier sitio, aún vale la pena mostrarlo aquí como un ejemplo potencial que puede ayudarlo a pensar más sobre cómo encajar el diseño de su pie de página con el resto de su sitio de una manera que se ve natural y hermoso. 13 Creative utiliza el diseño de un cuaderno para presentar su contenido principal y luego utiliza inteligentemente la idea de un marcador como pie de página.
Este tipo de diseño también ayuda a mantener el contenido al mínimo en el pie de página. Si desea incluir muchos enlaces de navegación y otras opciones en su pie de página, algo como un marcador u otro diseño muy visual podría no funcionar tan bien, pero en este caso, realmente se destaca.
Conclusión
Es muy importante brindarles a sus visitantes algunas buenas opciones para hacer algo a continuación una vez que lleguen al final de su sitio web. Y a partir de los ejemplos anteriores, está claro que hay muchas formas creativas de hacerlo que podrían marcar una gran diferencia en la cantidad de visitas a la página, suscripciones a boletines, seguidores sociales, clientes o clientes que obtiene.
¿Qué pie de página de los ejemplos anteriores es tu favorito y por qué? ¡Deja un comentario a continuación para hacernos saber qué te gustó más!
Imagen en miniatura del artículo de Wiktoria Pawlak / shutterstock.com