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 20 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!
20 Error 404 Page Examples
FREE ASSOCIATION
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
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.
6WUNDERKINDER
By turning the rocket on their homepage upside down on their 404 page, 6Wunderkindercomically alludes to the ‘disaster’ of going to a broken link while using the error page to extend and reinforce their branding.
BARLEY’S
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.
V TRAVELLED BLOG
The text and imagery of this 404 page is an extension of Virgin’s branding, while the ‘correction’ adds some humour to the page.
YELLOW BIRD PROJECT
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.
SHOPIFY
By adding an annotated error message, this relatively straight-forward page from Shopifyoffers some dry humour to visitors.
TOGGLE
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.
LORD LIKELY
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.
GET FINCH
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.
GOOD
The 404 page for Good includes an ASCII art image and message to tell users they’ve clicked on a broken link.
SIMON COLLISON
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.
TASTY PLANNER
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!
ELITIST SNOB
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.
SPOON GRAPHICS
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
An Idea features a quirky illustration on their 404 page, which makes this site’s error page stand out from the rest.
DOEJO
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
Trent Walton‘s 404 page includes a simple amusing message, as well as a promise to make the page more interesting in the future.
BIGGEST APPLE
This mock dictionary definition feature on Biggest Apple‘s 404 page is very original, and the attention to detail adds to the comic effect.
Custom 404 Page Tutorials
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!
CREATING AN ERROR 404 PAGE
This tutorial is designed to help WordPress users make custom error pages for their blogs and websites.
Creating a Custom 404 Error PageFrom the Joomla Documentation website, this tutorial offers clear instructions on how to create a custom 404 page.
Customising Magento’s Error MessagesMageBase is a website aimed to help Magento users, and this blog explains how to customise the default Magento error message.
How To: Create a Great 404 Page Not Found Error PageThis is a great tutorial from Conversation Marketing, and it includes screenshots as well as easy to follow steps.
Custom 404 ErrorHTML Source doesn’t offer a step-by-step process, but it does include a lot of detail to help users understand what they need to do to create custom error pages.
How to Create your own Custom 404 PagesThis tutorial by Web Design Library is aimed at beginners using Dreamweaver, and it offers clear instructions.
5 Error 404 Page Templates
FRESH 404 ERROR TEMPLATE
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.
ERROR TEMPLATE
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.
QUIRKY 404 PAGE TEMPLATE
This template from The Sweet Themes Co includes a quirky design and a link back to the homepage. This template isn’t particularly informative, but it’s suitable for a personal website.
The second 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.
404 ERROR WED PAGE ELEMENT
Created by Free PSD, this is a simple 404 template with a bit of subtle humour, and the search box should help users find what they’re looking for.
So, do you have a custom error 404 page? Or do you simply use a default error page? Should 404 pages be outlets for originality, or should they focus solely on helping visitors ?
Thanks to Rob from Pixel King Web Design for suggesting this post!
0 Comment to "WEBSITE TRENDS: CUSTOM 404 PAGES"
Post a Comment