40 páginas de error 404 inteligentes de sitios web reales

Ejecutar un sitio web exitoso significa estar alerta a errores como páginas rotas o rendimiento lento. Sin embargo, a veces hay problemas que simplemente no puedes evitar, y los errores 404 son uno de ellos.

Un 404 ocurre cuando un usuario solicita una página en su sitio web que no existe, arrojando así una página de error 404 que solicita a los usuarios que regresen al lugar correcto. No importa cuántos recursos pongas para garantizar que tu sitio web nunca se caiga... siempre existe la posibilidad de que los usuarios terminen aquí.

Es un inconveniente, pero un hecho de la vida. Y la reacción de los visitantes cuando aterrizan en una página inexistente puede variar desde “tomarlo con calma” hasta “perder la cabeza por completo”.

Si bien no hay nada que pueda hacer al respecto, puede hacer que las cosas sean un poco menos dolorosas al tener un mensaje de error creativo 404. Esto puede hacer maravillas para hacer que los visitantes de su sitio web sonrían en una situación frustrante.

Para que el diseño de su sitio web fluya, esta publicación mostrará algunas de nuestras páginas de error de sitio web favoritas. Con suerte, podrá tomar algunas ideas para crear su propio mensaje 404.

¿Qué es un error 404?

Un error 404 es un código de mensaje de error HTTP estándar que significa que el sitio web al que intentabas acceder no se pudo encontrar en el servidor. Es un error del lado del cliente, lo que significa que la página web se eliminó o movió y la URL no se cambió en consecuencia, o que la persona simplemente escribió la URL incorrectamente.

En su mayor parte, puede configurar su servidor para crear una página de error 404 personalizada. (Si eres cliente de HubSpot, haz clic aquí para aprender cómo personalizar tu página 404 en HubSpot).

Algunas páginas de error 404 personalizadas incluyen una imagen destacada, una descripción ingeniosa, un mapa del sitio, un formulario de búsqueda o información de contacto básica.

Los mejores ejemplos de páginas web 404

A lo largo de los años, los sitios web han encontrado diferentes formas de informar a los visitantes sobre un error 404 y canalizarlos de regreso al lugar correcto, algunas de manera simple, otras de manera creativa y otras divertidas. Comencemos mirando algunas páginas creativas de 404, luego veamos algunos ejemplos divertidos que seguramente deleitarán a cualquiera que los encuentre.

Página no encontrada: páginas de error 404 de Creative

1. Pimienta

Si bien una página 404 puede sobresalir fácilmente de un sitio web, la página de error de Pipcorn se alinea perfectamente con el resto de la marca del sitio. Hay un buen fondo animado, un mensaje de texto amigable que dirige a los visitantes a buscar en el sitio web (con un ingenioso juego de palabras) y una palomita de maíz que se usa como el "0" en "404".

2. Spotify

El gigante de la transmisión de música Spotify ha cubierto sus bases con una inteligente página 404. Con un juego de palabras ingenioso del álbum de Kanye West "808s and Heartbreak" y una animación récord, el sitio web entretiene brevemente y luego envía a los visitantes de regreso a la página de donde vinieron.

3. Genialmente

Una forma sencilla de aliviar la tensión en su página 404 es agregar un rápido "¡Ups!" mensaje: ayuda a que su sitio se sienta más personal mientras guía a los usuarios de regreso al lugar correcto. En el caso del sitio de Genially, la página también incluye una ingeniosa ilustración combinada con una copia divertida.

4. Adobe

Como era de esperar, la página de error 404 de Adobe es útil y visualmente agradable. Enumera enlaces populares que los visitantes pueden desear junto con algunas obras de arte digitales geniales que sirven como metáfora visual de una página rota o perdida. Honestamente, los sitios web deberían usar metáforas visuales con más frecuencia.

5. Clorox

La página 404 de los productos de limpieza Clorox alterna entre tres fotos alegres para señalar a los visitantes que han dado un paso en falso. Es un uso inteligente de la marca para agregar un breve momento de placer mientras se ayuda a los usuarios perdidos.

6. Colectivo Duma

Otras veces, es posible que no necesite una propaganda ingeniosa; simplemente dígales a los visitantes que no hay una página en la dirección y déjelos continuar. La agencia de consultoría de entretenimiento Duma Collective hace precisamente esto con su página de error, aunque se complementa con una imagen de fondo para darle un toque menor.

7. Chillhouse

Hablando de estilo, la marca de autocuidado Chillhouse ha realizado un trabajo adicional para desviar a sus visitantes con estilo. La página 404 tiene la marca adecuada e incluso lleva a los visitantes a un pequeño viaje a través de algunas imágenes fijas antes de volver a la página de inicio.

8. Poco

Si ingresa un enlace de Bitly incorrecto, será redirigido a la página 404 de Bitly. Suponemos que esto sucede bastante, por lo que la página 404 va directo al grano. Explica lo que podría haber salido mal y pide a los usuarios que visiten la página de inicio de Bitly si eso es lo que buscan.

9. Ikea

La página 404 de Ikea es igualmente minimalista, pero aun así se las arregla para introducir una marca inteligente allí. Este ejemplo muestra que sus páginas de error no necesitan ser elaboradas para transmitir el punto, pero tampoco hay nada de malo en inyectar algo de diversión.

10. Moxie Diseño Co.

Claro, "explotó Internet" puede ser un poco hiperbólico, pero les dice a los visitantes que Moxie Design Co. no se toma demasiado en serio con pequeños deslices como este. Además, una barra de búsqueda está convenientemente ubicada en la parte inferior para guiarlo en su camino.

11. McKissack y McKissack

Ah, el clásico truco de “perdimos la página”. Nuevamente, una manera fácil de presentar un 404 sin alienar a su audiencia. Si usted es una agencia como McKissack & McKissack que administra muchas interacciones con los clientes, es esencial que la copia clara y concisa de todas las páginas de su sitio, incluidas las páginas de error.

12. Trucos CSS

¿Alguna vez has arrancado el envoltorio de un sitio web para ver qué hay debajo? Ese es el concepto que buscaba CSS Tricks en su página de error 404. Esto es a la vez ingenioso y recuerda de lo que se trata el sitio web: uso inteligente del estilo de página.

13. Buenos juegos antiguos

Para otros sitios web, desenvuelves el front-end y hay… solo el vasto espacio vacío. Esta página es una referencia inteligente a GOG Galaxy, que es el cliente de videojuegos nativo de Good Old Games. Afortunadamente, hay un pequeño personaje de videojuego para brindarles a los visitantes un lugar para informar un error si así lo desean.

14. Canva

Para algo un poco diferente, echa un vistazo a la página 404 de Canva. Incluye no solo un mensaje de error, sino también un ingenioso rompecabezas de fichas que los visitantes pueden jugar para entretenerse brevemente. No hay nada de malo en dejar que tus visitantes holgazaneen por un par de minutos, ¿verdad?

15. Innotecnología

Similar al enfoque de Canva, Innotech presenta un juego al estilo Pong en su página 404 para brindar un breve entretenimiento. Lo más probable es que recuerde un sitio web como este. Además, el desvío divertido complementa un sitio web realmente impresionante. En serio, cuando termines de jugar, dirígete a la página de inicio y adéntrate en todo.

16. innumerables

La agencia de video Myriad ha optado por un diseño de página 404 peculiar y propio de la marca que imita las clásicas barras de color SMPTE que aparecen en cintas y televisores antiguos. Es un regreso divertido a las tecnologías más antiguas mientras representa el problema más moderno de una página web inexistente.

17. KonMari

Conocida por sus populares métodos y marca de limpieza y organización, Marie Kondo ha aportado una sensación similar a la página 404 de su sitio web. La copia se remonta breve y humorísticamente a su filosofía de limpieza: un detalle pequeño pero bien marcado que los fanáticos reconocerán.

18. Multitud de marcas

La ilustración de esta página de error no solo es detallada y atractiva, sino que la copia también es inteligente. Nos encanta la referencia a la canción de Semisonic "Closing Time": "Puedes hacer clic en cualquier otro lugar, pero no puedes hacer clic aquí".

19. Producciones Hot Dot

La página de error de Hot Dot se mantiene fiel a su lema, "la intersección de las nuevas tecnologías y el diseño". La página está animada por cientos de pequeños puntos que cambian de dirección en respuesta a dónde mueves el cursor. Es fascinante y un gran escaparate de las capacidades de diseño de la agencia.

20. Abrigo naranja

Si vas a dar un mensaje de error, ¿por qué no entretienes al usuario unos segundos mientras lo ayudas? Después de un saludo amistoso, OrangeCoat ofrece un diagrama de flujo que realmente ayuda a los usuarios a descubrir por qué llegaron a una página de error en primer lugar.

21. Ervin y Smith

Esta página 404 hace más que redirigir a los usuarios a páginas activas. En cambio, la página 404 de Ervin & Smith lo invita a desplazarse hacia abajo y saber por qué necesita una agencia de marketing digital y por qué elegir a Ervin & Smith en particular, rematado con un formulario de contacto. Fiel a su misión, esta agencia demuestra que cualquier página puede ser una oportunidad de conversión.

22. Estudios DayCloud

… o su 404 puede ser simplemente un lugar para perder el tiempo por un minuto, como se puede ver en el sitio web de DayCloud Studios. Mover el cursor por la pantalla revela un mensaje 404 iluminado por láseres disparados desde los ojos de un gato. ¿Porque, porque no?

23. Espacio de cabeza

Otro ejemplo de un sitio web que incorpora de manera inteligente los mensajes de su marca en una página 404: la aplicación de meditación guiada Headspace se esfuerza por calmar a los usuarios, alentándonos a respirar profundamente y luego regresar al sitio principal.

24. Panadería Wildwood

Hasta ahora, algunos sitios web han integrado una copia de marca inteligente en sus páginas, mientras que otros han alojado juegos en línea completos en las suyas. Pero, no hay nada de malo en un breve empujón hacia atrás en la dirección correcta. El sitio exquisito de Wildwood Bakery mantiene las cosas breves y dulces (literalmente).

Página no encontrada: divertidas páginas de error 404

25. Astuto

La página 404 de la agencia de diseño Astuteo es un equilibrio perfecto entre imágenes elegantes, humor y amabilidad. El diseño mínimo brinda a los usuarios la información que necesitan junto con otra metáfora visual divertida, un barco de carga que se hunde y una figura que huye.

26. LEGO

Se necesitan pocas palabras en la página de error 404 de LEGO: la expresión del personaje aclara todo. Además, los fanáticos de la franquicia de películas LEGO disfrutarán de la divertida referencia en la copia.

27. imán

En este divertido mensaje de error, Magnt se burla del hecho de que, sí, podrían haber roto algo, o simplemente no puedes escribir. El visual sirve como una forma rápida de ilustrar rápidamente su punto.

28. Buscador de iconos

La página de error de IconFinder es simple pero agradable. La mascota de la compañía que viste una túnica y parece cansada es un guiño identificable a los visitantes perdidos. Sin embargo, no se preocupe, ya que el sitio enumera algunos de sus enlaces para visitar a continuación.

29. dulces sueños

Aparentemente, el equipo de la compañía de ayuda para dormir Sweet Dreams tomó demasiados de sus productos según la página 404 del sitio web. Esta página no solo es graciosa, sino que también combina bien con el resto de la estética y los mensajes del front-end del sitio para lograr una sensación de cohesión.

30. GitHub

La línea "Estos no son los droides que estás buscando" se refiere al truco mental Jedi de Obi-Wan Kenobi sobre los Stormtroopers en Star Wars Episodio IV , y se ha convertido en una frase muy conocida que se usa para decirle a alguien que está persiguiendo al mal. Curso de acción. GitHub juega con esta famosa línea en su mensaje de error 404.

31. Patagonia

La página 404 personalizada de Patagonia captura la vibra de la marca a la perfección, completa con un video boomerang de un frisbee twirler, un ingenioso juego de palabras que combina "404" y "aloha" y enlaces a sus páginas de productos. Es una forma amistosa y divertida de saludar a los visitantes que terminaron en el lugar equivocado.

32. Nube Sigma

Échale un vistazo: Cloud Sigma nos deja entrar en algo de acción tras bambalinas. Su página de error 404 pretende ser una "página de inicio de un desarrollador junior", siendo ese desarrollador junior, bueno, un gato.

33. Teatros AMC

Es posible que hayas estado antes en un cine AMC, pero es de esperar que nunca hayas visto la página 404 de su sitio web. El sitio web hace uso de una frase rápida, divertida y relevante antes de enviarlo de regreso al lugar correcto.

34. Bruno

No es una coincidencia que las agencias creativas sean geniales creando páginas 404 geniales. Aquí hay otro de los creativos de Bruno que reproduce el clásico de comedia de culto de 2000 Dude, Where's My Car? No, no tiene nada que ver con la empresa o el sitio web, pero seguramente hará reír.

35. NPR

Al principio, la página de error de NPR no parece nada especial. Pero sigue leyendo y verás cómo enlazan inteligentemente algunas de sus grandes historias sobre personas, lugares y cosas perdidas, como una pieza sobre Amelia Earhart y otra sobre Waldo. Esto podría hacer que los usuarios perdidos se sientan un poco menos solos.

36. Medio

Medium adopta un enfoque similar a la página 404 de NPR, recomendando artículos sobre cómo perderse y perder cosas. Consulte estos artículos si tiene tiempo, son muy buenas lecturas.

37. El corredor de las estrellas

HomeStarRunner.com, hogar de una serie de dibujos animados en Flash, ha tenido una serie de divertidas páginas de error 404 a lo largo de los años. El más reciente presenta personajes de la serie de dibujos animados en una escena que podría haber salido directamente de uno de sus episodios. Si enciende el sonido cuando carga la página, escuchará a su personaje Strong Bad, conocido por gritar frases en voz alta, diciendo: "¡404'd!"

38. Ventisca de entretenimiento

Aquí hay una idea simple que termina pareciendo ingeniosa: la página 404 de Blizzard Entertainment presenta un personaje animado perdido en una tormenta de nieve real y algo de humor que los fanáticos de World of Warcraft apreciarán.

39. Hola gran idea

Un viaje rápido por los expertos en marketing y redes sociales El sitio web de Hello Big Idea le dirá lo que necesita saber sobre su estilo de texto audaz y contundente. Y, por supuesto, su página de error 404 no es una excepción.

40. HubSpot

¡A nosotros también nos pasa! Este es el mensaje que publicamos para decirles a los visitantes de nuestro sitio que hay algunos problemas en el sitio web. Nuestro objetivo era mantenernos fieles a la voz de la marca de HubSpot siendo lo más adorables, empáticos y útiles posible.

Convierta una página de error 404 en un momento agradable

Nadie quiere aterrizar en una página 404: son molestos e inesperados. Sin embargo, realmente no puedes evitarlos, por lo que siempre es una buena idea tener una página 404 a la que recurrir para tu sitio web.

Y, desde la perspectiva de la experiencia del usuario, su página 404 debe ser un pequeño bache, no un muro de ladrillos. El diseño correcto puede ser la diferencia entre un rebote frustrado y una posible conversión, entonces, ¿por qué no hacerlo divertido?

Nota del editor: esta publicación se publicó originalmente en diciembre de 2015 y se actualizó para que sea más completa.