How to Design a Useful 404 Page: 9 Examples of It Done Right

With such a competitive online landscape, it’s important to keep users engaged even when they land on an error webpage. This means taking advantage of your URL structure to promote your brand and add to your business.

You may think that a 404 page is merely a technical page. However, it’s also an opportunity to show off your brand’s personality and creativity. An original 404 page not only can soothe frustrated customers and improve your bounce rates (how many customers leave your site), but it can also show who you are as a company.

This article will cover:

• What is a 404 page?
• Why are 404 pages important?
• 6 elements to include on your 404 page
• 9 examples of great 404 pages
• Create a great 404 page for your business

What is a 404 page?

A hypertext transfer protocol (HTTP) 404 page is a landing page that a user ends up on when a server can’t find their requested webpage. This can happen when a user types an address in a search bar or clicks on a link.

There are a number of reasons why a user might end up on a 404 page. These include:

• The page doesn’t exist. A developer might be in the middle of updating your website, and they haven’t created the requested page yet. It’s also possible that a developer has made a mistake and accidentally deleted the page.
• The page may have been moved to a different URL slug. A URL slug might be changed to a new keyword for search engine optimization (SEO) purposes.
• The user made an error when typing the URL. Any tiny mistake can confuse a server. Even an extra space added to a URL will send a user straight to a 404 page.
• There might be a server issue. The internet connection could be interrupted, or the website might be down at a particular time.
• The actual domain name has been deleted or moved to a new domain name server (DNS). When a website is moved to a new DNS, it takes some time for all the information and links to be updated to the new server.

Why are 404 pages important?

Being redirected to a 404 page isn’t a user’s intent. It can be an irritating experience. If users can’t find the content, products, or services they’re looking for, they might get frustrated and leave your site before you get a chance to sell to them.

These 404 errors can also indirectly affect your ranking on the search engine results pages (SERPs). A site that has a lot of broken links that lead to a 404 page causes a bad user experience (UX), and Google takes into account user engagement when deciding a website’s ranking.

However, a 404 page doesn’t have to be a dead end. If your error page design can add to the user experience in a constructive way, it can keep visitors on your site and keep your SERPs ranking intact. Good 404 pages intrigue, entertain, and guide a user to where they need to go. An engaging 404 page can turn a negative customer experience into a positive one while promoting your brand.

Browse Project Catalog for more web design services.

6 elements to include on your 404 page

A quality 404 page needs to appeal to users with a wide array of needs and interests. Some will be looking to buy from you right now, while others may want to learn more about your company or find answers to product issues.

No matter what a consumer’s needs are, your 404 page should provide a path to meet them while also mitigating any frustrations your visitors might be experiencing. In the next few sections, we’ll touch on a few key elements a 404 page should have to appease agitated users and increase your odds of making conversions.

Simple 404 error message

You can use whatever you want for your 404 error message. Use it to appeal to your intended consumers. Rather than choosing a message that’s too generic, like “the localhost page cannot be found” or “page not found,” choose one that’s simple, empathetic, or funny.

Error messages that start with words like “oops” or “sorry” can be endearing to consumers. You can also use lines from movies, references to popular culture, or anything else your target audience might appreciate.

Your 404 message is an opportunity to display your company’s personality. Remember to keep it short, though, as frustrated visitors aren’t in the mood to read too much text.

Design elements consistent with the rest of your site

When a user reaches your 404 page, the first thing you want to do is let them know they’re still on your website. That’s why it’s important that the web design elements on your 404 page follow a similar theme to the rest of your website.

Your 404 page might have the same color scheme as the rest of your website, feature your company logo prominently, or even feature images related to your business. For example, if your company sells computer equipment, you might have a picture of someone working on one of your computers.

Link to other page(s) on your site

Make it easy for users to get back on track. You may not know exactly where they want to go, but you should feature links or calls to action (CTAs) to some popular or high-converting pages on your website. Leading users to these pages can increase your likelihood of making sales.

If you don’t know what the most popular pages on your website are, you can use a tool like Google Analytics to find them. Don’t go overboard adding links, though, as too much content on the 404 page can be annoying to users and cause them to leave.

You can also include links to special deals or coupons that your visitors will find attractive. Not only can these increase conversions, but they might also make users happy they stumbled upon your 404 page.

Search bar

Some users might be looking for something other than the popular pages on your site, and you don’t want to leave them out. Often, users who visit your site with a purpose in mind (like a particular item) are easier to convert into customers. As such, it might be a good idea to include a search bar where they can type in what they’re looking for.

However, if your 404 page already has a lot of information, you might want to keep it simple. Your top goal should be making your error page easy to use. If it’s too cluttered, users might leave rather than dig through lines of text to find what they need.

Navigation bars

Part of staying faithful to the theme of the rest of your website is keeping the same navigation bar in the header of your 404 page. Your website navigation bar might include links to your homepage, an about page, and your products, as well as your company logo. Be sure to include your website’s footer, as well. It might have your business’s privacy policy, website sitemap, and social media links.

You should also include contact information for your company. Remember to add a phone number in addition to your email address. Customers who put in the effort to call your business likely have objectives that make them prime targets for conversion.

Personality

Show your audience who you are. Try making your 404 page funny, artistic, engaging, or relatable. A great 404 page can really capture the identity of your business. Put your company’s personality on full display with images, animated GIFs, or other unique elements.

The important thing is that your 404 page captivates your intended audience. For example, if your website is a subscription site for video game tutorials and guides, you might feature an exciting scene from a popular game on the 404 page.  

9 examples of great 404 pages

In the next few sections, we’ll go over a few businesses that use 404 pages efficiently and identify some of the elements they use. Hopefully, this will give you ideas on how you can design your own 404 page.  

If your project needs developers with expertise in programming languages like CSS, HTML, and JavaScript, Upwork has the largest pool of independent coding experts to get the job done.

LEGO

The LEGO 404 page features the main character, Emmet, from “The LEGO Movie” franchise to appeal to its audience. The error message, “Everything is still awesome!” is also a call back to the film.

‍

The page has the same navigation bar and color scheme as the rest of the company site, as well as a search option. Beneath that, users can sign up for company emails (which generate leads), and there’s a link where they can find special deals and coupons for LEGO products.

The design of the 404 page is minimal but also fun. It perfectly encapsulates the LEGO brand.

Mailchimp

The Mailchimp 404 page uses a different strategy to engage its visitors. It features a GIF animation of a horse with its head in a hole. At first, the scene seems out of place, but if you click on it, you find out the horse is actually “HorseSnake.”

‍

You’ll then get to play the game “HorseSnake,” which basically has the same rules as the old computer game, “Snake.” The game is pretty addictive, so it might take you a while to get back to the site if you get into it.

The rest of the page has the same simple design and combination of Helvetica and Times New Roman font choices as the whole Mailchimp site. There’s also a navigation bar with the company logo and a footer with links to get the Mailchimp application on Google Play or the Apple Store, as well as links to social media sites.

Adobe

The Adobe 404 page is professional, organized, and artistic. It uses the phrase, “These are uncharted waters,” accompanied by a beautiful picture of a sailboat narrowly sailing on the edge of a square body of water surrounded by grassy mountains.

‍

The page has the Adobe logo with the site navigation bar at the top of the page, as well as the site header at the bottom with social media links. The in-site links are structured into several columns of Adobe products, services, and trial offers to guide users down a conversion funnel.

Another attractive aspect of the page is that it features a link to the portfolio of a skilled graphic designer who uses the software, which shows users what’s possible using Adobe products.‍

Slack

The 404 page for the business communication tool Slack features an animated forestland with butterflies, chickens, and pigs. There are colorful flowers, floating platforms, and rainbows. The pigs and chickens perform actions when you click on them. It’s a relaxing and engaging way to capture the user’s attention.   ‍

‍

Of course, the site also prominently features a link to Slack’s help page, as well as the site’s normal header and footer, complete with the company logo, so users can get wherever they need to.

Pixar

The Pixar 404 page features a crying Sadness from the film “Inside Out,” along with the error message “Awww...Don’t Cry.” The rest of the page has minimal design with a white background like the rest of the site.

‍

There’s a navigation bar on top with the Pixar logo. At the bottom, there are links to the company’s social media pages, as well as links to privacy policies and legal information.

GitHub

The 404 page for the internet hosting and development site GitHub appeals to its techie audience with an image from “Star Wars.” It features the company’s mascot, Octocat, in a Jedi cloak along with the error message, “This is not the webpage you’re looking for.”

‍

The setting is Luke Skywalker’s home planet of Tatooine, and there’s a transport vehicle next to Octocat. The image itself appeals to developers, as it’s programmed to let a user shift their perspective by moving a cursor over it.

The 404 page also features the GitHub header, logo, navigation bar, and footer with social media links.

Marvel

The Marvel 404 page has several versions that are themed based on popular characters or the brand’s comics.
‍

Many of the pictures are cinemagraphs (images with moving parts). For example, one theme features a still image of Iron Man’s suit while animated rain falls around it. The themes are an exciting way to grab the attention of any Marvel comic fan. Each page also has the Marvel site navigation bar and logo.

Kualo

Kualo is a site that sells domain registration and hosting for websites. Its 404 page is a game of Space Invaders. Not only is the actual game fun and addicting, but the company also rewards you with a discount on web hosting if you score over 1,000.

‍

Of course, the site features the company logo and a prominent link to return to the site you were on before you got lost. The game is an entertaining way for the company to grab and keep your attention.

OkCupid

The dating site OkCupid has an amusing, simple, and straightforward 404 page. It features a whale floating upside down underwater, with some socks and a coffee cup. The error message says, “That page doesn’t exist. You should sign up,” and includes a link to a sign-up page.

‍

The objects in the relaxing image gently sway back and forth, and the CTA in the error message is direct. Even though there isn’t a navigation bar or any other links on the 404 page, its uniqueness and simplicity are enough to garner users’ attention and interest.

Create a great 404 page for your business

Making a great company website takes money, time, and effort. But even the best website won’t do you any good if your visitors leave before you can convert them into customers. By creating an engaging 404 page, you can improve your users’ experience. You can also decrease the likelihood that an error will cause you to miss out on a potential sale.

If you’re building your business, you need a quality website and a smart marketing strategy. Upwork has the independent web design experts you need to complete digital projects, like a 404 page.  

‍