Why It’s Important to Sketch Before You Wireframe

by on 08/27/12 at 9:48 am

Have you ever had an idea for a website or application? It’s easy to come up with the idea, but the hard part is understanding how that idea will take shape in user interface form. This is where sketching is useful. Sketching happens in many professions that involve creativity and construction. Even Leonardo Da Vinci had to sketch out his inventions before he started to build them. No matter how smart you are, It’s impossible to go from a simple idea in your head to immediately building it out without hashing out the details in between. Sketching out your idea before you build is necessary for every designer to do.

Why Its Important to Sketch Before You Wireframe

Every Idea Needs User Interface Translation

Designing an interface is a process. It all begins with an idea, but that idea needs user interface translation. It’s not enough to say, “I want an app that does X, Y and Z”. You need to know what the user will see on each screen of your app to do X, Y and Z. Sketching takes your mind from in the clouds to the user interface, where you start thinking about the user experience. You already know what you want your app to do, but sketching helps you figure out how your app will take users to the desired result. Sketching allows you to visualize the screen flow of the user experience so that your idea isn’t just a figment of your imagination, but something that’s more visible and clear in user interface form.

Why Its Important to Sketch Before You Wireframe

A Sketch is Not a Wireframe

Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.

Why Its Important to Sketch Before You Wireframe

When you sketch, you are trying to get a basic concept of how the app will work in interface form. There are many ways you could execute an interface concept. But here you are trying to figure out what those ways are and which way works best. There is a lot of quick and dirty thinking that happens from pen to paper. The specifics of the user interface aren’t important here. What matters most is understanding what the user will basically see on each screen that will lead them to the desired result.

When you wireframe, you are trying to refine the concept of how the app will work using pixellated grayscale widgets. The medium you’re working in forces you to think in higher detail, where sizing, placement and order of elements are all figured out. You’re also forced to think more thoroughly about all the elements on the page from top to bottom, not just the basics. When you work in pixels, you can get more precise about how the user interface will work. As you finish wireframing, the interface concept should look clearer and more refined.

Sketching Always Comes Before Wireframing

Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and misses certain key elements or isn’t thoroughly refined.

Why Its Important to Sketch Before You Wireframe

What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage. This is counter-productive because sketching is where creating the basic concept is done. Wireframing is where refining the concept is done. And mockups is where the visual graphics and content is done, not the interface concepting. When you skip the sketching and wireframing stage, you end up thinking about too many things in one stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to fully develop.

Sketching Helps You Brainstorm Ideas with Clients

One of the biggest advantages to sketching is that it allows you to express your ideas quickly and involve others in creating the user interface. Whether you’re sketching on a whiteboard or on a piece of paper, it’s important that your client or team understands the basic concept of the interface so that they can do their job in providing you with the necessary content. It’s also important to include any feedback or ideas they have so that the interface isn’t missing anything. To do this, you could even get the client to sketch their own ideas out. This puts everyone on the same page so that the team can move forward with strong morale and a clear understanding.

Why Its Important to Sketch Before You Wireframe

Sketching Makes You Think and Work Faster

Wireframing from scratch with no basic interface concept is hard because you can’t push pixels as fast as you can think. When you’re concepting the interface, you need to think about all the ways you can execute the user experience. There are a lot of ideas that could pop into your head that you won’t be able to get on pixel canvas as fast as you could get them on pen and paper. Sketching lets you explore different options quickly so that you can figure which direction is best. Getting a basic concept of the interface before you wireframe makes the process faster and easier. It’s hard to come up with multiple concepts on the fly when wireframing because you’re working in a software program. Not being able to push pixels as fast as you think limits your brainstorming speed and flexibility.

Why Its Important to Sketch Before You Wireframe

Sketching Makes Your Wireframes More Detailed and Refined

Wireframing with a basic concept in mind means you don’t have to brainstorm to figure out which direction to take the user interface. There are always multiple ways you can execute a user experience to get the desired result. But when you have done the sketching already, you don’t have to do any of that when you wireframe. This leads to a more detailed wireframe because you’re spending more time refining the basic concept you already have, and less time thinking about which direction to go. When you have detailed and refined wireframes in your hand, you can focus on the graphics and content in the mockups stage.

Sketches Can Look Bad and Still Work Wonderfully

You don’t need to have the skills of Leonardo Da Vinci to sketch. A sketch can look bad and still work wonderfully. What matters isn’t your artistic ability, but your ability to explain different interface concepts. Sketches offer others a peek into your thinking. It’s also easy to change your sketches as your thinking changes, which makes collaboration a breeze. Unlike mockups, sketches don’t need to look pretty. This means you don’t need to have any technical design ability to do them. This makes it easy for clients and other team members to get involved, which brings a lot of value to the interface in the beginning stages.

A Tool for Better Sketching

Most designers usually sketch on a whiteboard or blank sheet of paper. But the problem with this is that there is no blueprint for the user interface platform they’re building for. For example, a blank sheet of paper doesn’t have a mobile phone, tablet or web browser pattern for sketching the interface. This leads designers to forget about certain platform limitations when they’re sketching. Another problem with sketching on a blank sheet of paper is that it’s hard to make perfectly straight lines without a guide. It’s also hard to keep different interface elements proportional and consistent in size from screen to screen.

Why Its Important to Sketch Before You Wireframe

Interface Papers are printable interface blueprints that solve these sketching problems. It has mobile phone, tablet and web browser patterns for sketching your interface on different platforms. The patterns are all on a grid which not only makes it easy to draw straight lines, but it’ll help keep your interface elements proportional and consistent in size when you sketch different screens.

Never Underestimate the Power of Sketching

Sketching sets the tone for the rest of the design process. It’s key in crafting the user experience and communicating it to others. You may think that you don’t need to sketch because you already know exactly what you want and how the interface should look.  But when you actually do sketch, you’ll realize that there are more possibilities than you initially thought. And that the path that you were so set on might not work the best. Sketching allows you to entertain all the possibilities of what your interface could become. Where you go from there is completely up to you.


Why Its Important to Sketch Before You Wireframe Why Its Important to Sketch Before You Wireframe

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

19 Responses to “Why It’s Important to Sketch Before You Wireframe”

  1. Gopal

    Aug 28th, 2012

    It’s a wonderful article, I really love it. Sketching is the first and necessary step between the abstraction and materialization. There are many bubbling thoughts comes up between the abstraction and materialization, sketching is the way to utilize these bubbling thoughts in the materialization.

  2. Maxim Y

    Aug 31st, 2012

    Hi Anthony,

    Thanks so much for your great article. There is one more common step in the process, which your diagram omits: prototyping.

    If you click on my name you’ll find another good article published by Marcin Treder last month on Designmodo. He defines prototype as a step where you work on your interactions and UI simulation, and the first stage when you are ready to run usability testing.

    Thus, the “full-on” version of the diagram would contain Sketch > Wireframe > Prototype > Mockup > Code (and obviously each designer would be free to skip any step in his real-life process).

  3. The Peach

    Sep 1st, 2012

    Thanks for the article, I’ve seen so many colleagues getting mad and trying to use mockups as sketches, which is never equally fast or productive. I presume there’s also an abuse of technology and a fear (or real incapacity) of going back to pencil and paper.

    Agree with Maxim regarding the use of prototyping, although it could be debatable that it has to be used on every occasion.

  4. shardulsingh

    Sep 3rd, 2012

    Thanks for great share. I thumbs up for your line written..

    ” You may think that you don’t need to sketch because you already know exactly what you want and how the interface should look. But when you actually do sketch, you’ll realize that there are more possibilities than you initially thought.”

  5. Leeuwarden

    Sep 6th, 2012

    Thanks, nice article. I always start with a sketch. What I like to do is when I have finished the new disign, to compare it with the original sketches. And most of the times the sketches are the foundation of a nice new design!

  6. Colm Morgan

    Sep 7th, 2012

    Excellent article. Many of the points raised here can certainly relate to all forms of web design/development and interface development. Many thanks.

  7. krishna Raj

    Sep 15th, 2012

    This article is fine and very constructive. But please tell me, where will we be having time to have it Sketch > Wireframe > Prototype > Mockup, when we are stuck with huge work load with tight deadline?? I always feel, I better make mental note of my designing an app or webpage before I go for final output. I know rest of the world does opposite.

    Regards,
    kris

  8. Jitendra Vyas

    Sep 17th, 2012

    I’m agree with Article. But I think if we have software which can draw sketches too, will make the process easier. It’s easier to remove, edit, copy objects in Software. and Computer file is also easy to sharing by sending email. With pen and paper these things takes time.

    • Stomme poes

      Sep 18th, 2012

      Jitendra: best of both worlds: a tablet+stylus (a la Bamboo tablet) + scribbley software so you get the speed of doodling with the ability to grab stuff you’ve drawn and drag it around on the canvas :)

  9. Wraecca

    Sep 25th, 2012

    Agree.

    We love sketching so we build http://popapp.in which makes these papers become interactive prototype.

  10. Taj Moore

    Sep 25th, 2012

    You seem to be using just one definition of wireframe. In our shop we don’t draw distinct lines between sketches and wireframes because a refined sketch is as good as a rough (low-fidelity) wireframe; the difference is that one is in the idea stage and the other is in the requirements stage. Furthermore, we shy away from high-fidelity wireframes when Creative will be making comps, because we much prefer that Creative feel they have the freedom to interpret wireframes, and their relative priorities of elements. That is, the more literal the wireframe, the less creative the Creative.

    Anyway, good article. Thank you.

    • Nina

      Sep 28th, 2012

      Taj, I agree that there is a natural progression from sketch to wireframe and also, that we don’t want to get too high fidelity when it comes to creative work. However, I would disagree that the ‘priorities of elements’ should be left the creative team. Creating visual hierarchy to guide eyes towards important elements first should be determined by UX.

  11. Ankur

    Oct 2nd, 2012

    I’m the type that skips the sketching and goes straight into OmniGraffle. I feel like I’m faster this way – but your article made me think that I should re-evaluate sketching.

  12. Vinish Garg

    Oct 17th, 2012

    Quite an interesting post on sketching. I find it very important to prepare basic sketches before I start placing and then moving around rectangles and UI controls in the wireframing tool.

    Sketches clarifies the thought process of what exactly we want for the page structure. you have covered all benefits of sketching in detail, and very accurately. Thank you for sharing this.

  13. Tomas Ström

    Feb 12th, 2013

    I disagree with letting the client sketch his ideas for many reasons. Usually the client doesn’t even know what he wants nor have the ability or usability experience to embody them. I suggest leaving that part to experts. Otherwise it’s food for thought and a good article.

    • Ruben Fernandez

      Oct 8th, 2013

      On the contrary, most of the time, the client knows EXACTLY what he/she wants. Thing is many times he doesn’t knowhe knows. Or almost all the time, doesn’t know how to express or ask for it. My experience has taught me part of our jobs is to read the client in search of those hidden objectives, to coax them out of them, little by little. It might not sound as glamorous as saying I am a kick ass creative whose every concept gets approved, but it does make for happy (and returning) clients.

  14. Locke

    May 9th, 2013

    Great article. Very eye opening, especially for the non-designers.

    Thanks for this.

  15. Kaushik

    Feb 5th, 2014

    Fantastic article !! wish all UI developers and managers read this article..

  16. Deborah J. Mayhew

    Feb 7th, 2014

    For many years I used Powerpoint to do what I call ‘wireframes” but what I think this article would call “sketches”. Eventually I switched to using Excel, which I think works great, in that it provides the kind of layout structure this article refers to as “Interface Papers”. Having laid out a web page for example with a banner and nav bars and footer all in relative locations on a “template” worksheet, its then easy to copy the worksheet and then just sketch in the differing content across pages. It encourages consistency because copying and pasting templates you create (as well as components within page bodies) is much easier than sketching each new page (or component) from scratch. Also, being a usability expert but not a graphic designer, I simply create elements in a very rudimentary way, indicate where consistency is important by using the same sketchy look for elements . . . and then when the graphic designer comes in, they know where to be consistent. For example, I may create a top level nav bar that is surrounded by a simple rectangle and has simple text links in it, perhaps with a different color for the currently active link or visited links. Across my whole wireframe nav bars always follow those conventions. The graphic designer then takes what I have made consistent as simply a directive that those elements must all look/behave the same, but they dont have to look or behave just how I have specified them – they come up with their own look and feel, and then must apply that look and feel where I have been consistent in my sketchy look and feel. I have found this sketching/wireframing technique very useful in establishing basic usability constraints while at the same time leaving the graphic designers with a basic structure within which to practice their creativity without losing usability requirements. Very nice article, thanks!

Leave a Comment