Trend analysis and case study of modern 404 page Design

Each site is made up of different types of pages, and when users open the wrong link, the site's 404 pages come in handy. A reliable 404 page, while informing users that they are in the wrong place, should also guide users to continue browsing, appease their emotions, and find what they really want.

So, it doesn't take a lot of effort to get a 404 page, but if you want to design a natural and very useful 404 pages, it will take some effort.

With the development of technology, 404 of pages in the design, function has also changed, and today's article is to summarize the current 404 page Design trends, and the real case for these skills to explain.

Understanding 404

Of the many common HTTP errors, 404 is the most common and most familiar error code. Usually when the page you are visiting does not exist, the server returns such a code. The reason for this may be that the URL link is wrong, or the original page has been deleted.

But you can't ask every user to be familiar with the meaning of this code. Even if the user knows, it is difficult to directly troubleshoot the problem, so we need to make things more simple to solve the reality of the visible problems.

The usability design of each page directly affects the user retention rate, every detail of the page design affects the user behavior directly. If you design 404 pages, always pay attention to the details and ease of use, to seize the real needs of users, will bring significant improvements to the site.

Never use the default page

Each site hosted by the server will have the default 404 pages, this common and simple page is actually very disgusting. It is this rough page that prompted everyone to design their own 404 pages.

Regardless of the design, the default 404 pages do not have any functionality at all, nor do they have any benefit to the site itself.

10,000 step back, even if we do not function, this page can not call the site template, do not have their own style, it is downright chicken.

Therefore, it is necessary to design your own 404 pages. Maintain the consistency of the page style, the function will guide users to the necessary places to solve the user's confusion and problems, this is a modern 404 page mission.

The natural user Experience process

First of all, no one likes to stay on page 404. The purpose of its existence is to guide users to other places.

Each 404 page should be tailored to the needs of the designer to help visitors find what they want in the simplest way. Make sure the text is readable, the layout is clear, and the functionality and content are presented in a concise enough manner to avoid confusion.

At the same time, if you want users to feel that they are being actively helped, add content links to the 404 pages, preferably links to relevant content. If the user can directly on the page error, then can help the site to better solve the problem.

Avoid complex professional terms

Given that there are few good enough diagnostic mechanisms to cure 404 of the problem, it is best to design 404 pages in a straightforward way. Do not consider too many server error code and technical vocabulary meaning, for users, this information may be to make them more confusing source.

Try to keep the page relaxed and humorous, which is a necessary design for the user to say goodbye to the tension. Provide a workable solution so that they can solve the problem in a calm way.

Use humorous copywriting and picture content to keep visitors happy and curious, and not let them feel they have done something wrong.

Design Combat

Here are some well-designed 404 pages that are very attentive to usability design, look at how they are laid out and how they are created, and perhaps offer a good inspiration for your next 404 pages.

Snuggle Bugz

All the icons and button styles in the page are consistent with the overall layout style and the awkward atmosphere of the page is not found in the cute style link.

Fork CMS

Fork CMS will brand iconic image into 404 pages, with smart copy and the ocean theme, it is quite interesting, it is hilarious.

Gumroad

Gumroad 404 pages with a more quiet way to guide users: The random products quietly placed in front of the user, will be a mistake into the opportunity to sell, guide users to continue to buy in-depth website buy buy.

Ramotion

Ramotion's 404 pages are short enough and lazy enough, simple and contrast strong layout so that the page will not look too ugly, and then take the user to the home page ... Also seems to be a good choice.

Angry Birds

Angry Birds of the page and the fusion of brand style to do very good, interesting copy and cute anime image, so that users know their site, and not embarrassing.

Larkef

This 404 page design is very humorous, the page uses Full-screen video background, this video is from the famous sitcom "It Madman", hilarious. The only embarrassing thing about this design is that you can't go back to the home page ...

GitHub

GitHub this site's 404 page design is also very distinctive, the page on the huge search box is very much in line with the content of the site itself, a search box allows the program to linger here to find what they want.

Artstation

The 404 error Code of the Artstation page is quite obvious, the website background picture fits the theme, and the button back to the homepage is the most striking button in the whole page.

Webydo

Strong contrast colors and typography are webydo features, which makes it easier for Web pages to attract users ' attention. The presence of navigation bar allows users to easily go to different places, the most eye-catching yellow button is simply to guide users to start creating Web sites.

Stormpath

Stormpath with the background and copy are very funny, the taste of ridicule is very rich.

Underbelly

Many 404 of pages have adopted a simple and intuitive content design, underbelly is also so, but they add a video background, to ensure the abundance of information, but also to ensure that the first page links enough prominent.

Forbes

Forbes ' web site is supported by typography and content, and the 404-page design follows its signature. Search boxes and links can help users find what they really need.

Marvel App

After 404 pages, the most important thing is to solve the problem. So Marvel gives the user two ways to solve the problem: email them, or send them to Twitter.

Engadget

Addiction technology is the famous technology website, their 404 pages also follow their consistent "technology wind", from the pixel style of 404 and the internet popular mob illustrations are fully reflected in their "internet gene."

Tripomatic

The cartoon-style illustration background creates a relaxed and enjoyable atmosphere that makes 404 pages no longer dull.

Aerolab

Short text and high Contrast design create a unique sense of design.

MailChimp

MailChimp's top navigation always resides at the top, and a search box is provided to allow users to better find what they want.

Code School

Codeschool's 404 pages Only add a page back to the link, different from the other pages, it is characterized by a long and dynamic effect. But the overall user experience was good.

Tinycarrier

Everyone likes vector graphics, and Tinycarrier's 404-page illustrations are interesting vector graphs. The overall design of the page is similar to the other 404-page faces.

Email Center UK

Emailcenter's 404 page simply provides an interesting little game for users who have strayed into the site.