A 404 sheet is what poppings up when you try to access a web page that doesn& apos; t exist. If you& apos; re aim a website, you& apos; re going to need one. They& apos; re traditionally an immense source of frustration, but very good 404 pages turn the situation to the designer or symbol& apos; s advantage.
More and more, we& apos; re envisioning bespoke 404 pages that use wit, clever UX or beautiful motif to honey the pill of know yourself in the wrong place. Whether its some courteous CSS animation, a cool parallax scrolling effect, or just some smarter-than-your-average copy, there are plenty of ways to liven up your 404 misstep pages- as these specimen prove.
The best 404 sheets can become a mini-ambassador for the website itself. It might even be shared on Twitter or relevant blogs as an example of the locate& apos; s commitment to customer service or unique scheme style. The 404 flaw sheets we present here have achieved all this and more, so take a look and be inspired to think outside the box with your own.
01. Color of the Year
Image: Color of the Year
This site is dedicated to everything to do with PANTONE& apos; s Color of the Year. Everything about it has been beautifully designed, including its 404 sheet. The website goes into an affecting extent of profundity, with areas on related quality methods, hinted palettes, and examples of the tint in use. Meanwhile, the 404 sheet takes a smart-but-simple approach. There& apos; s a short illustrative send and a swatch of PANTONE shade 404, which is a delightfully appropriate grey-brown, to match the user& apos; s mood when concluding themselves there.
Ueno is a full-service agency with a standout 404 sheet. What you& apos; re witnessing above doesn& apos; t captivate the full act that& apos; s gone into it: the hotdog is animated so it runs in an infinite curve through a surreal landscape, and there are several funny explanatory words to explore. It& apos; s bonkers and wholly peculiar- visit the error page here.
Android turns going lost into a recreation know with its gamified 404 page. Tiny worker Android Bots shoot out doughnuts, jelly beans and marshmallows, and the user revolves the cogs to address them into the correct tube. Sporting a simple, cute and on-brand design, this tournament is as addictive as the sweets being sorted. Check it out here.
Gym Box is a gym company that aims to offer “the most unique and diverse categorizes in London”. The limits of that declaration are likely to be the kind of magnificent& apos; 80 s fitness sight that appears on its 404 page. Short-lived abruptlies, harvest crests and pelvic thrusting- what more could you require from an error page?
It& apos; s only a insignificant exaggeration to say that Slack& apos; s 2019 logo update was met with widespread cruelty, and its super-saccharine 404 page is sure to have its fair share of haters very. Go wrong in Slack, and you& apos; re directed to a mystical scenery of luxuriant foliage, mountains and rainbows, where butterflies, chickens and tiny little swine stray free. The scene scrolls horizontally with your mouse action, very( try it here ).
06. Puree Maison
Puree Maison is a imaginative busines specialising in communication strategy, and its characterful website is full of delicious livings( we& apos ;d recommend taking a look around ). We& apos; re special devotees of this surreal 404 page, which somehow have managed to perfectly capture the grief of stumbling a digital wall.
Some people can take things just a little too much to heart. Pixar& apos; s 404 page, featuring Sadness from 2015& apos; s tremendously favourite Inside Out, is simple, straightforward and does the job. If it& apos; s representative of your reaction to get a 404 flaw, though, then maybe you need to re-examine your life a little.
08. Matteo Vandelli
You don& apos; t need to be a major brand to place a little of endeavour into your 404 sheet. We adore this interactive example from graphic designer Matteo Vandelli. He& apos; s utilized the error page from his design portfolio as another opportunity to show off his ability and design savvy. As the visitor mice over the 404 verse, it ruffles and shifts like water. The impression is strangely mesmerising.
09. 20 th Century Fox
Can& apos; t find the film you crave? Fox Movies& apos; site has a great way to inspire you for when you get a URL inaccurate; its 404 page pops up with a still from a cult movie, with a cogent caption and a selection of other movies you might like to watch. We& apos; ve recognized snippets from Edward Scissorhands, Revenge of the Morons and Napoleon Dynamite, among other( take a look to see which one you get ). Ironically, at the time of writing, the clickable textbook leads to another, less well-designed 404 sheet.
10. Cloud Sigma
Cloud Sigma is a cloud server and cloud hosting service operating in the US, Europe and Asia-Pacific region. While adaptable shadow servers are useful, they& apos; re not exactly recreation, which we predict is why the company has made a little extra effort to inject some witticism into its tongue-in-cheek 404 correct sheet. We wonder how long it& apos; ll be before this helpful-looking junior make gets poached by the competition.
Another website to use humour on its 404 inaccuracy sheet is Atlanta-based data strategy consulting firm BluePath. The sheet establishes a map of Atlanta, with a speck on the other side of the page marking the visitor is& apos; Wayyyy off the map& apos ;. In an extremely shaky association, the delineate also includes data-driven info prove reported crimes in the area. “Why? Because it’s a crime you haven’t hired us yet! ” Ah, these whacky data analysts.
Marvel remembers things solidly on-brand by basing its 404 inaccuracy sheet on the universe& apos; s Watcher. Perhaps because Uatu isn& apos; t much of a looker( sorry ), Marvel has decided to pander to visitors more shallow than ourselves and supplement his eye merely, against the backdrop of Black Widow. Extra cool qualities for compiling the eye follow the visitor& apos; s cursor round the screen.
Web hosting company Kualo has been in business for over 15 years- an eternity in internet time- and its 404 page harks back to yesteryear by treating visitors to a game of Kualo-themed Space Invaders. It& apos; s not perfect. The key strategy of picking off the fleet& apos; s outer rims to slow the attackers& apos; swoop doesn& apos; t drudgery, for starters. But it is fun, and it can earn you a discount on your hosting deal if you manage to compose over 1,000 items. Play it now.
Its inclusion in this article has also inspired US pest control company Pointe Pest Control to include its own Pest Invaders game on its 404 lapse sheet, terminated with different flying and crawling faults to scatter.
As Chloe Zollinger from Pointe says: “Reaching a 404 fault sheet is most often frustrating for a site customer. We understand how important user experience on a webpage is. To better our visitors& apos; ordeal, our unit dedicated themselves to creating an interactive tournament on our 404 page.”
NSFW; put your headphones on first
15. Steve Lambert
New York-based artist Steve Lambert describes this as “the most awkward 404 not found sheet on the internet”, and you know, he may well be right. It boasts an excruciating piece to camera that just goes on and on. We elude you to get to the end of his video without any part of your person clenching.
Next page: More causing 404 sheets to explore
16. Victoria Spicer
Image: Victoria Spicer
Victoria Spicer is a plan decorator and prop stylist based in London. As you& apos ;d await, her portfolio place is carried with beautiful photography, and her 404 inaccuracy sheet is no different. It evidences off her lively feature while still keeping concepts appearing improved.
Even though we have a copy of Illustrator CC right here, and could play with anchor qualities and Bezier curves literally any time we want, we& apos; re still admittance by Figma& apos; s 404 page. Oversized 404 verse is rendered in vectors that you can reshape to your stomach& apos; s content. Have a go for yourself.
This 404 page from Airbnb facets a simple-but-delightful animation of an hapless daughter lowering her ice-cream on the floor. Airbnb has built its honour on being amiable and friendly, and this 404 sheet clothings its label persona perfectly.
19. Hot Dot Production
Hot Dot Yield shall be applicable its& apos; where designing satisfies engineering& apos; tagline to its affecting 404 sheet, which peculiarities the three lists made up of hundreds of tiny dots that mutate counseling or disband in response to the visitor& apos; s mouse campaigns. Gravely cool. Play around with it yourself now.
LEGO can do no incorrect in our eyes( have you read our portion on how Lego reinvented itself as a super-brand hitherto ?). We love this cute 404 sheet, which continues concepts simple with some scared Lego illustrations and a jargon-free explanation.
You& apos ;d reckon some tech wizardry from a website dedicated to code versioning. The 404 sheet targets a different kind of geeks with a simple Star Wars parody promoted by a smart-alecky parallax influence when you move your mouse. GitHub also has a nice 500 page for when the server breaks.
22. CSS Ninjas
The web design world cherishes ninjas. Often as part of a self-styled job title. Falling in with the trend( and, we predict, its specify ), the 404 page for CSS Ninjas boasts a clean, stylised illustration that reflects the site& apos; s general coming to design.
In autumn 2018, ultra-hip email newsletter busines MailChimp underwent a rebrand, and its 404 page has a new look to match. The new-look error page pieces on of the off-beat, naive illustrations around which MailChimp& apos; s brand-new branding cores. And actually, what says& apos; I& apos; m lost& apos; better than a mule with its honcho in a opening?
24. Volta Footwear
Volta is a footwear store based in Milan. Its website includes plenty of cool UI design touches, and we like that it& apos; s not just gone for a standard 404 page, either. High quality, dedicated commodity photography with a quaint touching- a miniature marble effigy that nods to the flagship store& apos; s Italian home- promotion heighten this error page.
25. Bret Victor
Computer scientist Bret Victor& apos; s 404 page, spurred of course by Rene Magritte& apos; s iconic coating, The Treachery of Images, challenges the witnes with some challenging theoretical questions. If this does not constitute a page, then what is it? What presents a& apos ;p age& apos ;? Is it a circumstance that can be truly said to exist? What is the& apos; this& apos; that this apparent non-page is referring to? Is anything certainly real? Makes you think , no?
Another awesome, movie-based 404 correct page can be found on the IMDb website. This comprehensive database of cinema details has jazzed up its 404 sheet with iconic excerpts from acclaimed films, subtly edited to set their new purpose. Take a inspect to see which one you get.
The 404 sheet for tie-up abridging service Bit.ly peculiarity a cute Pufferfish bobbing upside-down in an interactive sea. The stranded fish responds to your mouse pushes, and subtly animation items in the clouds and seagull help create a calming mood.
DropBox has replaced the Escher-esque inconceivable chest that adorned its 404 sheet for years, with a similarly quirky sketch. We like to think of an synopsi representation of everything going wrong- the wheels coming off. It& apos; s a nice, simple hand-drawn illustration that gets the message across well, with spate of supportive navigation ties for a top user experience.
The last happen you “ve got to hear” when you& apos; re looking for love is that it can& apos; t will find information. Online matchmaking service eHarmony& apos; s 404 page lightens the gale with the news that while the page you& apos; re after is unavailable, there are still about half a million fish left in the sea.
Starbucks builds good apply of its primary product to illustrate its 404 sense. In such instances, the tell-tales signalings of a missing coffee cup are used to tell the story. There& apos; s likewise some jargon-free print to help the user witnes what they were looking for.
31. Blizzard Entertainment
Video game developer Blizzard takes an original approaching to its 404 page. In it, the working website design appears to have become broken: the header piloting has removed down there are still& apos; s a smashed screen result. There isn& apos; t much in the way of helpful connects, with Blizzard instead opting for a no-nonsense error message: “This page doesn& apos; t exist or some other grim misstep has occurred”.
Related essays 😛 TAGEND The best website developers in 201910 unpleasant UI neglects( and what you can learn from them )The best free typefaces for designers