Lo siento por esto 40 ejemplos de 404 páginas

Las páginas de error 404 son una gran oportunidad para mostrar la personalidad de un sitio web, a la vez que ofrecen ayuda a usuarios potencialmente confusos. Si ha lanzado un sitio web sin haber considerado las páginas de error, debe solucionarlo de inmediato.

Este es un lanzamiento rápido, una mirada divertida a las 404 páginas de toda la web, y las clasificaremos de la siguiente manera:

  • Ofreciendo asistencia
  • El arte de la distracción
  • Proporcionando diversión
  • Estética agradable
  • Disculpas sinceras
  • Un toque de personalidad

Cuatro-o que?

Para obtener más información sobre cómo servir las páginas de error personalizadas, eche un vistazo a los archivos .htaccess para el resto de nosotros por Dan Wellman. Para WordPress específicamente, intente Cómo crear una página de error 404 simple para temas de WordPress.

Ofreciendo asistencia

Perfectamente funcional, exactamente lo que quiere de www.gov.uk/404.

Mensaje claro de www.designernews.co/404.

Funcional de Foursquare foursquare.com/404.

Netflix, lo que demuestra que no necesitan molestarse con timbres y silbidos extraños www.netflix.com/404.

Para ser brutalmente honesto; Hubiera esperado que uxpin.com/404 ofreciera alguna ruta para continuar. Proporcionan una forma para que los usuarios informen sobre enlaces rotos, lo cual es genial, pero el flujo aún se ve interrumpido por la falta de información de búsqueda o enlace de inicio. 

Podría decirse que Invision realiza un trabajo más minucioso con el mismo enfoque, incluyendo un camino a seguir como mínimo www.invisionapp.com/404.

La página 404 de Airbnb ofrece todos los enlaces que necesita a la izquierda con una animación simple y minimalista a la derecha. Limpio, claro y lo suficientemente simple como para ayudar al usuario a regresar al sitio web. 

Un enfoque minimalista pero creativo similar por Dropbox. dropbox.com/404

El arte de la distracción

Sabes que va a llegar, pero te garantizo que seguirás pulsando el comando incorrecto varias veces para escucharlo nouveller.com/404 (buen trabajo @BenjaminReid y @ iamkeir-gracias por la sugerencia de David Darnes).

Oh no, esperaba encontrar, espera, ¡¿son esos mangos más bézier ?! www.figma.com/404.

De todas formas, solo hay una razón por la que visitarás el sitio web 1403 Vintage Mono Pro, así que, ¿por qué no pruebas el tipo de letra si te desplazas? 1403.slantedhall.com/404.

Coloca el cursor sobre este búho creado con HTML y CSS ...

Amazon creó este increíble tema, Conoce a los perros de Amazon y muestra este enlace a su blog en la página 404, amazon.com/404. Cada vez que llegas a la página 404, aparece un perro diferente. 

Proporcionando diversión

Vincent Vega está teniendo problemas para encontrar dónde se supone que debe estar en 9gag.com/404.

Gran animación de marvelapp.com/404.

Si eres un fan de la I.T. Multitud (usted es, ¿verdad?) No necesito decirle lo que está pasando en este GIF. Echa un vistazo a www.larkef.com/404 para el original.

Zombie muestra una mano bonita, animada y podrida. Muy atmosferico.

Más GIFs, más violencia, desde www.bloomberg.com/404. Gracias a Luke Meehan por esta sugerencia..

Jurando elefantes en gradle.com/404.

Alguna copia divertida de la plataforma de boletines por correo electrónico www.getrevue.co/404.


Teehan + Lax ya no está activo como una agencia, pero felizmente sus 404 vidas continúan. A T + L le encantaba inyectar humor en sus productos personales; Esta página de error no es una excepción, se inspira en "fotos familiares incómodas" www.teehanlax.com/404/.

Ahora dime que este mensaje de pixar.com/404 no te hizo sonreír. 

Manteniéndose fiel a la identidad de marca, The New Yorker nunca falla. newyorker.com/404 

Estética agradable

Tranquilo y atractivo, de Tubik Studio..

Slack señala que esta encantadora escena de desplazamiento probablemente no sea el lugar que buscábamos. Aunque con sus conejos pasmados y su flora alegre, realmente no tengo problemas para estar allí. Slack.com/404.

GIF magic y Pacman de Arthur MB.

La colección de páginas de Emerald 404 consta de 24 variantes, todas ellas sencillas y detalladas..

RPZ es una colección de diseños de dos páginas, cada uno con cuatro alternativas de color. Simple y limpio.

Disculpas sinceras

Disculpas del equipo en castle.io/404.

Igualmente desde Litmus litmus.com/404.

Una disculpa con la razón práctica de Lego lego.com/404

Starbucks se disculpa y proporciona una razón para lo que salió mal y para lo que puedes hacer. starbucks.com/404

Un toque de personalidad

¿Parcial? Tal vez, pero siempre me ha encantado la terminal de computadora animada vista en nuestro propio webdesign.tutsplus.com/404. Un lindo jacob!

Fork CMS, aprovechando una combinación clásica de marca / juego de palabras www.fork-cms.com/404.

Reconocer estas huellas? foundation.zurb.com/404

Este boleto aéreo altamente estilizado "perdido en las nubes" es una excelente manera de presentar un error 404.

Gran sentimiento de Adidas. ¿Qué más esperaría de uno de los motivadores más grandes del mundo? www.adidas.co.uk/404.

MailChimp, los maestros de agregar personalidad a los productos, utilizan a su mascota Frederick von Chimpenheimer IV en caso de que falte una campaña de correo electrónico us1.campaign-archive1.com/404.

Creo que sabemos de quién es este 404, ¿verdad? www.facebook.com/404.

IMDb.com/404 convirtió algunas citas de películas bien conocidas en citas de sitios web. Hay algunos allí, así que cada vez que aterrizas en el 404 es una cita diferente. 

Terminando

Estos ejemplos deberían inspirarte a ser creativo con tus propias páginas de error 404. Recuerda:

  • Ofrezca asistencia, idealmente un camino a seguir, como enlaces sugeridos o una entrada de búsqueda.
  • Use la distracción si lo considera apropiado (sus usuarios pueden sentirse frustrados por haber alcanzado un error 404).
  • Proporcione diversión (de nuevo, si es apropiado) y mantenga el lenguaje humano.
  • Ofrece un toque de personalidad..