404 error pages, which remind site visitors that the server did not find the requested resource or file, are often cited by UI/UX designers, product managers, and web/software developers as the main culprits (including boring login pages, loading pages, and boot pages) for losing or jumping out of your site/software. However, this does not mean that 404 pages are, in any case, unmentionable nightmares for them.
In fact, a beautiful, high-quality, creative and even cool error page design can not only effectively guide visitors to quickly browse the web page or other pages of the software, but also greatly alleviate the negative emotions of users, retain users, reduce the jump rate and improve user experience.
However, how can a designer or product manager create an interesting, beautiful and creative 404 error page? Read this article and follow along with 14 of the latest and most creative bug designs.
First, what error messages are commonly used in 404 error pages?
Nowadays, more and more designers realize the importance of copywriting in the design of Web /app pages. Choose to create a clearer, personal and human page design by adding well-designed and selected text. Therefore, with this in mind, before we begin to introduce the design of the 404 error page one by one, we also need to understand some common 404 page error prompts, to avoid the situation of inmeaning, but also for the later design and selection of more in line with the characteristics of the web page/software to lay a foundation. Here are some common error messages:
*The requested URL was not found on this server.
*404 File or Directory Not Found
*HTTP 404 Not Found/404 Page Not Found
*404 Error/Error 404/HTTP 404
*The page cannot be found
Of course, UI/UX designers sometimes design error messages with the “404” flag based on the characteristics of the site/mobile application to make the site more readable and interesting.
14 latest creative 404 error page to appreciate and learn
Here are some of the latest and most creative error page designs that you can find helpful:
1.Lost in the woods
A. Designer: Tajana Barac
B. Highlights: Perfect use of color contrast, color gradient, shadows and shapes
Classic blue and white color contrast and gradient, the perfect combination of shapes and shadows, give people a sense of peace and peace, so as to effectively alleviate the negative emotions caused by sudden error report to users. What’s more, the application of color matching and illustration style is quite eye-catching, which naturally distract users’ attention and reduce users’ unpleasant experience.
C. learning points
* Optimize error page design with various design trends
In terms of UI/UX design trends in recent years, the mix of color contrast, gradients, shapes, and shadow levels has always helped designers to hit the right pieces. Therefore, when designing error pages, you can also integrate some current popular design elements and trends to create a unique page design. (Check out more of the latest mobile software design trends.)
2.Wanted
A. Designer: From limpfish.com
B. Highlight: unique display form
Different from ordinary error reporting pages that are directly boring listing and displaying error tips, the designer of this page adopts a unique appearance and form similar to fugitives wanted notice to more intuitively show the cause of error reporting on the page, which is very novel and interesting. Moreover, its intentionally worn and worn design also makes the whole page more realistic and eye-catching.
C. learning points
* Design a custom presentation for your error page as well
If time is enough, you can also design a series, using different forms of display 404 error prompt, log in and add them to your design, convenient to see in the future, using or obtaining inspiration (of course directly choose a high quality prototype to use tools, to make it into a visual prototype for storage, also is a good choice).
3.Shinobi
A. Designer: From cssninjas.com
B. Highlights: Progressive design
In addition to providing a simple and clear description of the error, the designer adopted a progressive design approach, embedding links in some of the explanatory text to expand the web’s functionality and eliminate user confusion and dissatisfaction.
C. learning points
* Use progressive design to improve the user experience of 404 error pages
In your page design, you can also use a progressive approach, adding links, buttons, sidebar menus, hidden menu bars, and so on to expand the functionality of the page.
4.Error Page Switex
A. Designer: Ash Rahal
B. Highlights: The use of layers, emotional elements and interesting pictures
The page creates a sense of space through overlapping text, images and shadows to attract visitors’ attention. Moreover, in order to ease users’ resistance to sudden errors, designers have added emotional elements such as playful explanatory text and funny pictures to the page to gain users’ understanding and sympathy. This is well worth emulating.
C. learning points
* Add emotional elements to the design to achieve emotional communication with users
Therefore, in your page design, you can also add some playful words, emoticon ICONS, interesting pictures or smooth interaction design to consider the user’s feelings, or even color matching to ease the user’s irritability, etc., can make your design more humane, achieve emotional communication with users, so as to retain them.
5.Alana 404 Page
A. Designer: Alana Brajdic
B. Highlights: a combination of simplicity and more page choices
As the designer notes, the error page needs to be simple, intuitive and meaningful. At the same time, it provides more links to other pages of the website/application, so that users can click to jump to another page according to their needs and provide users with a better experience. Moreover, the simplicity of the whole page is consistent with the trend of simplified user experience design in recent years.
C. learning points
* Adopt a minimalist design with more functional choices and better user experience
Page design doesn’t have to be complicated. Simple, intuitive pages with more links/choices can be successful when functionality and appearance are not the same.
6.UI 404 Page
A. Designer: Mario Sestak
B. Highlights: strong visual impact, perfect response of pictures and content
In the design, the black background pictures with excellent visual effects are added, and the white error prompt is matched to highlight the page copywriting and brighten the user’s eyes. Moreover, the perfect response of images to text also makes the explanation text more convincing and reduces the possibility of user dissatisfaction. In addition, the help and links to other sites displayed in the sidebar are extremely effective in improving the user experience.
C. learning points
* Add visual elements to make the page more appealing
In actual page design, there are many elements that can help to enhance the visual effect, such as high-quality images, the right color scheme, creative themes and so on.
* Use the sidebar to expand the functionality of the site and improve the user experience
7.404 Page
A. Designer: Hossein Mahmoodi
B. Highlights: featured movie posters and theme selection of sci-fi blockbusters
The most prominent feature of this design is that it adopts a display form similar to movie posters, and chooses the theme of science fiction blockbusters. The 404 error sign, namely the word “404”, is integrated into the content of science fiction “posters”, which causes the continuous association of website visitors and greatly increases the interest of the page.
C. learning points
* Choose an appropriate topic to present
Selecting an appropriate theme for error presentation is also very useful to increase the interest and attractiveness of the site. For example, in the page design, it is worth trying to add movies, cartoons, festivals, characteristic national culture, even some people or local characteristic theme elements, etc.
8.404 Page Not Found
A. Designer: Nayab Fatima
B. Highlights: The application of dynamic animation and illustration
Page of the most distinctive design, is to add two blinking blinking eyes of the owl, smart and lovely. And cooperate with the text explanation of the occasion, give a person a sense of tranquility and comfort. In addition, its illustration style and part of the application of white space, also make the whole design more beautiful, very dreamlike color, as if falling into the fairy tale world woven by the designer. It’s also great for alleviating the frustration of visitors.
C. learning points
Optimize your page design with animations or interactions
* Illustration style can also greatly improve the look and interest of the page
9.Daily UI – 404 Page
A. Designer: Carlos Pariente
B. Highlights: Funny and humorous and the application of film and television character animation
Can’t help laughing when you see this page? Ok. Whether or not its functional design conforms to general design principles, at least in terms of user experience and visitor attention is excellent, right? In addition, the animation of film and television characters added with the text has a deeper resonance for people familiar with these film and television characters. These are the subtleties of the page design.
C. learning points
* Add humor to the design
* Add some well-known elements to the design, and not just the movie aspect, of course
10.Daily UI Challenge – 404 Page
A. Designer: Andrea Hock
B. Highlights: Design according to the characteristics of the website or software
In addition to appropriate relevant associations and the addition of quality images, the page design can also be simply combined with the characteristics of the website, app or product for sale. For example, the newspaper error page, combined with the characteristics of jewelry website, the 404 error website as another platform to display all kinds of jewelry, so that users can continue their preview even if they encounter error, reduce the page jump rate.
C. learning points
* Add appropriate content to the site or product features to enrich the page
11.Daily UI-8 404 Error Page
A. Designer: Deanna Lam
B. Highlights: Comfortable landscape design
As with this page design, it is also a good idea to include a background image of life or landscape in the introduction page to make the user feel more relaxed.
C. learning points
* Add comfortable life or landscape pictures to the error page
12.404 page of the Hermitage Friends
A. Designer: Anton Borzenkov
B. Highlights: Interesting oil painting style and thoughtful search box design
The whole page uses the classical oil painting style, very distinctive. Moreover, in order to provide users with a more pleasant and smooth experience, the designer also followed the error message and added a search box, so that users can jump to the page they want to see according to their needs, as much as possible to reduce the user’s discomfort.
C. learning points
* Choose and use oil painting or Chinese ink style to add uniqueness and appeal to the page
13.David 404 Page
A. Designer: David Kovalev
B. Highlight: application of 3D technology
Page designer adopted the latest 3D technology to present 404 error prompt, interesting and intuitive, high-end atmosphere.
C. learning points
* Use the latest cutting edge technology to improve your bug detection design
Today, there are many advanced technologies that can be applied to design. For example, the 3D technology mentioned above, the addition and application of audio and video, etc. play an important role in improving page functions and user experience, and beautifying the appearance of the page.
14.Shremal 404 Page
A. Designer: Shremal Patel
B. Highlight: Use the page to tell an interesting story through appropriate associations
Designers use shapes, colors, shadows and words to tell a story: “The page you’re searching for is no longer on Earth” or “the page you’re searching for has taken you to a planet other than Earth.” The idea of using pages to tell a story through appropriate associations is also interesting.
C. learning points
* Tell interesting stories using reasonable imagination
Overall, hopefully you’ll find inspiration and some useful lessons from these latest 404 page designs.
Mockplus helps you easily “retain” and iterate on fleeting 404 page design ideas
Inspired by these 14 new 404 error pages? Don’t want these precious design inspiration to disappear without a trace? How can you quickly and effectively “retain” these fleeting page design ideas? Don’t worry. Mockplus is a simple and quick prototyping tool that allows you to quickly transform your design ideas into visually appealing interactive prototypes that can be quickly replaced and stored in your personal design log for later review and use.
What does Mockplus provide to help you quickly transform and improve your 404 error page design? Immediately follow xiaobian to understand in detail:
1. Add and import static/dynamic pictures quickly and easily
As a faster, simpler prototyping tool, Mockplus provides users with a range of image-related components and features for user ease of use:
* Use the “Picture” component to directly add the error page picture
With Mockplus, you can easily drag and drop the “Images” component to add images to your 404 error page prototype. Also, when large numbers of images need to be added, Mockplus’s “grid and Autofill” feature allows you to quickly add and fill large numbers of images.
* Import images in batches using my Component Library
When you want to batch import picture beautification error page, you can also open the “My Component library” function area, batch import and add the required picture information.
* Easy to import Sketch documentation
In actual page design, it is inevitable to encounter graphic files that need to use Sketch to optimize 404 page design. With Mockplus, you can simply use the “Import Sketch Document” feature to import documents directly. Of course, Mockplus’s Sketch plugin also makes it much easier to use all kinds of Sketch graphic files.
* Use “Gif” to add dynamic pictures, enhance the page interesting
Want to add dynamic images to make your error page more interesting? You can simply drag and drop the GIF component implementation in Mockplus.
* Use its “picture rotation” to dynamically display and switch page pictures
The “image rotation” component provided by Mockplus is also very effective for adding a rotation effect to error pages and dynamically displaying and switching between various images.
In short, Mockplus makes it easy to add images to your 404 error page.
2. Add fun and emotional page copy using “tags” and “multi-line text”
In 404 error page design, fun, humor and simple error description, can also add color to the whole page design. With Mockplus, you can simply drag and drop its “tag” and “multi-line text” components to add and edit interesting and emotional page copy. And the attributes of the text itself, such as size, color, bold, italic, center, etc., are extremely easy to set. In addition, the setup and addition of component interaction states are great for adding copy and visuals to the entire error page.
3. Use the “expression” icon to improve the emotional experience of the error page
Emotional elements, especially some nifty emoticon ICONS, can effectively improve the emotional experience of the error page and realize the emotional dialogue with users. Mockplus provides you with more than 3,000 vector ICONS, including emoticons, that you can freely select and add as needed.
4. Add interactions easily and quickly
Interaction and animation design are also important factors to make a website interesting and engaging. Mockplus gives you a variety of interaction design commands. You can simply drag and drop the link points of various components to add animations as needed to interact with your visitors. And its very visual page conversion method is also worth trying.
5. Project files can be downloaded at any place and time after they are released on the cloud to meet various design needs
Want the prototype tool to provide a cloud storage service so that once a simple upload is posted, it can be downloaded anywhere and at any time for instant editing, modification, and sharing? Mockplus is perfect for this. Mockplus also offers up to eight ways to preview and share projects, making it easy for users to choose the right way to preview and share projects based on different, even real-time, 404 page design requirements.
In summary, whether or not you’re designing a 404 error page, Mockplus will be your best prototyping tool for “retaining” and iterating on all kinds of page designs. Mockplus provides simple, fast and comprehensive prototyping capabilities that can easily meet your web/app/ Page design needs.
Conclusion:
So, 404 error page, as one of indispensable important page website/application for designer and product manager, should not be considered design pain points, on the contrary, should be put to good use, make it become to provide users with better guide page/software, entertainment and an important platform to retain users, so as to create more distinctive, More interesting and creative website/software. In summary, I hope that the 14 new ideas for 404 error page design and the simple and quick Mockplus tool introduced above will help you with your page design.