15 Ejemplos de páginas de error 404 creativas y originales
Quien más o quien menos, todos navegamos libremente por el inmenso "océano de internet" y hacemos clic frenéticamente acá y allá, saltando de una página a otra. Sin embargo, cuando algo falla o llegamos a un enlace que no funciona, aterrizamos en una "página no encontrada", la famosa página de error 404.
La página 404, cuyo diseño web se suele subestimar, puede influir positiva o negativamente en la experiencia de tus usuarios. De hecho, cuando viene acompañado de un buen mensaje, tiene potencial no solo para evitar que los visitantes se vayan para siempre sino de incluso convertirlos en clientes o seguidores incondicionales de tu marca
Algunas marcas y diseñadores han sabido encontrar una oportunidad en la página de error y la han aprovechado en su favor. No solo han sabido darle un nuevo look, sino también transformar la frustración del usuario en una sonrisa cuando aterrizan en estas páginas. En este artículo hemos elaborado una lista con algunos de los ejemplos de páginas web de error 404 más creativas que encontrarás en internet.
¿Qué es el error 404?
El error 404 (también llamado http 404 o error 404 not found en inglés), es una página que aparece cuando hacemos clic sobre un enlace roto y que, por tanto, ya no está disponible (o jamás lo estuvo).
Aterrizar en una 'página no encontrada' es habitual cuando se teclea mal la URL (la dirección web que aparece en el navegador). El error 404 también se produce si una empresa ha eliminado o modificado cierto contenido de su página web o si ha cambiado la estructura del enlace.
Cuando tengas que crear una página web, puedes utilizar el modelo de página de error que tenga tu sistema por defecto o crear una página 404 personalizada. Esta segunda opción es más interesante porque te permite diseñar páginas creativas y transformar positivamente la experiencia del usuario. Además, también es un buen espacio para crear un mensaje divertido que invite al visitante a seguir navegando en otras secciones de tu página web.
01. Pixar – Página 404 ingeniosa
Si eres fan de Pixar, esta página de error probablemente te resulte familiar. El famoso estudio de animación utiliza para el error 404 al personaje de 'Tristeza' de su película Inside Out (Intensa Mente en Latinoamérica y Del Revés en España). Además de ser una idea original, ayuda a reforzar su marca y a establecer un vínculo con sus visitantes. El uso de un lenguaje coloquial y un personaje conocido 'humaniza' la página y ayuda a identificarse con ella.
No importa que tu marca no sea tan conocida como la de Pixar. Experimentar con textos e imágenes que despierten un sentimiento humano y de cercanía siempre es un acierto. En ese sentido, no tengas miedo de usar interjecciones informales como "¡Ay!" o "Ups" para conectar con tu audiencia.
02. Omelet - Error 404 con humor
No hay nada como un toque de humor para aliviar una situación frustrante, especialmente si está bien hecho. Omelet es una agencia creativa que utiliza el poder del humor discreto en su página de error 404 usando el huevo, su icono, como eje central del mensaje.
El fuerte tono rojo de su 'página no encontrada' ya nos advierte de que algo ha ido mal. Pero el pánico se mitiga con un mensaje gracioso que es un juego de palabras de 'egg' (huevo en inglés) y 'extinto': "esta página está eggstinta". Si te fijas, han dejado el menú superior visible para hacer cómoda la navegación en la página web e invitar al visitante a seguir navegando.
03. Dribbble - Página 404 interactiva
Distraerse no siempre es algo malo y la página de error de la comunidad online Dribbble lo demuestra. Su diseño divertido e interactivo invita al visitante a jugar y olvidarse, por un momento, de que no llegó a la página que buscaba.
El juego que propone Dribbble en esta página no solo es adictivo, también sirve como forma de navegación: con solo clicar en cualquiera de las imágenes en miniatura, llegas al perfil de su autor. La página también incluye una casilla de búsqueda y un enlace a su página de inicio.
04. Dropbox – Página 404 útil
Es imposible no enamorarse de esta pareja haciendo equilibrios en bicicleta. Dibujados con un estilo sencillo, aparecen sonriendo de oreja a oreja como si nada grave hubiera sucedido. Este maravilloso ejemplo de cómo incorporar una ilustración en el diseño web trasmite cercanía y confianza y, a la vez, alivia la frustración de aterrizar en una página de error 404.
Además, Dropbox ha incluido en su 'página no encontrada' varios enlaces útiles que ayudan al usuario a dirigirse a otra página que pueda serle útil. Cuando tengas que crear tu propia página de error 404, te recomendamos ayudar al usuario agregando enlaces a las principales secciones de tu página web como la página de inicio, la sección de contacto y la página 'Quiénes somos'.
05. The Artery - Página 404 de marca
Poca gente se quejaría si aterrizase en una página de error tan bellamente diseñada como esta. Sus imágenes guardan la misma estética que la de la página web haciendo que la navegación sea una experiencia casi imperceptible, incluso si se clica sobre un enlace roto.
La propia imagen de la página se mueve cuando se desliza el puntero del ratón sobre ella y está compuesta de curiosas figuras capaces de hipnotizar al usuario. Además, el texto tiene un tono tranquilizador que anima al usuario a clicar en la pantalla para continuar navegando en su web.
06. Lazy Oaf – Ejemplo de tendencia de página 404
Esta página con el código de error 404 es bastante inclasificable. Con un llamativo eslogan que reza 'Keeping it weird since 2001' (algo así como 'Raros desde 2001' en español), la marca de moda Lazy Oaf cumple su promesa también aquí.
En lugar de proporcionar al usuario la típica explicación de por qué ha llegado a la página equivocada, emplea excusas graciosas, emoticonos tristes y un cartel de 's*** happens' ('Cosas que pasan' en español). Sin embargo, esta 'página no encontrada' es cualquier cosa menos triste. Está diseñada con una intuitiva navegación conservando el menú visible y contiene imágenes de su tienda online en su parte inferior.
07. Spotify - Página 404 intimista
La página de error de Spotify ayuda a fortalecer su identidad de marca usando la imagen de un disco vinilo con fondo rosa. La barra del menú permanece visible tanto en la cabecera como en el pie de página simplificando así la navegación.
Además de facilitar la navegación mediante menús, Spotify recurre a un lenguaje cercano y coloquial para recomendar al usuario que visite otras de sus páginas. Cuando tengas que crear la tuya, trata de usar un vocabulario informal con palabras como 'quizás' o 'tal vez' y agregar preguntas que ayuden al usuario a sentir que, al otro lado, hay una persona y no una máquina.
08. Julie Bonnemoy - Página de error animada
El portafolio de diseño web de Julie Bonnemoy es un espectáculo para los ojos. La página 404 es idéntica a la página de inicio a excepción del texto. Es decir, que puedes navegar por toda su página web y llegar a una 404 sin apenas darte cuenta.
Si decides diseñar tu página de inicio de forma similar a la 'página de error', te recomendamos experimentar agregando elementos que amplifiquen la experiencia del usuario como animaciones, videos transparentes o ilustraciones de arte vectorial.
09. OkCupid - Página 404 serena
En su página de error, esta famosa web de contactos no esconde su objetivo principal: animar al visitante a suscribirse. Aunque su llamado a la acción (CTA) es bastante directo, está escrito con una fuente tipográfica de formas suaves y viene acompañado de imágenes submarinas que, en conjunto, logran transmitir un estado de serenidad y calma.
Un buen consejo para a la hora de crear una página 404 es diseñarla con colores relajantes para que tus clientes se sientan de algún modo orientados a pesar de no haber llegado a la página correcta. OkCupid utiliza el tono azul que evoca tranquilidad e inspira confianza. Si quieres acertar con el tono en tu diseño, te recomendamos consultar el artículo sobre la psicología del color.
10. Lego - Página 404 divertida
Para su página de error, Lego utiliza un personaje conocido para conectar con el público de su marca y crear una atmósfera familiar. El estilo informal de su texto también es bastante tranquilizador: es divertido, coloquial e incluye signos de exclamación.
Si tienes pensado crear una página 404 con un toque de humor, haz que sea funcional como la de Lego y ofrece otras opciones para seguir navegando por tu página web. Lego, por ejemplo, enfatiza sus CTAs con un fondo blanco que los resalta, y su menú está visible en la cabecera y el pie de página para que los visitantes puedan dirigirse fácilmente a otras páginas.
11. Ueno - Página 404 graciosa
Para su página con el status 404, la agencia digital Ueno ha creado una de las páginas más curiosas y divertidas que existen. El perrito caliente corriendo por salvar su vida es capaz para arrancar una sonrisa a cualquiera. Pero acompañado del ocurrente texto que aparece a su izquierda, hace que valga la pena despistarse para aterrizar en ella.
Ueno ha combinado comedia con un diseño minimalista. Si vas a incluir humor en tu página de error, hazlo de forma profesional sin contravenir los principios del diseño. El uso de espacio blanco, una paleta de colores minimalista y la jerarquía en los textos te ayudará a que la marca tenga un tono profesional.
12. Figma - Página 404 interactiva
Aunque lo parezca, este ejemplo está bastante lejos de ser el clásico diseño de texto negro con fondo blanco. Si te fijas de cerca, podrás ver que el contorno de cada dígito está compuesto por puntos interactivos que te permiten jugar con el diseño del 404.
Figma también ha incorporado a su página con el error temporal 404 muchas opciones de navegación como menús en la parte superior e inferior de la página para que los visitantes frustrados puedan dirigirse a la página que buscaban con solo hacer clic.
13. MailChimp - Página 404 tierna
Insertando un dibujo cuyo estilo es tan infantil como enternecedor, MailChimp logra suavizar la desalentadora experiencia de aterrizar en una página 404. En el centro de la página, el único elemento de color es un botón azul que destaca por su gran tamaño.
Sin embargo, lo que hace especial esta página es la sensibilidad con la que han sido creados todos sus elementos. La sola imagen del asno con la cabeza metida en el hoyo buscando la página despierta ternura por sí misma. Pero acompañada del lenguaje poético y la combinación de tipografías serif y sans-serif, el efecto final es inspirador y conmovedor.
14. Wade and Leta - Página 404 maravillosamente rara
Este singular diseño es una de las páginas más divertidas que conocemos sobre el error 404. Al igual que el resto de su portafolio online, es personal y raro en todos los sentidos. La página incluye un GIF animado de Wade hablando en el pasillo de un supermercado y haciendo un gesto con la mano que no parece guardar ninguna relación con la página de error.
Sin embargo, la página consigue arrancar una sonrisa, que es lo mejor que puede conseguir una página de este estilo. El exagerado tamaño del texto no solo es una tendencia de diseño web, también sirve para informar sin rodeos y con estilo de a dónde has llegado.
15. Wix - Página 404 clara y concisa
No hemos podido evitar incluir esta página con el error 404, y no solo porque tenga un gatito como protagonista. Aunque el minino es adorable, también sirve para sugerir que, probablemente, el usuario ha tecleado mal el nombre de dominio (o que la culpa realmente la tiene un gatito).
Además de su aspecto visual, esta página de error incluye enlaces útiles que guían al visitante. El texto es conciso y va directo al grano. Además, la página transmite calma gracias a la sencilla paleta de colores de la página web, el amplio fondo blanco y los ligeros tonos gris y negro.
Publicado por equipo Wix
