Sketches and Drawings in Website Design

A couple of years ago it was quite commonplace to see hand-drawn sketches and drawings in website design, they fitted in nicely with the grungy trend that lasted a little while.

Nowadays it is much rarer to come across such designs, and that is why it is a refreshing change to see them. For the purposes of this round-up, we have included websites that incorporate sketches and drawings that look hand-drawn – of course, they may be computer generated, but they at least mimic a more free-hand effort.

Hand-Drawn Elements in Website Design

Served MCR

Served is a ping-pong competition held in Manchester, England. Their vertical scrolling site has been designed almost exclusively with hand-drawn, animated sketches.

Served MCR

Garland Jack’s

There are a lot of hand-drawn elements on this site, along with animations and scrolling animations. The font is also in the hand-drawn style.

Garland Jack's

A Story About Us

The “us” referred to in the title are Matt and Kate – and this is the story of their meeting to Matt’s proposal (and Kate’s acceptance). All images are animated pencil sketches. The story was written by Matthew Bush, animations by Josh Compton and illustrations by Gabe Cooper – a very successful collaboration!

A Story About Us

The Might of Mr Miller Book Trailer – Submarine Channel

This snippet of the story is a vertical scrolling site with scrolling animations and hand-drawn sketches.

The Might of Mr Miller Book Trailer

Ichance

The sketches used on this site evoke a seriously tranquil feeling – it is one of the most emotional site designs I have ever come across (perhaps only personal opinion – but it certainly had a calming effect on me). These types of images would be very effective on charity sites.

Ichance

De Vriend Book Trailer – Submarine Channel

This is another ebook trailer from Submarine Channel. The images here are like watercolor paintings. Some small touches of animation as you scroll down the page.

De Vriend Book Trailer

Send Me To Outer Space

This site belongs to an English guy who is trying to raise the money to get a trip into space when Virgin Galactic launch their trips. He has to collect $250,000, and he is looking for donations. The site has a lot of drawings and uses a hand-drawn font.

Send Me To Outer Space

Housatonic

This is an information site for an international festival held in Italy in 2013. The only sketch elements on this site are on the landing page… but they are pretty cool!

Housatonic

Loucuras do Lar

This Brazilian site uses a lot of hand-drawn sketches on its site – it is amazing how much there actually is on the landing page!

Loucuras do Lar

Little Big Room

This French company sells household furniture and accessories. The site design uses a lot of sketchy images.

Little Big Room

Mongoldude

This frontend developer presents more or less his whole website as sketched comics – a unique approach.

Mongoldude

Tampere Art Museum – Moomin Valley

The Moomin Valley exhibition is housed at the Tampere Art Museum in Finland. Their site uses both illustrations and sketches in a slideshow on the landing page.

Tampere Art Museum - Moomin Valley

Future Bristol

This site is the result of a project by Dr Rosemary Bailey to imagine how Bristol would look in the future if it were a low carbon city. The research involved 140 local people from different walks of life putting forward their ideas. The result was two scenarios for the future of Bristol. Each scenario is a drawing with links to pertinent points for a low carbon future.

Future Bristol

The Curious Case of Children

This site is owned by Mother’s Pride – a UK bakery company – and I suppose it should be no surprise that as it is aimed at children, it uses drawings, sketches and illustrations.

The Curious Case of Children

Deborah Cavenaugh

Deborah Cavenaugh is an artist and teacher of art. Although her blog layout has changed, she has been using this colorful painted background for a long time.

Deborah Cavanaugh

Draw For Joy

This is the blog of Roxana Soare, a Romanian artist. Her site is full of her drawings, including the icons, etc.

Draw For Joy

Natrashka

The portfolio site of graphic designer Natrashka is full of sketchy images – a sheer delight!

Natrashka

Denise Chandler

The portfolio site of graphic designer Denise Chandler has a comical image on the landing page. Here I have included 2 screenshots… as you begin to scroll down, the animated landing page changes from ‘Without good design’ to ‘Everything falls apart’, and the image becomes just the shell of the car.

Denise Chandler 1
Denise Chandler 2

Art Attack

Well, I really don’t have to explain where the sketches are on this site… it all speaks for itself!

Art Attack

Direnduvar

This site is simply unique… I actually have no idea what it’s about, but the landing page has tiny drawings, and when you scroll the mouse wheel it zooms in. Red dots indicate links – of which there are very many, and they will take you to another page of sketchy drawings.

Direnduvar

Conclusion

So, some designers are still using sketchy or hand-drawn images in their designs, even though it is probably considered very outmoded these days.

What do you think of this style of illustration in web design? Do you still use such images, or have you ever used them?

Please share your thoughts, opinions and links with us in the comments section below.

Advertisement