The use of hand-painted style in web design to improve the user experience of the website

How to apply Freehand style to Web pages to improve the user experience

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.

Team Show

Users will always want to know the site, product or service behind the people, so a love team to show the page is particularly important. The only way to provide contact is not enough, but also to show users how they want to contact the group of people have a personality and temperament, to make the team appear approachable and trustworthy. To achieve this, it is a good practice to use hand-painted pictures. For example--

The team members of the Knock Knock Factory show how to:

Polecat the whole display way:

And Grove's real photo with the handwriting font display way:

Story telling

Hand drawing the earliest and most commonly used function is to tell a story ~ Whether it is to explain the function of the product, or to deepen the user's impression of the product, using hand drawings for storytelling is an effective way.

For example, the famous prototype mapping tool Axure home hangs such a user experience personnel and product manager work Self spit groove of the simple strokes. Very good to arouse the user's sympathy, enhance the user's favor to the product.

Tourist Eye uses three comics to explain his product features.

Draw the attention of the user

If you want to attract users to click on a place, then hand-painted punctuate and arrows will be a good choice. Let's say this:

Sometimes, it's OK to use multiple arrows:

Of course, to pay attention to enough, misuse of hand-painted arrows, the effect is counterproductive--

Original address: http://www.geekpark.net/read/view/167258