8 extraits CSS et JS pour créer de superbes pages 403

Les concepteurs de sites Web se sont habitués à transformer les erreurs en opportunités. Ce n'est un secret pour personne que le code d'état HTTP 404, le plus courant (et étonnamment reconnaissable), alias "Not Found", a été forcé par les développeurs pour apporter des avantages au projet. Dans le passé, il effrayait les utilisateurs, détruisait l'impression générale et était un cauchemar pour les développeurs. Tout le monde voulait qu'il disparaisse une fois pour toutes.

Aujourd'hui, c'est un détail essentiel d'un site web. WordPress a même un modèle spécifiquement assigné pour cela. La « page 404 » fait partie intégrante de l'expérience utilisateur. Dans la majorité des cas, il a non seulement un beau design mais aussi un thème qui vise à contribuer à l'ensemble de l'esthétique d'un site Web.

Outre la conception bien pensée, les interactions et même les animations, il comprend des liens utiles et des escapades qui aident les utilisateurs perdus à se remettre sur la bonne voie. Cependant, l'erreur "404" dans la conception Web est comme les Hipsters dans le monde réel : ils attirent toujours notre attention avec leurs lunettes idiotes, leurs chemises "vintage" et leurs barbes, mais ils ne sont pas nouveaux pour nous. Quant à l'erreur "403", c'est une autre histoire. Ce n'est pas aussi populaire que son plus proche parent, mais cela se produit quand même et pas une seule fois dans une lune bleue.

Juste pour le fond, le code d'état HTTP 403, alias "403 Forbidden", signifie que vous n'avez pas la permission d'accéder à la page. Les raisons peuvent varier, commençant par des autorisations de dossier inappropriées et se terminant par une exigence banale d'informations d'identification de connexion. Néanmoins, la règle empirique veut que toute erreur soit une opportunité d'apporter des améliorations. Alors pourquoi ne pas transformer la fausse « page 403 » en un endroit qui remplira la même fonction que la « page 404 » ?

Considérons une douzaine de prises splendides sur ce type d'erreur. Ils servent non seulement de source d'inspiration mais aussi de source de solutions prêtes à l'emploi.

Vous ne pouvez pas passer

"Vous ne passerez pas" - a été dit une fois par l'un des sorciers à barbe blanche les plus puissants du monde fictif (j'espère que tous les fans de Dumbledore me pardonneront pour cela). La phrase finale de Gandalf le Gris (notez Gris, pas Blanc) s'inscrit parfaitement dans le contexte ici. Et Noah Rodenbeek, A van Hagen et Jhey le montrent dans la pratique. Leurs extraits de code sont imprégnés de l'esprit et du charme du roman "Le Hobbit". Alors que les deux premiers artistes ont recréé Gandalf avec son bâton, ce dernier a juste fait allusion à la scène, mais avec beaucoup de succès.

HODOOR 403

Si les motifs des romans de fiction présentés ci-dessus ne vous suffisent pas, alors vous devriez jeter un œil sur cet extrait de code de Yasio. Surprise-surprise, il s'est inspiré de la série de romans fantastiques de George RR Martin. Il est venu avec un travail appelé HODOR 403. Je crois que pour la majorité là-bas cette solution est explicite. Pour le reste, je recommande de passer à HBO et de voir par vous-même pourquoi ce personnage fictif se marie parfaitement avec ce type d'erreur.

Utilisation de l'illustration et de l'animation

D'autres solutions de notre liste ont été guidées par la notion que "403" symbolise une zone interdite, de sorte que les illustrations CSS animées et statiques ont été recréées notamment avec cette idée à l'esprit.

Erreur 403 - Interdit par Aimie dépeint une scène classique du conte de fées. Les chauves-souris animées, la maison de la sorcière, les arbres nus et la typographie effrayante qui sont présentés dans les heures d'obscurité font certainement l'affaire ici.

403 Forbidden de Dylan et 403 Forbidden de Visual Composer ont une allure médiévale unique. « Close the Gates » : Les projets évoquent notamment ces associations. Le premier comporte la porte de garde en bois classique qui se ferme sous vos yeux ; le second va également pour un sujet de porte de garde et représente un mécanisme avec des rouages ​​​​et des chaînes qui révèle le signe interdit.

La vision d'Arturo Wibawa de la zone interdite est présentée via une merveilleuse illustration CSS très détaillée et même partiellement animée de la célèbre "Cité Interdite Pourpre" chinoise, alias Palace Museum de nos jours.

Il te regarde

403 Forbidden Page de Mariana est marqué par un personnage fantaisiste ressemblant à un monstre qui, grâce à un effet sensible à la direction, suit le curseur de votre souris partout. Il recrée un sentiment d'être observé tout le temps. Il imite également une garde de fée fantaisiste qui ne permet pas d'avancer. Le projet semble amusant malgré le look "menaçant" de la mascotte.

Être persistant

Gabriele Corti propose également une vision d'une page d'erreur "403". Son projet "La persistance est une clé" décrit tout un processus consistant à refuser initialement l'accès et à l'accorder après la bonne action de l'utilisateur. Les bonnes actions impliquent d'insérer une clé dans un trou de serrure Néanmoins, vous pouvez toujours utiliser ce concept comme base pour certaines actions avancées comme la saisie d'un identifiant et d'un mot de passe.

Rester simple

403 par lsgrrd est une version trop simplifiée d'une "page 403" qui a certainement le droit d'exister. C'est minime mais droit au but. Il a une certaine qualité numérique qui respire l'ambiance techno inhérente à la sphère informatique. Le curseur clignotant à la fin en tandem avec la typographie numérique produit un effet fantastique. La solution est propre, élégante et simple.

Êtes-vous sur la liste?

Nous allons terminer notre collection avec le projet réalisé par Cassidy Williams. Contrairement à la majorité présentée ici, cette solution est une métaphore du monde réel qui illustre la situation typique dans n'importe quelle boîte de nuit populaire. Le videur est le cœur et l'âme de cet extrait de code. Le personnage a même été partiellement animé pour que tout soit réaliste.

Une autre opportunité d'engager les utilisateurs

À vrai dire, "l'erreur 403" n'est pas aussi répandue que "l'erreur 404", ni aussi populaire et reconnaissable. Néanmoins, il existe toujours et se produit à maintes reprises. Cela crée un trou dans un site Web qui peut briser toute l'expérience utilisateur. Alors, saisissez l'opportunité et transformez-la en une partie valable du projet. Il séduira sans aucun doute de nouveaux visiteurs et vous évitera de perdre les anciens.