Tips for sketching websites

I’ve seen tweets, and hear people say “I’m no good at sketching/drawing.” So they don’t bother with doing it. For me not sketching your website before going into a wireframe or design, means you’re missing out!

Just because you feel like you can’t sketch, doesn’t mean you shouldn’t do it. After all, you’re capable of building a website, and at some point in the past you weren’t. In this post, I’ll show you my process and how to sketch websites.

Plan

I’ve covered this in the past, where I’ve covered my wireframing technique. You need to plan what’s going to be on each page that you sketch. So noting the elements that make up each page before sketching, will make sure nothing gets missed. I recommend doing this as detailed as possible.

Example for my upcoming redesign

- Header
- - Logo
- - Navigation
- - - 4 items (blog, portfolio, about, contact)
- - Search
- Introduction
- - Image
- - Description
- Posts
- - up to 8?
- - Featured image
- - Title
- - Date
- - Category
- Newsletter
- - Title
- - Description
- - Form
- - Image
- About
- - Title
- - Image
- - Description
- Social/dribbble
- - Title
- - 2 shots
- - 3 or 4 links
- Footer
- - Copyright
- - 3 or 4 links

Sketching doesn’t have to be quick scribbles

Sketching is quick, but that doesn’t mean to just scribble incomprehensible things. Part of what makes sketching effective is the ease of execution. Doing wireframes through a device, there is a level of accuracy required. The fact we’re sketching affords us speed, so we can take our time. This could be the reason you don’t believe you can sketch well.

Start small

Starting small allows you to explore layouts even quicker. It will help you learn the extent of your page and serve as warm up drawing exercises. I usually begin at a size around a quarter of A4 width.

Once I’ve memorised the elements I want on the page and the order they’re in. They become easier to draw as they’re in muscle memory. It’s one less thing to think about and you focus on drawing only.

Make mistakes

Most of the time I don’t bother erasing my mistakes it happens, move on to the next sketch. However, if you’re really into this particular sketch, erase the mistake.

You can make mistakes much easier, learn from layouts and find yourself to be more ambitious. In turn, you’ll be happier to leave behind ideas that didn’t work so well.

Draw elements separately

Drawing parts separately will allow you the freedom to focus on one area and find different layouts for that. You can bring it back into a sketch later on.

Don’t add large amounts of detail

Add only the details that allow you to identify what it is.

• Paragraphs become lines
• Write short titles of sections, otherwise do bolder lines
• Icons drawn simplified where needed
• Illustrations with a basic idea
• Images are a box with an x in

Drawing everything as a simple representation will make your sketches more effective. You will make far fewer errors reducing things to a basic form.

Don’t box yourself in

The error I’ve seen and made myself in the past is, estimating the size you want to draw your sketch at, and boxing yourself in. Doing this will lead to you starting more sketches than necessary. Leave this until last if you have to.

Build it up & choose which works best

Continue on until you’ve built up a sketch you’re happy with. You’ll find that many ideas are scrappy to begin with and eventually you’ll settle on layouts that are suitable.

This varies for me sometimes I’ll get the idea in a few sketches, sometimes many more. I’ll often continue to sketch and they won’t look much different, but it’s just reinforcing an idea and trying to see a way I’ll make it happen in a wireframe.

Sketch larger

Once you’ve done your small sketches and chosen one. You may find that sketching it a little larger can be helpful. I don’t always do this, but where I may want to refine the layout with a larger drawing can be helpful.

It tends to be only half the width of A4 instead of a quarter of A4. You have to be aware of how long pages can be.

It’s particularly helpful for where there is intent to display an illustration. As this is very dependent on how the space is occupied. I find being able to rough out the illustration, will give you the best idea in advance before actually creating it.

Sketching help

Now you may struggle with the overall act of sketching, here are some tips, that should help you.

Warm up

As mentioned earlier, warming up your hand and reminding yourself of how your pencil applies lead to the page is a necessary step. Artists and illustrators will always do this step. They’re never able to just draw perfectly from the get go.

Do some scribbles on a page, practice the shapes you will be using and you’ll be good to go.

Use a ‘b’ lead and be light

I recommend using a ‘b’ lead. They are softer and can allow you to draw sketches lighter, without being forceful. They apply lead darker to the page, it’s a strength because we’re not really roughing things in. We just want to be able to do our sketching with low pressure, which makes it easy to erase mistakes.

Hold your pencil correctly

It’s important to hold the pencil correctly. This allows you to sketch with the right amount of pressure and draw lines easier. I remember it not feeling the natural way to hold it. Over time, you will find yourself defaulting to it.

The further up the pencil you hold it the lighter you will apply, this is your choice.

Sketching is important

Overall sketching is an important part of the process. I use it to understand and reinforce the goals of a website. It serves as a process that helps ‘print’ it in your mind. Above all, it can help develop ideas.

As such that when I get to the wireframing process I don’t have to refer to these sketches very often. I just focus on the laying out of the elements.