8 frammenti CSS e JS per la creazione di 403 pagine straordinarie

I web designer si sono abituati a trasformare gli errori in opportunità. Non è un segreto che il codice di stato HTTP 404 comune, più diffuso (e sorprendentemente riconoscibile), noto anche come "Non trovato", sia stato costretto dagli sviluppatori a portare vantaggi al progetto. In passato spaventava gli utenti, distruggeva l'impressione generale ed era un incubo per gli sviluppatori. Tutti volevano che scomparisse una volta per tutte.

Oggi è un dettaglio essenziale di un sito web. WordPress ha anche un modello appositamente assegnato per questo. La "pagina 404" è un elemento integrante dell'esperienza dell'utente. Nella maggior parte dei casi, non ha solo un bel design, ma anche un tema che mira a contribuire all'intera estetica di un sito web.

Insieme al design ben congegnato, alle interazioni e persino alle animazioni, include collegamenti utili e fughe che aiutano gli utenti persi a rimettersi in carreggiata. Tuttavia, l'errore "404" nel web design è come gli hipster nel mondo reale: catturano ancora la nostra attenzione con i loro occhiali stupidi, le camicie "vintage" e le barbe, ma non sono una novità per noi. Per quanto riguarda l'errore "403", questa è un'altra storia. Non è così popolare come i suoi parenti più prossimi, ma si verifica comunque e non una volta in una luna blu.

Solo per lo sfondo, il codice di stato HTTP 403, noto anche come "403 Proibito", significa che non hai l'autorizzazione per accedere alla pagina. I motivi possono variare, a partire da autorizzazioni di cartella non appropriate e termina con un banale requisito delle credenziali di accesso. Tuttavia, la regola pratica impone che qualsiasi errore sia un'opportunità per apportare miglioramenti. Allora perché non trasformare la "pagina 403" fittizia in un luogo che svolgerà lo stesso compito della "pagina 404"?

Consideriamo una dozzina di splendide riprese su questo tipo di errore. Non servono solo come fonte di ispirazione, ma anche come fonte di soluzioni pronte per l'uso.

Tu non puoi passere

“Non passerai” – è stato detto una volta da uno dei più potenti maghi dalla barba bianca del mondo immaginario (spero che tutti i fan di Silente mi perdonino per questo). La frase finale di Gandalf il Grigio (nota Grey, non White) si inserisce perfettamente nel contesto qui. E Noah Rodenbeek, A van Hagen e Jhey lo dimostrano in pratica. I loro frammenti di codice sono impregnati dello spirito e del fascino del romanzo "Lo Hobbit". Mentre i primi due artisti hanno ricreato Gandalf con il suo staff, quest'ultimo ha appena accennato alla scena, ma con successo.

HODOR 403

Se i motivi dei romanzi di fantasia descritti sopra non ti bastano, allora dovresti mettere gli occhi su questo frammento di codice di Yasio. Sorpresa-sorpresa, ha tratto ispirazione dalla serie di romanzi fantasy di George RR Martin. Ha escogitato un lavoro chiamato HODOR 403. Credo che per la maggioranza questa soluzione sia autoesplicativa. Per il resto, consiglio di passare a HBO e vedere di persona perché questo personaggio immaginario si sposa perfettamente con questo tipo di errore.

Uso dell'illustrazione e dell'animazione

Altre soluzioni nel nostro elenco sono state guidate dall'idea che "403" simboleggia un'area proibita in modo che le illustrazioni CSS animate e statiche siano state ricreate proprio con questa idea in mente.

Error 403 – Forbidden di Aimie raffigura una scena classica della fiaba. I pipistrelli animati, la casa delle streghe, gli alberi spogli e la tipografia inquietante che sono presenti nelle ore di oscurità fanno sicuramente il trucco qui.

403 Forbidden di Dylan e 403 Forbidden di Visual Composer hanno un fascino medievale unico. “Close the Gates”: i progetti evocano proprio queste associazioni. Il primo presenta il classico portone di guardia in legno che si chiude davanti ai tuoi occhi; il secondo tratta anch'esso di un cancello di guardia e raffigura un meccanismo con ingranaggi e catene che rivela il segno proibito.

La visione di Arturo Wibawa dell'area proibita è presentata attraverso una meravigliosa illustrazione CSS altamente dettagliata e persino parzialmente animata della famosa "Città Proibita Viola" cinese, alias oggi Museo del Palazzo.

Ti sta guardando

403 Pagina proibita di Mariana è caratterizzato da un personaggio stravagante simile a un mostro che, grazie all'effetto sensibile alla direzione, segue il cursore del mouse ovunque. Ricrea la sensazione di essere guardato tutto il tempo. Imita anche una fantasiosa guardia delle fate che non consente di andare avanti. Il progetto è divertente nonostante l'aspetto "minaccioso" della mascotte.

Sii persistente

Gabriele Corti offre anche una visione di una pagina di errore “403”. Il suo progetto "La persistenza è una chiave" descrive un intero processo di negazione iniziale dell'accesso e di concessione dopo la giusta azione dell'utente. Le azioni giuste implicano l'inserimento di una chiave in un buco della serratura. Tuttavia, puoi sempre utilizzare questo concetto come base per alcune azioni avanzate come l'inserimento di login e password.

Mantenerlo semplice

403 di lsgrrd è un'interpretazione eccessivamente semplificata di una "Pagina 403" che ha certamente il diritto di esistere. È minimo ma va dritto al punto. Ha una certa qualità digitale che trasuda un'atmosfera techno inerente alla sfera dei computer. Il cursore lampeggiante alla fine in tandem con la tipografia digitale produce un effetto fantastico. La soluzione è pulita, elegante e lineare.

Sei nella lista?

Concludiamo la nostra collezione con il progetto realizzato da Cassidy Williams. A differenza della maggioranza qui presentata, questa soluzione è una metafora del mondo reale che illustra la situazione tipica di qualsiasi discoteca popolare. Il buttafuori è il cuore e l'anima di questo frammento di codice. Il personaggio è stato anche parzialmente animato per far sembrare tutto realistico.

Un'altra opportunità per coinvolgere gli utenti

A dire il vero, "403 Error" non è così diffuso come "404 Error", né è così popolare e riconoscibile. Tuttavia, esiste ancora e si verifica di volta in volta. Ciò crea un buco in un sito Web che può interrompere l'intera esperienza dell'utente. Quindi, cogli l'opportunità e trasformala in una parte valida del progetto. Conquisterà senza dubbio alcuni nuovi visitatori e ti impedirà di perdere quelli vecchi.