large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/your-404-page-shouldnt-just-be-funny-or-pretty-15-examples-that-are-totally-on-brand-f7d008dd4079?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> PageCloud <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*81Ca47duraWrv39VqkbL0g.jpeg">Creative 404 pages are all rave these days.</p>
<p>Web designers are constantly trying to one-up each other, making better versions of, and having fun with what used to be a generic error message.</p>
<p>A simple search on Google, Pinterest, or Dribbble will bring up thousands of examples to help get your creative juices flowing.</p>
<p>…However, beautiful aesthetics are only half the battle!</p>
<blockquote><p>The one thing that really sets a 404 page apart from the rest is the way it ties into your brand, products, services, and direct calls-to-action that re-engage your visitors so they continue exploring your site.</p></blockquote>
<p>The following brands did a great job of producing custom 404 pages that check all the boxes.</p>
<h4><strong>Marvel</strong></h4>
<p>Marvel puts their superheroes front and center on their <a href="https://marvel.com/404">404 page</a>.</p>
<p>They did a great job at tying the error message back to a specific character. Added bonus, the page has subtle animations, and can be refreshed to view other characters. Genius!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*bWNV0uQ-s7Qn9ajb."></p>
<h4>20th Century Fox</h4>
<p>So simple, yet so smart. 20th Century Fox leverages scenes from their movies to poke fun at the dreaded <a href="https://www.foxmovies.com/404">404 page</a>, as they do with this scene from ‘Revenge of the Nerds’.</p>
<p>You can even get a little revenge of your own — by purchasing the movie at a discounted rate!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/638/0*PsS-VsFaZKnk_idQ."></p>
<h4><strong>Specialized</strong></h4>
<p>Why not showcase your product in action?</p>
<p>Specialized uses one of their riders to explain their <a href="https://www.specialized.com/us/en/404">404 page</a>. Everybody makes mistakes, why not showcase one on your custom 404 page?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*vWYyFng-KWaJd_Xr."></p>
<h4><strong>Blizzard</strong></h4>
<p>Blizzard, a popular video game producer, takes the <a href="http://us.blizzard.com/en-us/404notfound">broken page</a> to a whole other level. The menu, the screen — everything is broken. And it’s all your fault!</p>
<p>Bonus points for a menu that still works, allowing visitors to re-engage.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Yd4h3lRZq7OkqGY7."></p>
<h4>eHarmony</h4>
<p>Dating sites are known for having great <a href="http://www.eharmony.com/404/">404 pages</a>. eHarmony’s is another great example of how a simple image and cheeky copy can turn frustrated visitors into potential customers.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*SLKFMNuN-OKBy9qz."></p>
<h4>Pixar</h4>
<p>The animated film giant has one of the most on-brand <a href="https://www.pixar.com/404">404 pages</a> online today. Sadness, from their hit movie ‘Inside Out’, is used to explain the error message using concepts straight from the movie. Also, props for a beautiful design with lots of white-space!.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*HNUXjLfBf-I305Ay."></p>
<h4>Distilled</h4>
<p>Distilled’s <a href="https://www.distilled.net/404/">404 page</a> takes a completely different route. Instead of going for minimal copy and hoping for a click, the page showcases two very dapper cartoon characters discussing the 404 error and what visitors can do next. So simple, yet so creative.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3Wc8jDVReC7maZbt."></p>
<h4>PageCloud</h4>
<p>Yes, even website builders need a 404 page!</p>
<p>The <a href="https://www.pagecloud.com/404">PageCloud 404 page</a> aligns brand, product and context together as one. You’re on a broken page, why not create one instead? Oh yeah, there are also clouds in the background!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sILh7x4wGzaAqR4b."></p>
<h4>airbnb</h4>
<p>You can’t help but feel bad for airbnb’s animated girl who drops her ice cream in this <a href="https://www.airbnb.ca/404">404 page</a>. You don’t want to leave right away, that wouldn’t be nice! Instead why not click on a help link instead?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*xXXLfQTjf17kky2m."></p>
<h4>9GAG</h4>
<p>9GAG is known for funny videos, images, and gifs.</p>
<p>Their <a href="https://9gag.com/404">404 page</a> showcases a well-known scene from Pulp Fiction, where a confused Vincent (John Travolta) is looking around for Mia (Uma Thurman). The subtitle: “There’s nothing here” and download our app to find what you’re looking for ties everything together perfectly.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/628/0*mTD-FV9wq-mLlBU1."></p>
<h4>Dan Woodger</h4>
<p>The popular freelance illustrator, whose creations have been used by giants like McDonald’s, adds one of his friendly burgers holding a sorry flag to his clever <a href="https://danwoodger.com/404">404 page</a>.</p>
<p>Bonus? The subtle call-to-action, sending visitors to check out his other illustration work.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Ar0Ig1st37d2mNKJ."></p>
<h4>Email Center UK</h4>
<p>Talk about poking fun at the “error” message. It has to be someone’s fault, right?</p>
<p>Emailcenter’s <a href="https://www.emailcenteruk.com/404notfound">404 page</a> asks you to choose which one of their developers should be fired for the mistake. Whoever you pick, you’ll see a funny group picture and relevant copy. Maybe next time they will add a redirect and save their jobs.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*G9aQ1gHF5Wu9Z8Md."></p>
<h4>IMDb</h4>
<p>IMDb is one of the largest sources of movies, TV and celebrities. Their <a href="http://www.imdb.com/404">404 page</a> pulls several quotes from popular movies that have been altered to fit the context. Hit refresh and you’ll see a new quote with a strategic link to more information about the film.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1006/0*fHbhl-76Vci_m8Xt."></p>
<h4>Orange Coat</h4>
<p>Orange Coat’s <a href="https://www.orangecoat.com/dear-happy-internet-traveler">404 page</a> has a clever flowchart to guide the “Happy Internet Traveler” to the information they were looking for. All you need to do is answer their YES/NO questions and you’ll be on your way.</p>
<p>Bonus: their URL even ends with /dear-happy-internet-traveler — much friendlier than /error, right?</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1dtaCnTerx1pN6wp."></p>
<h4>LEGO</h4>
<p>LEGO’s <a href="https://www.lego.com/404">404 page</a> is another example that shows how your page can be: attractive, efficient and on brand without having to be overcomplicated. A picture, a line of text and a button to send users home. That’s it that’s all — and it still makes you smile every time you see it.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*gZGBvTc8QC4RXUGU."></p>
<p>What do you think of these designs? Which one is your favorite?</p>
<h4>If you’re feeling inspired, why not learn how to <a href="https://www.pagecloud.com/blog/how-to-make-a-custom-404-page">create your own 404 page</a> today? It’s easier than you think!</h4>
<p><em>Written by Philip Westfall, Growth Marketer at PageCloud. This post was originally published on </em><a href="https://www.pagecloud.com/blog/top-3-seo-hacks-that-actually-work"><em>The PageCloud Blog</em></a><em>, where we discuss website trends, tips &amp; tricks and go behind the scenes at the website builder you’ll love to use.</em></p>
<h3>Want to read more like this?</h3>
<ul>
<li><a href="https://medium.com/@PageCloud/how-to-make-a-custom-404-page-b6799c427f35">How To Make A Custom 404 Page</a></li>
<li><a href="https://blog.prototypr.io/how-to-use-animations-and-motion-in-web-design-2fd1f68e6e02">How To Use Animations and Motion in Web Design</a></li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f7d008dd4079" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/your-404-page-shouldnt-just-be-funny-or-pretty-15-examples-that-are-totally-on-brand-f7d008dd4079">Your 404 Page Shouldn’t Just Be Funny Or Pretty. 15 Examples That Are Totally On-Brand.</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Your 404 Page Shouldn’t Just Be Funny Or Pretty. 15 Examples That Are Totally On-Brand.

Your 404 Page Shouldn’t Just Be Funny Or Pretty. 15 Examples That Are Totally On-Brand.

Top Stories