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)
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.