Contrary to popular Web belief, Internet graphics don’t have to be sleek ‘n shiny like technology. In fact, in this age of lookalike layouts and cookie-cutter designs, landscapes of reflective images and shadowed text, hand-drawn graphics can give a touch of rustic personality to a page. A hand-drawn layout, icon set, avatar, etc., can make your page feel homey and intimate–truly “handcrafted.” What’s more, it can make your site seem more down-to-earth.
But not all Web designers are handy with a pen or a paintbrush. (I know I certainly ain’t the world’s best. LOL) It can be daunting to try to put your own artwork on your webpage for everyone to see; you can be paralyzed, thinking “What if it’s not good enough? What if I work really hard on it, and it ends up looking like I used it for toilet paper?”
These are some of the real thoughts and feelings I had about doing my own hand-drawn layouts…and I finally just decided to go ahead and try my hand at it, literally. The following are some of my results:
Examples of Hand-Drawn Graphics
(For each example, click on the image to get a full-size screenshot.)
The Network Look
This, my network page, was my first try at doing a hand-drawn layout. With this layout, based on a real tree I used to climb when I was a kid, I placed buttons and links as if they were flowers and buds on living branches, with my sketch as a simple background image.
I added no color to the actual sketch–I wanted the buttons to be the spots of color in the design, like trees’ natural flower buds and blossoms. (Plus, whenever I add color to my sketches, they automatically turn from “pretty good high-school art class” to “kindergarten art class mess”. Every. Time. xD)
The Domain Look
My domain layout featured a big, sheltering tree like the ones all around my house, its soft, cloudlike branches overhanging the content on either side of the “trunk.”
The “trunk” of the sketched tree stretched down all the way to the bottom of the page, where I had the “roots” of the tree in my footer, seen here. This is probably my favorite footer design to date–it really looks like the “end” of the page, the “ground” rather than just an arbitrary bit of code stuck at the bottom.
This sketch also received no color, because I knew I’d be using large areas of various shades of green in my CSS styles; I didn’t want the actual tree to clash. I also cite my previous difficulties with adding color to my sketches. It just never works out quite as I intend. LOL
The Fanlistings Look
This “flowers & ribbons” design literally framed my joined fanlistings page, and was difficult to code but looked beautiful on the page. For this one, I added a golden color to the flowers using Photoshop, and the overall layout looked much better as a result.
I used the boxed-in design as a way to stretch my design boundaries–the style succeeded with a little image slicing and creative use of HTML tables (yes, I used tables because aligned divs hate me). In this layout, the hand-drawn images define the space but do not detract from the content, like a good area rug in a living room.
The Update Blog Look
My update blog featured only small-scale sketches (a big leaf, a tiny multi-petaled blossom, and a growing flower on its stem). I used the leaf and blossom on the top part of the layout, and the flower-and-stem image in the footer, as seen below:
Using little sketched images in strategic places on the layout (and, again, not adding any color to the sketch itself, but using blocks of color in the layout code) gave it an airy, organic look. Plus, using fewer sketches meant more space for content, should the design need it; I wasn’t sure how much the various tag clouds and category spaces would need, so I went for as much visual space as possible.
Weaknesses of This Design Style
While this does look down-to-earth and homey, it can also look amateurish. (I fully admit mine are not the best in technical execution, but they were the best I personally could do.) In addition, hand-drawn designs can easily be misaligned, angled oddly, or leave crooked lines on a webpage; you can correct many graphical sins with Photoshop, but not everything!
However, if you’re skilled doing pencil-paper sketches (or sketches on a tablet computer with a stylus), you might be able to turn a hand-drawn design into a sleek-looking layout; it would be a worthy challenge! It’s just a little bit harder to get the perfect straight lines and shiny details we’re so used to with the Web these days.
Where Can You Use Hand-Drawn Designs?
In my opinion as a designer, hand-drawn designs are generally better for small personal/informational sites and the like, not big corporate or commerce sites. Any site where you need a personal touch, a more casual layout, etc., a little sketch (or a big one!) can work.
How to Make Your Best Hand-Drawn Graphics
You Will Need:
- Pencil
- Ink pen
- Coloring medium (if desired; paint would need to be let alone to dry and might not scan well)
- Ruler (if desired)
- Printer paper (clean and uncreased)
- Scrap paper
- Scanner/copier/printer & computer, linked together
Directions:
- Sketch out your ideas on your scrap paper with a pencil–much easier to work with your design when your lines can be erased (take it from me).
- When you have something you’re satisfied with, take up your pen and printer paper, and begin transferring your sketch(es) into finalized form, using a ruler as necessary.
- Make a couple of copies of your uncolored sketch to see how well the machine picks up your lines, and make any lines darker that don’t show up. (Also, it’s good to have a few copies of your sketch on hand just in case something happens to the original.)
- If you want to color in your hand-drawn design by hand, do so now. Alternatively, you can add color digitally with an image-editing program once you scan it in.
- Scan in the image–you may have to adjust the contrast, brightness, and other image settings so that the pen lines or hand-added colors don’t look distorted. (I ended up with one sketch that looked like a photo negative because I messed up the image settings…LOL)
- Once it’s scanned into your computer, you now have an image that you can use as the baseline for any web project!