“The requested URL was not found on this server.”
You may remember this from the early days of the internet. It’s a generic message for the Error 404 telling website visitors they have landed on a non-existing page. This message appeared at the top left corner, leaving the rest of the page completely blank.
Nowadays, you won’t find such a rigid, plain 404 error page.
But if the error code number is still the same and the message is also the same, what has changed?
The difference lays in HOW the error is presented.
Web design has evolved tremendously, so providing an excellent user experience (UX) with a simple, logical user interface (UI) and clear, concise copy is the top priority.
In our design kitchen, we’re preparing some delectable projects and we wanted to give you a sneak peek into some of our most interesting 404 page examples. But before we dive into these, here is a quick overview to help you better understand 404 designs.
What Is A 404 Page?
The purpose of a 404 page is to display an Error 404 message and inform visitors that the page they were looking for doesn’t exist at the given URL address.
Reasons that could cause an Error 404 include:
- An accidental typo in the URL address
- A broken link that leads to the error page
- An error in the page’s source code
- A wrong redirection code
- An expired domain
- A (re)moved page
- An unproperly updated page
- Undetected changes in the URL address
The goal of a 404 page – which designers, copywriters and developers shouldn’t lose sight of – is to make visitors feel less uncomfortable about the inconvenience and guide them to other useful and relevant pages on the website.
A 404 page is part of a cohort of error pages you need to have on your website, so don’t forget to include it in your web design checklist and get it ready before you launch the site.
Designing 404 Pages: Good vs. Bad Practice
Now that you know what this page is all about, let’s dive into how to design it to make it compelling and delightful for your website visitors.
Good 404 design practice is to:
- Be informative and keep visitors engaged
- Offer a recovery path with links to other pages
- Include engaging, to-the-point CTA buttons
- Display a distinctive search bar on the spot
- Align the 404 design with the rest of the website
- Align this page with your brand colors, style and voice
- Use a friendly tone of voice in the page copy
- Use custom images – illustration, animations, video, GIFs, etc.
Bad 404 design practice is to:
- Leave visitors without a clue what to do next (besides pushing the “back” button and leaving your website without ever looking back)
- Use only the generic “Page not found” text
- Blame visitors for mistakenly landing on a 404 page
For example, to avoid blaming visitors, instead of saying: “You must have typed in the wrong URL,” the page copy should say something like: “While we try to figure out what went wrong, you are welcome to visit our Home page and continue exploring.”
The tone of voice that you use can have a strong impact on the perception of your brand. A short experiment by Nielsen Norman Group (NN/g) showed just that:
“Different tones of voice on a website have measurable impacts on users’ perceptions of a brand’s friendliness, trustworthiness, and desirability. Casual, conversational, and enthusiastic tones performed best.” – Nielsen Norman Group
Calls to action (CTAs) are also very important. Without a CTA button of any kind – even if it’s a simple anchor text with a link – users will leave the page immediately.
Give users a reason to stay a bit longer by positioning CTAs strategically. This could help you harvest some additional web traffic.
Best 404 Page Examples From Our Current Projects
It’s show time!
Let’s take a look at some inspiring 404 error page designs we’re currently working on.
We’ll walk you through each example and point out its strengths so you can pick up the features that might fit your style and work best for your website.
Example #1: Knopp Biosciences
The 404 page design for Knopp Biosciences aligns with the website color palette and overall brand style.
It offers simple, clear copy and two options – to visit the home page or go back to a previous page. All of this is packed in visually distinctive CTA buttons with clear calls to action and a friendly yet informative tone.
If you take a closer look, you’ll see an image of a man in the background, looking through a microscope. It’s a subtle on-brand addition and could also be a metaphor for saying “we are looking closely into this URL address.”
Knopp Biosciences is a biotechnology company that discovers and develops life-changing medication for patients with asthma and epileptic encephalopathy by performing genetic research and clinical research trials.
With such a narrow niche and a specific target audience, this 404 page easily conveys a clear message and helps visitors find their way to the right information.
Example #2: Geissele Automatics
This 404 page example does a great job in aligning the page theme with a brand, both visually and textually, as Geissele Automatics offers pistols, rifles and other firearms.
The page displays a clever word-play right up front with the “Oh, shoot” phrase.
Knowing the industry this company is in, it makes perfect sense. In this case, it’s an appropriate (and funny) way to say that the page wasn’t found. An image of a missed target makes the design complete.
This 404 page example also offers an on-spot search option to help visitors find what they’re looking for.
As we already mentioned, having people land on a non-existing page doesn’t mean it should be the end of their journey on your website.
On the contrary, you should provide as many options as possible and take the opportunity to grab their attention and encourage them to take action.
Did you notice the newsletter opt-in banner at the bottom of the page? This way, the 404 page offers both a recovery path and a sign-up for future updates, news and special offers. And who doesn’t like special offers delivered to their inbox, right?
The newsletter feature can be especially useful if you are developing an eCommerce website. Adding a sign-up form at the bottom of the page or in the announcement bar at the top can help you grow your email list and expand your reach to more potential customers.
Example #3: Tecnam
In this 404 page example, we are telling a story by combining visuals and copy into one coherent element. Storytelling can be a valuable tool for capturing users’ attention, making a personal connection and providing an immersive customer experience.
The story here includes gloomy weather, a cloudy sky, a misfortunate flight, radars, flight control and a misplaced landing. And this is all relevant and to-the-point because Tecnam offers a wide variety of aircraft for commercial operators, flight schools and special missions.
Besides that, the page provides many recovery options with CTA buttons at the bottom, leading to different website pages.
Plus, there’s a complete navigation menu available in the sidebar, as well as the “Test Flight” button in the upper right corner, which is a call-to-action that spreads through all Tecnam’s pages.
Example #4: Edge2Edge
Here we have an interesting 404 page design that leads with a brand-related custom image.
Edge2Edge is a company that offers various packaging solutions, so the empty box with the company logo on the side fits perfectly into this page.
Edge2Edge has a friendly and casual brand voice, so simply saying “Oops, this looks empty” with the number 404 visible in the background seems like the right solution for this 404 example, doesn’t it?
The page also contains links to other pages and the whole navigation behind a hamburger menu icon.
Example #5: Avalanche Aquatics
The 404 page for Avalanche Aquatics is a great example of using a bold, full-screen image. This photograph has everything we need to make a strong statement – it’s bright, it’s colorful, it’s optimistic and it’s certainly aligned with the business industry and the brand itself.
Avalanche Aquatics is a company that specializes in designing, installing and maintaining water slides, aquatic play structures and custom water park solutions. The whole website uses bright colors and large, playful images, so this 404 page example stays true to the brand.
Cleared of all other links, menus, sidebars, headers and footers, this page offers two CTA buttons with high color contrast to make them accessible and help users find a way out without overwhelming them with too much information.
Example #6: Fresco Products
Here we have another creative solution for a 404 page example.
Fresco Products is all about fresh fruits, vegetables, meat and groceries, so this page showcases the very essence of the brand. The visual representation of the number 404 using fruits and vegetables makes a statement that aligns perfectly with the brand.
Besides a custom illustration, there is a simple, friendly “Oops!” followed by a clear statement about the page status.
Even though there are no CTA buttons displayed within the page content, there’s a complete navigation bar visible in the website header, so visitors can easily choose another page and continue their online shopping journey despite a short break, a.k.a. landing on a page that doesn’t exist.
How To Make Creative 404 Page Designs
Creative 404 page designs can be funny, clever, witty, animated, illustrated, gamified, sleek, stylish, elegant, minimalistic, retro or futuristic, with 3D effects, GIFs, videos and more.
There are endless possibilities.
So how do you know which style to use during your website design process and how do you decide which one would be the best for your business?
It depends on your:
- Business type
- Industry and niche
- Target audience
- Brand style
- Brand color palette
- Brand voice
- Website design style
- UX/UI design
Once you have all these in line, you can get down to designing an original, creative 404 page that will delight your audience while providing them with an easy way out of such an inconvenient situation.
This can help you show your potential customers that you care about their time and that you pay attention to details, which can lead to building a strong bond and a long-term relationship.
Final Thoughts On 404 Page Examples
Error pages are among the most difficult web pages to design. It’s already frustrating for users to hit a non-existing page, so you should try not to intensify the pressure.
Instead, you should always offer a simple and engaging recovery path.
We hope that the 404 page examples we showed you offer useful insights into the best practices for designing a 404 error page for your business website.
The bottom line: To turn this error into an advantage and gain even more website traffic (instead of losing potential clients), be informative, provide additional options and CTAs, use a positive and friendly tone, apply custom, original images, don’t shy away from humor and keep the style on-brand.