Web templates with hand-drawn, sketchy graphics
Hand-drawn art and design is gaining popularity and industry demand
Hand-drawn art and design is gaining popularity and industry demand. Let’s see how this aesthetic can enhance your designs
The marriage of traditional and digital graphics is a fun and ever-evolving experiment. On one hand, hand-drawn sketches have an intrinsically poignant and unique quality, making it irreplaceable. On the other, digital software is great at mimicking hand-created effects, bringing a whole new look to the traditional approach. This tutorial will show you how to design a template that seamlessly blends the best of both worlds.
The end result is a flowing aesthetic that begs the user to figure out which parts are hand-drawn and which computer-generated. As you try it out, you’ll soon discover this process is not only amazingly fun and useful, but the possibilities are endless. An ordinary sketch or doodle has the potential to become a functional element in a website, while computer-generated graphics add further visual prowess to improve the overall look.
(This tutorial originally appeared in Web Designer issue 156, authored by Wendy Ding)
01 Inspiration
A great starting point for this tutorial is the sketchbook. Every creative person should carry one and sketch ideas whenever they come to you. Abstract flowing lines, fun colours, odd juxtapositions and unexpected patterns are all worth noting down as creative reference. We will be using them to implement a similar treatment and styles into our sketchy web template.
02 Colour palette
The magic of a sketch or doodle is its uncontained quality because it is a visceral expression of emotions and thoughts on paper. The colour palette should subsequently reflect that immediacy, and for this purpose solid graphic colours work well. As a second and complementary element, quiet pastel hues are great for adding softness.
03 Rough sketch
Using natural sketching techniques, instinctively begin rough sketching some concepts across the paper and formulate up with a base drawing. The idea is to get a feel for the elements needed in the finished product: flowing decorative shapes and lines that form together to make a header. For now, we’ll use a regular blue ink pen for a quick brainstorm.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
It is wonderful to see real life art used in the digital realm, especially being used to “house” information on a site, I found this article extremely inspiring, I think anything is possible and it’s great how seeing articles like this can urge you to take new steps of direction and not to be so tunnel visioned with design techniques.
Lovely stuff!!
What a really inspiring post, it is great to see an illustrative style coming through into websites. The rough nature of the design adds an almost friendly feel to the site. It is very interesting to see how digital and illustrative design can complement each other when used in the correct manner. Well done.
I am building my website, which is online art gallery and I want some pages to be a hand written versions.
I am not a specialst but I have an idea now. Thanks to you,
Sophie
Hi i am a graphics designer, i would wish to suggest please add some video tutorials as i am offering in facebook community,
add me xameenx@yahoo.com
thanks
Nice hand-drawn templates wish i can do that also… :)
Very nice drawing for templates .
hi
I have a website,Know About Michael Madhusudan Dutta .
After reading this post, I really think I need to learn how to make doodle art to fit it as one of my blog’s background. An awesomely inspiring post! Cheers! – KG.