The Beauty of Hand Drawn Elements in Design

Written by Neeru on 22 Aug 2012
16,300 Views • Web Design

Introduction

Websites are by nature digital and boxy. They are shown on computers, which are as digital and boxy as they come. Cascading style sheets, called CSS, is a language that in its simplest format places design elements on the web page using boxes – in the form of margins, borders, alignments and tables. This can result in boxy designs that all look very similar.

Designers have begun to fight against this boxy sameness by using hand-drawn elements. They often sketch out designs before working on the final product, so they are well-used to drawing things like doodles, sketches of buttons and social media symbols, and squiggly lines to demonstrate borders. It is just a small step to then incorporate those elements directly into the finalised design of a website.

When done well, websites can have a hand-made feel that suggests authenticity, passion for the subject (since the designer has taken the time to hand-draw elements) and an overall feeling of people who care being just an email away. Below are several examples of how hand-drawn elements can be used beautifully in web design.

Because graphic designers and illustrators often start with hand drawings when brainstorming a new work, hand-drawn elements become associated with creativity and authentic design work. It is not uncommon, then, to see hand-drawn elements in designers’ and illustrators’ portfolios.

Mel KadelMel Kadel

Sometimes the hand drawings sit lightly in the background. On the Eventfinds home page, doodles of penguins and cakes are a few shades lighter than the background colour, making them both noticible and able to blend into the background, depending on what the user is looking at.

Event findsEvent finds

Designers often like to see their hand drawings take over the page. They let the drawings push the content to the side. Below, the actual text takes up perhaps 20% of the page. The rest is a series of drawings and illustrations.

SwithsSwiths

Sometimes the content incorporates the hand-drawn elements. That is to say, the content shapes the look and feel of the drawings, then actually informs the placement of the drawings on the page. In the example below, the hand-drawn elements literally point directly to the content.

Just dot Media Services


Just dot Media Services

Designers will also use digital illustrations and photos to make the hand drawn elements pop. In the screengrab below, scribbles and doodles are used to emphasise the photos and digital illustrations – which are themselves used to emphasise the hand-drawn text elements.

MakishaMakisha

Often designers will combine illustrations and hand drawing form collages of sorts. The site here, entirely done in Flash, has hand-drawn dotted lines to form the border of collages that illustrate the various sections (“Food” and “Non-food”) of the site.

Maria Gross MannMaria Gross Mann

Designers also use hand-drawn elements to illustrate the categories, services or products discussed on the website. In the site below, they use drawings to demonstrate the expertise of the founders of the company, giving a sense of both the experience and personalities of the founders.

Co CollectiveCo Collective

Hand-drawn elements can clearly take ordinary websites and make them more emotive and unique. Still, when they are used too much, these style choices can make navigation less intuitive. If a designer wants to use hand-drawn elements, ensure they are not sacrificing ease of use for prettiness.

If those hurdles are avoided, the end result is a website that has lots of personality, which will make it stick in users’ minds much more easily.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.