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 is a ping-pong competition held in Manchester, England. Their vertical scrolling site has been designed almost exclusively with hand-drawn, animated sketches.
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
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
This snippet of the story is a vertical scrolling site with scrolling animations and hand-drawn sketches.
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
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
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.
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
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
This French company sells household furniture and accessories. The site design uses a lot of sketchy images.
This frontend developer presents more or less his whole website as sketched comics – a unique approach.
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.
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
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 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
This is the blog of Roxana Soare, a Romanian artist. Her site is full of her drawings, including the icons, etc.
The portfolio site of graphic designer Natrashka is full of sketchy images – a sheer delight!
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.
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.
So, some designers are still using sketchy or hand-drawn images in their designs, even though it is probably considered very outmoded these days.