Every page on the Internet has its own unique address, which leads to it. If a page has been deleted, moved, or there is a mistake in its URL, users will be forwarded to a 404 page. A 404 error means that a server couldn’t find any data for the user’s request, so a site can’t provide a reply.
It’s essential to think out and properly set a 404 page, as it can be the last thing a user will see on your website. There are few tactics you can use for that:
- For online stores, the design of a 404 page should be inspired by their corporate style and include the offer of different products. This way, users will be able to easily return to the necessary page or check a product they haven’t seen yet
- There is also an interesting option for those who love a creative approach. You can choose an unusual style for an error page based on a joke, a provocation, a mini-game etc.
- In other cases, just use your corporate style and allow users to continue browsing your web resource from an error page
So we are done with the theory and it’s time to check 50 great designs of a 404 page.
- 1. Blizzard Entertainment
- 2. JACK DANIEL
- 4. Github
- 5. Geekbrains
- 6. Adidas
- 7. Emailcenter
- 8. Marvel
- 9. Crello
- 10. Sketch
- 11. Red Bull
- 12. Cayenne
- 13. Aviasales
- 14. LEGO
- 15. Studiofables
- 16. ITcluster
- 17. Pixar
- 18. 20th Century Fox
- 19. Planeta Kino
- 20. Startup Depot
- 21. MentorMate
- 22. Specialized
- 23. 9GAG
- 24. Orangecoat
- 25. Teehan+Lax
- 26. Hakim.se
- 27. CSS-tricks
- 28. The New Yorker
- 29. Dribbble
- 30. SumatoSoft
- 31. Skipio
- 32. CoolFarm
- 33. Squarespace
- 34. DustyMiller.ca
- 35. Mameilleurecuite
- 36. Agens
- 37. Rachel the great
- 38. Fork cms
- 39. Daniel Karcher
- 40. Figma
Our TOP starts with a well-known American company Blizzard Entertainment. Blizzard develops games and has designed such famous products as World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. Their 404 page looks like a crushed screen displaying a broken site.
A world-renowned spirits brand has also designed a special 404 page. A user sees an empty road and the text saying “Looks like you’re lost, friend”. The page is inspired by the corporate style. You can easily return to the necessary page using the navigation.
This is a great example of a jokey design of a 404 page used on Tproger’s website (a project dedicated to programming and everything related). In addition to the status of an error, you can watch a funny video that will definitely cheer you up after an unsuccessful search.
It’s a cool example of how a corporate style can be used to design a 404 page. Github has taken its logo (octocat) and stylized it referring to Star Wars.
Geekbrains is a well-known Russian portal about online education. When users get to a 404 page, they can watch one of 3 thematic videos. Also, they can submit a message about the error and return to the homepage.
In the design of an error page, Adidas has decided to adhere to its corporate style. We can see a great example of minimalism in web design as well as “But never stop trying” text that motivates us to be persistent.
This page is probably one of the most famous 404 pages. It got Emailcenter huge traffic and made this company really popular. Done in a humorous style, this error page offers you to fire somebody from the development team to punish him. A user can also forgive the developers and return to the website.
On the website of Marvel, a famous American comics publisher, you can see a great example of how a 404 error can be presented. There are several variants of this page, and each of them is done in the style of a Marvel’s comics. In addition to the appealing design, Marvel also thought out the convenient navigation to continue the work with the site.
Crello is a service for online editing of images with the nice and funny design of a 404 page. They say the page was stolen by pigeons. This is probably one of the most creative explanations of an error.
For a 404 page, Sketch has decided to use its corporate style. It perfectly shows how to keep a corporate identity and create easy navigation.
Red Bull, a well-known manufacturer of energy drinks, stays true to its style. In case an error occurs, users are taken to a page with a spectacular video and a piece of text saying “Well, this is embarrassing”.
Cayenne, an Italian design studio, has come up with an interesting version of a 404 page. It’s created as a dialog between a user and a moderator. The moderator offers some solutions to the user’s issue.
Aviasales flight search service has decided to design a 404 page in its corporate style. An additional hook is planes moving around the page you will see after some time.
Designing a 404 page, LEGO, one of the most renowned manufacturers of toys in the world, has also chosen to adhere to its corporate – a little bit jokey – style.
To create its 404 page, a French design studio Studiofables has used its usual and unique approach. It offers users to calm down, watch a video about the three little pigs, and visit the homepage of the resource when they are ready.
Lviv IT Cluster has also opted for a creative approach. When actions of users result in an error, they see an original 404 page and a home button to return to the main page.
For a 404 page, Pixar Animation Studios has kept its traditional design. In case of an error, users will see Sadness character who asks them not to cry and explains that it’s just a 404 error
20th Century Fox film studio has really tried its best to create a 404 page. Users are randomly offered one of the designs with a video and a unique piece of text related to a certain movie.
Planeta Kino, a Ukrainian network of cinemas, hasn’t only stuck to its style but also decided to use a well-known phrase from Apollo 13. In addition, there is a convenient button to return to the homepage.
Lviv business incubator Startup Depot is the first on our list to use a meme with Vincent Vega (the character from “Pulp Fiction”) for its 404 page design. This scene from the movie is very often used to show that something is unclear, so it’s a really great choice here.
MentorMate has decided to use a simple and well-tried approach – adding the code of an error to a nice picture. In this case, it is a cup of coffee and the numbers matching the colors of a site.
Specialized sells bicycles and the related equipment, so such design of a 404 page suits it best.
As we have already mentioned, Startup Depot isn’t the only site that has opted for a meme with Vincent Vega. 9GAG online platform also used this scene from the movie on its error page. Taking into account that this site has a bulk of humorous content, such solution is just perfect.
Orangecoat Web Design has chosen a really distinctive look for its 404 page. When users get to the 404 page, they see a diagram with step by step answers to the majority of frequently asked questions.
If you get to a 404 page of Teehan+Lax creative agency, there are several variants of a 404 error you can see. Each of them has a different background and a piece of text saying “Something went wrong. Very, very, very wrong.”
The fans of Howard Phillips Lovecraft’s creativity will definitely love the 404 page of Hakim.se. This is a website of Hakim El Hattab, a Swedish designer and developer. Once users get to the error page, dozens of horrifying eyes start looking at them and users are offered to return to the main page.
On CSS-tricks’ portal, a 404 page is created in a minimalist thematic design. When a user lands on this page, they see a white background with a hole which reveals the code of a web page. The only disadvantage of this design is that is doesn’t allow users to continue the work with the site.
The New Yorker is a famous American weekly magazine published since 1925. Its 404 page is designed in a corporate style and has the convenient navigation.
Dribbble is a renowned community of designers which also has a great 404 page. In this case, visitors see a stylish background picture and the explanation that the content they are looking for doesn’t exist.
Designing a 404 page, Sumatosoft’s team decided to rely on their imagination and sense of humor. A UFO that steals a cow…that’s the best option for a 404 page, isn’t it?
A team of Skipio email marketing service has created a really nice design for its 404 page. It shows a traveler who has got lost and cannot find what he is looking for. Yet it is said that he can “look around and discover the other treasures” of this tool.
CoolFarm biotech company has found a great solution for its 404 page. When users get to an error page, they can play Space Invaders, which is absolutely an unfading and beloved classic. This is an awesome way to keep visitors on the site.
A 404 page on the website of Squarespace platform is simple and elegant. You see a darkened photo of a command center, a text, and a large button to return to the main page.
This is a great example that shows that not only large companies should care about the design of their 404 page. This position in our TOP is a portfolio of the developer, Dustin Miller. The page matches the style of the entire site and looks really eye-catching.
This website on our list has also decided to please its users with an original 404 page. In case a user’s request fails, they get a chance to play Pac-Man designed in the style of the site.
Agens has also put efforts into the creative design of its 404 page. Website visitors will see a text saying “Looks like you got lost in space” and the image of an astronaut on an asteroid.
Here is a nice example of a 404 page by Rachel Nabors. Rachel the Great is a series of uniquely designed comics, so this picture is just perfect.
The design of Fork CMS’s official site is done in a marine theme, so obviously, the company has decided to stick to its style. On the 404 page, users will be met by Neptune and the inscription “This page was lost at sea”.
The website www.danielkarcher.com is one of the most creative positions in our TOP. Although the very resource is done in quite an unusual style, the idea of its 404 pages is also fresh. On this page, users can make a quick journey on the subway and follow the actions of a photographer girl. The very error page is Flash-based.
A 404 page of Figma prototyping tool was done with an interesting approach and has a great idea. Using dots (like in the screenshot above), you can change the outlines of “404”. Such style perfectly highlights the task of this service.
In this article, you got a chance to learn about 40 great designs of a 404 page. A part of this TOP strictly adhered to their corporate style and made classic error pages. The others, on the contrary, weren’t afraid to risk, joke, and experiment with their style. We hope you have found this article useful and interesting. If you still haven’t created your 404 pages, do it as soon as possible. You can choose different designs based on the type of your site, your audience, and your personal preferences. And, if you need, you can always get inspired with the pages in our TOP. Stay with us! We have a lot of interesting waiting ahead!