Sketchy looks: Hand-Drawing Style In modern Web/ UI Design
The old saying “a picture is worth a thousand words” is still relevant to today’s experiences. People are attracted to visuals faster than text, and this natural property of photos and illustrations or sketch make them very useful for visual design.
In modern user interfaces, both photos and illustrations became functional elements along with text and interactive elements. Illustrations are a versatile way to create a unique design. From hand drawn hero-style illustrations, to small icons, everything about a sketched image feels like art. In this article, I would like to review some of the functions of illustration from the perspective of modern UI design.
Most web designs starts off with a pen and paper before its taken over by Photoshop. However, we’ve noticed a new trend (probably not too new) where designers are bringing back sketches as a form of design. Without a doubt, hand-drawn art is one of the popular styles adopted into web designs. Nothing is better than using these sketchy designs to convey and reflect individual styles.
Few months ago Smashing Magazine declared shiny and glossy design elements were officially outdated. Web designs will become more subtle, more user-centric, more content-oriented and less loud. Indeed, this is exactly what observe at the moment. Hand-writing, earlier often taken to extreme, now seems to become subtle, supporting and less dominating.
Hand-drawn elements are used moderately
In particular, since designers try to provide visitors with a comforting, user-friendly presentations, they tend to use hand-drawn and hand-written elements moderately. Sometimes, only few design elements are designed accordingly while the rest of the design is focuses on clean content presentation and isn’t drawn at all. For instance, often only category headers, search boxes or navigation are hand-written.
Script fonts gain on popularity
Since hand-drawn elements become more subtle, designers often tend to imitate hand-writing instead of using it. For instance, this is done by using clean and sharp script fonts instead of literally hand-written or drawn sketches. This approach helps designers to make the layout cleaner and easier to scan.
How Illustrations Help Improve User Experience
Similar to other visual elements, illustration can be a powerful communication tool. Well-crafted illustrations have following benefits:
- Can attract user’s attention and deliver the most critical information in easy-to-understand visual format.
- Can add clarity to a complex idea. There is no need to use any words if you can provide this information using visuals.
- Can engage users. Beautiful illustration not only attracts user attention, but it also makes users interested in a product itself.
- Can play with users’ imagination. It’s possible to merge reality and imagination by using illustration.
6 Ways Illustration Improves UX
There are a lot of cases where illustrations can improve user experience of a product. Here are 6 of them:
1. DELIVER THE MAIN POINT FASTER
As said before, illustrations have an excellent potential for explanation and clarification. In the context of websites and mobile apps, there are a dozen ways of using illustrations improve UX right from the first screens. For example, it’s possible to make the on boarding process more engaging by using illustrations on tutorial screens. This approach has the additional benefit for mobile apps of helping to avoid too much text on screen.
2. CREATE A MORE MEMORABLE EXPERIENCE
As users, we use a lot of products on a regular basis, but only a few of them create a truly memorable experience.
As designers, if we want to create a memorable experience, we need to learn how human brains work. Barbara Fredrickson and Daniel Kahneman proposed a psychological heuristic called peak-end rule which dictates the way our brain works with information. The peak-end rule states that people judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. The effect occurs regardless of whether the experience is pleasant or unpleasant.
In other words, when we remember experiences, we tend to recall not entire experience but only key events that happened. A pleasant illustration is an opportunity to become such key event and increase brand awareness.
Using mascots in a user interface is a popular way to apply illustration techniques in design to create a more memorable experience. Branding elements such as mascots become the elements of identity and inter-connector between the user and the product.
3. CREATE AN ILLUSION OF DIRECT COMMUNICATION WITH USER
Each user interaction with a product is a journey. Behind each journey is a goal the user wants to accomplish by using the product. For some experiences, it’s possible to convert a journey into a story in which the user will be a character, and the goal will be a final destination. Illustrations can act as a proxy between user and app by engaging users in the experience.
One good example is Omono. The app uses an owl to guide users through the interface and reinforce the user-friendly nature of the application.
4. REINFORCE EXISTING STYLISTIC CONCEPT
Illustrations can be applied in a user interface to provide visual support of the general stylistic concept of the app or website. Along with other branding elements, such as logos, fonts, color schemes, illustrations have a significant impact on product’s style. When illustration is created according to the style, it provides more natural and harmonic feeling of the product (and brand in general). But for that to happen illustrations should feel consistent, like they came from the same source even if they were created by different people.
5. LIVE UP THE PROCESS OF INTERACTION
When we think about our apps and websites, we rarely think of them as static pages linked together. The concept of interactions requires us to add animated effects and transitions to make the experience look and feel more natural. Same as any other parts of a design, illustration can be enriched with animation. Illustrations combined with animation can deliver not only a truly memorable experience, but they can also make the experience more dynamic.
For example, Readme.io, a service that provides beautiful documentation to the world, makes users smile each time they enter the password. People love such little touches because they make the experience more human.
6. ADD ELEMENTS OF GAMIFICATION INTO UX
Gamification is a popular technique used by product designers to increase user engagement. A designer can consider using illustration in the interface when the user should be rewarded for some achievement.
Beware: usability Issues!
Regarding the usability point of view we’ve managed to find some negative examples. Attempting to create a distinctive design, designers often tend to neglect usability issues. Whether some design element is hand-drawn or not, it is important that it successfully communicates its function and visitors are able to a) find it and b) immediately know how to use it.
Mind Never (screenshot above) uses hand-writing for 6 design elements — logo, tagline, navigation, headers, illustration and all clickable elements. The main problem with the design is the simple fact that it is hard to scan.
While the RSS-button and a sign-up-illustration are likely to be perceived as clickable design elements, in the language selection above it is not the case. Keep in mind: if your decision to use an artistic element instead of a standard solution raises some usability issues, you should prefer a standard solution.
Let’s now take a look at some examples of how hand-writing and hand-drawing are used in practice.
The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.
If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.
Sometimes designers create whole pages with paper, pencil and/or a tablet PC. More often single layout elements are designed in a special way — curved links, hand-made icons, backgrounds, notes, stickers and fuzzy lines are supposed to give the site a “human touch”. These elements makes a web-page which might not look different from dozens of similar pages, stand out and arise users’ curiosity. Caution: a quickly installed hand-written font can harm more than help (hint: Comic Sans is definitely not the way to go).
Hand-drawing as artistic minimalism
Since hand-drawing is a typical feature of graphic artists, designers and illustrators and is often associated with creativity and inspiration, it is often used in portfolios and showcases.
The interesting thing is that the hand-drawn style is often the only element which is used by designers to present their work on their site.
References:
https://www.pinterest.com/pin/44824958768247977/?lp=true
https://www.pinterest.com/kszerovay/sketching-for-ux-designers/?lp=true
