We all know that designers have a set standard of pages that are critical for constructing a successful, complete website. From the introductory “About Me” pages to the informational “Contact” pages, each of these pages serve a purpose. But, what about the 404 page? The 404 page or, as it is sometimes referred to, the “Page Not Found” page is an important addition to have. As no design is ever perfect, it is a good practice to have a page to indicate and recognize an error should one occur. Often these errors occur due to broken or dead links. Whether the fault is yours or caused by a factor outside of your hands, the point is you should have a 404 page design implemented just in case. After all, you never know when something might go awry, and it’s important to handle these unexpected problems gracefully.
Naturally, you could just create a bland, basic 404 page design, but why spoil your stellar and creative website design with something ordinary and mundane? Creativity in design will gain you points with your visitors so you might as well give your 404 page the same treatment and consideration that you gave the rest of your website. It’s a great opportunity to address and appease the frustration brought by an error or a broken link. To get your creative juices flowing, here are some creatively-designed 404 pages that will surely inspire you to redesign your current 404 page.
Not only does Villard’s portfolio feature a large image as the background but it has an eye-catching 404 page featuring simple silhouettes that stand out beautifully.
The Blue Daniel website is hauntingly beautiful in itself, featuring the infamous score from Edward Scissorhands. The 404 page fits perfectly as it creatively uses films and TV show titles with the themes of being missing or lost.
Blizzard’s 404 page takes the idea of the broken page and literally translates it to a broken page. It boasts a shattered screen and an askew navigation menu hanging on for dear life, coupled with the gamer slang of “Grats” as a nod to their customers.
Users of Deviantart have more than likely ran into the 404 page a handful of times during their visits. The use of the site’s mascot is a nice touch.
Getting lost is always a depressing thing, and Agens makes that clear with their 404 page design. Featuring a forlorn astronaut who is lost in space, the design is rather simple but still creative.
The Many Faces Of
Using illustrations in your web design is a great way to make it stand out. The Many Faces Of does this perfectly and takes it one step farther by adding animation to make their Leonardo DiCaprio illustration gasp in horror as you are instructed to stay calm and not freak out.
With the theme of being lost out in space, along with their already space themed site design, CoolApps has created a unique 404 page that urges you to turn back as you are currently in a place you really don’t want to be.
Most people can appreciate witty humor, so MailChimp delivers it with their “that link is broken” announcement while featuring a vector sausage link image where a sausage has snapped off.
When you make a mistake that inconveniences others, it is always a good idea to apologize. EverLovin’s 404 page offers an apology in a simple format and a link to send you back to the home page.
While some websites will try to offer a solution to the error page, Captain Dash stamps down any hope for help in a cleverly-illustrated drawing that lets you know that you are simply out of luck.
If your Dutch is a bit rusty “helaas deze pagina bestaat niet” translates to “unfortunately this page no longer exists.” Whether the character is hiding in embarrassment or is hunting for the missing content remains to be seen, but the design coupled with the blue is really nice.
It’s not often that you see 404 pages that look like sketches. The design is very detailed, and having the error message as the only pop of color is a nice a touch.
Sometimes, it isn’t necessary to have a colorful illustration. A photo can translate that you’ve encountered a problem especially if your photo features people with expressive looks on their faces.
When you’re working on your 404 page design, you’ll want to try to make sure it works well with the rest of your site. Pulpfingers does a great job at this by keeping the same elements without making the page too busy.
Large images and typography can help your error messages stand out against the background, just like the one featured here on the Gallery of Mo website.
Remember that keeping your pages consistent is a good practice to get into. BlackMoon Design keeps the old school gaming graphics going while letting you know that you have gone in the wrong direction.
Using recognizable characters that are part of your company’s brand is smart thinking when building your 404 page. Lego does a great job by having their characters illustrate that you have run into a bit of a problem.
Broken links can be truly embarrassing for your site, so adding a humorous 404 page that acknowledges awkwardness is a human-friendly approach, as William Csete’s page demonstrates.
Since using large photographs as backgrounds of your website is still trendy, there is no reason why you shouldn’t be able to use one for your 404 page. An empty room is a great image for an interior design site to use.
You don’t always have to base your error message images around your company — perhaps you never should. Sometimes, designing the image around the message works just as well especially in the case of Peapod Studio’s 404 page.
While you should make sure you have a 404 page designed just in case something goes amiss, it certainly doesn’t make it any more acceptable to ignore site errors… even if you secretly want to show off your creative 404 error page. Take some cues from the showcase above and create something fun and daring, but keep your site running smoothly.
Do you have a favorite 404 page design in today’s showcase? What do you think makes a great 404 page?
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Researching UX: Analytics
Designing UX: Forms
Jump Start Sketch
Jump Start Sketch
- 1 ‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)
- 2 5 Things Every Designer Needs to Know About Conversational UIs
- 3 Is Sketch App with Atomic.io the Perfect UI Design Duo?
- 4 How to Take Advantage of the Psychology of Speed Perception
- 5 How to Lift Your UX Out of the Ordinary with Micro-Interactions