Custom 404 pages are one of the latest trends in web design. 404, or error, pages are often overlooked by web designers, with the majority of site owners defaulting to standard pages. However, custom 404 pages are becoming increasingly common, and more and more site owners are creating unique error pages for their personal and professional websites.
Custom 404 pages vary from simple and informative to abstract and irreverent. Whilst looking for examples of custom 404 pages, I found a clear difference between the pages for professional websites and personal sites: 404 pages for professional sites, though often quite creative, usually offer solutions to help users find the pages they’re looking for, while the error pages for personal sites tend to be more humorous or abstract.
To help inspire you to create your own custom error page, I’ve rounded up several examples of custom 404 pages from live websites. I’ve also included links to tutorials to help you create your own custom error page for your site, even if you use Joomla, WordPress, and Magento. Plus, I’ve found some templates you can customise to make your own 404 page!
This custom 404 page from Free Association uses a humorous image and a quote from the technical director to express the frustration broken links can cause. This 404 page includes an explanation of what may have happened, as well as links to the home page, portfolio, and an email address for help.
Electric Pulp’s simple 404 message is humorous and straight to the point, and it scores extra points for offering a link to go back to the homepage.
This custom error message from SVN2FTP gives quite a random explanation of what went wrong, and the layout is similar to the rest of the site, which helps with usability and branding.
By turning the rocket on their homepage upside down on their 404 page, 6Wunderkinder comically alludes to the ‘disaster’ of going to a broken link while using the error page to extend and reinforce their branding.
Priding themselves on their large beer selection, it is only fitting that Barley’s error page includes several bottles of beer! With some anonymous quotes to add to the amusement, this 404 page also offers solutions to users.
The text and imagery of this 404 page is an extension of Virgin’s branding, while the ‘correction’ adds some humour to the page.
The Yellow Bird Project continues their quirky style onto their error page. A simple message with their logo and a link to the home page is all that is needed.
By adding an annotated error message, this relatively straight-forward page from Shopify offers some dry humour to visitors.
Toggle’s 404 page contains an image and text likening a broken link to mixing colours and whites in the wash, making their error page an opportunity to show off their design skills and offbeat approach.
Written by Lord Likely in the same manner that appears across the rest of the website, this 404 page provides an amusing take on what may have happened. By using the same layout on the error page as the other pages of the site, users can easily navigate to the home page or search the archives.
Finch‘s 404 page uses the same simple style found on the rest of their site. While accepting blame for the error, they offer a link to get users back to the homepage.
The 404 page for Good includes an ASCII art image and message to tell users they’ve clicked on a broken link.
Simon Collison‘s error page includes a compass and an message to communicate that the user is lost. By providing links to the homepage, journal and archives, this 404 page should help a wayward visitor find their way.
Staying true to their website, Tasty Planner‘s 404 page continues their cooking theme with this cute illustration, and they even include a link to recipes for cookies as consolation for the error!
This 404 message from Elitist Snob keeps with the tone of the website’s content, and it tells users what may have happened and how to get back to the homepage.
This unique image from Spoon Graphics is fun and gives the site owner another chance to show their talent. The image does the talking with a simple message underneath to help direct visitors back to where they want to go.
An Idea features a quirky illustration on their 404 page, which makes this site’s error page stand out from the rest.
Doejo‘s 404 page features their rocket icon, as well as a witty header to grab users’ attention, but they also offer options to help solve the problem.
Trent Walton‘s 404 page includes a simple amusing message, as well as a promise to make the page more interesting in the future.
This mock dictionary definition feature on Biggest Apple‘s 404 page is very original, and the attention to detail adds to the comic effect.
To help you create your own custom 404 page, I’ve rounded up links to tutorials that explain exactly what you need to do. I’ve even found some tutorials on creating custom error pages for Joomla, WordPress, and Magento, so you don’t need to have an HTML site to have a custom 404 page!
This tutorial is designed to help WordPress users make custom error pages for their blogs and websites.
How To: Create a Great 404 Page Not Found Error Page
This is a great tutorial from Conversation Marketing, and it includes screenshots as well as easy to follow steps.
This custom 404 page template from Design 3 Edge features a simple design with a fun image. The search bar helps users find what they’re looking for, and this template even includes a place for social media icons.
Another great template from Design 3 Edge, this time with the opportunity to include custom text. This template also includes the option to link directly to popular pages, which should help users find what they’re looking for.
This template from The Sweet Themes Co includes a great original design, using the the London Underground Tube map to communicate how far a user is from their desired location! Again, this template doesn’t offer a lot of information, but it’s still a fun 404 page template for personal websites.
Thanks to Rob from Pixel King Web Design for suggesting this post!