Use Negative SpaceThere’s no need to cram every inch of your 404 page with something. LegoLego can do no wrong in our eyes – we love this cute little tableau for its website's 404 pageIn general, Lego can do no wrong in our eyes, and we Whatever the style, implement it into everything you have on the page, type included. Behance/Cristina MariaHere is a softer approach. And the reaction of visitors when they land on your temporarily unavailable website can run the gamut -- from "taking it in stride" to "totally losing their minds." While there's nothing check over here
Box it InExperiment with boxing in your letters and numbers. Recommend some your top content while they’re open to suggestion. Marketing Library Sales Training Academy About Company Our Story Board of Directors Management Team Careers News HubSpot News Events & Talks Press Coverage & Awards Speakers For Investors Investor Relations Agencies If it can, consider doing it on your 404 page. Behance/Andrei MoldovanThis floral company swapped out the zero in 404 for a flower, an appropriate switch.
Don’t Overthink ItJust because you want a unique 404 page doesn’t mean you have to pull out all the stops and create something completely innovative. It's nice to see Richard Turley's influence rubbing off on the site.06. Make it Easy to UnderstandFor a select handful of people who may not know what a 404 page is, spell it out for them. The visual serves as a quick way to illustrate their point for those unwilling to read the description. 7) Bitly Remember Twitter's fail whale?
Topics: Design Pop Culture Subscribe to HubSpot's Marketing Blog Join 300,000+ fellow marketers! Create DimensionLayer up different elements within your composition to create dimension and escape the flatness the web can often have. Behance/Dariusz SIn this page, the slicing knife reveals elements below the Most Read Most Shared 1Google shares its toolkit for creating beautiful design 220 top new tools for freelancers 3Famous artworks ruined with design by committee 4The 23 best free cursive fonts 404 Page Not Found Source: Worrydream Pop culture references are also popular on 404 pages (because if you can’t be funny, reference someone who is).
If your design allows for it, you can even include both a search bar and a link to recommended content. 404 Error Message Text Get a new eBook about landscape photography for free - one useful gift just for visiting! Use Different MediumsNot everything you do on your 404 page needs to be digital and created in one of the many programs designers use. check over here The colors work well together, and the bright yellow brings a happier feel to the page.29.
Hakim El Hattab’s 404 page features a bunch of delightfully creepy eyes that follow your mouse around and blink out of rhythm. 404 Error Page Html Code For WordPress specifically, try How To Create A Simple 404 Error Page For WordPress Themes.Offering AssistancePerfectly functional, exactly what you want from www.gov.uk/404.Crystal clear message from www.designernews.co/404.Functional from Foursquare foursquare.com/404.Netflix, showing Its clever 404 page demonstrates both a keen sense of wit, and a clear call to action to take you where you need to be.11. If you view the image on Behance, it even moves, adding another layer of interest and entertainment.02.
The subtle gradient helps cut any harshness that could be, and leaves this 404 page with a nice, happy brightness.43. http://thenextweb.com/dd/2015/04/21/the-art-of-error-12-clever-404-pages/ To learn more clever interaction design techniques, download the free e-book, Interaction Design Best Practices: Time & Behavior. 404 Error Page Template People love being surprised and taken aback, so don’t shy away from that in your 404 page. OlogieThis page is kind of gross, plain and simple. 500 Error Page AirbnbIf you drop ice cream on the floor, clean it up, right?This 404 page from couch-surfing behemoth Airbnb features a delightful animation that holds lessons for us all about ice cream
Tweet us @HubSpot to continue the discussion. 52 Comments Previously: 4 Tips for Competing with Mega Stores This Holiday Season Next up: Emails Looking Funny in Outlook? check my blog It might push any boundaries but it at least give you an idea of Dan's style, and encourages you to click through to the rest of his work.03. It's a bummer, but a fact of life. If they would have used a pointier typeface it would have been disconnected, creating too much tension on the page.21. Error Page Template Bootstrap
MagntMagnt's clever 404 page demonstrates both a keen sense of wit, and a clear call to actionMagnt enables you to create a business card themed web page in minutes. Design Resources - Nov 4 50 Design Terms Explained Simply For Non-Designers Design Resources - Oct 14 The 30 Best Free Social Media Icon Sets of 2015 Design Resources - Aug Hakim El HattabThese creepy eyes follow your cursor around the pageA 404 page designed for .net magazine, this time by Hakin El Hattab, this HTML5 experiment features creepy eyes that follow this content It’s an awkward situation, the site not doing what it’s supposed to — but that surprise also enables it to be funny, as the user is not expecting the fun message
Could it be shown visually in a creative way? Error 404 Text Message Prank StylizeIf you’re doing something illustrative, it doesn’t have to be so elaborate that it looks real. We love the reference to the Semisonic song "Closing Time": "You can click anywhere else, but you can't click here." 15) Cooklet Cooklet's error pageis simple and delightful in design and
Hillary ClintonHillary Clinton's 404 page is just the ticketIn the name of balance we totally checked out Donald Trump's 404 page and it was thoroughly uninspiring, but at least inoffensive. Share with us in the comments. The animated emoji wearing a spacesuit appears to becatapulted further and further into space the longer you stay on the page. 22) Hot Dot Productions Hot Dot's error page stays true Simple 404 Page Html The style of the 404 page fits the rest of the site design nicely, reflecting the same lighthearted approach that makes an otherwise boring task into something fun and endearing.16.
Be BrightUse bright punches of color to draw attention and add a flare. It’s just mainstream enough that younger audiences will understand and older audiences won’t be left in the dust.31. BlueggThis noisy chap provides a hilarious notification that you're in the wrong placeThe 404 page of creative and digital design agency is simple, but so effective. have a peek at these guys the galaxy.
Interestingly enough, there are also times when they delight you to the point you don’t mind the dead link. Design Layout - Apr 8 20 Design Rules You Should Never Break Design Layout - Apr 14 10 Ways to Stop Your Designs From Looking the Same Have funDon’t be afraid to have fun with your 404 page. Crowd (you are, right?) I won’t need to tell you what’s going on in this GIF.
What best describes the reason for your interest in design? Home Star RunnerThis 404 page features amusing characters, downloads and shouts "404'd" at youAudio can be very effective when combined with visuals on a web page, especially as we're still in A classic photo of Lionel Richie paired with one of his famous song lyrics makes this page very successful. England and Wales company registration number 2008885.
Instead of spacing out the astronaut and text, they chose to put them all together. Simple and clean.Sincere ApologiesApologies from the team at castle.io/404.Likewise from Litmus litmus.com/404.A Touch of PersonalityBiased? Use IconsUsing iconography on your page can help simplify things. Even though the screen is small, you can still read the message clearly.44.
The framing, technique, use of colors, etc. The 404 error code is relayed in an interesting, unique way. MailChimpDon't make the monkey angry...The designers at ultra-hip email newsletter service MailChimp have morphed the company's well-known monkey into a Hulk-type character, complete with animated smoke, to signify a broken link. She combines her passion for both in a beauty blog and beauty channel on YouTube.Related articles Search Search Close searchBack to all articles Graphic Design for Print vs The
Break the mold and do something different, it’ll set you apart from the rest. Behance/Rodrigo CostaThis page does a good job of breaking the mold. But the way the text is created from the grossness is pretty interesting, and the expression fits perfectly.49. It looks sad and sorry that the page is missing, and the text in the green bar makes it seem helpful. That's the concept CSS Tricks was going for in their 404 error page.
Push BoundariesThink about what might be just a bit too much for someone to handle, and go just past it. Marketing Feed Search December 16, 2015 // 8:00 AM 24 Clever 404 Error Pages From Real Websites Written by Rachel Sprung | @ Share Share Tweet Website uptime -- the amount Think of common expressions and visuals that relate to something being lost and set the stage with them. Behance/Zach DaleyThis page takes one of these things and illustrates it, being stranded The good news is that 404 pages also offer a refreshing opportunity for humor.