The Simple Sketches that Could be Worth Big Bucks to Your Business
Today we’re going to talk about sketching thumbnails and roughs. Now, before you protest, “But I’m not an artist!” let me reassure you that there’s no artistic skill required. And it’s definitely worth your while because spending a little time doing these two things can save weeks of development and redevelopment time and thousands of dollars on your website project.
This is Part 5 of my 7-part series on how to create the website you really want, on time and on budget. Here’s a quick recap of what we’ve covered so far:
- Step 1 – State your GOAL. The best way to set your website project up for success is to start with the end in mind by considering what you need that website to do. The more specific you are about what you expect to get out of it, the better. And of course, be sure to communicate this to your website developer.
- Step 2 – Identify your AUDIENCE. Before you start building a site, get very specific about who the user is, the customer you’re trying to reach. This will allow you to gear your message around who your customer is and what they are looking for, which will improve the conversion rate of visitors into customers.
- Step 3 – State your MESSAGE. Focus on one key message. This requires discipline that few people exercise, which is why you can use it to set yourself apart.
- Step 4 – List the necessary ELEMENTS. A necessary element is one that will make your website incomplete if it’s not there. Listing these items will give you and your website developer a better sense of what type of website you need.
- Step 5 – Create a MIND MAP. Brainstorm a list of things that represent your message, especially concrete, visual things.
- Step 6 – RESEARCH designs with similar goals. Spend some time on the web identifying sites you like and want to emulate, and competitors that you want to differentiate yourself from.
And now, on to the next step two steps…
Step 7 – Create THUMBNAILS
Thumbnails are the first visual representation of your website. They’re small sketches that are quickly drawn without any need for skill – think of them as the stick figures of design. Their purpose is to give a basic overview of what will be needed on a page.
Your primary goal with thumbnails is to think through the process of what visitors on your site will see when they get there, the best way to portray your message, and how you’ll move the visitor through the necessary information to your call to action.
Sketching thumbnails for your website home page can save you tons of time because it gives you direction on what is needed (and what may not be needed).
I often make thumbnail sketches while I’m doing research on other websites, because what I see there gives me ideas for the new site I’m working on.
If you’re wondering just how small and how quick your thumbnails should be, I do mine about 2×2 inches and each one takes about a minute.
Step 8 – Create ROUGH DRAFTS
A rough draft is a larger, more detailed version of your thumbnail sketch that indicates what content is going where in your final design. It is typically a half-page to a full-page in size.
On a rough you’ll indicate where key elements go such as your logo, headline, navigation bar, blocks of text, photos and graphics, footer elements, etc.
It’s much quicker, even if you are not skilled at drawing, to sketch a rough draft of your design with pen or pencil than it is to move elements around on a computer. Even experienced designers find it faster to sketch out roughs on paper than on the computer.
A rough provides an additional opportunity to test out your plans. Sometimes the layout that we have in our heads doesn’t work quite the way we thought it would when it’s down on paper. It is much less costly to find this out from a sketch than after you’ve paid a professional a lot of money to design it on the computer.
It’s a good idea to sketch a few different versions, especially for your home page, so you can think through various the options for what you want the final page to look like. Do you want a big image slider dominating the home page that features products? Do you want your latest blog entry on the home page that shows off your industry knowledge? How will the call to action stand out against the other elements you have on your home page?
Play around with how much information you include on the home page and how much you push back to secondary pages. What would your home page look like if you only focused on one message and call to action, instead of trying to squeeze in everything you think is important?
Also think about what content is “above the fold” – the top square area that people will see on first glance without scrolling. You may sketch out the full page in a rectangular sketch, but the top square is the prime real estate – put what matters most there, especially your call to action.
Experimenting at the roughs stage is inexpensive, so this is the best time to do it. In fact, this is one of the biggest ways to make sure your website project doesn’t go over budget.
Just imagine designing and creating a whole website only to find that you were missing a key element that should have been thought through from the beginning, and which will require changing the whole design to properly incorporate… This kind of thing happens, don’t let it happen to you!
I typically do dozens of thumbnails and a few different rough drafts to find the right arrangement of elements.
After you’ve got a rough that you’re happy with, you can pass it on to your creative professionals (web designer, photographer, illustrator, etc.) with your notes on it. This will help insure that you get the design you actually want right from the beginning.
So what are you waiting for? Get sketching! It’s easy when you remember you’re not trying to win any art prizes. And yet, it could save you big bucks on your website project.
Get the website design template
If you’d like to receive my free website design process template that walks you through all the steps in this process, subscribe here.