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, lo que genera una página de error 404 que les pide a los usuarios que regresen al lugar correcto. No importa cuántos recursos ponga para garantizar que su sitio web nunca se caiga … siempre existe la posibilidad de que los usuarios terminen aquí.

Es un inconveniente, pero es una realidad. Y la reacción de los visitantes cuando llegan a una página inexistente puede variar desde «tomárselo con calma» hasta «perder totalmente la cabeza».

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

Para que fluya el diseño de su sitio web, esta publicación mostrará algunas de nuestras páginas de error favoritas. Con suerte, podrá llevarse 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 intentaba 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 modificó en consecuencia, o la persona simplemente ingresó la URL de manera incorrecta.

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 principal, 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 de un error 404 y canalizarlos de regreso al lugar correcto, algunos de manera simple, otros creativos y otros divertidos. Comencemos por mirar algunas páginas 404 creativas, luego veamos algunos ejemplos divertidos que seguramente deleitarán a cualquiera que se encuentre con ellos.

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

1. Pipcorn

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 bonito fondo animado, un mensaje de texto amigable que dirige a los visitantes a buscar en el sitio web (con un juego de palabras ingenioso) y un trozo de palomitas de maíz que se usa como «0» en «404».

2. Spotify

El gigante de transmisión de música Spotify ha cubierto sus bases con una inteligente página 404. Con un ingenioso juego de palabras del álbum de Kanye West «808s and Heartbreak» y una animación de grabación, 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 agradable a medida que guía a los usuarios 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 los enlaces populares que los visitantes pueden querer junto con algunas ilustraciones 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 rota entre tres fotos alegres para indicar a los visitantes que han cometido un error. Es un uso inteligente de la marca para agregar un breve momento de placer mientras ayuda a los usuarios perdidos.

6. Colectivo Duma

En otras ocasiones, 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 seguir adelante. La agencia consultora de entretenimiento Duma Collective hace precisamente esto con su página de error, aunque se complementa con una imagen de fondo para un toque menor.

7. Chillhouse

Hablando de estilo, la marca de cuidado personal Chillhouse se ha esforzado más para redirigir a sus visitantes con estilo. La página 404 tiene la marca adecuada e incluso lleva a los visitantes en un pequeño viaje a través de algunas imágenes fijas antes de regresar a la página de inicio.

8. Bitly

Si ingresa un enlace Bitly incorrecto, se lo dirigirá 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 pudo haber salido mal y solicita 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 aún 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 mensaje, pero tampoco hay nada de malo en inyectar algo de diversión.

10. Moxie Design Co.

Claro, «hacer estallar Internet» puede ser un poco hiperbólico, pero les dice a los visitantes que Moxie Design Co. no se toma demasiado en serio a sí misma con pequeños deslices como este. Además, una barra de búsqueda está convenientemente ubicada en la parte inferior para enviarlo 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 es una agencia como McKissack & McKissack que gestiona muchas interacciones con los clientes, una copia clara y concisa es esencial para todas las páginas de su sitio, incluidas las páginas de error.

12. Trucos CSS

¿Alguna vez ha 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: el uso inteligente del estilo de la página.

13. Buenos viejos juegos

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

14. Canva

Para algo un poco diferente, consulte la página 404 de Canva. No solo incluye un mensaje de error, sino un ingenioso rompecabezas de fichas que los visitantes pueden jugar para entretenerse brevemente. No hay nada de malo en dejar que sus visitantes se relajen durante un par de minutos, ¿verdad?

15. Innotech

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 divertido desvío complementa un sitio web realmente impresionante: en serio, cuando hayas terminado de jugar, dirígete a la página de inicio y asimila todo.

16. Miríada

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

17. KonMari

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

18. BrandCrowd

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 semisónica «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 al lugar donde mueves el cursor. Es fascinante y una gran muestra del diseño de la agencia. capacidades.

20. OrangeCoat

Si va a dar un mensaje de error, ¿por qué no entretiene al usuario durante unos segundos mientras lo ayuda? 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 aprender por qué necesita una agencia de marketing digital y por qué elegir a Ervin & Smith en particular, 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. DayCloud Studios

… 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. Al mover el cursor por la pantalla, aparece 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 inteligentemente los mensajes de su marca en una aplicación de meditación guiada por página 404, Headspace, hace el esfuerzo de calmar a los usuarios, animándonos a respirar profundamente y luego regresar al sitio principal.

24. Panadería Wildwood

Hasta ahora, algunos sitios web han integrado una copia inteligente de la marca 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 retroceso en la dirección correcta. El exquisito sitio de Wildwood Bakery mantiene las cosas breves y dulces (literalmente).

Página no encontrada: TK Funny 404 Error Pages

25. Astuteo

La página 404 de la agencia de diseño Astuteo es un equilibrio perfecto entre imágenes elegantes, humor y utilidad. 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 lo deja todo claro. Además, los fanáticos de la franquicia de películas LEGO disfrutarán de la divertida referencia en la copia.

27. Magnt

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

28. IconFinder

La página de error de IconFinder es simple pero encantadora. La mascota de la compañía que lleva una bata 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 de acuerdo con 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 la mensajería del front-end del sitio para brindar una sensación de cohesión.

30. GitHub

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

31. Patagonia

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

32. Cloud Sigma

Échale un vistazo: Cloud Sigma nos deja entrar en una acción detrás de escena. Su página de error 404 pretende ser la «página de inicio de un desarrollador junior»: ese desarrollador junior es, bueno, un gato.

33. Teatros AMC

Es posible que haya estado en una sala de cine de AMC antes, pero es de esperar que nunca haya 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 excelentes para crear páginas 404 geniales. Aquí hay otro de los creativos de Bruno que juega con el clásico de la comedia de culto del 2000. Amigo, ¿dónde está mi coche? No, no tiene nada que ver con la empresa o el sitio web, pero seguro que se reirá.

35. NPR

Al principio, la página de error de NPR no parece nada especial. Pero sigue leyendo y verás cómo se vinculan inteligentemente con algunas de sus grandes historias sobre personas, lugares y cosas perdidas, como un artículo sobre Amelia Earhart y otro sobre Wally. 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 perderse y perder cosas. Consulte estos artículos si tiene tiempo; son lecturas bastante buenas.

37. HomeStarRunner

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

38. Blizzard Entertainment

Aquí hay una idea simple que termina luciendo elegante: 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 redacción 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 informar a los visitantes de nuestro sitio que existen algunos problemas en el sitio web. Nuestro objetivo era mantenernos fieles a la voz de la marca HubSpot siendo lo más adorable, empático y útil posible.

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

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

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

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