40 páginas de erro 404 inteligentes de sites reais

Gerenciar um site de sucesso significa ficar alerta para erros como páginas quebradas ou desempenho lento. No entanto, às vezes há problemas que você simplesmente não pode evitar, e os erros 404 são um deles.

Um erro 404 ocorre quando um usuário solicita uma página em seu site que não existe, gerando uma página de erro 404 solicitando que os usuários retornem ao lugar certo. Não importa quantos recursos você coloque para garantir que seu site nunca fique inativo... sempre há uma chance de que os usuários acabem aqui.

É inconveniente, mas um fato da vida. E a reação dos visitantes quando chegam a uma página inexistente pode variar de “levar com calma” a “perder totalmente a cabeça”.

Embora não haja nada que você possa fazer sobre o último, você pode tornar as coisas um pouco menos dolorosas com uma mensagem 404 de erro criativo. Isso pode fazer maravilhas para fazer os visitantes do seu site abrirem um sorriso em uma situação frustrante.

Para que o design do seu site flua, este post mostrará algumas de nossas páginas de erro de site favoritas. Espero que você consiga tirar algumas ideias para enfeitar sua própria mensagem 404.

O que é um erro 404?

Um erro 404 é um código de mensagem de erro HTTP padrão que significa que o site que você estava tentando acessar não pôde ser encontrado no servidor. É um erro do lado do cliente, o que significa que a página da Web foi removida ou movida e o URL não foi alterado de acordo ou a pessoa acabou de digitar o URL incorretamente.

Na maioria das vezes, você pode configurar seu servidor para criar uma página de erro 404 personalizada. (Se você é cliente da HubSpot, clique aqui para saber como personalizar sua página 404 na HubSpot.)

Algumas páginas de erro 404 personalizadas incluem uma imagem principal, uma descrição espirituosa, um mapa do site, um formulário de pesquisa ou informações básicas de contato.

Os melhores exemplos de páginas da Web 404

Ao longo dos anos, os sites encontraram maneiras diferentes de informar os visitantes sobre um erro 404 e canalizá-los de volta para o lugar certo, alguns de forma simples, alguns de forma criativa e alguns hilários. Vamos começar examinando algumas páginas 404 criativas e, em seguida, confira alguns exemplos engraçados que certamente encantarão qualquer um que os encontrar.

Página não encontrada: páginas de erro 404 do criativo

1. Pipoca

Enquanto uma página 404 pode facilmente se destacar de um site, a página de erro do Pipcorn se alinha perfeitamente com o restante da marca do site. Há um belo plano de fundo animado, um prompt de texto amigável direcionando os visitantes a pesquisar no site (completo com um trocadilho inteligente) e um pedaço de pipoca usado como o “0” em “404”.

2. Spotify

O gigante de streaming de música Spotify cobriu suas bases com uma página 404 inteligente. Com um trocadilho espirituoso com o álbum de Kanye West “808s and Heartbreak” e uma animação de gravação, o site entretém brevemente e depois envia os visitantes de volta à página de onde vieram.

3. Genialmente

Uma maneira simples de aliviar a tensão em sua página 404 é adicionar um rápido “Oops!” mensagem — isso ajuda seu site a se sentir mais apresentável à medida que você orienta os usuários de volta ao lugar certo. No caso do site da Genially, a página também inclui uma ilustração bacana combinada com uma cópia lúdica.

4. Adobe

Como seria de esperar, a página de erro 404 da Adobe é útil e visualmente agradável. Ele lista links populares que os visitantes podem querer ao lado de algumas obras de arte digitais legais que servem como uma metáfora visual para uma página quebrada ou perdida. Honestamente, os sites deveriam usar metáforas visuais com mais frequência.

5. Clorox

A página 404 dos produtos de limpeza Clorox alterna entre três fotos alegres para sinalizar aos visitantes que eles cometeram um erro. É um uso inteligente da marca para adicionar um breve momento de prazer enquanto ajuda os usuários perdidos.

6. Coletivo Duma

Outras vezes, você pode não precisar de uma sinopse espirituosa – apenas diga aos visitantes que não há página no endereço e deixe-os seguir em frente. A agência de consultoria de entretenimento Duma Collective faz exatamente isso com sua página de erro, embora seja complementada por uma imagem de fundo para um toque menor.

7. Câmara fria

Falando em elegância, a marca de autocuidado Chillhouse fez um trabalho extra para redirecionar seus visitantes com estilo. A página 404 é marcada de forma adequada e até leva os visitantes a uma pequena jornada através de algumas imagens estáticas antes de voltarem para a página inicial.

8. Pouco

Se você inserir um link incorreto do Bitly, você será direcionado para a página 404 do Bitly. Assumimos que isso acontece bastante, e é por isso que a página 404 vai direto ao ponto. Ele explica o que pode ter dado errado e solicita que os usuários visitem a página inicial do Bitly se for isso que eles estão procurando.

9. Ikea

A página 404 da Ikea é igualmente minimalista, mas ainda consegue inserir uma marca inteligente nela. Este exemplo mostra que suas páginas de erro não precisam ser elaboradas para passar o ponto, mas também não há nada de errado em injetar um pouco de diversão.

10. Moxie Design Co.

Claro, “explodir a Internet” pode ser um pouco hiperbólico, mas diz aos visitantes que a Moxie Design Co. não se leva muito a sério com pequenos deslizes como este. Além disso, uma barra de pesquisa é convenientemente colocada na parte inferior para enviar você em seu caminho.

11. McKissack & McKissack

Ah, o truque clássico “perdemos a página”. Novamente, uma maneira fácil de apresentar um 404 sem alienar seu público. Se você é uma agência como McKissack & McKissack que gerencia muitas interações com clientes, uma cópia clara e concisa é essencial para todas as páginas do seu site, incluindo páginas de erro.

12. Truques de CSS

Já rasgou a embalagem de um site para ver o que está por baixo? Esse é o conceito que o CSS Tricks estava buscando em sua página de erro 404. Isso é espirituoso e lembra o que é o site: uso inteligente do estilo da página.

13. Bons e velhos jogos

Para outros sites, você desembrulha o front-end e há... apenas o vasto vazio de espaço. Esta página é uma referência inteligente ao GOG Galaxy, que é o cliente de videogame nativo da Good Old Games. Felizmente, um pequeno personagem de videogame está lá para dar aos visitantes um lugar para relatar um erro, se quiserem.

14. Canva

Para algo um pouco diferente, confira a página 404 do Canva. Inclui não apenas uma mensagem de erro, mas um quebra-cabeça bacana que os visitantes podem jogar para um breve entretenimento. Não há mal nenhum em deixar seus visitantes relaxarem por alguns minutos, certo?

15. Innotech

Semelhante à abordagem do Canva, o Innotech apresenta um jogo Pong-esque em sua página 404 para fornecer um breve entretenimento. É provável que você se lembre de um site como este. Além disso, o desvio divertido complementa um site realmente impressionante - sério, quando você terminar de jogar, vá para a página inicial e absorva tudo.

16. Miríade

A agência de vídeo Myriad optou por um design peculiar de 404 páginas na marca que imita as clássicas barras de cores SMPTE que aparecem em fitas e TVs antigas. É um retrocesso engraçado para tecnologias mais antigas, ao mesmo tempo em que representa o problema mais moderno de uma página da web inexistente.

17. Kon Mari

Conhecida por seus métodos e marca populares de limpeza e organização, Marie Kondo trouxe uma sensação semelhante à página 404 de seu site. A cópia, de forma breve e bem-humorada, remete à sua filosofia de arrumação – um detalhe pequeno, mas bem-marcado, que os fãs reconhecerão.

18. MarcaMultidão

A ilustração nesta página de erro não é apenas detalhada e envolvente – a cópia também é inteligente. Adoramos a referência à música Semisonic “Closing Time”: “Você pode clicar em qualquer outro lugar, mas não pode clicar aqui”.

19. Produções Hot Dot

A página de erro do Hot Dot permanece fiel ao seu slogan, “a interseção de novas tecnologias e design”. A página é animada por centenas de pequenos pontos que mudam de direção em resposta a onde você move o cursor. É fascinante e uma ótima vitrine dos recursos de design da agência.

20. Casaco Laranja

Se você vai dar uma mensagem de erro, por que não entreter o usuário por alguns segundos enquanto você o ajuda? Após uma saudação amigável, a OrangeCoat oferece um fluxograma que realmente ajuda os usuários a descobrir por que chegaram a uma página de erro em primeiro lugar.

21. Ervin & Smith

Esta página 404 faz mais do que redirecionar os usuários de volta às páginas ativas. Em vez disso, a página 404 da Ervin & Smith convida você a rolar para baixo e aprender por que você precisa de uma agência de marketing digital e por que escolher a Ervin & Smith em particular, com um formulário de contato. Fiel à sua missão, esta agência mostra que qualquer página pode ser uma oportunidade de conversão.

22. Estúdios DayCloud

… ou, seu 404 pode ser apenas um lugar para perder tempo por um minuto, como pode ser visto no site do DayCloud Studios. Mover o cursor pela tela revela uma mensagem 404 iluminada por lasers disparados dos olhos de um gato. Porque por que não?

23. Espaço livre

Outro exemplo de um site que incorpora inteligentemente suas mensagens de marca em uma página 404 – o aplicativo de meditação guiada Headspace se esforça para acalmar os usuários, nos incentivando a respirar fundo e retornar ao site principal.

24. Padaria Wildwood

Alguns sites até agora integraram uma cópia inteligente da marca em suas páginas, enquanto outros hospedavam jogos online completos nas suas. Mas, não há nada de errado com um breve empurrão de volta na direção certa. O site requintado da Wildwood Bakery mantém as coisas curtas e doces (literalmente).

Página não encontrada: páginas de erro 404 engraçadas

25. Astuto

A página 404 da agência de design Astuteo é um equilíbrio perfeito entre visuais elegantes, humor e utilidade. O layout mínimo fornece aos usuários as informações de que precisam ao lado de outra metáfora visual divertida, um navio de carga afundando e uma figura em fuga.

26. LEGO

Há poucas palavras necessárias na página de erro 404 da LEGO – a expressão do personagem deixa tudo claro. Além disso, os fãs da franquia de filmes LEGO vão gostar da referência divertida na cópia.

27. Magno

Nesta mensagem de erro engraçada, Magnt zomba do fato de que, sim, eles podem ter quebrado alguma coisa – ou, você simplesmente não pode digitar. O visual serve como uma maneira rápida de ilustrar rapidamente seu ponto de vista.

28. Localizador de Ícones

A página de erro do IconFinder é simples, mas agradável. O mascote da empresa vestindo uma túnica e parecendo cansado é um aceno relacionável aos visitantes perdidos. Não se preocupe, pois o site lista alguns de seus links para visitar abaixo.

29. Bons sonhos

Aparentemente, a equipe da empresa de auxílio ao sono Sweet Dreams levou muitos de seus produtos de acordo com a página 404 do site. Esta página não é apenas bem-humorada - ela também combina bem com o restante da estética e mensagens de front-end do site para uma sensação coesa.

30. GitHub

A linha “Estes não são os droids que você está procurando” refere-se ao truque mental Jedi de Obi-Wan Kenobi em Stormtroopers em Star Wars Episódio IV , e se tornou uma frase bem conhecida usada para dizer a alguém que está perseguindo o errado curso de ação. O GitHub reproduz essa famosa linha em sua mensagem de erro 404.

31. Patagônia

A página 404 personalizada da Patagonia captura perfeitamente a vibração da marca, completa com um vídeo bumerangue de um girador de frisbee, um trocadilho inteligente que combina “404” e “aloha” e links para suas páginas de produtos. É uma maneira amigável e divertida de cumprimentar os visitantes que acabaram no lugar errado.

32. Cloud Sigma

Confira: Cloud Sigma está nos mostrando algumas ações dos bastidores. A página de erro 404 deles finge ser uma “página inicial do desenvolvedor júnior” – aquele desenvolvedor júnior sendo, bem, um gato.

33. Teatros AMC

Você pode ter ido a um cinema da AMC antes, mas espero que nunca tenha visto a página 404 do site deles. O site usa uma frase rápida, engraçada e relevante antes de enviá-lo de volta ao lugar certo.

34. Bruno

Não é coincidência que as agências criativas sejam ótimas em criar páginas 404 legais. Aqui está outro dos criativos de Bruno que interpreta o clássico de comédia cult de 2000 Dude, Where's My Car? Não, não tem nada a ver com a empresa ou site, mas com certeza vai dar risada.

35. NPR

A princípio, a página de erro da NPR não parece nada de especial. Mas continue lendo e você verá como eles se conectam habilmente a algumas de suas grandes histórias sobre pessoas, lugares e coisas perdidas, como um artigo sobre Amelia Earhart e outro sobre Waldo. Isso pode fazer com que os usuários perdidos se sintam um pouco menos sozinhos.

36. Médio

O Medium adota uma abordagem semelhante à página 404 da NPR, recomendando artigos sobre se perder e perder coisas. Confira esses artigos se você tiver tempo – eles são leituras muito boas.

37. HomeStarRunner

HomeStarRunner.com, lar de uma série de desenhos animados em Flash, teve uma série de hilárias páginas de erro 404 ao longo dos anos. O mais recente apresenta personagens da série de desenhos animados em uma cena que poderia ter saído direto de um de seus episódios. Se você ligar o som ao carregar a página, você ouvirá o personagem Strong Bad – conhecido por gritar frases em voz alta – dizendo “404'd!”

38. Blizzard Entertainment

Aqui está uma ideia simples que acaba parecendo boa: a página 404 da Blizzard Entertainment apresenta um personagem animado perdido em uma nevasca real e um pouco de humor que os fãs de World of Warcraft irão apreciar.

39. Olá Grande Ideia

Uma rápida viagem pelo site de especialistas em marketing e mídia social da Hello Big Idea lhe dirá o que você precisa saber sobre seu estilo de texto ousado e contundente. E, claro, sua página de erro 404 não é exceção.

40. HubSpot

Acontece conosco também! Esta é a mensagem que colocamos para informar aos visitantes do nosso site que existem alguns problemas no site. Nosso objetivo era permanecer fiel à voz da marca da HubSpot sendo o mais amável, empático e prestativo possível.

Transforme uma página de erro 404 em um momento de prazer

Ninguém quer pousar em uma página 404 – eles são irritantes e inesperados. No entanto, você não pode realmente evitá-los, por isso é sempre uma boa ideia ter uma página 404 para recorrer ao seu site.

E, do ponto de vista da experiência do usuário, sua página 404 deve ser uma pequena lombada, não uma parede de tijolos. O design certo pode ser a diferença entre uma rejeição frustrada e uma possível conversão, então por que não torná-lo divertido?

Nota do editor: Este post foi publicado originalmente em dezembro de 2015 e foi atualizado para maior abrangência.