Maravillosos ejemplos de footer para webs

Ilustración vectorial sobre diseño footers en paginas web

El footer de una página web es esa sección importantísima que tiene información útil de contactos, links de redes sociales y más, ubicada en la parte baja de la web. Aquí te mostramos varios ejemplos impresionantes de esta sección, que puedan darte ideas e inspirarte para tu propia web.

Ilustración de lago y montañas en captura de pantalla de la página web "Compress image"

Compress Image

https://compressimage.io/

Comenzamos con una página web dedicada a comprimir imágenes y que posee un footer ilustrado muy llamativo. Incluye algunos créditos y contactos del creador pero sin dudas lo más impactante es el uso de una ilustración atractiva con geniales y vivos colores.

Lo más impactante del footer de esta web

  • Llama muchísimo la atención por ser un footer ilustrado
  • Incluye algunos enlaces de contactos del creador
  • Colores hermosos y muy armónicos en la ilustración
Letras blancas sobre fondo negro en captura de pantalla de la web "Art4web"

Art4web

https://www.art4web.co/

En este footer encontramos uno de los mejores atractivos, ya que podemos ver un elemento sorpresa. Al hacer scroll hasta el final nos damos cuenta que debajo de la información de contactos y enlaces podemos desplegar una sección con una frase motivacional.

Que hace al diseño de este footer especial:

  • Colores sobrios y serios y contrastes entre fondo negro y letras blancas
  • Posee una frase escondida debajo del footer que desplegamos haciendo scroll
Captura de pantalla de la web "Nama Home"

Nama Home

https://www.namahome.in/

En cuanto a contenido este footer ofrece lo indispensable y necesario: contactos y enlaces importantes, pero por otro lado en su diseño, podemos ver como aparentemente se trata de un simple fondo negro, pero al desplazar el cursor vemos una galería animada, lo cual es un detalle de lo más atractivo.

Qué nos encantó en el footer de esta web:

  • Al desplazar el cursor vemos una animación súper atractiva de una galería de imágenes.
  • Informaciones necesarias de contactos y enlaces
  • Diseño atractivo con fondo negro y letras blancas
Letras blancas sobre fondo negro en captura de pantalla de la web "Spline"

Spline

https://www.splinegroup.ca/

Este footer incluye la información de contacto de redes sociales, dirección y carrera. El diseño es solo un fondo blanco con letras negras con una tipografía delgada y discreta. Aunque es muy sutil en su diseño te aseguro que no podrás perderte el gigantesco CTA que dirige nuestra atención hacia ese punto.

Por qué este footer está en la lista:

  • Diseño minimalista y sutil con fondo blanco y espacioso
  • CTA inmenso que dirige nuestra atención hacia esa zona
Captura de pantalla del Footer de la web "Something Good"

Something Good

https://somethinggood.no/

Lo que nos encanta del diseño de este footer es que  a pesar de que posee las informaciones de correo, redes sociales y dirección, también se utiliza como una zona para comunicar el mensaje presente en toda la web, a través de una frase que cambia sus adjetivos con una pequeña y atractiva animación.

¿Por qué no te puedes perder esta web?

  • Diseño minimalista y atractivo
  • Animación llamativa en la frase que comunica el mensaje de la web
Diseño de Footer de la web "Essential Gourmet"

Essential Gourmet

https://www.essentialgourmet.com.au/

Este diseño te encantará primeramente por el fondo con sutiles ilustraciones y texturas que se acoplan a la perfección a la estética de la web y por otra parte por su genial organización de la información por categorías de enlaces, cuentas y contactos. Este orden resulta súper útil para la navegación de los usuarios.

Qué es lo más especial de este footer:

  • Diseño agradable y estético con ilustraciones atractivas
  • Gran organización del contenido del footer  
Captura de pantalla de la web "Tejidos roca"

Tejidos Roca

https://tejidosroca.com/

Este footer sigue la línea de diseño de toda la página, ya que se encuentra al final como parte de otra de las circunferencias que aparecen en todo el contenido de la web. El título forma el borde de una de las circunferencias, y dentro podemos ver todas las informaciones correspondientes al footer.

Qué hace a este footer tan llamativo

  • Integra el diseño del footer al estilo de la web
  • Atractivo trabajo tipográfico con el título en forma circular
Captura de pantalla del footer de la web de "Daria Volkova"

Daria Volkova

https://dariavolkova.com/

En el caso de una página web portafolio como esta, el lugar del footer es una sección de contactos. En este caso se trata de un diseño muy atractivo, con una imagen de esta especialista en marketing y sus contactos y redes sociales. El trabajo con la tipografía y los colores es muy atractivo.

Qué hace a este footer tan original

  • El contenido es básicamente de contactos y redes de la especialista
  • Sencillas y atractivas animaciones
  • Diseño con planos de colores y tipografías de grandes tamaños
texto amarillo sobre fondo verde en captura de pantalla de la web "Fern.team"

Fern.team

https://www.fern.team/

De lo más atractivo de este footer es la manera en la que aparece con una transición de cambio de color una vez que hemos hecho scroll hasta el final de la página. De esta manera nos encontramos con las correspondientes informaciones de contacto y enlaces.

Un detalle súper atractivo es la pequeña sorpresa que aparece al posicionarnos encima del ‘’botón del gato’’

¿Qué nos llama la atención de este footer?

  • Diseño atractivo y muy organizado
  • Accedemos al footer a través de una transición de cambio de color
  • Detalles sorpresa  
Captura de pantalla del footer de la web "Wildsouls"

Wildsouls

https://www.wildsouls.gr/en/

En el footer de esta web se mantiene consistente con el diseño de colores y tipografías del resto de la página. Además de las informaciones de contacto, ayuda y productos, posee un carrusel animado que no solo va en resonancia con la estética sino también con el mensaje de esta web.

Qué hace a este footer tan especial:

  • Diseño atractivo y acorde al resto de la página
  • Carrusel animado muy atractivo con mensajes identificativos de la marca
Captura de pantalla del footer de la web "Mafanfa"

Mafanfa

https://mafanfa.com/

En este caso nos encontramos con un diseño limpio y minimalista que se trata principalmente de cuatro figuras que agrupan las secciones del contenido del footer. Al interactuar con ellas se produce un efecto hover con una sutil animación de lo más atractiva.

Qué hace al footer de esta web estar en la lista:

  • Diseño minimalista y limpio
  • Está dividido en cuatro secciones con una figura diferente para cada una
  • Se produce un leve efecto hover al desplazarnos por estas figuras
Captura de pantalla del footer de la web "Willowbrook farm"

Willowbrook farm

https://www.willowbrookfarm.co.uk/

En este footer nos encontramos con un diseño que agrupa el contenido en dos secciones principales ‘’Nuestra tienda’’ y ‘’Nuestra granja’’ donde se encuentran todos los enlaces externos muy bien organizados por categoría.

Además de su diseño atractivo y el logo colorido y llamativo de la empresa, su organización y simplicidad es uno de los elementos más destacables.

¿Por qué recomendamos echarle un vistazo a este footer?

  • Diseño minimalista y muy atractivo
  • Gran organización del contenido por categorías
Diseño minimalista de footer de la web "Jerome Studio"

Jerome Studio

https://www.jeromestudio.com/

Sin dudas uno de los diseños con más estética minimalista dentro de la lista. Se trata de un fondo blanco con sencillas y pequeñas letras delgadas. Esta misma tipografía y colores neutrales se usan en el resto del diseño, logrando una unificación en toda la web.

Lo más atractivo de este footer:

  • Su estética minimalista y muy limpia
  • Tipografía sencilla que se mantiene en todo el diseño de la web
Footer de la página web "Useless Treasures"

Useless Treasures

https://www.uselesstreasures.net/

Este es uno de los footer más completos en cuanto a contenido, pues no se han olvidado de nada en este caso. Incluye desde una pequeña historia hasta toda la información de ayuda, contactos y enlaces externos. Un detalle llamativo es el uso de un pequeño logo animado que aporta atractivo visual.

Lo que más destaca en el footer de Useless Treasures

  • Diseño limpio y organizado
  • Footer muy completo con gran cantidad de contenido e informaciones
  • El logo animado le brinda muchísimo atractivo
Captura de pantalla del footer de la web "House Three"

House Three

https://www.housethree.co.il/

Uno de los mejores detalles sin dudas en este footer es tener la posibilidad de navegar fácilmente en el mapa que indica la dirección del restaurante. De esta manera y sumándose la organización de los contenidos y contactos, los usuarios se sienten orientados y la navegación y contenido es más clara y efectiva.

Qué podemos destacar de este footer:

  • Contiene un mapa en el que podemos navegar y acceder a la dirección
  • Contenido agrupado y organizado por secciones
Captura de pantalla de la página web "Lola pate"

Lola Pate

https://www.lolapate.com/

En este footer podemos ver cómo está incluida una pequeña parte del feed del Instagram de esta marca, lo cual le da muchísima visibilidad y atractivo. Además, se incluye un gran y último CTA en el que invitan a ‘’Seguir a Lola Pat’’ muy efectivo para una tienda o negocio online.

Detalles llamativos del footer de Lola Pat:

  • Diseño atractivo y muy moderno
  • Se incluye en las informaciones, parte del feed de Instagram de la tienda

Además de estos magníficos ejemplos que te he dado, te invito a visitar el artículo cómo traducir el tema o plugin de WordPress, que resulta bastante útil.

En WebHeroe, como agencia de marketing digital, te mantenemos al día de las novedades y trabajamos a tu lado para que tu proyecto despegue.

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com