![\"A](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/blank404.jpg\"){kind=spacer}
<\/p>\nAlmost any chance you get to show off your brand’s personality while creating a memorable experience is a win. With some creativity and strategy, you can stand out from your competitors and take advantage of one of the most underutilized pages on a website – 404 pages – to turn potentially frustrated visitors into loyal fanatics.
\n<\/p>\n
A 404 page is where visitors get taken to when they attempt to visit a page that has moved or is non-existent on your website. There are many reasons this could happen; typos, broken links, changed URLs, server trouble, etc.<\/p>\n
In theory, you never actually want people to see your 404 page, but let\u2019s face it \u2013 we all fudge up.<\/p>\n
Without a doubt that if you have a website, you need a 404 page. When a visitor hits a broken link or moved page and you don\u2019t have an actual 404 page it will send off the server default one – which looks quite scary and is frustratingly unhelpful.<\/p>\n
<\/p>\n
Luckily if you have a WordPress site or are using a builder, you most likely have a generic one by default. The default 404 page is better than not having one, but you should add to it and maximize its effectiveness.<\/p>\n
The best 404 pages are strategic enough to keep visitors on their site and going through more content. It also helps when you have something out of the ordinary to catch their eye – this is where you can let your brand\u2019s personality shine.<\/p>\n
Write a headline and sentence explaining that the page your visitor tried to visit doesn\u2019t exist or has moved. Nobody wants to be even more frustrated not knowing where the page they were looking for is.<\/p>\n
Shape the language to be positive and highlight that it isn\u2019t your visitors fault. Not doing so can subconsciously can have a negative impact on them.<\/p>\n
It\u2019s a good idea to link the visitor to your most popular pages to peak their interest. Check Google Analytics to find your top visited pages and use data when you make your link choices.<\/p>\n
You could also link your navigation, top sales pages, or blog if you have too many popular pages.<\/p>\n
Remember that unless you give a clear action that you want your visitor to take, the list of links will be less powerful.<\/p>\n
It\u2019s not necessary to use a search box if you have a fairly small website, but it\u2019s definitely helpful. The visitor was looking for a specific page in the first place so allowing them to search directly from the 404 page would be helpful.<\/p>\n
Don\u2019t list links to every single page on your website. Also, don\u2019t go crazy with your photo album or have 50 different things at once going on. It will overwhelm your visitors. Keep it simple.<\/p>\n
Most 404 pages are boring since they just list the error and send you on your way – that’s why creative 404 pages shine!<\/p>\n
Typically no one wants to land on a 404 page while they’re looking for a specific page so making it fun softens that blow of potential frustration to your visitor. It could also help make your brand more relatable and likable.<\/p>\n
While having fun remember to keep it consistent to your brand \u2013 as you should always. Stick to the colors, fonts, and vibes your customers can expect from your brand.<\/p>\n
![\"Garett\u00ae](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/03\/garett404-min.gif\")
<\/p>\n
For my 404 page<\/a> I had two things in mind; keeping it light-hearted by showing my geeky side and displaying what I could do with code-based animation. This is how Super Garett World 404<\/em> was born.<\/p>\n While you get glimpses of my geeky side on social media and these articles, it\u2019s a nice Easter egg to see it in full force on my business\u2019 website.<\/p>\n It\u2019s a whole lot of fun with the illustration and animation, but the copy makes it clear that the page is missing and what the visitor can do from here. Also you can note that while the animation is a bit different from my site, I still have branded it with my name, colors, and typography on the copy to let you know it\u2019s me.<\/p>\n Amazon needs no introduction. Keeping it super simple, they\u2019ve stripped their normal navigation and 100+ links in favor of a search bar, a link to their homepage, and a less obvious link to \u201cmeet the dogs of Amazon\u201d.<\/p>\n Upon each time you hit the 404 page, it loads a random employees\u2019 dog, which makes it less frustrating that the product you\u2019re looking for isn\u2019t there. Oh \u2013 and seeing such adorable puppies makes me (and most people) happy!<\/p>\n This 404 page does a wonderful job at two things; giving the visitor a quick way to find the product they want and shows the human side of Amazon (and their employees).<\/p>\n Bonus: the less obvious \u201cMeet the dogs of Amazon\u201d link helps you discover Amazon actually has a blog, and the article with the dogs of Amazon is adorable.<\/p>\n Giphy is my favorite go-to GIF factory (and I send a lot of GIFs via text).<\/p>\n What makes Giphy\u2019s 404 page so great is that it\u2019s boldly on brand. There are a few different variations of animated backgrounds and words \u201cOops\u201d, \u201cWoof\u201d, or \u201cDang\u201d, but they all capture that Giphy spirit – there\u2019s a GIF for every moment.<\/p>\n It\u2019s also great that they explain the GIF (or page) searched for isn\u2019t there and show the current top trending GIFs, as well as a link to the homepage. The trending GIFs are usually relevant to what\u2019s going on in pop culture, headlines, or holidays – which keeps you motivated to use a GIF that you\u2019re likely relating to.<\/p>\n Spotify nailed it! I love a good wordplay, especially when it\u2019s highly relevant to the subject matter and explains a situation.<\/p>\n For those that don\u2019t know, 808s and Heartbreaks is Kanye West\u2019s famed entry into R&B, so flipping that album title into 404 (the type of page) and heartbreaks (an exaggeration of the feeling you may have when the page you\u2019re looking for isn\u2019t there) is genius.<\/p>\n The vinyl animation is entertaining enough to lighten the mood and the copy is clear, directing you to their FAQ or Community to help you find what you\u2019re looking for.<\/p>\n Famed magazine The New Yorker has no problems with staying on brand in their 404 page. Being famously known for their comic strips and political cartoons, they commissioned a comic panel of a mouse lost in a maze saying \u201crecalculating\u2026 recalculating\u2026\u201d – a common feeling when hitting a 404 page.<\/p>\n This strip is funny, cute, and really on brand for The New Yorker. When you pair it with a straightforward message about the error and inviting the visitor to search or goto the homepage, you have a memorably effective 404 page.<\/p>\n Dribbble is a website where designers get inspiration and post their work as inspiration for others. What makes their 404 page great is that it\u2019s interactive and pushes a visitor into checking out potentially 100s of other designs.<\/p>\n Upon loading the 404 page, 54 design thumbnails based around a specific color snap into the shape of \u201c404\u201d. Each load is a random based color, but there is a slider right underneath that allows you to adjust what color projects are pulled. This keeps the target visitor finding new inspiration!<\/p>\n Aside from the near endless supply of inspiration links, Dribbble does a good job to make it clear that the page is gone and even provides a search box at the bottom of the page.<\/p>\n For those wondering, it\u2019s not uncommon for posts on Dribbble to be deleted when designers post new work or before client launches, so a good 404 page is definitely needed.<\/p>\n Gaming culture is all about fun times and cheeky puns so it\u2019s only right that Xbox\u2019s 404 page doesn\u2019t disappoint. At the top they pull a random header image with a matching pun from some of their most recent exclusive releases.<\/p>\n Beyond the fun, Xbox\u2019s 404 page does a good job of directing visitors towards one of three common objectives; checkout the latest games, see what consoles we offer, and get the help you need to enjoy your Xbox experience.<\/p>\n Marvel is one of those fandoms that if you\u2019re into their characters, then you\u2019re all in and they really capture that with their 404 page.<\/p>\n Simply upon landing on the 404 page you\u2019re greeted that the page isn\u2019t found, actions of what to do next, and one of six animated characters with headlines that match their personas and stories.<\/p>\n Despite Spider-Man not being one of the characters, this is still a great 404 page because it tells you clearly the page isn\u2019t found and to use the search bar to find what you need. Also note that the animations and small related headlines like \u201cHYDRA is currently attacking this page\u201d really bring a smile to a fan\u2019s face.<\/p>\n With animation and interactive experiences you can really strengthen your brand and excite your loyal audience. As a fan of Marvel, seeing all my favorite characters on the 404 page makes me feel closer to the brand even though I hit a dead page.<\/p>\n Brands like Amazon sometimes often get a bad wrap and appear heartless (or humanless). As you can see, 404 pages are a good opportunity to showcase something that would otherwise be too random to put elsewhere. Whether it\u2019s dogs, employees, or just showing your geeky side, this is a great chance to do it.<\/p>\n Likely already frustrated, no one wants to read 3 paragraphs about why the page they\u2019re looking for is gone. Give them a sentence or two stating that it\u2019s gone and what they can do about it\u2026 make them laugh while you’re at it and you\u2019ll win them over.<\/p>\n What are your favorite creative 404 pages on the web? Let me know on Twitter (@GarettCreative)<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
\n7 creative 404 page examples<\/h2>\n
Amazon<\/a><\/h3>\n
![\"Amazon's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/amazon.jpg\")
<\/p>\nGiphy<\/a><\/h3>\n
![\"GIPHY's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/giphy.gif\")
<\/p>\nSpotify<\/a><\/h3>\n
![\"Spotify's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/spotify.gif\")
<\/p>\nThe New Yorker<\/a><\/h3>\n
![\"The](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/newyorker.jpg\")
<\/p>\nDribbble<\/a><\/h3>\n
![\"Dribbble's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/dribbble.gif\")
<\/p>\nXbox<\/a><\/h3>\n
![\"Xbox's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/xbox2.jpg\")
<\/p>\nMarvel<\/a><\/h3>\n
![\"Marvel's](\"https:\/\/www.garett.co\/wp-content\/uploads\/2021\/01\/marvel.gif\")
<\/p>\n
\nMaximize your 404 page by being memorably helpful<\/h2>\n
Animation and interactive experiences are all the rage<\/h3>\n
Opportunities to show another side of your brand<\/h3>\n
Be clear and concise in your messaging<\/h3>\n