Las mejores páginas 404 aprovechan al máximo un error desafortunado.
En lugar de limitarse al mensaje estándar de "página no encontrada", los diseñadores web más astutos utilizan las páginas de error 404 para mostrar un poco de la personalidad de la marca, provocar una sonrisa o incluso entretenernos con un minijuego.
Diseñar con esmero una página que solo aparece cuando algo sale mal puede parecer inútil, pero en realidad es una oportunidad para mantener el interés de los visitantes. Así que, antes de añadir un simple mensaje de "ups, página no encontrada", echa un vistazo a algunos de los ejemplos más imaginativos con los que me he topado.
Páginas 404 divertidas
Estas páginas 404, desenfadadas y juguetonas, suavizan el golpe de hacer clic en un enlace roto al cautivar a los visitantes perdidos con un toque de humor.
Thomas Bosc
El gestor de contenidos Thomas Bosc tiene un sitio diseñado con esmero, con animaciones activadas por desplazamiento, imágenes magníficas y proyectos anteriores que demuestran sus habilidades en diseño web. Quizá por eso, aterrizar en esta página básica con una foto de la infancia de un aspirante a mago me hizo reír de verdad.
Esta página 404 también tiene una pequeña sorpresa. Al hacer clic, el joven Thomas sale volando para revelar el texto "404" y un enlace de vuelta a la página de inicio.
Polo Garcia
El diseñador Polo Garcia nos pilla desprevenidos al pasar de un diseño de sitio limpio y contemporáneo a una animación granulada de una ardilla haciendo esquí acuático en su página 404.
Incluso la ardilla acaba girándose para mirar a la pantalla como si preguntara a los visitantes del sitio: ¿qué haces aquí? Polo consigue sacarnos una sonrisa, pero mantiene la fluidez de la experiencia de usuario al incluir un botón claro de "llévame de vuelta a casa".
Shalom Osahon
El diseñador de producto y desarrollador de Webflow, Shalom Osahon, te recuerda que no entres en pánico y compara una página 404 con un simulacro de incendio.
El gif que lo acompaña es una recopilación de escenas caóticas de un episodio de The Office, que provoca una buena carcajada (y sirve de ejemplo de lo que no hay que hacer) antes de redirigirte a la página de inicio.
404 Errventura
Beyond Agency convierte un error de página en una aventura, o como ellos lo llaman, una "errventura".
Este diseño apuesta por la broma al ofrecer un botón de "siguiente lugar" además del enlace de vuelta a casa. Cada vez que haces clic en "siguiente lugar", verás un nuevo diseño retro con una ilustración pixelada y la opción de volver a casa o continuar con tu "errventura". Pasarás por mensajes de error como "Isla no encontrada" junto a una palmera, "Parece que no podemos encontrar la página que buscas" en un bosque oscuro con ojos en movimiento, y "ba ba ba algo salió mal" con ovejas saltarinas.
Páginas 404 creativas
¿Quién dijo que el diseño de una página 404 tenía que ser aburrido? Estas páginas de error destacan por sus diseños más imaginativos.
Textio
Si nos perdemos en el sitio web de Textio, nos recibe el Unicornio de las Páginas Perdidas.
Dado que Textio es una herramienta de escritura aumentada, es genial ver cómo juegan con las palabras en su página 404. Puntos extra por integrar el enlace de regreso a la página de inicio con un consejo filosófico del unicornio.
Dribbble
Dribbble hace un uso inteligente de su página 404 al guiarnos hacia diseños categorizados por color en lugar de enviarnos directamente a la página de inicio.
Dribbble existe para mostrar trabajos de diseño, así que es genial ver cómo reflejan esa misión en su página 404. Desde aquí, podemos seleccionar un color que nos interese o usar la barra de búsqueda para encontrar un diseño o diseñador específico. Ambas opciones ponen el foco en el diseño llamativo en lugar de en Dribbble como marca.
DFY
En lugar de un "página no encontrada", la página 404 de DFY combina un "diseño no encontrado" con un astronauta que se aleja flotando lentamente.
DFY aumenta el dramatismo pidiéndonos que no lo dejemos ir, mientras un temporizador hace una cuenta regresiva de 10 segundos antes de redirigirnos automáticamente a la página de inicio.
Páginas 404 fieles a la marca
Las páginas 404 genéricas pueden resultar chocantes porque dan la sensación de que la marca pierde su esencia, sacándonos de la experiencia del sitio. Si tu marca apuesta por el maximalismo y tu página de error utiliza un diseño minimalista, confundirás aún más a tus visitantes perdidos. Estos ejemplos de páginas 404 muestran marcas que extendieron su voz y estilo característicos a sus mensajes de error.
D&D Beyond
D&D Beyond se dirige directamente a su audiencia amante de Dungeons and Dragons con un mensaje de error que afirma que un mediano podría haber robado lo que sea que los visitantes estén buscando y lo haya escondido en otro reino.
Tanto la ilustración como el mensaje que la acompaña nos mantienen dentro del mundo de D&D. Puede que hayamos tropezado con una página inexistente, pero tenemos pistas y herramientas para superar este obstáculo. En este caso, esas herramientas son elementos de la página como el menú, la barra de búsqueda y los enlaces del pie de página.
Spotify
Spotify nos sorprende con un mensaje de error que suena a lista de reproducción, "404s and heartbreaks", junto a un disco girando.
Spotify mantiene la barra de navegación principal en la parte superior de la página e incluye enlaces a recursos útiles en el mensaje de error. Nadie quiere llegar a una página 404 —a menos que las estés coleccionando para un artículo, claro—, así que dirigir a la gente a las preguntas frecuentes es un buen detalle. Es la diferencia entre encontrarse con un obstáculo y ver señales para un desvío: lo primero es un callejón sin salida, lo segundo es una ruta alternativa.
OK Micah
Si nos perdemos un poco en el sitio de OK Micah, "el hombre atractivo" nos guiará amablemente de regreso a casa.
OK Micah mantiene su voz y estilo consistentes con textos ingeniosos y un tipo atrevido moviendo el dedo hacia nosotros. Esta página de aterrizaje también conserva la barra de navegación superior y el pie de página, envolviendo la página de error en un marco familiar.
Color del año
La página web del color del año de Pantone mantiene la temática en su página de error utilizando el Pantone 404 C como color de fondo.
Es una página de error sencilla para un sitio web directo. Tampoco hay elementos adicionales que saturen la página de inicio; solo un pequeño cursor circular que se expande para resaltar el botón "principal" cuando pasamos el ratón por encima.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Páginas 404 interactivas
Aunque muchas páginas 404 se centran en devolver a los visitantes perdidos a la página de inicio, estas páginas de aterrizaje utilizan un diseño web atractivo para invitarte a quedarte un rato.
Kualo
Kualo nos deleita con una versión personalizada del clásico videojuego Space Invader.
En lugar de usar la llamada a la acción (CTA) inmediata para enviarnos de vuelta a casa, Kualo nos desafía a vengarnos de unos invasores espaciales pixelados que forman la palabra "kualo". Este juego totalmente funcional es una sorpresa muy entretenida. Podemos seguir jugando hasta que se nos acaben las vidas, momento en el que aparece un mensaje de "¡has perdido!". Pero, una vez más, Kualo nos vuelve a enganchar prometiendo un descuento en su alojamiento para cualquiera que consiga más de 1.000 puntos.
Nouvelle
Nouvelle también apuesta por la nostalgia con una consola de control granulada y un cursor parpadeante grueso en su página de error 404.
La consola de control nos sugiere usar el comando "help" y luego nos ofrece cuatro opciones adicionales. No queremos arruinar las sorpresas, así que confía en nosotros cuando decimos que vale la pena probar el comando "trex". Está claro que al diseñador web detrás de esta página de error le encantan los memes, los huevos de pascua y las tonterías en general. Prueba algunos comandos no programados en la consola y verás a qué nos referimos.
Feldman Studio
Antes de hacer clic, quizás quieras prepararte: la página de error 404 de Feldman Studio solo te da 3 segundos para estar listo para jugar.
Tras la cuenta atrás, el diseño de la página cobra vida como un juego clásico de la serpiente. La línea debajo del 404 se convierte en la serpiente que persigue al punto. Cada vez que te comes un punto, el 404 hace una cuenta atrás. Si quieres ver qué pasa cuando llega a cero, tendrás que comerte 404 puntitos sin cometer errores... ¡buena suerte!
MAD
A cualquiera que le guste explotar plástico de burbujas le encantará la página 404 de MAD. En lugar de burbujas para explotar, esta página de error escribe 404 con interruptores que podemos activar y desactivar para borrar el número o escribir nuestro propio mensaje.
Es una experiencia de usuario sencilla pero divertida. Podemos elegir interactuar o usar el menú en la parte inferior de la página para navegar a otras secciones del sitio web.
Kffein
El diseño de la página 404 de Kffein desprende vibras de gatos de internet al estilo "I can haz cheeseburger", con una lluvia de gatos en burbujas que caen y rebotan por todas partes.
El aspecto interactivo aparece una vez que las burbujas de gatos se asientan en la parte inferior de la página. A partir de ahí, podemos hacer clic y agarrar las burbujas para lanzarlas. Cada vez que haces clic, suena una grabación de un humano imitando a un gato, y si lanzas un gato fuera de la página, eventualmente vuelve a caer.
Páginas 404 clonables
Si Webflow es tu constructor de sitios web preferido, adelántate en el diseño de tu página de error con estas plantillas 404 clonables.
The Asset
The Asset de NoCodeMachine presenta un cubo 3D hecho de números 404 de colores arcoíris.
El cubo se mueve siguiendo el cursor de nuestro ratón y el gran 404 blanco rebota lentamente de arriba abajo. Esta plantilla también incluye un menú básico en la parte inferior con espacios para redes sociales y un enlace a la página de inicio.
Jugando con la animación
La plantilla de página 404 de Benjamin Le Goff nos anuncia que estamos perdidos en el espacio con el mensaje: “ups, la nave espacial se fue sin ti… No se pudo encontrar la página que solicitaste”.
Ben incluye una sorpresa con una animación activada por el desplazamiento: al bajar por la página, el mensaje desaparece y las estrellas se reorganizan para formar una constelación con el número 404.
Juegos en la página 404
Limeknight comparte un diseño de página 404 clonable que incluye dos juegos clásicos: breakout y snake.
El cartel de “404 not found” se sacude como si la puerta donde cuelga se acabara de cerrar de un portazo. Es un diseño sencillo pero encantador con un único enlace que nos devuelve a casa. Y gracias a su diseño minimalista, esta plantilla 404 encajaría bien en una gran variedad de sitios web.
No descuides tu página 404
Nadie quiere enviar tráfico a páginas inexistentes, pero los visitantes acabarán encontrándose con un error 404 tarde o temprano. Piénsatelo dos veces antes de usar una plantilla estándar de “página no encontrada”, porque una página 404 bien diseñada puede marcar la diferencia entre una experiencia frustrante y una realmente atractiva.
