iSmartNetwork Magazine The online magazine for you…
A 404 page is what pops up when you try to access a web page that doesn& apos; t exist. If you& apos; re designing a website, you& apos; re going to need one. They& apos; re traditionally an immense source of annoyance, but very good 404 pages turn the situation to the designer or brand& apos; s advantage.
More and more, we& apos; re appreciating bespoke 404 pages that use wit, clever UX or beautiful designing to sweeten the pill of finding yourself in the wrong place. Whether its some thoughtful 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 lapse pages- as these lessons prove.
The best 404 pages can become a mini-ambassador for the website itself. It might even be shared on Twitter or relevant blogs as an example of the website& apos; s commitment to customer service or unique designing style. The 404 wrongdoing pages we present here have achieved all this and more, so have a look and be inspired to think outside the box with your own.
01. Color of the Time
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 page. The locate goes into an impressive quantity of profundity, with parts on relevant colouring systems, indicated palettes, and a few examples of the tint in use. Meanwhile, the 404 page takes a smart-but-simple approach. There& apos; s a short explanatory content and a swatch of PANTONE shade 404, which is a delightfully appropriate grey-brown, to match the user& apos; s mood when observing themselves there.
02. Ueno
Image: Ueno
Ueno is a full-service agency with a standout 404 page. What you& apos; re envisioning above doesn& apos; t capture the full endeavor that& apos; s gone into it: the hotdog is animated so it runs in an infinite loop-the-loop through a surreal scenery, and there are several humorous explanatory contents to explore. It& apos; s bonkers and altogether unique- visit the error page here.
Image: Android
Android turns get lost into a merriment suffer with its gamified 404 page. Tiny worker Android Bots shoot out doughnuts, jelly beans and marshmallows, and the user rotates the cogs to guide them into the correct tube. Sporting a simple, cute and on-brand design, this game is as addictive as the sweets being sorted. Check it out here.
04. Gymbox
Gym Box is a gym company that aims to offer “the most unique and diverse classes in London”. The limits of that assert are likely to be the kind of magnificent& apos; 80 s fitness spectacle that appears on its 404 page. Short shorts, harvest tops and pelvic thrusting- what more could you want from an error page?
05. Slack
Image: Slack
It& apos; s simply a slight exaggeration to say that Slack& apos; s 2019 logo update was met with widespread horror, and its super-saccharine 404 page is sure to have its fair share of haters too. Go wrong in Slack, and you& apos; re wish to refer to a magical scenery of lush foliage, mountains and rainbows, where butterflies, chickens and tiny little pigs stray free. The incident scrolls horizontally with your mouse movement, too( try it here ).
06. Puree Maison
Puree Maison is a creative organization specialising in communication strategy, and its characterful website is full of delightful animations( we& apos ;d recommend taking a look around ). We& apos; re particular fans of this surreal 404 page, which somehow have managed to perfectly capture the ache of reaching a digital wall.
07. Pixar
Image: Pixar
Some people can take things just a little too much to heart. Pixar& apos; s 404 page, featuring Sadness from 2015& apos; s immensely popular Inside Out, is simple, straightforward and does the job. If it& apos; s representative of your reaction to get a 404 mistake, though, then maybe you are required to re-examine your life a little.
08. Matteo Vandelli
You don& apos; t need to be a major brand to set a bit of endeavour into your 404 page. We adoration this interactive example from graphic designer Matteo Vandelli. He& apos; s use the error page from his design portfolio as another opportunity to show off his invention and intend savvy. As the visitor mouses over the 404 text, it ripples and switchings like water. The consequence is strangely mesmerising.
09. 20 th Century Fox
Can& apos; t find the cinema you crave? Fox Movies& apos; site has a great way to inspire you for when you get a URL wrong; its 404 page poppings up with a still from a cult movie, with a pithy caption and a selection of other movies you might like to watch. We& apos; ve spotted snippets from Edward Scissorhands, Revenge of the Geeks and Napoleon Dynamite, among other( take a look to see which one you get ). Ironically, at the time of preparation of, the clickable text leads to another, less well-designed 404 page.
10. Cloud Sigma
Cloud Sigma is a cloud server and cloud hosting service operating in the US, Europe and Asia-Pacific region. While flexible gloom servers are useful, they& apos; re not exactly fun, which we guess is why the company has made a little extra effort to inject some mood into its tongue-in-cheek 404 fault page. We wonder how long it& apos; ll be before this helpful-looking junior developer get poached by the competition.
11. BluePath
Another website to use humour on its 404 wrongdoing page is Atlanta-based data strategy consulting firm BluePath. The page testifies a map of Atlanta, with a dot on the other side of the page indicating the visitor is& apos; Wayyyy off the map& apos ;. In an extremely tenuous relate, the map also includes data-driven info demonstration reported crimes in the area. “Why? Because it’s a crime you haven’t hired us yet! ” Ah, these whacky data analysts.
12. Marvel
Marvel maintenances things solidly on-brand by basing its 404 wrongdoing page 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 add his eyes simply, against the backdrop of Black Widow. Extra cool phases for inducing the eye follow the visitor& apos; s cursor round the screen.
Web hosting company Kualo has been in business for over 15 times- an eternity in internet occasion- 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 fishing fleets& apos; s outer peripheries to slow the invaders& apos; descent doesn& apos; t run, for starters. But it is fun, and it can earn you a discount on your hosting deal if you manage to score over 1,000 levels. Play it here.
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 mistake page, complete with various flying and crawling bugs to spray.
As Chloe Zollinger from Pointe says: “Reaching a 404 mistake page is most often frustrating for a site customer. We understand how important user experience on a webpage is. To better our guests& apos; suffer, our squad dedicated themselves to creating an interactive game on our 404 page.”
14. Waaark
NSFW; put your headphones on first
French studio Waaark& apos; s 404 page is nice enough to look at, but it& apos; s better to listen to- although maybe not at work. Inspired by Stephen Hawking, the Hitchhiker& apos; s Guide to the Galaxy and Portal, it employs a JavaScript text-to-speech tool called meSpeak to subject “youre going to” a sweary robotic harangue. Plug your headphones in and take a look.
New York-based artist Steve Lambert describes this as “the most awkward 404 not procured page on the internet”, and you are familiar, he may well be right. It features an excruciating piece to camera that just goes on and on. We withstand you to get to the end of his video without any part of your figure clenching.
Next page: More inspiring 404 pages to explore
16. Victoria Spicer
Image: Victoria Spicer
Victoria Spicer is a fixed decorator and prop stylist based in London. As you& apos ;d believe, her portfolio website is jam-pack with beautiful photography, and her 404 correct page is no different. It evidences off her playful side while still keeping things looking polished.
17. Figma
Even though we have a copy of Illustrator CC right here, and could play with anchor levels and Bezier curves literally any time we want, we& apos; re still entranced by Figma& apos; s 404 page. Oversized 404 text is rendered in vectors that you can reshape to your nerve& apos; s content. Have a go for yourself.
This 404 page from Airbnb features a simple-but-delightful animation of an unlucky girlfriend dropping her ice-cream on the storey. Airbnb has built its reputation on being personable and friendly, and this 404 page suits its label image perfectly.
19. Hot Dot Production
Hot Dot Make shall be applicable its& apos; where intend encounters engineering& apos; tagline to its impressive 404 page, which aspects the three numbers made up of hundreds of tiny dots that modify direction or disperse in response to the visitor& apos; s mouse motions. Seriously cool. Play around with it yourself here.
LEGO can do no incorrect in our eyes( have you read our fragment on how Lego reinvented itself as a super-brand yet ?). We adore this cute 404 page, which prevents things simple with some frightened Lego figures and a jargon-free explanation.
You& apos ;d anticipate some tech wizardry from a website dedicated to code versioning. The 404 page targets a different kind of geeks with a simple Star Wars parody elevated by a smart parallax consequence when you move your mouse. GitHub also has a nice 500 page for when the server breaks.
The web design world enjoys ninjas. Often as part of a self-styled job title. Falling in with the trend( and, we guess, its call ), the 404 page for CSS Ninjas aspects a clean, stylised illustration that shows the site& apos; s general approach to design.
In autumn 2018, ultra-hip email newsletter service MailChimp underwent a rebrand, and its 404 page has a new look to match. The new-look error page features on of the off-beat, naive illustrations around which MailChimp& apos; s new branding centres. And truly, what says& apos; I& apos; m lost& apos; better than a mule with its brain in a hole?
24. Volta Footwear
Image: Volta
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 service standards 404 page, either. High quality, dedicated product photography with a quirky touching- a miniature marble statue that gestures to the flagship store& apos; s Italian home- aid heighten this error page.
Computer scientist Bret Victor& apos; s 404 page, inspired of course by Rene Magritte& apos; s iconic painting, The Treachery of Images, tackles the onlooker with some challenging philosophical questions. If this is not a page, then what is it? What constitutes a& apos ;p age& apos ;? Is it a thing that can be truly said to exist? What is the& apos; this& apos; that this apparent non-page is referring to? Is anything genuinely real? Makes you think , no?
26. IMDb
Another awesome, movie-based 404 mistake page is also available on the IMDb website. This comprehensive database of film facts has jazzed up its 404 page with iconic quotes from famous cinemas, subtly edited to fit their new intent. Take a appear to see which one you get.
27. Bit.ly
Image: Bitly
The 404 page for associate abridging service Bit.ly features a cute Pufferfish bobbing upside-down in an interactive sea. The stranded fish respond to your mouse motions, and subtly animation details in the clouds and seagull help create a calming mood.
DropBox has superseded the Escher-esque impossible carton that adorned its 404 page for years, with a similarly quirky illustration. We like to think of an abstract 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 plenty of helpful navigation links for a top consumer experience.
The last thing you “ve got to hear” when you& apos; re looking for love is that it can& apos; t be found. Online matchmaking service eHarmony& apos; s 404 page softens the punch 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 induces good apply of its primary product to illustrate its 404 message. In this instance, the tell-tales signs of a missing coffee cup are used to tell the story. There& apos; s also some jargon-free facsimile to help the user determine what they were looking for.
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 navigation has lowered down and there& apos; s a smashed screen impression. There isn& apos; t much in accordance with the rules of helpful relates, with Blizzard instead opting for a no-nonsense error message: “This page doesn& apos; t exist or some other frightful fault has occurred”.
Related articles 😛 TAGEND The best website builders in 201910 pain UI fails( and what you can learn from them )The best free fonts for decorators
Read more: creativebloq.com
