Planning Your Web Design with Sketches

Planning a website doesn’t have to be completely digital. Learn how sketching wireframes can help you speed up and innovate your creatives.

Planning Your Web Design with Sketches

There are plenty of foundational courses taught in design school. And it’s no surprise that big agencies and startups are taking a back-to-basics approach to their design processes.

Whether you’ve been a lifelong doodler or have serious sketch ‘chops,’ being able to use paper to explore new ideas is an important skill in the design field.

Fear not! The analog power of the pencil isn’t dead. In this device-focused era, there’s still plenty of room for a simple, proven design process.

In fact, I’ve heard of a growing backlash against wasted billable hours developing fully-rendered Photoshop comps. Sketching gives you the flexibility to finesse and generate iterative, evolutionary designs without blowing the budget on fully realized spec work and digital comps.

Whether you’re a big agency or freelancer, being able to communicate ideas to clients with a quick sketch is a valuable tool.

Why Sketch?

Sketching has some advantages to digital wireframes or even digital drawing. It’s portable, approachable, creative and time-tested. There’s nothing simpler than paper and pencil — or pen.

I’ve found, too, that clients tend to find the work informal enough that they can suggest changes and make edits. Fully rendered comps look “finished” or nearly complete. I think that can hamper a client’s willingness to suggest improvements or changes. Sketches are loose, friendly, informal… you can erase them and change them.

Wireframes tend to be very text-heavy and rarely communicate art direction and tone. Especially for photography and visual assets. When's the last time a big "X" said anything about your photography?
Wireframes tend to be very text-heavy and rarely communicate art direction and tone. Especially for photography and visual assets. When’s the last time a big “X” said anything about your photography?

By sketching, you can do rapid, almost train-of-thought development to get your ideas down quickly. It works on-the-fly, so you can spend less billable hours at the monitor and more time generating ideas.  Simply roll up your sleeves and find solutions.

Another Wireframe

This eventually turned into a Photoshop comp for the client. You can see how it resembles the traditional wireframe but more closely mirrors the art direction of the comp.
This eventually turned into a Photoshop comp for the client. You can see how it resembles the traditional wireframe but more closely mirrors the art direction of the comp.

And sketching kills the need for-placement-only (FPO) images. You know, the big “x” images, you put in your mock-ups and comps to show where you’ll put real assets. And you’ll save on using expensive stock photography for FPO.

This is the comp for the website. Do you see the progression from sketch and wireframe to final comp?
This is the comp for the website. Do you see the progression from sketch and wireframe to final comp?

How to Get Started

One thing is for sure, practice makes perfect. So get those sea-legs in shape with some pocket sketchbook doodles, idea iteration and sketching.

I’ve found that the best way to do this is by sketching whenever you’re queued-up in a line — for coffee, grocery shopping or waiting on the train. Any form of waiting is an opportunity to sketch.

And draw what you see, this skill will help you later, when you want to “perform” for your clients. Sketching everyday things helps you to be prepared with ideas and carrying a sketchbook means you can always be ready to write down ideas for later.

As you sketch more, you’ll learn to refine your sketches and develop them into more formal illustrations or drawings.

Sketching for Web Designers

When planning a website, sketching can be an invaluable part of planning. You can use it for designs, UX testing, UI elements and even trying out typography ideas.

I’ve used it on several websites to ideate the creative assets of a project like photography and icons. And I’ve also used it when faced with critical UI problems, like how to make a button or icon intuitive or user-friendly.

Sketches are perfect tools for communicating inference in design elements, too. And clients love the creativity component. They get into the process. You’ll find that they like to sketch, too.

I had a client once say “wow, it’s like I think it and you just draw it. Incredible!” And that’s the power and magic of sketching on-the-fly in client meetings.

Warning! Practice, Practice, Practice

Doodlers Anonymous
Doodlers Anonymous is a great place to get started and see how others sketch, doodle and think through their ideas. It’s also a great community for sharing and peer interaction.

Be warned, the world is a cruel place. Diving into sketches can be rough. If you’re not a seasoned sketcher or don’t have your drawing chops honed and prepared… then take some time to sketch independently of work.

For inspiration, visit sites like the Worldwide SketchcrawlDoodlers Anonymous and Urban Sketchers.

Read up on journaling and sketching by subscribing to sketch blogs. Then ask yourself… am I ready to sketch for my client?

Urban Sketchers
Urban Sketchers is an international nonprofit dedicated to observational sketching. They have a robust community on Flickr and Facebook. The main blog features a core group of selected sketch correspondents from around the world who share their work. You can find lots of inspiring ways to sketch the world around you on their site and in the Flickr and Facebook communities.

Remember, stick figures don’t impress. So being ABLE to sketch can be an important first step. You might want to take time to “practice” and understand how to sketch your ideas before you dive into client projects.

Early digital sketch
This was an early digital sketch. I was experimenting with a hybrid wireframe-digital sketch and used the Wacom to rough in the sketches. I learned from these early sketching interactions that you need more than stick figures for client work.

Questions to Ask When Sketching Design Projects

First I ask myself, do I know all the things I’m going to use on the page I’m designing? If it’s a redesign, I take inventory of the content that exists and also what users will be expecting to see.

If it’s a new site, I’ll review peer sites, do competitive analysis on those sites and then look at the really “clear” user needs and add those bits of content to a list.

Next, I ask if the clients has any sort of design preferences. In many cases, clients have sites they like or admire. Knowing those and understanding the design language they favor is helpful. Color palettes, font uses, language / writing style, visual elements and design trends tend to influence marketing professionals. Pinterest, mood boards and design “treasure hunts” can help understand a client’s personal preferences.

Sketching a Design

private school web design
This is an example of a sketch I used for a private school web design. The goal was to flesh out the home page wireframe without spending a lot of time on a fully rendered photoshop comp.

First, gather the critical content for the page. I either do this with sticky notes or I write a document. Sure, I still start with written words on a page, but the words are typically the initial place to get ideas down and have a comprehensive list of all the nav, content and support content I need.

Second, I’ll thumbnail my ideas from the initial list of page items. So I’ll sketch out navigation, content blocks, ads, columns, related support content blocks, headers, footers and so on. If I run out of paper, I just tape more pages at the bottom of the sheet.

Third, I’ll pick idea winners and losers for final sketches. Once I have a series of helpful ideas, I make a design decision and go with it. I usually get lots of feedback at this stage from client and peer designers. Sketching is so visually informal, too, that clients tend to feel more relaxed about picking winning ideas — long before a formal PSD mockup is produced.

Typical Project Process

Photoshop comp fully-rendered
This is the Photoshop comp fully-rendered from the approved sketch wireframe. You can see how the sketch helped model the photography’s art direction.

On most projects, I start with a simple rectangle and sketch a series of thumbnails. This process is super simple, but it helps me generate a solid collection of choices for clients, project managers and peers designers.

Once we talk about thumbnails and the ideas behind thumbs, I produce some rough sketches from the down-selected thumbnails. These roughs are generally just to help get content priority together and page layout nailed down. I’ll sketch up photography and asset ideas too, for buttons or other iconic / graphic elements of the layout.

In the rough phase I’m looking to answer questions like “what’s the user looking for” and “how can I prioritize content.” This phase is also very collaborative. I’ll share my sketches with clients, managers, project peers and other designers. If needed, we’ll even get the pulse of test users and drop a sketch or two in front of them. Then I refine, iterate and evolve the sketch again by working through this stage again.

Once there’s a clear direction for the rough sketch, I’ll draw a formal sketch wireframe. Like a traditional wireframe, a sketch wireframe has solid content on the page… words, icons and photography. So my art direction ideas for photography are tested and explored in this sketch. I also use the sketch wireframe to flesh out the final UI elements and make sure they will work. We test these, generally and even have “tween” wireframes for working through the very complex screens that a user might encounter in the design.

Many times, if there are formal presentations for clients, I’ll sketch in ink instead of graphite. Ink adds a bit of formality to the sketch and if color is added, I don’t have to worry about losing the real UI elements on the page to soft edges and lines.

In the end, you’ll develop your own process. The fantastic thing about sketching is it leads to complete design freedom. You can capture ideas any time.

Helpful Meeting “Add-Ons” for Good Sketching

Finding useful tools
Finding useful tools to use for sketching with clients is important. I’m a big fan of the Uni-Bal Vision, which is waterproof. A handy brush pen is good for filling large blocks of dark ink, too.

So, in general, here are some “meeting” related items that make for good interactive sketching.

Pens — I love to use pens for sketching. Sure, it takes a level of confidence to dive in with ink, but you can always restate your lines. And clients love the visibility of ink. My favorite pen is the Uni-Ball Vision. It’s waterproof when you want to use watercolor washes to add color.

The “Portable” White Board — Take an old white board and cut it into smaller, more portable “mobile” whiteboards. Your mobile whiteboard can go with you from office to office and be used with Evernote to capture iterative work and sketches.

Big Sketchbook — Don’t wimp out and get the small sketchbook for client work. Find something that’s 14 inches on the longest side. Show up with something you can use.

Flip Charts — Flip charts work like portable white boards… and are incredible tools for getting your clients to congeal around an idea or notion. And the sticky kind can be attached to the wall for long design sessions and afternoon-long work groups.

So What?

As a designer, your best asset is your mind. Your ability to present visual information in quick, improvisational ways sets you apart from others in the web development workflow. And sketching can liberate you from the mouse and monitor to ad lib client solutions.

With solid sketch skills, designers can riff on ideas and turn conversations into genuine paths to innovation. And sketches can be informal and laid-back, keeping projects approachable.

So grab a pen or pencil, a sketchbook and turn your doodling into something marketable to your employer and clients.

Tagged with:

Steven White

When Steven isn’t designing enterprise-wide websites for one of Virginia’s largest public universities, he’s a freelance web designer and illustrator. Before higher ed, Steven worked for nearly a decade in the web design agency world, and has been building websites since backgrounds were gray and links were blue. Away from the web, Steven sketches, paints and takes photos.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 29

Comments are closed.
  1. I’ve found that an index cards are the perfect size for thumbnail sketches when it comes to websites.

    • No.

      Sketching/doodling can still help you visualize what elements are required in your pages and what happens to them or how they’re reorganized on smaller screens.

      Sketched designs are not synonymous to fixed widths. 🙂

    • Sketching will never be over, as long as creation exists -in Architecture, painting, Engineering, or web design. Pen and paper are and will always be irreplaceable tools to begin a project.


  2. Well i just bought a galaxy note 2 10.1 with this objective.
    Still looking for some android apps to make prototype drawings

    • Yea, there isn’t a nice app to do it yet.
      But we have one: ‘SketchBook Express for Tablets’. Is not exactly for web, but it’s nice to make some drawings.
      You should try. Maybe you’ll like it 🙂

  3. even it’s hard to realize and to good to be true. making sketch for our web is a great idea. haha. 😀

  4. Excellent article! Young professionals tend to think that manual processes are a thing of old timers. The truth is shun anything they just are unable to tackle.

  5. I still believe in sketching as part of a designing process. It could visualize more your ideas on what you wanted before putting it into action. With responsive designs getting popular now, sketching could still make their way to be still a part of planning on a website design.

  6. Thanks for this in depth look at the benifits of sketching. I usually sketch out my ideas but never thought of letting the clients see them and offer feedback. Looking forward to using this technique to engage and involve my clients in their projects.

  7. I love to sketch things, no matter what project it’s for, they always serve as a good base of ideas before moving on to computer work. Sure the idea might change as you realise things might not work or there could be a better way, but sketching my work creates a solid foundation for the project ahead!

  8. I make mock-ups so neatly that I spend more time diagramming than coding. And I don’t always end the way I wanted it.

  9. This was a great source of reinforcement to the classroom procedures for graphic designers. This was a great inspiration to learn to pay the price of this line of work.

  10. Sketching is a very important tool for a designer. nice article… thanks.

  11. Sketching gives much more freedom to xplore…. rather than just sitting for 1-2 hour making mockups in PS.

  12. I think is a good thing to first sketch your work before designing. It helps me to be more fast when when designing a site.

  13. Great article. I feel that pixel perfect Photoshop mockups are time consuming and unnecessary, although big corporate clients often need something exact to have the hierarchy of approvals to sign off on something and nobody gets surprised.

    Little nostalgia going on here… I used to have my high school cross country camp on Virginia Creeper.. Absolutely beautiful country

  14. As a designer who has always believed in this process, thanks for putting this info out there! It presents some very solid points and I hope it changes some minds on the subject.