8 snippets CSS e JS para criar páginas 403 impressionantes

Web designers se acostumaram a transformar erros em oportunidades. Não é nenhum segredo que o código de status HTTP 404 comum, mais comum (e surpreendentemente reconhecível), também conhecido como “Not Found”, foi forçado pelos desenvolvedores a trazer benefícios ao projeto. No passado, assustava os usuários, destruía a impressão geral e era um pesadelo para os desenvolvedores. Todos queriam que ela desaparecesse de uma vez por todas.

Hoje, é um detalhe essencial de um site. O WordPress ainda tem um modelo especificamente atribuído para ele. A “página 404” é um elemento integral da experiência do usuário. Na maioria dos casos, não tem apenas um design bonito, mas também um tema que visa contribuir para toda a estética de um site.

Junto com o design bem pensado, interações e até animações, inclui links úteis e fugas que ajudam os usuários perdidos a voltar aos trilhos. No entanto, o erro “404” em web design é como Hipsters no mundo real: eles ainda chamam nossa atenção com seus óculos idiotas, camisas “vintage” e barbas, mas não são novidade para nós. Quanto ao erro “403”, essa é uma história diferente. Não é tão popular quanto seu parente mais próximo, mas ainda assim, ocorre e nem uma vez em uma lua azul.

Apenas como pano de fundo, o código de status HTTP 403, também conhecido como “403 Proibido”, significa que você não tem permissão para acessar a página. Os motivos podem variar, começando com permissões de pasta inadequadas e terminando com um requisito banal de credenciais de login. No entanto, a regra geral dita que qualquer erro é uma oportunidade para efetuar melhorias. Então, por que não transformar a “página 403” fictícia em um local que cumprirá o mesmo dever da “página 404”?

Vamos considerar uma dúzia de esplêndidas interpretações desse tipo de erro. Eles não servem apenas como fonte de inspiração, mas também como fonte de soluções prontas para uso.

Você não deve passar

“Você não passará” – foi dito uma vez por um dos mais poderosos bruxos de barba branca do mundo ficcional (espero que todos os fãs de Dumbledore me perdoem por isso). A frase final de Gandalf, o Cinzento (observe Cinza, não Branco) se encaixa perfeitamente no contexto aqui. E Noah Rodenbeek, A van Hagen e Jhey mostram isso na prática. Seus trechos de código estão impregnados com o espírito e o charme do romance “O Hobbit”. Enquanto os dois primeiros artistas recriaram Gandalf com sua equipe, o último apenas insinuou a cena, mas com bastante sucesso.

HODOR 403

Se os motivos dos romances fictícios apresentados acima não forem suficientes para você, você deve ficar de olho neste trecho de código do Yasio. Surpresa-surpresa, ele se inspirou na série de romances de fantasia de George RR Martin. Ele criou um trabalho chamado HODOR 403. Acredito que para a maioria esta solução é autoexplicativa. De resto, recomendo mudar para a HBO e ver por si mesmo por que esse personagem fictício combina perfeitamente com esse tipo de erro.

Uso de Ilustração e Animação

Outras soluções da nossa lista foram guiadas pela noção de que “403” simboliza uma área proibida para que as ilustrações CSS animadas e estáticas fossem recriadas com esta ideia em mente.

Erro 403 – Proibido por Aimie retrata uma cena clássica do conto de fadas. Os morcegos animados, a casa da bruxa, as árvores nuas e a tipografia assustadora que aparecem nas horas de escuridão certamente fazem o truque aqui.

403 Forbidden by Dylan e 403 Forbidden by Visual Composer têm um fascínio medieval único. “Close the Gates”: Os projetos evocam nomeadamente estas associações. O primeiro apresenta a clássica porta de guarda de madeira que se fecha diante de seus olhos; o segundo também vai para um tópico de portão de guarda e retrata um mecanismo com engrenagens e correntes que revela o sinal de proibido.

A visão de Arturo Wibawa da área proibida é apresentada através de uma ilustração CSS maravilhosa, altamente detalhada e até parcialmente animada da famosa 'Cidade Proibida Púrpura' chinesa, também conhecida hoje como Museu do Palácio.

Está de olho em você

403 Forbidden Page de Mariana é marcado por um personagem extravagante que, graças ao efeito de reconhecimento de direção, segue o cursor do mouse em todos os lugares. Ele recria a sensação de estar sendo observado o tempo todo. Também imita uma guarda de fadas extravagante que não permite avançar. O projeto parece divertido apesar do visual “ameaçador” do mascote.

Seja persistente

Gabriele Corti também oferece uma visão de uma página de erro “403”. Seu projeto “Persistence is a key” retrata todo um processo de inicialmente negar acesso e concedê-lo após a ação correta do usuário. As ações corretas implicam inserir uma chave em um buraco de fechadura. No entanto, você sempre pode usar esse conceito como base para algumas ações avançadas, como inserir login e senha.

Mantendo a simplicidade

403 por lsgrrd é uma visão simplificada de uma “Página 403” que certamente tem o direito de existir. É mínimo, mas direto ao ponto. Tem uma certa qualidade digital que exala uma vibe techno inerente à esfera do computador. O cursor piscando no final em conjunto com a tipografia digital produz um efeito fantástico. A solução é limpa, elegante e direta.

Você está na lista?

Vamos encerrar nossa coleção com o projeto de Cassidy Williams. Ao contrário da maioria apresentada aqui, esta solução é uma metáfora do mundo real que ilustra a situação típica de qualquer boate popular. O segurança é o coração e a alma deste trecho de código. O personagem foi até parcialmente animado para fazer tudo parecer realista.

Outra oportunidade para envolver os usuários

Verdade seja dita, “403 Error” não é tão difundido quanto “404 Error”, nem é tão popular e reconhecível. No entanto, ainda existe e ocorre vez após vez. Isso cria um buraco em um site que pode quebrar toda a experiência do usuário. Então, aproveite a oportunidade e transforme-a em uma parte válida do projeto. Sem dúvida, conquistará alguns novos visitantes e impedirá que você perca os antigos.