Una de las ubicaciones más importantes de tu sitio web es el footer. Sí, en serio. Puede que no sea el área de mayor diseño ni el contenido más impactante, pero es un lugar donde los usuarios buscan información con frecuencia. Por eso es vitalmente importante que no descuides esta zona al planificar un proyecto de diseño web.
Pero ¿qué elementos deberías incluir? ¿Cómo mantener el footer organizado y en línea con tu estética general sin que resulte molesto? Llegaste al lugar indicado. Acá vamos a ver consejos para crear un gran footer, con ejemplos de algunos sitios que lo hacen muy bien.
1. Mantené el diseño simple
Sí, esta es una de las claves de la mayoría de los proyectos de diseño, pero vale la pena decirlo desde el arranque. El diseño simple es importante cuando trabajás con mucha información, que suele ser el caso de un footer. Apostá por elementos limpios, espacio de sobra y organizá con intención. Tratá de evitar el desorden y pensá qué elementos van a vivir en tu footer y por qué deberían estar ahí. El tamaño del footer suele estar relacionado con la cantidad de información y el número de páginas de tu sitio.
Agra-Culture usa color, íconos y texto en el footer, pero es simple y tiene un gran flujo. Cada enlace es fácil de clickear y el detalle sutil de la imagen del campo en el recuadro verde es un lindo toque.
2. Enlazá a tu información
Dos de los enlaces más importantes en el footer de cualquier sitio web llevan a las páginas de “Nosotros” y “Contacto”. Los usuarios van a querer saber quién sos y de qué se trata tu empresa o marca. Hacé que esa información sea fácil de encontrar. Muchos también van a querer conocer a los integrantes de tu equipo y cómo contactarlos. (Es una herramienta clave. Mucha gente pierde las tarjetas personales y vuelve a tu sitio web para recuperar esa información de contacto.)
Heckford incluye muchos enlaces a la empresa, redes sociales e información sobre su trabajo.
3. Incluí información de contacto básica
Si bien deberías enlazar a una página completa de “Contacto”, incluir información de contacto relevante en el footer también está bueno. Sumá un número de teléfono principal, una dirección de correo y una dirección física. (Puntos extra si configurás cada elemento para que llame, envíe un correo o abra el mapa al hacer clic.)
The Root Studio creó un footer que casi va en contra de todo lo que te imaginás cuando pensás en un “footer”, pero funciona. El texto es grande (al igual que el recuadro que lo contiene) y está reducido a una lista súper simple de información de contacto. (Es un concepto de diseño impactante para un sitio que quiere que los usuarios lo contacten por proyectos y trabajo.)
4. Organizá los enlaces del footer
Agrupar elementos similares del footer puede crear una linda sensación de organización para los enlaces y la información. Considerá varias columnas (o filas) de información relevante, como contacto, enlaces, servicios, redes sociales y secciones de tus páginas más populares. Ubicá cada sección bajo un encabezado para que todos los elementos sean fáciles de ver y encontrar.
SugarSync incluye múltiples columnas de información para acceder fácilmente a los datos del footer. Con los encabezados “Product”, “Company”, “Learn More” y “Connect with Us”, es fácil encontrar la parte del sitio que querés usar a continuación.
5. Incluí un aviso de copyright
Esta pequeña línea de texto puede ser un salvavidas. No te la olvides. Si bien la mayoría de los sitios la incluyen como una sola línea a lo largo del borde inferior de la pantalla, podés diseñarla para que quede más integrada al resto del footer. Un aviso de copyright puede estar escrito o incluir el pequeño símbolo circular de la “c”. El texto suele incluir el año de publicación y el nombre del titular del copyright. Puede haber varios avisos de copyright para el contenido y el diseño (en sitios creados en parte por un tercero).
Adventure.com lo mantiene simple con un aviso de copyright en la parte inferior derecha de la pantalla. La información usa una tipografía de bajo contraste para que no interfiera con elementos de navegación más importantes del footer.
6. Incluí un llamado a la acción
Una vez que los usuarios llegaron a tu footer, dales algo para hacer mientras están ahí. Incluí un recuadro para suscribirse a un newsletter o invitalos a seguirte en alguna red social. No subestimes el valor de este espacio a la hora de convertir clics.
Collabogive le dedicó una cantidad significativa de espacio del footer a “Join Our Newsletter”. Este llamado a la acción es fácil de ver, encaja con el diseño y les da a los usuarios una manera de interactuar sin necesariamente sumarse a una campaña.
7. Usá elementos gráficos
Muy seguido los footers son apenas un bloque de texto. Agregá logos o elementos gráficos para sumar interés visual. Solo tené cuidado de no sobrecargar este espacio chico con demasiados elementos. Pensalo así: en lugar de escribir “Seguime en Facebook/Twitter/lo que sea”, incluí íconos de esas plataformas. También podés usar pequeños elementos icónicos para enlaces como mapas o números de teléfono (aunque probablemente convenga incluir un estado hover que muestre la información “escrita” también).
The Kikk Festival usa el espacio del footer para destacar a los sponsors del festival usando solo logos e información de contacto rápida. Fijate en el tamaño de los íconos —cada uno es fácil de ver y leer— y en el uso de un slider para que se pueda mostrar una gran cantidad de elementos en un espacio reducido.
8. Prestá atención al contraste y la legibilidad
La información del footer suele ser chica… muy chica. Por eso es vital pensar en el color, el peso y el contraste entre los elementos de texto y el fondo. Cada palabra debería ser legible. Considerá tipografías simples (las sans serif de peso medio quedan bien) y un poco más de interlineado del que usarías normalmente. Optá por colores de alto contraste, como un fondo claro con texto negro o un fondo oscuro con texto blanco. Evitá usar colores variados o tipografías recargadas.
P53 usa una de las combinaciones de texto y fondo más clásicas (y legibles) que existen para la información del footer: blanco sobre negro.
9. Mantené la temática de tu diseño
El footer del sitio web no debería parecer una idea de último momento. Tiene que combinar con la temática de diseño general del sitio. Los colores, estilos y elementos gráficos deberían reflejar el tono general. No cometas el error común de agregar un footer tipo “caja” que no combina. Pensá en este espacio y en cómo se va a usar desde el inicio del proyecto, para no quedar atado a un elemento desprolijo en una etapa avanzada del diseño.
Swiths Interactive Group usa un footer simple que se integra por completo con el look general del sitio, que muestra a una persona sentada en un escritorio con cosas desparramadas por encima. El footer simple muestra información relevante y parece pertenecer al sitio.
10. Pensá en chico (pero no demasiado chico)
Los footers por naturaleza incluyen un montón de elementos chicos. Solo tené cuidado de no irte demasiado a lo chico. El texto puede ser unos puntos más chico que el tamaño usado en el cuerpo principal del sitio. Los íconos o imágenes tienen que ser legibles en el tamaño que elijas. (Si no podés distinguir qué es el ícono, probablemente sea demasiado chico.) Los elementos tienen que ser lo suficientemente grandes como para clickear o tocar con facilidad. Si los usuarios no pueden acceder a los enlaces porque son demasiado chicos o están muy juntos, no van a funcionar como se espera.
Si bien Curious Space usa un estilo de footer bastante poco tradicional, se puede tener una buena idea de la escala a partir de los tamaños de tipografía usados. El texto del footer es un poco más chico, más fino y más claro que todo el resto del texto de la página, pero igual lo suficientemente grande como para leerlo con facilidad.
11. Usá mucho espacio
Como los footers suelen vivir en lugares ajustados, el espacio y el espaciado son importantes. Dejá bastante margen alrededor de los elementos del footer y también entre las líneas de texto. Un espaciado adecuado evita que el área del footer se vea apretada o poco atractiva. Además ayuda muchísimo a la capacidad de clickear o tocar. Como muchos (si no todos) de los elementos del footer están enlazados a otra cosa, este es un aspecto importante de la función del usuario. La cantidad de espacio que uses no tiene que reflejar a la perfección el espaciado del resto del sitio, aunque puede hacerlo. (Esto es especialmente cierto en sitios que usan un espaciado ajustado en el cuerpo principal para lograr un efecto o impacto específico.)
Sailing Collective usa bastante espacio vertical y horizontal entre los elementos. Están agrupados por tipo y son clickeables.
12. Ojo con demasiados objetos
Si bien usar elementos gráficos y encabezados es una buena idea, hay una línea entre lo justo y lo excesivo. Usá estos elementos con moderación y para un propósito muy específico. Preguntate por qué estás usando un encabezado, un ícono o una foto. Si la respuesta es “porque queda bien”, replanteátelo. Cada elemento debería cumplir un propósito. Esto te va a ayudar a diseñar un footer usable que aproveche bien el espacio disponible.
Menos es más, como podés ver en el footer de Master & Dynamic. Íconos y texto simples alcanzan para recorrer el contenido del footer con facilidad.
13. Creá una sensación de jerarquía
Al igual que el resto del sitio web, un footer debería ser jerárquico por naturaleza. Este es un diseño de dos aspectos. El footer debería quedar al final de la jerarquía general del sitio. (Después de todo, es donde está ubicado.) El footer también debería contener una jerarquía de elementos dentro de su “contenedor”. Los elementos más importantes (a menudo la información de contacto, el llamado a la acción o el mapa del sitio) deberían ser los más prominentes. La información estándar, como el aviso de copyright, suele ser la más chica en escala.
Griflan Design Inc. les dice a los usuarios qué hacer en el footer, en el orden en que quieren que lo hagan. Primero, escribiles por correo; si eso no funciona, llamalos; y si ninguna de esas opciones funciona, visitá a la empresa en redes sociales.
14. Considerá un sub-footer
¿Tu footer necesita un footer? Considerá un sub-footer para sumar capas adicionales. (Es una práctica muy popular.) El sub-footer puede ser un gran lugar para crear jerarquía adicional, darle dimensión al espacio del footer si está demasiado denso o simplemente ofrecer un espacio para contenido divertido. Usá esta área para destacar reconocimientos o insertar un llamado a la acción.
The Smart Passive Income Blog hace un gran trabajo con un footer de varios niveles. Hay un llamado a la acción, después enlaces del sitio, luego un sub-footer con menciones en medios en un color desvanecido, seguido de los descargos y políticas del sitio. Los niveles de navegación aportan profundidad al footer y hacen que sea fácil de escanear y clickear.
15. No subrayes todos esos enlaces
¿El error más grande en un footer? Permitir que los enlaces estén subrayados. Todavía hay una gran cantidad de sitios web con enlaces subrayados en el footer. Esta técnica anticuada no es apropiada para el diseño de un sitio moderno.
Baxter of California tiene un footer que es limpio e incluye muchos enlaces. No se ve desordenado gracias a un enlazado simple, sin todos esos molestos subrayados.
Conclusión
Un footer puede decir mucho sobre tu sitio web. Les cuenta a los usuarios quién sos, qué pueden hacer y cómo moverse por tu página. También muestra cosas sutiles sobre vos como diseñador, como la atención al detalle y la capacidad de trabajar en un espacio reducido.
El footer es una parte importante del diseño. Prestale atención. Asegurate de incluir la mezcla justa de información, elementos de diseño y usabilidad para sacarle el máximo provecho al espacio más bajo en cada proyecto de diseño web.
«Carrie C. (9 de julio de 2019). 15 Tips for Creating a Great Website Footer [Artículo de blog]»
