Improve the Web site's user experience by applying a freehand style

Article Description: In this article, we'll discuss how to apply a freehand style to a Web page to improve the user experience of the site.

In this article, we'll discuss how to apply a freehand style to a Web page to improve the user experience of the site.

Recognition degree and real sense

Hand-painted style is very conducive to the display of human nature color, the formation of a unique degree of recognition, to bring users a sense of reality. When you receive a postcard from a friend, you always want to see the card handwritten, with the unique handwriting of a friend, rather than a computer print. A handwritten note is always more casual and intimate than a computer-typed piece of paper.

In web design, the truth is the same: the use of hand-painted and handwritten style can make products appear more unique, more authentic and more trustworthy. Here are three examples of a hand-drawn style that brings recognition and realism:

A unique look and feel

First, the hand-painted style brings a unique look and feel. The famous prototype diagram and Wireframe tool Balsamiq are typical representatives. The Balsamiq is powerful and complex, and its look and feel is very simple, the application of hand-painted style allows users to recall the basic paper and pen sketch, so that users focus on the basic feature rendering, rather than the details of the product appearance. At the same time, this appearance also formed the unique style of Balsamiq itself.

Recognition degree and personalization

Hand-painted style brings a higher degree of recognition, allowing users to remember your product. For example, the new logo for the famous Code Editor notepad++ on Windows:

The Chameleon body pattern not only aptly shows the function of the product itself (the accumulation and change of the highlighting code), but also the icon itself is quite cute, captures the user's attention, helps the user to separate the notepad++ from the competitor's editor product area.

The sense of humanization and closeness

Hand-painted style brings a sense of humanization and closeness. Tell the user that there is a living person behind the content, and that these people have carefully refined the details of the product to make it look more authentic and trustworthy.

The famous children's math practice on the IPad Mathboard the blackboard's impressions, and children can even write numbers directly on the blackboard with their hands. Such a setting makes arithmetic practice less cold and boring, with a touch of human color, more easy-to-use, more attractive.

Information Communication and content construction

The way information is communicated determines whether the user will see and understand the information. Hand-painted styles can convey information more effectively and clearly. Here are three examples:

Explain product features

It may take several lines to describe a product feature, and a picture is enough if you use hand-drawn words. The famous application Testing service TestFlight a four-note sketch to match text descriptions when introducing features on its website. In the transmission of product characteristics of the information at the same time make the site become illustrated, more readable.

Show work Flow

Instead of explaining the first step in the product operation with a large piece of text what is the second step to do, give each step with a clear hand drawing, increase readability, greatly reduce the amount of text.

Bootstrap user

The use of hand-painted icons can effectively guide users to all parts of the product and site. For example, stamped, which we introduced earlier, uses cartoon-style images on its website to guide users to all kinds of web pages.

[1] [2] Next page