Advertisement
  1. Web Design
  2. Inspiration

Lo sentimos: 40 ejemplos de páginas 404

by
Read Time:4 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Best Photography Portfolio Themes for WordPress
Current Web Design Trends: Full-on Full Screen Home Pages

Spanish (Español) translation by Elena Pari (you can also view the original English article)

Las páginas de error 404 son una magnífica oportunidad de mostrar la personalidad de un sitio web, y al mismo tiempo, de ofrecer ayuda a los usuarios probablemente confundidos. Si has publicado un sitio web sin haber considerado páginas de error, debes corregir eso ahora mismo.

Esta es una mirada rápida y divertida a varias páginas 404 recogidas de la web y vamos a categorizarlas de la siguiente manera:

  • Ofrecer ayuda
  • El arte de la distracción
  • Mostrar algo divertido
  • Estética agradable
  • Disculpas sinceras
  • Un toque de personalidad

Cuatro, cero... ¿Qué?

Para aprender más sobre cómo crear páginas de error personalizadas, échale un vistazo a Archivos .htaccess para el resto de nosotros por Dan Wellman. Para soluciones específicas de WordPress, revisa Cómo crear una página simple de error 404 para temas de WordPress.

Ofrecer ayuda

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

Mensaje claro como el agua de www.designernews.co/404.

Página funcional de Foursquare foursquare.com/404.

Netfilx demuestra que no necesita parafernalia superflua www.netflix.com/404.

Para ser totalmente honesto, esperaba que uxpin.com/404 ofreciera una ruta para continuar navegando. Ellos ofrecen a los usuarios una manera de reportar enlaces rotos, lo cual es fantástico, pero aún así el flujo se ve interrumpido porque no hay una opción de búsqueda o un enlace a la página de inicio.

Se puede decir que Invision ofrece una mejor versión del mismo método, incluyendo al menos una manera de continuar navegando www.invisionapp.com/404.

El arte de la distracción

Sabes que ya viene, pero te aseguro que aun así le darás al comando incorrecto unas cuantas veces para escucharlo nouveller.com/404 (buen trabajo @BenjaminReid y @iamkeir. Gracias por la sugerencia, David Darnes).

Oh no, esperaba encontrar... Espera. ¡¿Esas son curvas de Bézier?! www.figma.com/404.

En realidad solo hay una razón para visitar el sitio web de 1403 Vintage Mono Pro, ¿así que por qué no probar con las letras si te saca del atolladero? 1403.slantedhall.com/404.

Gatitos. Gracias nclud.com.

Pasa el mouse sobre esta lechuza creada con HTML y CSS...

Mostrar algo divertido

Vincent Vega tiene problemas para averiguar dónde se supone que está en 9gag.com/404.

Magnífica animación de marvelapp.com/404.

Si eres fan de la tecnología de I.T. Crowd (porque lo eres, ¿no?), no tengo que decirte qué ocurre con este GIF. Ve a www.larkef.com/404 para ver el original.

Zombie muestra una linda mano animada en descomposición. Muy apropiado.

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

Elefantes groseros en gradle.com/404.

Autodesprecio de Hillary a Donald www.hillaryclinton.com/404.

Un texto gracioso de la plataforma de boletines por correo electrónico www.getrevue.co/404.


Esta es una buena de plunkus.com/404. Asegúrate de tener el volumen alto o te perderás el sonido de la vaca defecando.

Teehan+Lax ya no funcionan como agencia, pero felizmente su 404 ha sobrevivido. A T+L le encantaba inyectarle humor a sus productos personales, y esta página de error no es la excepción. Su 404 está inspirada en «fotos familiares vergonzosas» www.teehanlax.com/404.

Estética agradable

Tranquilizadora y atractiva, de Tubik Studio.

Las ilustraciones —como esta de carbonmade.com/404— siempre me hacen olvidar cualquier frustración que tenga.

Slack señala que esta encantadora escena probablemente no es el lugar que buscábamos. Aunque con sus conejos saltarines y alegre flora, realmente no tengo ningún problema de estar en slack.com/404.

Creada por Tiffany Rayside con fuentes de Google y un montón de CSS. Nada más.

Magia GIF y Pacman de Arthur MB.

La colección de páginas 404 de Emerald comprende 24 variantes y todas ellas son claras y van directo al grano.

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

Disculpas sinceras

Disculpas del equipo de castle.io/404.

Igualmente de Litmus.com/404.

Un toque de personalidad

¿Favoritismo? Tal vez, pero siempre nos gustó la terminal de computadora animada que se ve en nuestra propia página 404 webdesign.tutsplus.com/404. ¡Muy buena, Jacob!

Fork CMS aprovecha una clásica combinación de su marca y un juego de palabras www.fork-cms.com/404.

¿Reconoces estas huellas? foundation.zurb.com/404

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

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

MailChimp, esos maestros de añadirle personalidad a los productos, usan su mascota Frederick von Chimpenheimer IV cuando hay un enlace roto en una campaña por correo electrónico us1.campaign-archive1.com/404.

Creo que sabemos de quién ese ese 404, ¿no? www.facebook.com/404.

Esta, de fusion.net/404. Estoy seguro de que significa algo.

Desorientación momentánea de www.fuzy.pl/404.

Y luego está Collis.

Para concluir

Estos ejemplos deben servirte de inspiración para que seas creativo con tus propias páginas de error 404. Recuerda:

  • Ofrece ayuda, idealmente con una manera de continuar navegando, como enlaces sugeridos o una opción de búsqueda.
  • Usa una distracción si lo consideras apropiado (tus usuarios bien pueden estar frustrados por haber llegado a un error 404).
  • Muestra algo divertido (nuevamente, si es apropiado) y que tu lenguaje sea humano.
  • Dale un toque de personalidad.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.