¿Alguna vez has visto páginas de error 404? ¿A quién no le ha ocurrido que al navegar en una web salte el mensaje “ Error 404” o “Lo sentimos. Esta página no está disponible”? Pero ¿sabías que cada marca o web suele editar sus páginas de error 404 de distinta manera?
Las páginas de error 404 son utilizadas para comunicar al usuario que el servidor ha regresado un error “HTTP 404 No Encontrado”, que en términos sencillos, significa que no ha sido posible encontrar el contenido que debería de contener esa sección del sitio. El error 404 es de los más comunes y sucede cuando, por ejemplo, cambiaron de dominio, migraron de servicio, eliminaron el contenido o entraste a un enlace roto.
Casi siempre, una pagina de error 404 es señal de abandonar la página rápidamente; sin embargo, hay algunos mensajes de error 404 que llaman mucho la atención. Ya sea por los tipos de diseño web o por los divertidos juegos que incluyen, hay muchas páginas de error 404 que debes conocer.
En el artículo del día de hoy, hemos decidido hacerte una lista de más de 30 páginas de error 404 que podrás tomar como referencia para elaborar una propia para tu web.
Ahora sí, es momento de que conozcas las páginas de error 404 más creativas y graciosas de todo el internet. Aprende a convertir un error 404 en una oportunidad, cautivando a los usuarios y fideliza a tus clientes. ¡Prepárate para inspirarte! .Ve por tu laptop que ya estamos por empezar.
1. Spotify for Pets
Mascotas… ¿qué mejor forma de conectar que eso? Es una serie de transiciones muy sencillas, pero con mucho estilo dejan claro que algo no salió bien, y el perro no está muy contento por eso. Como “Call-to-action” utilizan el volver al “home”, lo cual es muy común.
Una de las primeras páginas de error 404 que verás en esta lista con animales muy lindos y cautivadores.
2. Locomotive
La página web orientada al diseño gráfico “Locomotive”, utilizaron parte de su encanto para crear una página de error 404 que llame la atención. En ella, se puede observar el mensaje de error acompañado de algunas figuras y tuercas, las cuales te dan a entender que la página debe ser reparada.
Además, utilizan colores psicodélicos, sumado a que las figuras tienen movimiento. Sin duda, ¡es una de las páginas de error 404 más creativas!
3. Cornershop
CornerShop es una web que se dedica a facilitarle la vida a los consumidores, que básicamente se encarga de hacer las compras del supermercado y llevarlo a la puerta de tu hogar. Al igual que en el caso anterior, aprovecharon bien su rubro para crear un mensaje de error 404 creativo.
En este caso, Cornershop reemplazó el número cero por distintos alimentos circulares que van cambiando. Una gran manera de relacionar comida y un error fortuito de la web. ¡Genial!
4. McDonald's
Muy bien ahí, McDonald 's. Haciendo uso de una referencia muy común (“Who Moved My Cheese?”), para adaptarla a uno de sus principales productos, y acompañándola de una ilustración que te hace olvidar que llegaste ahí por un error.
5. Canva
Brillante muestra de interactividad en una página 404. Canva se encargó de que, si se te presenta un error 404, al menos no te aburras mientras esperas soluciones. Es así como añadió una especie de puzzle con la que puedes pasar horas jugando. ¡Tuve que parar porque tenía que seguir escribiendo este post!
6. Crunchbase
A esta web se le ocurrió añadir un estilo arcade y retro a su página de error 404. No necesito mucho para hacer que tu experiencia en este tipo de errores de una web sea un poco distinta. ¡Muy bien!
7. Amazon
Esa cara que sabes que hizo algo, pero no puedes regañarlo… ️ Además de darte la opción de ir a su página de inicio, Amazon aprovecha para compartirte una campaña donde muestran a los perros que “trabajan” con ellos y son parte de su cultura. Una forma muy inteligente de salvar nuestra frustración y alegrarte el día con sus páginas de error 404.
8. Pixar
Si eres fan de Pixar, seguramente has visto la película “Intensamente”. Justamente, con uno de sus personajes es que Pixar nos avisa cuando ocurre un error 404. Sin duda, una de las páginas de error 404 ideales para su público objetivo.
9. Dribbble
¡WOW! Si esto no es aprovechar sus recursos, entonces no sé qué sea. Hacen del error una oportunidad para resaltar uno de sus principales ‘features’ y siguen ejecutando su función: compartir proyectos de diseño y arte.
10. Figma
Simplemente, una de las mejores. Figma se las ingenió para convertir el clásico mensaje de error 404 en una posibilidad de diversión y creatividad. ¿Cómo lo lograron? Decidieron incluir distintos nodos en los números para que puedas modificar sus formas de mil maneras.
¡Con ese tipo de páginas de error es imposible enojarse!
11. Typeform
Typeform sabe perfectamente que a todos nos gustan las mascotas, aunque no estoy seguro que sepan la connotación del nombre de su perro.
12. Spotify
11. Coulee Creative
El uso de memes es un recurso que vale la pena explotar, una muy buena forma de generar engagement con tus usuarios. Si tienes pensado incluir memes en las páginas de error 404, puedes tomar como referencia a Coulee Creative.
12. Crehana
Por supuesto, si hablamos de páginas de error 404 creativas, no podemos dejar de nombrarnos. En este caso, Crehana incluye una temática alienígena, la cual sería el causante principal del error 404. Asimismo, incluye un par de links para que continúes navegando en la web de manera rápida.
13. Lyft
Esta empresa estadounidense competidora de Uber, muestra una página de error 404 muy limpia, con una animación que muestra esa urgencia por encontrar lo que estabas buscando.
14. Twitch
Simple, pero efectivo. Twitch no necesitó más que un sencillo mensaje y un pequeño fantasma para avisarte de un error 404. Un ejemplo de que muchas veces, pocos detalles no significa que sea aburrido.
15. Netflix
Aquí, Netflix también aprovecha el concepto de “estás perdido” y lo vincula con uno de sus productos (“Perdidos en el espacio”), acompañado de un “Call-to-action” para ir a su ‘inicio’. Sinceramente esperaría más de una empresa como Netflix, pero sin duda es una muy buena forma de ejecutar una página 404.
16. GitHub
Github se animó a añadir algo distinto a lo visto anteriormente en otras páginas de error 404. En este caso, además de colocar una graciosa animación, los desarrolladores decidieron incluir el movimiento al mover el mouse, como si cambiaras la perspectiva.
Estos de GitHub, sí que conocen a su audiencia.
17. Elementor
Este "website builder" para Wordpress es un gran ejemplo de página 404 interactiva, además de que te puede ayudar a crear una página 404 similar o mejor para tu sitio.
18. Product Hunt
19. Fiverr
22. Discord
20. WeTransfer
WeTransfer, la plataforma para compartir archivos, utiliza esta forma un tanto sencilla pero bastante original. Y es que no sólo dan la opción de volver a la sección principal del sitio, sino que buscan que te quedes más tiempo en esa página viendo ese hipnotizador gráfico.
Nota que aunque muestran un cierto asombro en su primer copy, en ningún momento se disculpan.
21. Zoë Pepper
"¡Ey! Quédate a ver quién gana este ''piedra, papel y tijera", eso es lo que quisieron decir con esta gran página 404.
22. LinkedIn
El diseño de la página de error 404 del sitio de empleabilidad más famoso del internet tiene un estilo minimalista y con una paleta de colores claros. No tiene grandes elementos llamativos, aunque sin duda al verlo transmite tranquilidad, cosa que necesitas cuando ocurren este tipo de inconvenientes.
23. LEGO
La famosa marca de construcción infantil Lego se quiso sumar a las páginas de error 404 más creativas de todo el internet. En su página de error 404 usan a su clásico personaje, el cual suele aparecer en distintos comerciales de la marca. El estilo tan familiar e informal que emite permite representar muy bien a LEGO.
En cuanto a su tipografía, es bastante sobria y sin mucho detalle, lo cual resalta las ilustraciones de Lego. Así que, si tienes pensado elaborar páginas de error 404 orientada a juegos infantiles, deberías tratar el estilo despreocupado y divertido de LEGO.
24. Ueno
La agencia de diseño digital Ueno quiso representar de forma divertida y muy a su estilo el clásico error 404. Esto la ha convertido en una de las páginas de error 404 más creativas que existen. Básicamente, es un pan con salchicha escapando a toda velocidad de alguien que seguramente lo quiere devorar.
Sumado a la creativa idea del hotdog, lo que también la convierte en una de las mejores páginas de error 404 es el estilo minimalista con el que suelen trabajar sus diseños digital. Sin duda, una gran forma de combinar diversión y elegancia propia de tu negocio.
25. Wix
La página de Wix es una de las webs más famosas para que puedas elaborar tu propia página en internet y en cuanto a los diseños de páginas de error 404 tampoco se queda atrás. Así como otros ejemplos que ya hemos visto en la lista, Wix apela a la ternura inacabable de las mascotas.
Específicamente es un gatito encima de la laptop, el cual probablemente explique porque ingresaste a una página errónea. Sin duda, los animalitos y las páginas de error 404 siempre llaman la atención.
26. BluePath
Por si no conocías a esta empresa, es una consultora de análisis de datos ubicada en Atlanta, Estados Unidos. Justamente, ellos aprovecharon su ubicación geográfica para elaborar una de las páginas de error más inusuales.
Cuando la página presenta algún tipo de error de web, te muestra el mapa de la ciudad de Atlanta con un montón de puntos, los cuales simbolizan a todos sus clientes. Lo divertido es que hay un punto apartado y te indican que ese eres tú y estás “fuera del mapa”. Una buena manera de incluir tu área de operaciones y una página de error 404.
27. Novak Djokovic
Si eres fánatico del tenis, sería un crimen no conocer a Novak Djokovic, uno de los mejores tenistas de la actualidad y probablemente de la historia. Así como cualquier personalidad famosa, Novak cuenta con su propia página web y se las ingenio para relacionar las páginas de error 404 y el deporte que practica.
El número 404 fue editado de tal manera que el cero sea intercambiado por una raqueta de tenis rota, dando a entender que la web presenta problemas. Asimismo, lanza un creativo mensaje que dice: “Parece que has perdido algunas bolas”, haciendo referencia a los saques errados en el tenis.
Si estás pensando en crear una web relacionada al deporte, definitivamente Novak cuenta con un gran ejemplo de páginas de error 404 creativas.
28. Adobe
Adobe es probablemente una de las marcas más famosas del mundo, principalmente orientada al diseño gráfico y edición de videos. Fiel a lo que se dedican, busca incluir diversas imágenes trabajadas en su programa en sus páginas de error 404.
Por ejemplo, en esa imagen se puede ver un maravilloso paisaje el cual ha sido trabajado a la perfección y da la impresión de que no hubiera gravedad por ningún lado. Además, te deja el mensaje de “Estas son aguas inexploradas”, dando a entender que estas en un lugar fuera de los dominios de Adobe. ¡Una de las páginas de error 404 más creativas y fieles a lo que se dedican!
29. NASA
¿Quien no conoce a la NASA? Si eres fanatico de los misterios del universo y los planetas, seguramente sueles recurrir a la página web de la NASA para informarte de las últimas noticias. Ellos también saben cómo conectar muy bien a lo que se dedican con las páginas de error 404.
Como puedes observar en la imagen de la pagina de error 404, la NASA utiliza un fondo del universo con miles de estrellas y añade un mensaje simple y creativo, el cual dice: “El objeto cósmico que estabas mirando ha desaparecido entre el horizonte”.
Una forma creativa de decir que, lamentablemente, lo que querías encontrar en la web ya no está disponible. Un gran ejemplo de páginas de error 404 únicas.
30. Florida
Por si no lo sabías, el estado de Florida (Estados Unidos) cuenta con su propia página web en la cual brinda información del estado, lugares turísticos, entre muchas cosas más. Otro dato curioso es que Florida es uno de los lugares con mejor clima en el país, ya que nunca llega a bajas temperatura y casi siempre es cálido.
Esto fue lo que tomaron como referencia para hacerte saber que has caído en un “error 404”. Pusieron como fondo de la página un lugar nevado con el mensaje de “Parece que has tomado un vuelo equivocado…”, ya que nunca nieva en Florida.
¡Una forma muy sutil y sarcástica de resaltar tu caribeño clima con las páginas de error 404!
31. Carwow
Esta página web está orientada a la venta de coches y encontraron una excelente manera de calmar a sus usuarios cuando ocurre un error en su página.
Al igual que Google y su clásico dinosaurio, Carwow incluyó juegos en las páginas de error 404 con los que puedes divertirte. En este caso, es un automóvil que va a toda velocidad y debes esquivar distintos obstáculos. Podrás ir acumulando puntaje de forma ilimitada, lo cual te va a dejar enganchado un buen rato.
¿Por qué son importantes las páginas 404?
Tener una página de error 404 es importante, porque contribuye a la buena experiencia de usuario. Como te imaginarás, ignorar tus errores 404, califica como otro de los errores de un sitio e-commerce, lo cual, eventualmente, puede traer consecuencias negativas en la experiencia del usuario, así como en el rendimiento del negocio,
Cuando un “webmaster” o dueño de un sitio, no tiene en consideración una página 404 personalizada, en la mayoría de los casos los navegadores (como Chrome o Firefox) proveen una página 404 por defecto, que por supuesto no ayudan en mucho en cuanto a UX se trata.
Las páginas de error 404 bien tratadas, también son importantes porque ayudan en otros factores que no vemos. Por ejemplo, según propone portal SEOptimer, contar con páginas de error 404 ayuda al posicionamiento orgánico de nuestro sitio (SEO), ya que los motores de búsqueda valoran este tipo de cosas. Por ejemplo, Google te puede sacar de su lista de resultados o afectar tu posicionamiento en su buscador, si detecta que tienes muchos errores 404 mal atendidos, porque para ellos (los “bots”) también son frustrantes.
Así es, los errores 404 son tortuosos, inevitables y no respetan ni a la empresa más rica del mundo, pero hay formas de aminorar ese malestar, y una de las mejores, es hacerles frente con una página 404 personalizada.
Además, cabe mencionar que las ventajas de tener una página 404 personalizada son muchas, ¡hablemos de ellas!
Imagen: Pexels
¿Qué es una página de error 404 personalizada?
Una página 404 personalizada es una pantalla de visualización que se crea para comunicarle a tus visitantes que la web ha presentado un error, pero con diseño que mantiene tus colores, tipografía(s), tono de comunicación y gráficos basados en la guía de identidad corporativa de tu empresa.
Puedes aprovechar los recursos mencionados y, con extra creatividad, así como una mirada estratégica, podrás hacer que estos visitantes frustrados olviden que eso fue un error e, incluso, que la compartan en sus redes sociales.
Elementos importantes de una buena página 404 personalizada
Esta no es una lista de características definitiva que una página 404 personalizada debe tener, pero si están presentes en la mayoría de los mejores páginas de error 404 que hemos visto y te compartiremos. Estas características son:
- Tienen un llamado a la acción: las buenas páginas 404, cuentan con algo que en marketing lo llaman “Call-to-action”, y se encargan de llevar a sus usuarios a secciones donde creen que podrían recibir la información o realizar la acción que esperaban hacer.
- Generan engagement: los diseñadores y personas de comunicación detrás de las mejores páginas de error 404, saben perfectamente cómo llegar y conectar contigo. Te conocen a tal grado que logran capturarte desde que aterrizas a su página.
- Son interactivas: esto es un poco más complejo de llevar a cabo, pero una buena página 404 te invita a tener una breve experiencia para que olvides que llegaste ahí por un error.
- Son congruentes con su marca: los sitios con una buena página 404 personalizada, mantienen su tono de comunicación e identidad visual.
- Son divertidas: estas páginas hacen uso de en lo que en marketing o investigación de usuario se le conoce como “insights”, y son los encargados de sacarte una sonrisa y hacer clic contigo.
- Tienen “buen diseño”: ya sean animaciones o imágenes estáticas, las mejores páginas 404 logran deleitarte el ojo, y para muchos diseñadores, esto es suficiente para dejar pasar su error.
Muchas empresas han llevado estos elementos al siguiente nivel y han sabido imprimir toda su personalidad hasta en el último rincón, ¡es momento de verlas en acción!
Imagen: Pexels
¿Por qué tener una página de error 404 personalizada?
Ok, ya en este punto te puedes deducir que más allá de tener una página 404 personalizada sea una buena práctica, éstas te pueden beneficiar más de lo que te imaginas.
El experto en diseño de interfaces, Carlos Pariente, explica en el curso online de diseño de interfaces web y móviles que un diseño puede transmitir y generar muchas sensaciones en el usuario. En un momento de incertidumbre (como cuando te aparece un error 404), lo mejor será buscar calmar un poco las aguas.
También, para saber aprovechar este recurso, hay que ver a una página 404 como un escaparate más, un lugar donde puedes comunicarte abiertamente y utilizarlo para estrategias de marketing, UX, fortalecer tu branding, servicio al cliente y otros beneficios que aún no han sido descubiertos.
Para saber aprovechar este recurso, hay que ver a una página 404 como un escaparate más, un lugar donde puedes comunicarte abiertamente, y utilizarlo para estrategias de marketing, UX, fortalecer tu branding, servicio al cliente y otros beneficios que aún no han sido descubiertos.
En términos simples, podemos decir, que debes tener una página de error 404 personalizada porque te ayudará a seguir creciendo ya que retendrás a tus usuarios y aumentarán tus conversiones, o si lo quieres ver de otra forma: te ayudará a no perder clientes y visitantes de tu sitio, que pueden realizar alguna acción importante para ti y tu negocio.
¡Hemos llegado al final de este artículo! Esperamos que conocer estas más de 30 páginas de error 404 te hayan servido para pensar en nuevas ideas para tu web propia. Recuerda que lo que has visto hoy solo es la punta del iceberg, existen muchísimas más páginas de error 404 llenas de creatividad. También, puedes aprender a crear la tuya con nuestros cursos de Desarrollo web y tecnología. ¡Te esperamos!
Si quieres descubrir más páginas 404 por tu cuenta, sólo agrega “/404” al final de la URL de cualquier sitio y podrás ver qué han diseñado como página de error 404.