By: Diane H Wong
November 25 2019

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. Following are some of the examples of hand-drawn elements in website design:

Served MCR

Homepage of Served MCR showing multiple icons like hand, water tap, table tennis, bottle, coffee mug


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

Garland Jack’s

Home page of Garland jack with icons resembling 6 bottles and a cow


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.

A Story About Us

Illustration showing pencil sketch of students sitting inside a classroom


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!

The Might of Mr. Miller Book Trailer – Submarine Channel

Illustration showing a person on a chair alone in a room


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

Ichance

Homepage of Ichance with an image of a person's face on left


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.

De Vriend Book Trailer – Submarine Channel

Illustration showing a woman sitting alone inside a room full of computers


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.

Send Me to Outer Space

Illustration showing a man standing beside a table


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.

Housatonic

Illustration showing a lot of people riding bicycle


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!

Loucuras do Lar

Illustration showing a cluster of images stacked closely together like a man drinking coconut water, a camera, a man riding cycle


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!

Little Big Room

Illustration showing a couple of houses and a ship


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

Mongoldude

Illustration showing a man with a sword, a man pointing with a bow, and a monster attacking a city


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

Tampere Art Museum – Moomin Valley

Illustration showing a group of hippopotamus and people swimming


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.

Future Bristol

Illustration showing a city with full of buildings, parks, cars, planes


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.

The Curious Case of Children

Illustration showing 6 boxes and kids inside each of them


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.

Deborah Cavenaugh

Homepage of Deborah Cavenaugh with trees and flowers on left, top and right and a person sitting at the bottom


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.

Draw for Joy

Illustration showing a woman carrying a plate full of watermelons over her head


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

Natrashka

Illustration showing clouds and a plane on top, and a man floating over sea below with fishes and octopus inside it


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

Denise Chandler

Illustration showing a big red carIllustration showing a big red car


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.

Direnduvar

Illustration showing a big V on top-right and a wheel shaped icon on bottom-left


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.

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.