50 practical design ideas to help you design creative 404 pages

Source: Internet
Author: User
Tags error code

Do the website is systems engineering. The content of the home page should be structured, the navigation should be clear structure, the child page should be typesetting evenly, relatively free slightly higher, should be 404 pages. Although 404 per se is an error code that informs users of access errors, creative designers make full use of the opportunity to show the unique temperament of the site, and the designer who attaches great importance to the user experience will take full account of the mood of the user at the moment and do their best to guide the user to the right page.

So, 404 pages can do is very simple, but also can be full of creativity. Today's cool station recommended, recommend 50 creative 404 pages, each page with the corresponding tips, I hope to help you.

01. Interesting Design

This is an interesting 404 page that uses a crater to represent 404 of the Code and is in space hinting that you are in the wrong place. If you visit the Behance page of this design, you will find more interesting places.

02. Graphical

Icons can play a variety of roles, indicating effects, decorations, even as textures can be. In this case, the designer uses a small icon to build a question mark, telling the user that what they are looking for is not there.

03. Use Dynamic Effect

This is a fun and lovely 404 pages, from the copy to the animation is very interesting, if you are also very boring, you can stare at the animation to play all day ...

04. Simple Design

This 404 page is super simple, but very effective. Simple and refreshing design, Magnifier and 404 combination enough to explain the problem.

05. Affective Design

Emotional design can always make people impressed. The design of this page can make people emotional touch, sad cartoon characters holding 404 of the small flag, flat illustration wind pleasing. The bottom green button can take you head page to continue to find the content you need, the key is that the copy is also very intimate.

06. Illustration description

The application of the illustration in the webpage is very extensive, the function is also various. The illustrations in this web page not only flexibly convey the error of the page jump, but also give you the correct guidance.

07. Don't try to be complicated.

To create a unique 404 page, there is no need to find a unique creative and thorough innovation, and sometimes mastering the fashion trend is enough for you to stand out. In this 404 page, the designer uses the network popular graffiti illustration role, at present the copywriting is also very occasional, the entire page temperament is very interesting. It's unique, isn't it?

08. Direct Description

In fact, in this step, users usually know that they encounter 404 of pages, you do not need to avoid this topic, just to be frank. In this case, next to 404, a robot with a broken arm tells you that it's wrong in an incredibly vivid way.

09. Stylized

If you want to show it in a more figurative way, you don't really need to spend a huge amount of time carving it out. It's good to show it in a witty and stylized way. In this 404 page, flattened graphics and colors are very coordinated together to create a beautiful scene. The scene is simple, the sheep with the plug in the message is also very clear.

10. Overlapping effects

Use overlapping shapes, letters, and colors to create interesting 404-page effects. This 404 page design is also very simple, black and white mode, sans serif fonts, graphics and font overlap, size contrast to strengthen the concept of 404, simple but not monotonous.

11. Using the relevant images

Sometimes it's interesting to use unrelated pictures in a page, and it's more useful to use an associated picture. In this case, the designer added a red light warning, which is also a hint to the user: You have come to the wrong place.

12. Use color in a limited way

Pick the colors that are compatible with each other, even if the color changes are based on one or more of them, and stick to it. Create a set of topics that can simplify a series of design processes. This 404 site is the same way to set its hue.

13. Hug Texture

When flattening becomes standard today, the proper use of textures can greatly reduce the difficulty of working. This 404 page still uses the flat wind color, but after the proper addition of some textures, the overall look more harmonious and more textured.

14. Provide options

What does the visitor need to do when he enters the 404 page? Is it to visit the homepage or go back to the previous step? The more choices you offer, the more likely you are to lead them where they really want to go. All you have to do is keep the visitors on your site. The page is, when the user comes here, the website designer has left enough choice for them, lets the user as far as possible stay in own website.

15. Unconventional

I think it's a problem that many designers will think about. And this 404 page, it is from the font, color to style are fully adjusted, carried out a very creative design, breaking the conventional visual design.

16. Use negative space

Learn to let the page breathe, can make your page more atmosphere. This 404 page uses blue-green and white, and makes the entire page simple enough to use with proper white leaves.

17. Pun

404 essentially tells the user that what he wants is not found, so how are we going to show this fact? Sometimes, with some content and visual "pun" to show this. And this 404 page is handled this way, through the island of this image to the user to pass "You go wrong" this concept.

18. Bold expression

If you have a more interesting way of showing 404 of the code, try to have a connection between the two and then show it. In this case, the designer used the "oxygen content is not enough" to be associated with the 404 code, interesting and witty, artistic conception is also close.

19. Expand the dimension

Rational use of visual design, can make two-dimensional page to give people three-dimensional impact. The design of this page is done, the angle of the knife and the color of the page make the whole page look like three-dimensional.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.