Una página 404 – Mejores prácticas e inspiración de diseño
Si aún no está familiarizado con el término, una página de error 404 es una página que tiene el trabajo de notificar al usuario que el enlace al que intentó acceder está roto o no existe. No hace falta decir que obtener un resultado de página de error 404 es irritante para todos los usuarios que lo experimentan.
Para hacer que este hecho sea un poco más llevadero para los usuarios, muchos diseñadores de páginas web se han encargado de personalizar su página de error 404 para que parezca más "divertida" y única. Por lo general, lo hacen incorporando humor, ingenio y un diseño que contiene originalidad creativa en su página.
Si también tiene un plan para diseñar su propia página 404 de esta manera, mirar algunos ejemplos de páginas 404 personalizadas ya hechas puede servirle como una buena inspiración para usted. Por lo tanto, hemos decidido compartir una lista de ejemplos ingeniosos y únicos de páginas de error 404 que pueden ayudarlo durante su creación.
Cómo debería verse una página de error 404
Primero, mencionaremos algunas características que, en nuestra opinión, debe tener una página de error 404 personalizada. Algunas de estas estrategias han sido aplicadas por muchos sitios web influyentes.
1 Debe coincidir con el estilo general de su sitio web
Si nos preguntas, esto debería ser una obviedad. Hay tantos temas de WordPress que están hechos específicamente para adaptarse a la vibra de un determinado tipo de negocio o la naturaleza de los servicios o productos que el sitio promociona. Por lo tanto, es natural que ajuste el diseño de su página 404 tanto a la plantilla de su sitio web como al tema general de su sitio web. Por ejemplo, si tiene un sitio web de restaurante que se especializa en alta cocina, sería bueno incorporar una imagen de una comida elegante, así como su nombre en su página de error 404. De esta forma, tus visitantes al menos no olvidarán que sirves buena comida, a pesar de los inconvenientes que se han encontrado en el momento actual. Gracias a muchos sitios web gratuitos y numerosos recursos con ilustraciones vectorialespuede mejorar la apariencia de su página de error 404 según sus necesidades.
2 Debe contener alguna forma de disculpa
Tener una página de error 404 emergente no solo es molesto, también es algo que no debería haber sucedido en primer lugar. Es por eso que siempre es una buena idea incluir algún tipo de disculpa en tu página de error, donde enfatizas que realmente lamentas los problemas del usuario de alguna manera.
3 Una página de error 404 debe incluir una barra de búsqueda
Esto también puede ser una buena práctica. Si agrega una barra de búsqueda a su página de error 404, puede hacer que los usuarios permanezcan en su sitio web para seguir explorando.
4 Considere agregar un enlace
Al igual que una barra de búsqueda, un enlace útil puede hacer más bien que mal. Puede ser cualquier enlace que considere importante, como su blog, página de contacto o incluso su página de inicio. Además, agregar un enlace en WordPress es muy fácil.
5 Ilumínalo con humor
Ya mencionamos el humor anteriormente. Ya sea ingenioso, contraproducente o simplemente extraño, usar el humor en situaciones como estas realmente puede ser de gran ayuda para alegrar el estado de ánimo de su visitante. Quién sabe, su enfoque relajado y cómico puede incluso terminar con una impresión más positiva de su marca en general.
En resumen, si tiene una buena idea para una línea ingeniosa que pueda incluirse en su página de error 404, no dude en agregarla, ya que muchos agradecen la actitud humorística. E incluso si sus visitantes no lo encuentran divertido, siempre es mejor mantener las cosas alegres que ser como una máquina al respecto.
También puede establecer una redirección a su página de error 404. Por ejemplo, si ocurre un error, su página puede ser redirigida a su página de inicio. Esta, sin embargo, no es la mejor solución, porque si hay algún problema con su página de inicio, está de vuelta al punto de partida.
Pero antes de sumergirse en los mejores ejemplos que preparamos, tómese un tiempo para refrescar su memoria sobre cómo crear una página 404 en WordPress:
Nuestras selecciones de inspiración de página de error 404
Ahora que sabe qué elementos pueden hacer una buena página de error 404, también le proporcionaremos algunos ejemplos de páginas de error 404 que nos han llamado la atención por su sentido del humor y el impacto general de su diseño.
Con suerte, la forma en que se ve esta página de error 404 no representa cómo reaccionará cuando se encuentre con este problema. Pixar ha decidido agregar un personaje llamado Tristeza de una película popular de 2015 Inside Out, con un mensaje que le aconseja no tomar cosas como estas demasiado personalmente. No podríamos estar más de acuerdo.
Después de lanzar una nueva identidad y diseño de marca, Mailchimp también cambió el aspecto de su página de error. El sitio web que se especializa en servicios de boletines por correo electrónico ha decidido incluir una imagen poco convencional de un burro cuya cabeza está enterrada profundamente en un agujero, lo que indica que ha buscado en cada grieta del sitio y simplemente no hay ninguna página que encontrar. Bueno, es evidente que el burro realmente hizo todo lo posible para encontrar esa página para ti, por lo que realmente no tiene sentido frustrarse demasiado por eso.
Este sitio web basado en fotografía profesional se especializa en capturar retratos de bebés recién nacidos, bodas y otros eventos relacionados con la familia. Por lo tanto, es lógico que hayan decidido incluir una imagen de un niño pequeño manchado que hace una rabieta en su página 404. Aunque en la imagen es evidente que el niño ha terminado comiendo un pastel, el texto sugiere sutilmente que la página que estabas buscando también se ha comido. Pero, ¿cómo puedes enojarte con un niño que llora? ¡Fue solo curiosidad y terminó engullendo tu página por accidente!
El diseño de la página 404 de Blizzard Entertainment tiene un giro. Además de una ventana rota y un menú distorsionado (que, por cierto, todavía funciona), hay un mensaje que culpa al usuario por el error. Fueron un poco atrevidos en su enfoque porque esto definitivamente es un cambio de los mensajes de disculpa habituales que tienden a aparecer en las páginas de error. Sin embargo, sigue siendo único y refrescante, por lo que seguramente hará que al menos algunas personas se diviertan con este giro inesperado de las tornas.
Ver a un antagonista de Angry Birds completamente derrotado en la pantalla del sitio web oficial de este juego solo porque no se puede encontrar la página podría tener un efecto reconfortante en una persona que lo ve. Después de todo, no es otro que Bad Piggy el que puede relacionarse con tu desgracia.
Flywheel es una empresa especializada en ayudar a desarrolladores y diseñadores a crear sitios web de WordPress. Su página 404 es de naturaleza simplista pero se compone de algunos elementos atractivos de diseño web. Hay un "¡esto realmente apesta!" mensaje que en realidad es un juego de palabras inteligente, considerando que un número cero es en realidad un agujero negro animado que ha succionado lo que parece ser una computadora portátil con una página rota.
Todo buen diseñador de UX reconoce que, si bien primero se enfoca en resolver los problemas más grandes que tiene un usuario, también debe adaptarse cuando se salen del guión. Es por eso que la gente humilde de carwow creó una increíble página 404 con un juego de carreras de autos para cuando las páginas no se cargan según lo planeado.
El humor británico suele caracterizarse por no tomarse a sí mismo demasiado en serio. Los propietarios de la empresa son británicos, por lo que en esta situación, en realidad se están criticando a sí mismos. Lo han hecho dibujando dos personajes elegantes que están profundamente inmersos en su conversación sobre una página que no funciona. Mientras tanto, le dan consejos al usuario sobre lo que debe hacer a continuación mediante el uso de frases británicas que suenan francamente cómicas en este contexto.
Personalmente, nos perdimos cuando llamaron a la página un ‘Cuatrocientos cuarto mensaje de error’ y cuando comentaron que ‘su web-butler solucionará su error en un santiamén’.
Slack es una plataforma colaborativa que ayuda a las empresas y empresas a trabajar juntas y avanzar. Pero si aterrizas en su página 404, considérate verdaderamente perdido. Su página de error presenta una bonita animación que también se mueve si arrastra el puntero del mouse por la pantalla. A pesar de que es visualmente atractivo, este es un ejemplo de una página que no tiene ninguna correlación con el contenido del sitio web, pero aún así hace bien su trabajo.
Inspírate y prepárate para experimentar
Además de los ejemplos de páginas 404 cuidadosamente creados y utilizados por marcas famosas, hay muchas otras excelentes plantillas a las que puede recurrir. Diseñados por artistas experimentados con atención a cada detalle, estos son nuestros favoritos.
Diseñada por Lena Zaytseva, esta plantilla es un excelente ejemplo de diseño de página de error 404 interactivo y atípico. Mínimo, pero efectivo, combina el color blanco y amarillo con textos animados. Las palabras con el nombre del sitio web están separadas por "404". Al mismo tiempo, su mensaje principal junto con el botón de retorno aparece en la parte inferior de la página. Esta solución es ideal para sitios web vanguardistas y nichos creativos.
Aunque esta página 404 puede parecer básica al principio, es un buen ejemplo de cómo la simplicidad puede ser efectiva. Con un tono de color azul dominante y una ilustración 3D inteligente, muestra que las páginas 404 originales y no tradicionales pueden marcar una diferencia real. Si desea que su presentación en línea se destaque, esta puede ser la opción adecuada.
Las páginas de error 404 en su mayoría nos hacen sentir como si estuviéramos perdidos en el espacio. Basado en esta metáfora, este ejemplo de página 404 es una forma poderosa de redirigir a los visitantes del sitio web a la página de inicio. Gráficos encantadores y elementos planos son el enfoque principal de esta plantilla. En caso de que desee una página 404 que sea una pequeña obra de arte y pueda funcionar perfectamente para cualquier tipo de sitio web creativo, no dude en probar este diseño.
Diseñado por Caroline Lee, este atrevido diseño de página 404 es ideal para cualquier persona que prefiera el estilo retro y multicolor. El ambiente de esta plantilla nos recuerda a los videojuegos pioneros y una buena era de la televisión. La mezcla de colores brillantes como rosa, amarillo, azul y verde y los diferentes tamaños de formas se adaptarán a cualquier estudio de diseño o juegos.
Si hay una palabra que puede describir este diseño, ¡sería amarillo! Inspirado en la estética del arte pop estadounidense, este ejemplo 404 combina dos tonos de amarillo, puntos y rayas icónicos. SI desea aportar algo de arte a este tipo de página, este es un camino a seguir.
La sencillez a veces tiene mucho que ofrecer. Esta plantilla es la mejor prueba. En el lado izquierdo, hay una ilustración de un guitarrista con una guitarra con una cuerda rota. El fuerte simbolismo de esta ilustración encaja perfectamente en el contexto de la página de error 404. Por otro lado, hay un mensaje simple con el botón Volver.
Mirar las páginas de error 404 ya existentes puede ser divertido, pero hacer una puede ser una historia completamente diferente. Requiere ingenio, creatividad y un poco de apertura de mente para poder trabajar. No obstante, esperamos que algunas de nuestras sugerencias lo ayuden al menos a obtener una buena ventaja.