PLANNING YOUR WEB DESIGN WITH SKETCHES

Author: STEVEN WHITE

Source: Click Here

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?

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.

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?

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.

#sketches #webdesign #websitedeveloper #SearchEngineMarketing #torrancewebdesigner #webdesigner #planning #MWDS #torrancesearchengineoptimization #brandingspecialist #torrancewebdesign #webdevelopmenttorrance