Uma página 404 – Práticas recomendadas e inspiração de design
Se você ainda não estiver familiarizado com o termo, uma página de erro 404 é uma página que tem a função de notificar o usuário que o link que ele tentou acessar está quebrado ou não existe. Escusado será dizer que obter um resultado de página de erro 404 é irritante para todos os usuários que o experimentam.
Para tornar essa ocorrência um pouco mais suportável para os usuários, muitos designers de páginas da Web se encarregaram de personalizar sua página de erro 404 para que ela pareça mais "divertida" e única. Eles geralmente fazem isso incorporando humor, inteligência e um design que contém originalidade criativa em sua página.
Se você também tem um plano para criar sua própria página 404 dessa maneira, ver alguns exemplos de páginas 404 personalizadas já feitas pode servir como uma boa inspiração para você. Assim, decidimos compartilhar uma lista de exemplos de páginas de erro 404 espirituosas e exclusivas que podem ajudá-lo durante sua criação.
Como uma página de erro 404 deve se parecer
Primeiro, mencionaremos algumas características que, em nossa opinião, uma página de erro 404 personalizada deve ter. Algumas dessas estratégias foram aplicadas por muitos sites influentes.
1 Deve combinar com o estilo geral do seu site
Se você nos perguntar, isso deve ser óbvio. Existem tantos temas do WordPress que são feitos especificamente para se adequar à vibração de um determinado tipo de negócio ou à natureza dos serviços ou produtos que o site está promovendo. Portanto, é natural que você ajuste o design da página 404 ao modelo do site e ao tema geral do site. Por exemplo, se você é um site de restaurante especializado em refeições requintadas, seria bom incorporar uma imagem de uma refeição elegante, bem como seu nome em sua página de erro 404. Dessa forma, seus visitantes, pelo menos, não esquecerão que você serve boa comida, apesar do transtorno com que se deparam no momento atual. Graças a muitos sites de ações gratuitas e vários recursos com ilustrações vetoriaisvocê pode melhorar a aparência da sua página de erro 404 de acordo com suas necessidades.
2 Deve conter algum tipo de pedido de desculpas
Ter um pop-up de página de erro 404 não é apenas irritante, também é algo que não deveria ter acontecido em primeiro lugar. É por isso que é sempre uma boa ideia incluir algum tipo de pedido de desculpas em sua página de erro, onde você enfatiza que sente muito pelo problema do usuário de alguma forma.
3 Uma página de erro 404 deve incluir uma barra de pesquisa
Isso também pode ser uma boa prática. Se você adicionar uma barra de pesquisa à sua página de erro 404, ela poderá fazer com que os usuários permaneçam em seu site para continuar explorando.
4 Considere adicionar um link
Assim como uma barra de pesquisa, um link útil pode fazer mais bem do que mal. Pode ser qualquer link que você considere importante, como seu blog, página de contato ou até mesmo sua página inicial. Além disso, adicionar link no WordPress é super fácil.
5 Ilumine-se com humor
Já mencionamos o humor anteriormente. Seja espirituoso, autodestrutivo ou simplesmente estranho, usar o humor em situações como essas pode realmente ajudar bastante a aliviar o clima ou o visitante. Quem sabe, sua abordagem descontraída e cômica pode até acabar com eles tendo uma impressão mais positiva da sua marca em geral.
Em suma, se você tem uma boa ideia para uma linha espirituosa que pode ir para sua página de erro 404, não hesite em adicioná-la, pois a atitude humorística é bem-vinda por muitos. E mesmo que seus visitantes não achem engraçado, é sempre melhor manter as coisas despreocupadas do que ser como uma máquina sobre isso.
Você também pode definir um redirecionamento para sua página de erro 404. Por exemplo, se ocorrer um erro, sua página pode ser redirecionada para sua página inicial. Esta, no entanto, não é a melhor solução, porque se houver algo errado com sua página inicial, você estará de volta à estaca zero.
Mas antes de mergulhar nos melhores exemplos que preparamos, reserve um tempo para refrescar sua memória sobre a construção de uma página 404 no WordPress:
Nossas escolhas de inspiração de página de erro 404
Agora que você sabe quais elementos podem fazer uma boa página de erro 404, também forneceremos alguns exemplos de páginas de erro 404 que chamaram nossa atenção com seu senso de humor e o impacto geral de seu design.
Felizmente, a aparência dessa página de erro 404 não retrata como você reagirá quando se deparar com esse problema. A Pixar decidiu adicionar um personagem chamado Tristeza de uma foto popular de 2015, Divertida Mente, com uma mensagem que o aconselha a não levar coisas como essas para o lado pessoal. Não poderíamos concordar mais.
Depois de lançar uma nova identidade e design de marca, o Mailchimp também mudou a aparência de sua página de erro. O site especializado em serviços de newsletter por e-mail decidiu incluir uma imagem não convencional de um burro cuja cabeça está enterrada em um buraco, indicando que ele vasculhou todas as fendas do site e simplesmente não há página para ser encontrada. Bem, é evidente que o burro realmente tentou o seu melhor para encontrar essa página para você, então não há motivo para ficar muito frustrado com isso.
Este site profissional baseado em fotografia é especializado em capturar retratos de bebês recém-nascidos, casamentos e outros eventos relacionados à família. Então é justo que eles tenham decidido incluir uma foto de uma criança borrada fazendo birra em sua página 404. Embora seja evidente pela foto que a criança acabou comendo um bolo, o texto sugere sutilmente que a página que você estava procurando também foi comida. Mas como você pode ficar com raiva de uma criança chorando? Foi só curiosidade e acabou devorando sua página por acidente!
O design de 404 páginas da Blizzard Entertainment tem um toque especial. Além de uma janela quebrada e um menu distorcido (que ainda funciona, aliás), há uma mensagem que culpa o usuário pelo erro. Eles foram um pouco ousados em sua abordagem porque esta é definitivamente uma mudança das mensagens de desculpas usuais que tendem a aparecer em páginas de erro. No entanto, ainda é único e refrescante, por isso é provável que pelo menos algumas pessoas se divirtam com essa inesperada virada de mesa.
Ver um antagonista de Angry Birds completamente derrotado na tela do site oficial deste jogo só porque a página não pode ser encontrada pode realmente ter um efeito reconfortante em uma pessoa que a vê. Afinal, não é outro senão um Bad Piggy que pode se relacionar com o seu infortúnio.
A Flywheel é uma empresa especializada em ajudar desenvolvedores e designers a construir sites WordPress. Sua página 404 é simplista por natureza, mas é composta por alguns elementos atraentes de design da web. Existe um “isso realmente é uma merda!" mensagem que na verdade é um trocadilho inteligente, considerando que um número zero é na verdade um buraco negro animado que sugou o que parece ser um laptop com uma página quebrada.
Todo bom designer de UX reconhece que enquanto você se concentra em resolver os maiores problemas que um usuário tem primeiro, você precisa acomodar quando eles saem do script também. É por isso que o pessoal humilde do carwow criou uma página 404 incrível com um jogo de corrida de carros para quando as páginas não carregam como planejado.
O humor britânico é frequentemente caracterizado por não se levar muito a sério. Os próprios donos da empresa são britânicos, então, nessa situação, eles estão realmente dando um soco em si mesmos. Eles fizeram isso desenhando dois personagens elegantes que estão profundamente imersos em sua conversa sobre uma página que não está funcionando. O tempo todo eles estão dando conselhos ao usuário sobre o que eles devem fazer em seguida usando frases britânicas que soam francamente cômicas neste contexto.
Pessoalmente, perdemos quando eles chamaram a página de ‘quatrocentésimas e quarta mensagem de erro’ e quando comentaram que ‘seu web-mordomo corrigirá seu erro em um doddle’.
O Slack é uma plataforma colaborativa que ajuda empresas e empresas a trabalharem juntas e avançarem. Mas se você chegar à página 404 deles, considere-se realmente perdido. Sua página de erro apresenta uma bela animação que também se move se você arrastar o ponteiro do mouse pela tela. Mesmo que seja visualmente atraente, este é um exemplo de uma página que não tem nenhuma correlação com o conteúdo do site, mas ainda faz bem o seu trabalho.
Inspire-se e prepare-se para experimentar
Além dos exemplos de páginas 404 cuidadosamente criados e usados por marcas famosas, existem muitos outros ótimos modelos aos quais você pode recorrer. Desenhados por artistas experientes com atenção a cada detalhe, estes são os nossos favoritos.
Projetado por Lena Zaytseva, este modelo é um ótimo exemplo de layout de página de erro 404 interativo e não típico. Mínimo, mas eficaz, combina a cor branca e amarela com textos animados. As palavras com o nome do site são separadas por “404”. Simultaneamente, sua mensagem principal junto com o botão de retorno aparece na parte inferior da página. Esta solução é ótima para sites ousados e nichos criativos.
Embora esta página 404 possa parecer básica no início, é um bom exemplo de como a simplicidade pode ser eficaz. Com tonalidade de cor azul dominante e ilustração 3D inteligente, mostra que 404 páginas originais e não tradicionais podem fazer uma diferença real. Se você deseja que sua apresentação online se destaque, essa pode ser a opção certa.
As páginas de erro 404 geralmente nos fazem sentir como se estivéssemos perdidos no espaço. Com base nessa metáfora, este exemplo de página 404 é uma maneira poderosa de redirecionar os visitantes do site para a página inicial. Gráficos encantadores e elementos planos são o foco principal deste modelo. Caso você queira uma página 404 que seja uma pequena obra de arte e possa funcionar perfeitamente para qualquer tipo de site criativo, não hesite em experimentar este layout.
Desenhado por Caroline Lee, este layout arrojado de 404 páginas é uma ótima opção para quem prefere o estilo retrô e multicolorido. A vibração deste modelo nos lembra os videogames pioneiros e uma boa e velha era da televisão. A mistura de cores brilhantes como rosa, amarelo, azul e verde e os diferentes tamanhos de formas se encaixam em qualquer design ou estúdio de jogos.
Se houver uma palavra que possa descrever esse layout, seria amarelo! Inspirado na estética da arte pop americana, este exemplo 404 combina dois tons de amarelo, pontos e listras icônicos. SE você quiser trazer alguma arte para este tipo de página, este é um caminho a percorrer.
Simplicidade às vezes tanto a oferecer. Este modelo é a melhor prova. Do lado esquerdo, há uma ilustração de um violonista com um violão com a corda quebrada. O forte simbolismo desta ilustração se encaixa perfeitamente no contexto da página de erro 404. Por outro lado, há uma mensagem simples com o botão Voltar.
Olhar para as páginas de erro 404 já existentes pode ser divertido, mas fazer uma pode ser uma história totalmente diferente. Requer inteligência, criatividade e um pouco de mente aberta também para funcionar. No entanto, esperamos que algumas de nossas sugestões, pelo menos, ajudem você a ter uma boa vantagem.