1. 50 of the most creative 404 pages on the web

50 of the most creative 404 pages on the web

50 of the most creative 404 pages on the web

At some point in our internet using lives, we’ve stumbled across a 404 page.

Whether you’re new to the web or a seasoned veteran, they can be confusing and frustrating.

So why do they even exist?

404 pages serve to alert the visitor that the page they were trying to find no longer exists, and to (hopefully) redirect them to another part of your site. Quite often 404 pages can be overlooked and treated as an afterthought. Countless hours are put into your website and the content pages that make it up, but when it’s the 404 page’s turn, it’s easy to use the generic error code to save time (but you shouldn’t).

Having a custom (and creative) 404 page is a discovery for visitors in itself. It makes light of an unfortunate situation and can point users to a place where they might get some help.

Here’s how you can create an awesome 404 page for your site:

01. Have fun

Don’t be afraid to have fun with your 404 page. It can be imaginative and outlandish as long as it communicates.

Behance/Thapwaris Chinsirirathkul

Behance/Thapwaris Chinsirirathkul

In this fun 404 page, you’re transported to space. The 404 error code is relayed in an interesting, unique way. If you view the image on Behance, it even moves, adding another layer of interest and entertainment.

02. Block in shapes

Shapes can be your best friend in design. You can use shapes as patterns and texture, or you can use them together to create a new shape.

Behance/Manoj Bhadana

Behance/Manoj Bhadana

On this page, icons were used together to create another shape in itself, a question mark. The shape relates to the purpose of the page, the fact that what was being searched can’t be found. If a simple, solid question mark had been used instead, it would have lacked color and texture.

03. Use movement

You can create movement visually with a variety of techniques, but this is the 21st century. If you want something to appear as though it’s moving, make it actually move.

output_Re4zcS

Behance/PBB | PITBLACKBEARD The movement of this 404 page is playful and cute. Even if you can’t read the language the page is written in, you still appreciate and enjoy the visual. The act of the tassels swinging rather than remaining stagnant gives the simple graphic an extra oomph.

Personalise this template for your 404 page using Canva:

04. Keep it concise

You can have a beautiful 404 page that is ridiculously simple. If having a complex and busy page is off brand or not what you’re going for, narrow it down to the basics of what you need.

Behance/Keren Rijensky

Behance/Keren Rijensky

This 404 page is super simple, yet still effective. Choosing to nestle the 404 text inside a magnifying glass is both literal and figurative. You were searching for something, yet you found this page instead. You understand what it means without it being spelled out for you.

05. Use emotion

Draw from people’s emotions. You can make them laugh, cry, reflect, and much much more. Humans are emotive in nature, they’ll relate to what you’re saying.

Behance/Keren Rijensky

Behance/Keren Rijensky

The character in this page tugs a little on your heartstrings. It looks sad and sorry that the page is missing, and the text in the green bar makes it seem helpful. You almost feel bad for the little guy, and you’re not so upset that you landed on the page in the first place.

06. Be illustrative

Illustration is incredibly popular and appreciated. It shows creativity and a great attention to detail, so why not include it in your 404 page?

Behance/kobieta

Behance/kobieta

The illustration in this 404 page serves two purposes. It creates a scene to house the 404 message as well as gives you ‘someone’ to give direction. The pigeon making direct eye contact speaks to you, giving you options of what you can do from this point.

07. Don’t overthink it

Just because you want a unique 404 page doesn’t mean you have to pull out all the stops and create something completely innovative. Take a look at current trends and what’s popular and implement that into your page.

Behance/Aaron Snyder

Behance/Aaron Snyder

This page takes the popular clip art(opens in a new tab or window) inspired characters we see all over the internet and applies it. The character isn’t a fully developed and rendered masterpiece, but it’s fun and fits the situation at hand. The expression really adds something more to the message, and the cape is a quirky play on how not everyone can be a winner (or hero). Enhance your character designs with our AI Character Generator(opens in a new tab or window) for even more creative possibilities.

08. Be literal

You don’t have to skirt around the subject in your 404 page. Everyone knows why he or she ended up there, so it’s absolutely fine to show a literal representation.

Eleks

Eleks

Here there is a robot (representing the website, or the internet in general) and it’s starting to come apart at the hinges. It’s broken, visually showing that the link you were trying to find is also, in fact, broken.

09. Stylize

If you’re doing something illustrative, it doesn’t have to be so elaborate that it looks real. Take liberties and stylize where you can. The illustrations become more cartoon like and approachable.

Behance/Diogo Marquetti

Behance/Diogo Marquetti

This 404 page really stylizes the illustration. The flat colors and simple shapes work well together and create a scene. The message itself is even somewhat stylized. Rather than having something super technical, the sheep is the one responsible for the mishap, having pulled the plug (figuratively) on the page you were trying to find.

10. Use overlap

Overlap shapes, letters, or colors to create interesting effects in your 404 pages.

Behance/Evtimov

Behance/Evtimov

This page would have been a little too simple if it didn’t have the small overlap element. It’s a simple black and white scheme with a clean, sans serif font. Adding the lines over the 404 adds a layer of interest to the page, and reinforces the fact that something can’t be found.

11. Use relevant imagery

While it can be funny to use images that don’t make much sense on your page, it can be beneficial to use images that do. It pulls together the message and makes more sense, rather than simply poking fun with an image and quippy one liner.

Behance/Colin Tossijn

Behance/Colin Tossijn

This page is a great example of using relevant imagery. The red stoplight alerts you to stop, that something isn’t right. But, instead of using just a standard red circle, they use their logo. This further enforces the brand and lends a creative touch.

Personalise this template for your 404 page using Canva:

12. Limit color

Pick a few colors (ones that work together) or variations within one color and stick with it. It creates a theme and can simplify your design process by restricting yourself from using too many colors.

Behance/Alessandro Ceporina

Behance/Alessandro Ceporina

This page uses various shades and tints (darker and lighter tones) of blue. It works well because the tones are different enough that it doesn’t feel too ‘blue’, yet there is a clear theme and everything relates well to one another.

Personalise this template for your 404 page using Canva:

13. Embrace exture

Flat color is the web standard, so using texture as an element of your page can really set you apart from the rest.

Behance/Damien Pereira

Behance/Damien Pereira

Flat color is still used in this 404 page, but the texture within the type adds a unique flare it may not have otherwise. Had they used the paper-like texture in the background and the dark teal for the type, the page could have been too busy and jarring to look at.

Personalise this template for your 404 page using Canva:

14. Provide options

When a visitor reaches a 404 page it’s important to give them direction on what to do next. Do they go backwards or return to the homepage of your site? The more direction you give the more likely they are to actually stay on your site, rather than click away.

Behance/Harry Tran

Behance/Harry Tran

This page gives visitors a ton of options when they reach a 404 page. They can go back home, enter in a search query, or visit the brand’s social media pages. Instead of treating the page as an end all, they used it to its full advantage, and are more likely to keep the visitor than deter them.

15. Be unconventional

Don’t limit yourself to the standards of the web, whether it be fonts, colors, or imagery. Break the mold and do something different, it’ll set you apart from the rest.

Behance/Rodrigo Costa

Behance/Rodrigo Costa

This page does a good job of breaking the mold. Instead of just using a regular ol’ typeface, they used furniture (from their company) to create the 404 mark. It’s a creative and interesting visual that breaks the humdrum of normal pages.

16. Use negative space

There’s no need to cram every inch of your 404 page with something. Let everything breathe, it’s more effect that way.

Behance/Jacopo Caracci

Behance/Jacopo Caracci

Most of this page is blue and empty, with the logo and the message being the only two things added on. There’s plenty of space between the two, and it gives the impression that both are floating, which lends well to the cloud aspect.

Personalise this template for your 404 page using Canva:

17. Make it a pun

404 pages are all about something not being found, so why not play off of that fact? Think of common expressions and visuals that relate to something being lost and set the stage with them.

Behance/Zach Daley

Behance/Zach Daley

This page takes one of these things and illustrates it, being stranded on a deserted island and hoping to be found (just like what the visitor was searching for).

18. Be cheeky

If you’ve got a funny message you’d like to relay alongside the 404 code, make your graphic relate to it.

Behance/Zach Daley

Behance/Zach Daley

This page has a witty message it chose to use about not panicking and watching your oxygen levels. Rather than not using a graphic, they chose to use one of an astronaut that seems to be floating out of control into space. Now, is that message for you, or the astronaut?

19. Create dimension

Layer up different elements within your composition to create dimension and escape the flatness the web can often have.

Behance/Dariusz S

Behance/Dariusz S

In this page, the slicing knife reveals elements below the standard white. The contrast between the dark red and black adds more dimension, separating itself from the rest. Even though it’s two-dimensional, it looks three-dimensional.

20. Carry shapes throughout

Determine what style you’d like to use for your page and stick to it. If you want sharp, angular shapes don’t add in softer ones, it’ll just be confusing. Whatever the style, implement it into everything you have on the page, type included.

Behance/Cristina Maria

Behance/Cristina Maria

Here is a softer approach. The roundness of the clouds is carried into the typeface. If they would have used a pointier typeface it would have been disconnected, creating too much tension on the page.

21. Be elaborate

If being incredibly decorative is more your style, go for it. If done correctly, an elaborate and embellished look can make your page feel more upscale.

Behance/Ruth Lin

Behance/Ruth Lin

This page combines elaborate details with a simple white background beautifully. The colorful illustration is carried down into the text and creates little windows to peak through. Cutting it off with white instead of carrying it all the way through ensures that it doesn’t get too busy and still translates.

22. Utilize aspects of your brand

What does your brand do? Could it be shown visually in a creative way? If it can, consider doing it on your 404 page.

Behance/Andrei Moldovan

Behance/Andrei Moldovan

This floral company swapped out the zero in 404 for a flower, an appropriate switch. It personalizes the page a little bit, and ensures that visitors know what their brand does.

23. Be informative

If you don’t want to provide visitors with a plethora of options when they stumble across your 404 page, give them a clear indication of what to do.

Behance/Maurília de Nóbrega

Behance/Maurília de Nóbrega

This page isn’t overly information laden, but it tells you what you should do next. You don’t know where it is you’re going, but you know wherever it is, you’ll have better luck. The airplane path is a nice touch, getting clearer and more direct as it approaches the button you need to click on.

24. Use different mediums

Not everything you do on your 404 page needs to be digital and created in one of the many programs designers use. Consider thinking outside of the box and using a more tangible medium.

Behance/Todd Goldstein

Behance/Todd Goldstein

This page uses different embroideries with various images on them. The most visible one is the 404 embroidery (for good reason) and it is paired alongside other, homier looking ones. Even though it’s a bit odd at first glance, it works well. It’s approachable and a bit quirky.

25. Step outside of the computer

Similar to the previous tip, step away from the programs for a little bit. Use your hands and create something three-dimensional.

Behance/Olga Shipilo

Behance/Olga Shipilo

This page uses hand made clay figures rather than flat illustrations. It stands out from other 404 pages because of the hand-crafted aspect. It has character, and the character within it is relatable (it is frustrating to reach a 404 page).

26. Break up text

Don’t feel required to use only text to translate(opens in a new tab or window) information when it could be done with something more creative.

Dribbble/Olia Gozha

Dribbble/Olia Gozha

This page carries the space theme into their text, replacing the zero with a galactic swirl. It fits well into the composition and relates to the circular shapes repeated throughout the page (the planets, stars, and radiating blue circles).

27. Create an emotional connection

If you can create a connection with a visitor on your page, you’ve done a powerful thing. Appeal to their emotions and they’ll connect to your brand.

Salt City Builds

Salt City Builds

This imagery is incredibly emotive paired with the text. You see two people who obviously have a connection, and when you read the text you imagine they’re out on the open road with no particular destination, just going wherever the wheels take them. It’s a concept most people can appreciate and even want to do, but just impractical enough that it’s more wished after than acted upon.

Personalise this template for your 404 page using Canva:

28. Utilize photography

Use beautiful photographs in your page to draw interest. Many, many things can be done with cameras in today’s tech laden world, so you can get incredibly creative with what and how you’re shooting.

Dribbble/Evgeniy Dolgov

Dribbble/Evgeniy Dolgov

This 404 page uses incredibly vibrant photography with delicious foods to make an unpleasant situation more pleasant. The colors work well together, and the bright yellow brings a happier feel to the page.

Personalise this template for your 404 page using Canva:

29. Use motion

Motion can be created without actually making things move on the page. If done correctly, it can have a really interesting effect.

Dribbble/Justas Galaburda

Dribbble/Justas Galaburda

The movement in the text on this page is very effective. It’s not overdone and translates just enough motion. It relates with the messaging and further hones the motion home.

Personalise this template for your 404 page using Canva:

30. Implement pop culture

Use something iconic on your 404 page that will appeal to large groups of people. Being a little tongue in cheek never hurt anybody, and most of the time humor is appreciated.

STG.

STG.

This 404 page is definitely tongue in cheek. A classic photo of Lionel Richie paired with one of his famous song lyrics makes this page very successful. It’s just mainstream enough that younger audiences will understand and older audiences won’t be left in the dust.

Personalise this template for your 404 page using Canva:

31. Be symbolic

Using symbolism in your page can create a relationship between the imagery and messaging. The symbol could be literal or figurative as long is it makes sense.

Dribbble/Ron Evgeniy

Dribbble/Ron Evgeniy

This page uses a broken pencil as symbolism for the broken link that brought you there in the first place. It makes clear sense and you’d get the gist even if you didn’t read the error code.

32. Create contrast

Create contrast so your page doesn’t fall flat. It’s important to have hierarchy, and the most important things should stand out against the rest.

Dribbble/Meng To

Dribbble/Meng To

This page creates contrast with color. The dark blue in the background makes the vibrant buttons stand out. Your attention is drawn to them, and you’re more likely to interact with them.

33. Use icons

Using iconography on your page can help simplify things. Use an icon in the place of text and it becomes much more readable.

Underbelly

Underbelly

This page uses a compass to let you know something’s up. It’s the main focus and everything around it is simplified. It matches the branding (the logo is a whale) and fits with the light blue color scheme. The simplicity of the icon lends well, and if it was more detailed it wouldn’t be as effective.

Personalise this template for your 404 page using Canva:

34. Have a theme

Pick a theme and carry it throughout. A consistent theme will make your page more cohesive and work together.

Dribbble/Garrett Godsey

Dribbble/Garrett Godsey

The logo color is drawn from in this theme. The teal is carried through the logo to the illustration, through some of the text, and down to the footer. If different colors had been used in each area it would have been too busy and disconnected.

35. Make it relatable

Use imagery the audience can relate to, as they’re more likely to form a relationship with your brand.

Hugo Franca

Hugo Franca

The imagery in this 404 page is relatable both to the audience and to the message it’s portraying. Everyone knows what a cleaned plate looks like after dinner, and the messaging of ‘no longer having that’ relates back to the image. What was once there no longer is, and you can see it in the photography.

Personalise this template for your 404 page using Canva:

36. Consider the space

An illustration or image doesn’t have to fit perfectly within the space you’re working with. If everything is too perfect and too symmetrical, it could feel unnatural.

Dribbble/Jenny Leonard

Dribbble/Jenny Leonard

This page takes an illustration, and though it’s centered, makes it feel more natural. The imperfect streaks of blue make it feel as though it was painted on the background and not just placed there.

37. Don’t be afraid to crowd

Don’t be afraid of large open spaces on your page. If you have a few things you want on there, experiment with putting them close together.

Dribbble/Ben Jordan

Dribbble/Ben Jordan

This 404 page leaves a large area of black at the bottom. Instead of spacing out the astronaut and text, they chose to put them all together. If they had spaced them out, the outer space effect would have been lost (the stars melting into the black).

38. Use cutouts

Feel free to cut parts and pieces out of your imagery and text. You don’t have to use something in its pure, raw form. Experiment with how things change once parts are missing or added.

Dribbble/Fabricio Rosa Marques

Dribbble/Fabricio Rosa Marques

This 404 page is simple. It could have been too simple had the question mark not been cut out of the zero. It adds a nice touch, and the zero is still clearly read as a zero.

39. Make it easy to understand

For a select handful of people who may not know what a 404 page is, spell it out for them. It doesn’t have to be spelled out in words, but in imagery.

Dribbble/Kevin Cdnc

Dribbble/Kevin Cdnc

This 404 page is very literal. It shows the 404 code, a line of text saying the page can’t be found, and has an image of a guy with binoculars searching for something. It makes perfect sense, and even the most inexperienced of internet users would get it.

40. Show a scene

Create a scene in your 404 page. You have an entire page you can do whatever you want with, why not tell a story?

Postbox

Postbox

There is cute little scene in this 404 page. A sunken boat lurks just under the surface of the water with the mountains peaking out in the background. You can see a little fisherman still fishing on the boat, and the fish are very active. The scene transitions well into the informational section of the page, and nothing is lost in either.

41. Be experimental

Don’t be afraid to experiment with your 404 page. Break conventions and push limits. If you go too far, you can always go back, but if you don’t push you’ll never know what could be.

Dribbble/Jazmine Kohl

Dribbble/Jazmine Kohl

In this 404 page there is quite a bit going on. There are different hand drawn fonts and imagery, the colors shift, and texture is used in some areas and not in others. Even though so much is happening it still works. Everything is balanced and not too overwhelming.

42. Be bright

Use bright punches of color to draw attention and add a flare. Don’t feel the need to be muted just because it’s a 404 page.

Juicy Graphics

Juicy Graphics

This 404 page uses a bright pop of orange on their 404 page. The orange color works so well because it relates to the orange image in the 404. The subtle gradient helps cut any harshness that could be, and leaves this 404 page with a nice, happy brightness.

43. Don’t limit yourself

Just because you’re creating a page that will end up on a computer screen doesn’t mean you have to design it for the computer screen. Be flexible and try your hand at other dimensions.

Dribbble/Justin Belcher

Dribbble/Justin Belcher

Instead of filling the entire screen with the message, this 404 page fills the camera screen with the message. This is an interesting and unique solution to what could become just another web page. Even though the screen is small, you can still read the message clearly.

44. Box it in

Experiment with boxing in your letters and numbers. It can help create separation in your design where it’s needed.

Handmade Studio

Handmade Studio

In this page the 404 is boxed in rectangles, giving it the effect of a clock. The last four looks like it’s just about to change, indicating that maybe, just maybe it could become another number, and then become another page.

45. Be creative

Take liberties and turn one thing into another. You can create whatever you want, it’s your 404 page!

Dribbble/Morgana D'Almeida

Dribbble/Morgana D'Almeida

Is it a pencil? A bee? Both? In this 404 page, the creator took both and combined them. The trail it left buzzing behind looks as though it was drawn by the end of the pencil (or the stinger). The colors relate to one another, further indicating that it’s supposed to be a bee.

46. Be cheesy

Cheesiness can be endearing, so don’t be afraid to try it. It doesn’t have to be too over the top, just be sure to find the balance that works best for you.

Dribbble/Mitchell Geere

Dribbble/Mitchell Geere

This 404 page for a dating website is the perfect amount of cheesiness. The text paired with the picture is truly a sad story to see, and it makes you chuckle just a little bit.

47. Give it edge

Whether it be sharp and angular in shape or in attitude, being edgy is incredibly popular and becoming more mainstream.

Dribbble/Martin Bonov

Dribbble/Martin Bonov

This page chose to be edgy with its attitude (and its looks). Skateboarding is a popular (amongst younger generations) and carries with it its own attitude. The message of ‘you just bailed’ gives it an edge (especially paired with the subtext). The image relates to the text, and the red filter gives the photo a more intense appearance.

48. Push boundaries

Think about what might be just a bit too much for someone to handle, and go just past it. People love being surprised and taken aback, so don’t shy away from that in your 404 page.

Ologie

Ologie

This page is kind of gross, plain and simple. A sweaty office guy who just can’t keep his pits out of your face? Gross, and pretty uncomfortable. But the way the text is created from the grossness is pretty interesting, and the expression fits perfectly.

49. Use patterns

You can make a pattern out of nearly anything. Photographs, illustrations, icons, colors, shapes – you name it. Patterns are a great way to add an extra element of something special into your design, so get creative with them.

McCann

McCann

This page uses different images to create a pattern in the background. They’re washed out, so they don’t compete with the text, and help create a subtle texture. They help to pump up the interest in a simple black and white scheme.

Personalise this template for your 404 page using Canva:

50. Have layers of information

If you provide lots of options on how to remedy the problem or where to go next on your 404 page, break it up so it’s less daunting.

Dribbble/Trina Parkin

Dribbble/Trina Parkin

This page contains a ton of information and helpful sources, but it’s laid out in a clean and efficient way. Every part has its own section that is clearly distinguished from the rest. It makes the decision making process much easier.

Over to you

Now that you’ve seen a ton of awesome examples of 404 pages, there’s no reason you shouldn’t have one as well. Implement some of these tips into your own page and you’ll be sure to have a 404 page worth sharing (it may even end up on a list like this one).

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.