8 fragmentos de CSS y JS para crear impresionantes páginas 403

Los diseñadores web se han acostumbrado a convertir los errores en oportunidades. No es ningún secreto que los desarrolladores obligaron al código de estado HTTP 404, común, más frecuente (y sorprendentemente reconocible), también conocido como "No encontrado", a traer beneficios al proyecto. En el pasado, asustaba a los usuarios, destruía la impresión general y era una pesadilla para los desarrolladores. Todos querían que desapareciera de una vez por todas.

Hoy en día, es un detalle esencial de un sitio web. WordPress incluso tiene una plantilla asignada específicamente para ello. La "página 404" es un elemento integral de la experiencia del usuario. En la mayoría de los casos, no solo tiene un hermoso diseño, sino también un tema que pretende contribuir a la estética completa de un sitio web.

Junto con el diseño bien pensado, las interacciones e incluso las animaciones, incluye enlaces útiles y escapadas que ayudan a los usuarios perdidos a volver a la normalidad. Sin embargo, el error "404" en el diseño web es como los Hipsters en el mundo real: todavía nos llaman la atención con sus gafas tontas, sus camisas y barbas "vintage", pero no son nada nuevo para nosotros. En cuanto al error "403", esa es una historia diferente. No es tan popular como sus parientes más cercanos, pero aún así, ocurre y no una vez en una luna azul.

Solo como antecedentes, el código de estado HTTP 403, también conocido como "403 Prohibido", significa que no tiene permiso para acceder a la página. Las razones pueden variar, comenzando con permisos de carpeta inapropiados y terminando con un requisito banal de credenciales de inicio de sesión. Sin embargo, la regla general dicta que cualquier error es una oportunidad para efectuar mejoras. Entonces, ¿por qué no convertir la “página 403” ficticia en un lugar que cumplirá la misma función que la “página 404”?

Consideremos una docena de tomas espléndidas de este tipo de error. No solo sirven como fuente de inspiración, sino también como fuente de soluciones listas para usar.

No pasarás

“No pasarás” – dijo una vez uno de los magos de barba blanca más poderosos del mundo ficticio (espero que todos los fanáticos de Dumbledore me perdonen por esto). La frase final de Gandalf el Gris (nótese Gris, no Blanco) encaja perfectamente en el contexto aquí. Y Noah Rodenbeek, A van Hagen y Jhey lo demuestran en la práctica. Sus fragmentos de código están impregnados del espíritu y encanto de la novela “El Hobbit”. Mientras que los dos primeros artistas recrearon a Gandalf con su personal, el último solo insinuó la escena, pero con bastante éxito.

HODOR 403

Si los motivos de las novelas de ficción que se muestran arriba no son suficientes para usted, entonces debe fijar sus ojos en este fragmento de código de Yasio. Sorpresa-sorpresa, se inspiró en la serie de novelas de fantasía de George RR Martin. Se le ocurrió un trabajo llamado HODOR 403. Creo que para la mayoría esta solución se explica por sí misma. Por lo demás, recomiendo cambiar a HBO y ver por ti mismo por qué este personaje ficticio va perfectamente bien con este tipo de error.

Uso de Ilustración y Animación

Otras soluciones en nuestra lista se guiaron por la noción de que "403" simboliza un área prohibida, por lo que las ilustraciones de CSS animadas y estáticas se recrearon específicamente con esta idea en mente.

Error 403 – Prohibido por Aimie representa una escena clásica del cuento de hadas. Los murciélagos animados, la casa de la bruja, los árboles desnudos y la tipografía espeluznante que se presentan en las horas de oscuridad ciertamente funcionan aquí.

403 Forbidden de Dylan y 403 Forbidden de Visual Composer tienen un encanto medieval único. “Close the Gates”: Los proyectos evocan concretamente estas asociaciones. El primero presenta la clásica puerta de guarda de madera que se cierra ante tus propios ojos; el segundo también trata de un tema de puerta de guardia y representa un mecanismo con dientes y cadenas que revela la señal de prohibido.

La visión de Arturo Wibawa del área prohibida se presenta a través de una ilustración CSS maravillosa, muy detallada e incluso parcialmente animada de la famosa "Ciudad Prohibida Púrpura" china, también conocida como Museo del Palacio en la actualidad.

te esta mirando

403 Forbidden Page de Mariana está marcado por un personaje caprichoso parecido a un monstruo que, gracias al efecto de reconocimiento de dirección, sigue el cursor del mouse a todas partes. Recrea la sensación de estar siendo observado todo el tiempo. También imita a una elegante guardia de hadas que no permite avanzar. El proyecto se siente divertido a pesar del aspecto “amenazante” de la mascota.

Sea persistente

Gabriele Corti también ofrece una visión de una página de error “403”. Su proyecto "La persistencia es una clave" describe un proceso completo de denegar inicialmente el acceso y otorgarlo después de la acción correcta del usuario. Las acciones correctas implican insertar una llave en el ojo de la cerradura. Sin embargo, siempre puede usar este concepto como base para algunas acciones avanzadas, como ingresar el nombre de usuario y la contraseña.

Manteniéndolo simple

403 de lsgrrd es una versión simplificada de una "página 403" que ciertamente tiene derecho a existir. Es mínimo pero directo al grano. Tiene una cierta cualidad digital que rezuma techno vibra inherente a la esfera informática. El cursor parpadeante al final junto con la tipografía digital produce un efecto fantástico. La solución es limpia, elegante y sencilla.

¿Estás en la lista?

Vamos a terminar nuestra colección con el proyecto realizado por Cassidy Williams. A diferencia de la mayoría presentada aquí, esta solución es una metáfora del mundo real que ilustra la situación típica en cualquier club nocturno popular. El gorila es el corazón y el alma de este fragmento de código. El personaje incluso estaba parcialmente animado para que todo pareciera real.

Otra oportunidad para involucrar a los usuarios

A decir verdad, el "Error 403" no está tan extendido como el "Error 404", ni es tan popular y reconocible. Sin embargo, todavía existe y ocurre una y otra vez. Eso crea un agujero en un sitio web que puede romper toda la experiencia del usuario. Entonces, aproveche la oportunidad y conviértala en una parte válida del proyecto. Sin duda conquistará a nuevos visitantes y evitará que pierdas a los antiguos.