404 Error Page Design: Examples & Usability Trends

Every great website features a number of common pages with similar usability techniques. One of the most common yet unrecognized pages that every site should have is the 404 error page. This guides visitors away from missing pages or broken links so they can continue browsing the site.

It doesn’t take much effort to craft a 404 error page. But it does take considerable effort to craft one that works and feels natural to the design.In this post I’ll share helpful usability tips that you can apply to 404 error page design. Similarly I’ve collected a handful of examples to showcase great 404 page design found on live websites.

Snuggle Bugz

Each icon and button style on this page feels like it belongs with the whole layout. An overall sense of design ties this 404 page together and makes it feel like it belongs to the Snuggle Bugz website.

snuggle bugz

Fork CMS

The iconic branding of Fork CMS shines through on their 404 error page. It also features some clever copywriting to fit into their aquatic theme.

fork cms 404

Gumroad

The Gumroad page doesn’t have many internal links, but it does list a feature of random products. This is a neat way to get people deeper into the site and turn a potential blunder into a sales opportunity.

gumroad 404

Ramotion

Ramotion’s 404 is short, sweet, and to the point. Large typography helps guide the way and it’s actually difficult to do anything wrong.

ramotion 404 page

Angry Birds

Branding on the Angry Birds page is crucial to the design. It has a link back home and other vital elements, but the brand gives people a clear indication of what site they’re on.

angry birds in space 404

Larkef

Here’s a very humorous example using a fullpage background video clip taken from The IT Crowd. My only gripe is the lack of links – simply no way to get back to the main site without manually editing the address bar.

larkef 404

GitHub

I really like GitHub’s 404 page because it offers a very large search bar. Most people on GitHub are technically savvy enough to use that search bar to help them find whatever they’re looking for.

github missing page

ArtStation

The message is simple and quite hard to miss. There’s a block button link back to the homepage and an offer to send a contact message to the ArtStation team.

ArtStation 404 page

Webydo

Bright contrast and large typography are both used in Webydo’s 404 design. These are great techniques for drawing attention towards specific areas of the page.

webydo 404 page

Stormpath

Stormpath uses some brilliant photography and web copy geared more towards technical users.

stormpath 404 page

Underbelly

The fullscreen video is a really creative way of showcasing the Underbelly team on an otherwise wasted pageload. Since the site has so few links this is a great way to draw attention towards their brand.

underbelly website

Forbes

Typography makes the Forbes website what it is, and same goes with their 404 page. An orderly list of links plus a search bar help visitors to find their way around.

forbes 404 page

Marvel App

With the only two options here being an e-mail or a Tweet, this is a great design for solving 404 errors. My only critique is to add an even larger link to the homepage.

marvel app 404 page

Engadget

Engadget is an extremely popular site and their 404 page keeps it all grounded. Just a few links are offered along with the top navigation bar.

engadget 404 page design

Tripomatic

Cartoony vectors and a lighthearted atmosphere make you feel surprisingly delighted to land on this 404 page.

tripomatic website

Aerolab

Very little text with high contrast design keeps this page clean and on topic.

aerolab 404 design

MailChimp

With the MailChimp header stuck at the top of the page, it’d be hard for someone to not find their way back home. But for good measure they’ve included a large search box as well.

mailchimp 404 page design

Code School

On CodeSchool’s 404 page there’s just a single link back home. They feature a lengthy animation which could be somewhat annoying, but overall the UX is straightforward enough that visitors can solve the problem.

code school 404 page design

TinyCarrier

Everyone loves vector graphics and TinyCarrier brings these in full force. It behaves just like a typical webpage on the site along with a contact link to report the broken URL.

tinycarrier 404 page design

Email Center UK

The Emailcenter 404 page has a fun game toying with the people who work there. It’s definitely a lighthearted approach and can be really fun if you have the time.

email center humorous page design

Understanding 404 Errors

Among the many HTTP error codes in existence, 404 is perhaps the most well-known. It’s given from the server when a page doesn’t exist, which can happen from a broken URL or from a page being deleted.

However you can’t always assume that users will understand what this means. But even the users who do know what it means won’t be able to do much troubleshooting, so it’s best to keep things simple.

Every page has a natural usability component which plays a huge factor in visitor retention. The way in which a page is perceived will play a huge role in how a user behaves. Keep this in mind when designing your 404 page, especially from the user’s point of view.

Never Use the Default

Every server can return a default 404 page design. It’s ugly, generic, and exceptionally off-putting.

As a general rule try to never use the default server 404 message. It doesn’t take much work to create a page using the site’s main template with just a simple 404 error message.

The benefit here is consistency. Even though the page doesn’t exist, visitors still feel like they’re on the website. They’ll have access to the header which should include a logo or navigation back to other pages on the site.

Craft a Natural UX Flow

Nobody wants to stay on a 404 page. It’s meant to be an intermediary to help visitors navigate back into the website.

Each 404 page should be designed with expediency in mind. Give visitors the quickest and easiest way back home. Make your text big and easy to read. The goal should be to get people off that 404 page as quickly as possible with the absolute least amount of confusion.

Also if you want visitors to feel like they’re helping to solve the problem, try linking directly to a contact page. Visitors can report the broken 404 link and perhaps help you solve why the page is missing in the first place.

Avoid Complex jargon

Since there’s very little diagnostic work that can be done to solve a 404 error, it’s best to keep everything simple. Unless your visitors have root access to the server they’re not going to solve anything by themselves.

Don’t go into too much detail about status codes or server messages. These can be stressful and absurdly confusing to non-technical people.

Instead try to keep an air of lightheartedness – humor works great for this instance. Your goal should be to mitigate any distraught feelings and turn them into calm aloofness.

Use humorous web copy and/or graphics to keep visitors interested in the site. Don’t make anyone feel like they’ve done something wrong. Instead try to offer solutions or links to alternate pages to keep people browsing.

Wrap-Up

Any website can always be improved and if you keep practicing then you’ll also improve as a designer. By studying from example and learning the principles of good usability you’ll internalize design fundamentals and find it easier to apply them to project work.

I hope these tips can help you design incredible 404 pages that work. The last thing a visitor wants to feel is confused or lost, so by handling these error pages appropriately you can mitigate confusion and improve user experience.

Related articles you may enjoy:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.