Adding A Personal Touch To Your Web Design

Advertisement

The Web is technical by nature. Different scripts and pieces of code are linked together through hyperlinks, forming an endless net of interwoven, encrypted information — data that is accessible only through technical interfaces, such as Web browsers, or applications. Yet, Web professionals have made it their calling to tame the “wild” Web and turn it into an accessible, user-friendly and, most of all, personal medium.

Personality will set your brand apart from competitors and help you connect with a passionate audience.

Aaron Walter1

Designers can do plenty of things to counteract the technical appearance of the Web. One very effective way is simply to make it look less technical, by using a more human, personal style.

In this article, we will discuss different aspects of freehand drawing and writing in Web design and how they can enhance the user experience of your website.

Identity And Authenticity

Freehand drawings and other sketched elements are a great way to show personality and convey a feeling of authenticity. Imagine getting a letter or greeting card from someone you cherish. Do you expect the text to be typed or handwritten? A handwritten note is way more personal than a computer-written one, right? On the Web, it’s similar. It might be a different medium, but content that obviously comes directly from a human is more authentic and more trustworthy. Let’s look at three examples of how freehand drawings can help you create an identity and stay authentic.

Look and Feel

First of all, hand-drawn content has a unique look and feel. Compare it to handwriting. Creating a personality and unique appearance for your brand or product is important.

Balsamiq2
The look and feel of Balsamiq is authentic and distinctive.

Balsamiq3 does a great job here. It offers a mockup and wireframing tool. While its features are quite advanced, its look and feel is basic, recalling pen and paper sketches from way back. The low fidelity helps us focus on the essential functionality while also making the product authentic and distinctive.

Recognition

Freehand drawings have character. Through the touch of human imperfection, they gain a certain tension that is hard to recreate digitally. This special touch draws attention and allows people to pause to appreciate and process the hand-drawn content, more so than they might appreciate any old perfectly illustrated image.

Notepad++4
Notepad++’s logo is distinctive and easy to remember.

The source-code editor Notepad++5 has a distinctive hand-drawn logo. The little chameleon not only reflects the functionality of the program (the transformation of code), but is also cute and draws attention. The sketched style reflects the creative nature of what you can do with Notepad++ and makes sure you don’t confuse it with other editing tools.

Personality

Obviously, freehand drawings carry personality. They are authentic and help users to connect with your website or app. Hand-drawn content confirms that real people are behind the content, people who have put thought and effort into the design to make it usable and trustworthy.

MathBoard6
Mathboard looks personal and easy to use.

MathBoard7 is an iPad app that help kids practice their arithmetic skills. The app has a classic chalkboard look, freshening up the dry and precise character of arithmetic. The whole app is set up in quiz form, and kids can actually write on the board to do rough work if needed. The personal appearance of the app makes it easy and attractive to use.

Information And Content

The way you present information on your website determines whether people will see it and, even still, understand it. Draw attention to your content at the right time in the user’s visit to your website. The content should look attractive and promising enough to involve the visitor. Information must be clear, relevant and actionable in order to be effective. Below are three examples of ways in which freehand styles can make the presentation of your content more effective.

Explain Features

You can use freehand drawings to explain your product, such as its features. Creatives often use simple sketches to explain a concept or present an idea that might otherwise take ages to put into words. With your website, you encounter a similar situation. You’ll have a product, concept or idea that you want to get across to visitors. By using hand-drawn icons or simple sketches, you create an intimate atmosphere, as if you were speaking to your visitors directly.

TestFlight8
Stickies conjures the idea of presentations. (Image: TestFlight)

Online service TestFlight9 makes use of just this effect. In addition to the many other hand-drawn elements on its website, the company points out its main features with simple sketched sticky notes, accompanied only by a few brief lines of text. This conjures the idea of presentations, drawing attention to the features one by one to make them more clear.

Visualize Workflows

Freehand style is also a great way to familiarize visitors with your workflows. No one expects you to come up with the perfect solution out of thin air. The fact that you admit that a process is involved and that this process can be rough and bumpy only makes you human and likeable. It demonstrates that you try out different directions before deciding on the right track.

Alex Faure10
This hand-drawn workflow conveys creativity and a thorough working process. (Image: Alex Faure1211)

Designer and front-end developer Alex Faure1211 demonstrates well how a hand-drawn visualization of a workflow can educate visitors and build trust. He seems to not only know what he is doing, but also thinks things through and involves his clients in the process.

Guide Users

Whether you are designing a website or an app, keeping your users in mind and guiding them towards the various goals they might have is always important. Hand-drawn icons can be a good way to do so. It’s no secret that icons are helpful when navigating a website or app. Why would hand-drawn icons be any different? While perfectly illustrated icons might be more detailed and clearer, they are computer-made and can easily look sterile and technical. Hand-drawn icons are personal, and we are more inclined to accept guidance from another human than from a machine.

Spamped13
We are more inclined to accept guidance from humans. (Image: Spamped)

The iPhone app Stamped14 uses very nice, meaningful icons to guide users. The app enables you to stamp and share your favorite things, such as places, books and movies. The hand-drawn style perfectly matches the personal nature of the app, encouraging users to keep stamping.

Team Presentation

The importance of team pages increases continually. While we used to accept a certain level of anonymity on the Web, we are now eager to know who is behind a website, service or product. Also, having the hypothetical option to contact someone is not enough; we want to know exactly who we would be contacting. The more personal your team presentation, the more likely your visitors will trust you. Here are some suggestions on how to enhance your team presentation with hand-drawn elements.

Be Likeable

Being perceived as likeable is important. Even if you offer a ton of information on yourself, if people think you are arrogant or too extravagant, it will do no good. We are much more willing to trust someone we like than someone whose character we cannot assess. Hand-drawn elements can make you more likeable by making you look creative, spontaneous and easy-going.

Knock Knock Factory15
We are more willing to trust people we like. (Image: Knock Knock Factory)

The Knock Knock Factory16 welcomes its visitors with a personal and likeable presentation of its team. The pictograms sketched on the chalkboard in the background say a lot about Keith, the “fearless leader.” The company obviously considers it important to give visitors a clear picture of who they are about to deal with. It’s catchy and gives visitors a positive feeling, before they have even looked around the rest of the website. It creates an immediate personal connection and makes the visitor feel welcome to the website.

Be Trustworthy

Besides likability, trustworthiness is also important. At the end of the day, anyone can hide behind a website, pretending to be someone they are not. Showing authenticity is a great way to make sure visitors take you for who you are. Only if people trust you will they open up to what you have to say or engage in your desired actions, such as buying the product. Hand-drawn elements are usually not the easiest content to produce for a design; they require skills such as creativity and passion — skills we associate with honest and trustworthy people.

Polecat17
We feel more comfortable around people we trust. (Image: Polecat)

The software agency Polecat18 has found a trustworthy way to introduce itself. Instead of realistic photographs, it has put thought and passion in its team presentation, using abstract yet creative illustrations. The illustrations have a rough and sketchy look to them, making them even more human. And only first names are disclosed, giving an easy-going, familiar feeling.

Be Real

An important aspect of trustworthiness is authenticity. Your visitors must not doubt that you really exist and that you exist in the way that you present yourself on your website. The Web can be a scary place, especially considering that users will probably never meet the people behind websites in person. Anyone can use a Web font, but handwriting and hand-drawn elements reveal something about your person, making you look more real.

Grove19
The authenticity of a team is important. (Image: Grove)

The people at Grove20 found the perfect balance between creative, carefree and authentic for their team presentation. Snapshots of all team members are neatly arranged as Polaroids, with the names looking handwritten. It looks as if someone walked through their work space, taking Polaroids of everyone, including the team’s dog. Does it get more real than that?

Storytelling

Freehand drawings are a great way to tell stories. Storytelling is extremely personal, an ancient means of communication, mediated at most (back then) by a cave wall. This basic method of exchanging information transcends all technical advances and gives us a comforting, human feeling. Sketches help us ignore the impersonal nature of the Web and put a face to the humans behind it.

Entertain

Entertainment entails emotional involvement — something that is much easier to achieve when humans are involved, rather than mindless machines. On the Web, hand drawings are a great way to establish a familiar and human experience, one that helps visitors to relax and enjoy themselves.

Axure21
Drawings create a familiar and human experience. (Image: Axure)

The prototyping tool Axure22 welcomes visitors to its home page with an amusing yet informative story about UX Man, who is “accused of having superhuman powers.” The freehand style of the drawing is eye-catching. There is no reason to doubt that a lot of thought has gone into this fun and inviting landing page.

Explain

Hand-drawn stories grab our attention because we like to recognize human elements on the Web. Whereas a too-clean Photoshopped image might not gain our trust, hand drawings appeal directly to our emotions, making us more attentive and receptive to information.

SignNow23
Hand drawings appeal directly to our emotions. (Image: SignNow)

The app SignNow24 uses hand-drawn images to explain its main benefits right on the home page. The way it lines up the benefits, connected by the “flying” documents, creates a narrative. You can almost hear someone explaining the images as you read the descriptions below. The story draws visitors in, making it easy to follow.

Engage

Personalized elements such as freehand drawings also engage visitors. Along with user experience, “user engagement” has also become a hot topic. Once engaged, we are interested and willing to perceive and process the information given to us. So, a website that manages to engage us has already made a big step towards a positive user experience.

TouristEye25
A website that manages to engage us has made a big step towards a positive user experience. (Image: TouristEye)

Travel app TouristEye26 engages effectively with a good story. The step-by-step introduction to its product is turned into a small adventure story, a treasure hunt waiting to be solved. Even without the text, the drawings are meaningful and reflect the free spirit of a trip.

Attention-Grabbers

Freehand elements, such as handwriting, are just not what we expect in a technical medium like the Web. They go against the straight lines and symmetry that we associate with the Web. Thus, a perfect opportunity to grab the visitor’s attention. Handwritten comments and instructions feel human and make us feel like we are being addressed directly.

Invite

You can use this personal method of communication for different things. First, you could easily invite visitors to perform certain actions, such as liking you on various social media platforms or sharing your content. We are more likely to respond to messages that appear to concern only us, not the general public. Even though the message is on your website for everyone to see, you can create a feeling of connectedness by addressing visitors directly.

Weezbe27
We respond more likely to personal messages. (Image: Weezbe)

Weezbe28 use a handwritten message on its landing page, together with a happy smiley and an arrow that guides the visitor’s eye to the green button. The header is simple yet effective, drawing attention to the call-to-action button without being intrusive or annoying.

Make Curious

You can also use hand-drawn elements to make visitors curious and, in doing so, to guide their line of vision and trigger certain actions. For example, arrows are a great way to guide the attention of visitors.

Radley Yeldar29
Hand-drawn elements can make visitors curious. (Image: Radley Yeldar)

The creative agency Radley Yeldar30 shows a minimalist drawing of a hand that appears to be tapping on the screen, along with the line “This is not just a footer.” The visitor is motivated to mimic the gesture of the hand and click on the screen, if only to find out what happens. This is a great subtle way to bring the footer to the visitor’s attention.

Point Out Details

Last but not least, hand-drawn elements can be handy for pointing out details. Again, it’s all about grabbing the visitor’s attention and drawing it to the relevant area. Just as you use arrows and other marks to highlight content in a book or other offline medium, these elements work great on your Website. After all, highlighted elements bear a certain importance that makes them worth checking out.

Orbit31
Highlighted elements are expected to be important. (Image: Orbit)

Orbit32 uses hand-drawn arrows to point out adjustable elements of its image slider plugin. The hand-drawn quality of the arrows draws attention to the defined areas of the slider, and it also stands out, obviously not being part of the slider itself.

Don’t Overdo It

Sometimes, freehand drawing doesn’t suit the nature of a website. Make sure not to overdo it and that visitors would truly appreciate a more personal design. Don’t hesitate to ask visitors if you are not sure how far to go; for example, by conducting a live survey33 on your website.

While certainly many examples are out there of how not to use hand-drawings on a website, let’s look at only one. The aim of this article is to point out positive examples and offer ideas on how a freehand style can improve the user experience, but it is also important to be aware that it’s not always effective and that you should use hand-drawn elements within reason.

Joshua Keenes34
The overdone hand drawings make the buttons look obtrusive and pushy. (Image: Joshua Keenes)

For example, designer Joshua Keenes35 uses hand-drawings to draw attention to his social media buttons. While the concept might work, the fact that he overdoes it has two side effects. First, so much is going on that your attention gets lost before even getting to the actual target, making you lose focus before taking any action. Secondly, the invitation to hit one of the buttons becomes quite obtrusive and pushy, likely scaring people away, rather than welcoming them to the social community.

Conclusion

Having a personal experience on the Web is becoming increasingly important. We no longer want to visit cold, formal and anonymous websites. Rather, we want to feel comfortable surfing the Web and to meet the people behind a website, and we need to trust them before we are willing to interact with their website.

Freehand drawings have a human quality, the perfect bridge over the gap between the technical, impersonal Web and the accessible, user-friendly and personal experience that we expect today.

(al)

UI

↑ Back to topShare on Twitter

is community and content manager, technical writer, and UXer @ Usabilla. Her education focussed on usability, her passion is the user experience and design is her key to both of them. For the designers among you, check out Usabilla's new tool at discover.usabilla.com and collect, rate, and share design elements on the entire web.

  1. 1

    Amazing article! I would definitely love to incorporate these ideas into my next projects. Too bad I suck at freehand drawing :(

    7
    • 2

      Thanks, I’m happy to hear that you like it. I guess for some small elements (highlights, arrows, text) you don’t even need to be a talented drawing artist. :)

      2
  2. 3

    Loved the article! Wanted to link it to someone. The permalink seems so be wrong: http://uxdesign.smashingmagazine.com/2012/11/20/freehand-style-in-web-design/

    1
  3. 6

    What you’re actually pseudo-referring to is called Branding. Your website is one of many places your brand may live, and it does indeed need a distinct, consistent voice – just not necessarily the voice of a child-artist*. Think of your audience.

    *Talented illustrators whose work may be featured above, take no offense. You do what you do quite well.

    4
    • 7

      I agree, it’s certainly not always the best way to add character to your site. However, in many cases I do believe that is works well. Just requires a careful consideration of the site/ brand/ product at hand.

      2
  4. 8

    Google plus used arrows nicely to illustrate the new +1 feature

    4
  5. 10

    Hi there

    I agree with the points in your article in general, however, do you have proof of it (that you can provide us), or are the points just your opinion?

    Cheers
    Matt

    1
  6. 13

    Awesome! We are developing a mobile barcoding platform and have gone very “Sketchy” on our public site (got an amazing illustrator involved) – comforting to know that we are on the same proverbial page!

    0
  7. 15

    Really Good Article and very useful. :)

    0
  8. 17

    Very interesting and useful article!

    0
  9. 19

    Thank’s for the article, I thoroughly enjoyed it.

    However, as a previous commenter mentioned, it would be nice to see some links to research, usability studies, or other literature that back up these opinions.

    1
  10. 22

    I just LOVE the typo – “Spamped” instead of Stamped ;) That really made me laugh ;)
    (and made me check the link before clicking)

    Great article by the way!

    0
  11. 26

    Am a big fan of illustrated elements. Have a few tucked away on my own site for fun, but am also added them in to a large project to give it some added character (and also use some hand-drawn arrows just as you discuss in the article).

    I personally really like seeing sketchy illustrations in web design, when done well. Thanks for the round-up!

    0
  12. 28

    Great article. Nowadays ‘everyones’ a ‘designer’, or a ‘web designer’.

    Little personal touches like you’ve mentioned here not only adds personality to the site, but also separates it from the mass of ready-made templates and crappy websites already out there on the web.

    Much gratitude.

    3
    • 29

      Thanks for sharing your thoughts. I think that’s a very important point. We should always look for new ways that separate our site from the mass.

      0
  13. 30

    Thank for your article, I enjoyed it so much! :)

    0
  14. 32

    I hate that Notepad++ icon. There’s a much better new one.

    0
  15. 34

    I think someone doesn’t like Sabrina haha.

    -1
  16. 35

    Just getting started on content for a team page, and I’ve been looking for ways to balance professionalism/authority with spontaneity and warmth. While I strive for the textual content to maintain this balance, I think hand-drawn elements could really bolster the overall tone of trust worthiness. Thanks for the inspiration!

    Cheers
    Sarah Bauer
    Navigator Multimedia

    0
  17. 37

    For those out there who aren’t very free hand talented (myself included), there are a lof of iPad apps that simulate free hand with a very… shall I say forgiving, approach to what you draw. Might be a good place to start to create semi real doodles that looks better than what you can put out without any help :)

    0
  18. 39

    Ouch, so I was the only negative example, that hurts :o( *reaches for the chocolate*

    You make some valid comments Sabina, I never thought of them in that context, looking at them now I agree they can come across quite aggressive. The site is over 2 years old now so I hope I can be excused :o) New site is launching in the next few weeks, and these you’ll be pleased to know are not on it.

    But thanks for featuring my website, even as a bad example.

    6
    • 40

      I also thought ‘ouch’ when the author used the example from your website *and then* proceeded to identify you. I actually scrolled through the comments just to see if you’d replied, and I was impressed by the grace with which you responded to the criticism. Bravo, you’re a big man!

      9
    • 41

      Josh, My apologies, I didn’t mean to offend you! But I’m glad to hear they didn’t make the redesign. :) Good luck with the new site!

      0
  19. 42

    Brand is becoming more important that ever as internet users are becoming a lot more savvy of domain matching keywords. We recently moved ours over from an exact match domain which was generating a lot of traffic to http://savvyspecs.co.uk. We have changed the entire brand image to make it feel like it’s a way of life rather than just some crummy site that you bought eyewear from last week. With the migration, we’ve also moved over to a “responsive layout” so our mobile customers are able to see all features of the site without having to zoom in, out and across the page. We tried getting the hang of Balsamiq but sometimes it’s easier just to work straight in Photoshop and Sublime.

    Anyway, if you could think of any illustrations for the Savvy brand, please let me know!

    Ryan

    0
  20. 43

    I am a professional web designer from more than 21 years and from my personal experience this article is really , informative and knowledgeable especially the points look and feel and entertain , which can be the key of any well designed and successful project.

    0
  21. 44

    A really awesome article! Going to try out some things in my next projects.

    0
  22. 45

    I never really understood the progress of a good illustration until I saw that http://www.behance.net/gallery/Triple-Self-Portrait/6055835

    3
  23. 46

    What technique should I use for freehand drawing?

    Draw on paper > scan > clean up in illustrator or should I just use a graphics tablet?

    0
  24. 47

    I love websites that have a distinctive, personal touch. The more we can do to make visitors feel welcome to our sites the better off our businesses will be, and the better off the web will be.

    0
  25. 48

    Thanks for bringing these tips together!

    0
  26. 49

    I think this is a great idea and new trend also. I have a doubt about It suit for corporate website .

    0
  27. 50

    Cool idea, nice article, interesting approach. Seems we are close to a new digital trend, as smart integration of video and online game graphic in email ads. I save such innovations overviews in my facebook page, I will certainly put this one

    0
  28. 51

    One of the first websites that came to my mind when talking about the freehand style is the ubiquitous Dropbox. They use the hand-drawn illustrations consistently throughout their website including their introductory video. I read somewhere that the artist actually uses paper and crayons.

    On the other hand, Box, another cloud storage service, does not use hand-drawn designs. It may be because they are more geared towards enterprise users. I don’t have any data, but there could be a risk that business customers might be turned off by hand-drawn drawings.

    0
  29. 52

    Yup, Awesome Post But You Know what, not every person loves the hand-drawn designs. The hand-drawn designs can only be appreciated by creative thinkers, isn’t it?

    0
  30. 53

    Yes i agree with AJO not every person loves the hand-drawn designs.

    http://www.webdreams.in/

    0
  31. 54

    Hello Sabina, can you please guide me to a easy-to-use tool/software that can be used to create freehand drawings (like the ones mentioned above in your article)? Thanks!

    0
  32. 55

    A website is a representation of everything your company, business or product is. The primary aim of a Web Development Company is to attract more customers, reap higher profits, get a larger hold of the share market and have a brood of happy clients; a well designed website can provide a business with all this and much more.

    0
  33. 56

    A website is a representation of everything your company, business or product is. The primary aim of a Web Development Company is to attract more customers, reap higher profits, get a larger hold of the share market and have a brood of happy client.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top