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 it is necessary for every designer to do.
Every Idea Needs User Interface Translation
Designing the user 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 imaginative mind from the clouds to the user interface screen where you can start thinking about the user experience. You’ll be able to figure out how your app will work to get the desired result. Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s visible and clear in user interface form.
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.
When you sketch, you are trying to get a basic concept of how the app will work in user interface form. There are many ways you could craft 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 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 pixelated 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 more clear and 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 isn’t thoroughly refined.
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 concepting is best done. Wireframing is where refining the concept is done. And mockups is where the visual graphics and content placement is done.
When you skip the sketching and wireframing stage, you end up thinking about too many things during a 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 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 experience. Whether you’re sketching on a whiteboard or paper, it’s important that your clients and team members understand the basic concept of the user experience so that they can provide you with the necessary content.
It’s also important to include any feedback or ideas they have in your sketches so that they can see how it’ll look. You could even ask clients to sketch their ideas out. This puts everyone on the same page so that the team can move forward with togetherness and mutual understanding.
Sketching Makes You Think and Work Faster
Wireframing from scratch with no basic concept is hard because you can’t push pixels on software as fast as you can draw them on paper. When you’re concepting the interface, you’ll think about all the ways you can craft the user experience. There are a lot of ideas that could pop into your head that you won’t be able to illustrate on a pixel canvas as fast due to the lack of flexibility.
Sketching lets you explore different options quickly so that you can figure out the best design direction. Getting a basic concept of the user interface through sketching will make the wireframing process faster and easier.
Sketching Makes Your Wireframes More Detailed
Wireframing with a sketched out concept means you don’t have to figure out as much on your wireframes. When you’ve done the sketching already, you don’t have to brainstorm all the various design directions you could go.
This leads to a more detailed wireframe because you’re spending more time refining the sketched out concept you already have. The more detailed and refined your wireframes are, the easier it’ll be when you get to the visual 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. When you get new ideas, it’s easy to show them on your sketches. Unlike mockups, sketches don’t need to look pretty. You don’t need to have any technical design skill to do them. This makes collaborating with clients and team members a breeze.
A Tool for Better Sketching
Most designers sketch on a whiteboard or blank sheet of paper. But the problem with this is that there aren’t device imprints for them to sketch on. This leads designers to forget about certain device dimensions and limitations. Another problem with sketching on a blank canvas is that it’s hard to draw straight lines without a grid to guide you.
Wireframe Sheets are printable sketch sheets with device-sized imprints that solve these problems. They include imprints for iPhone, iPad, desktop browser and iOS icons.
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 you don’t need to sketch because you already know how you want the interface to look. But when you actually start sketching, you’ll realize 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.
Book
Affiliate
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.
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).
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.
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.”
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!
Excellent article. Many of the points raised here can certainly relate to all forms of web design/development and interface development. Many thanks.
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
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.
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 🙂
Agree.
We love sketching so we build http://popapp.in which makes these papers become interactive prototype.
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.
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.
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.
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.
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.
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.
Great article. Very eye opening, especially for the non-designers.
Thanks for this.
Fantastic article !! wish all UI developers and managers read this article..
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!
I always knew the pencil was the most powerful tool in the initial stages of idea generation. This article confirms it, and I’ll be referring this to many of my clients and colleagues. Thank you.
Good article that confirms what I thought to be true. Sketching really is the quickest way to refine ideas before doing work on the computer.
Good and useful article.
You told Sketch is not equal to WireFrame. I respectively have a different view.
I think the Wireframe is a good precision version of the Sketch.
It will be equal, if we sketch with more precision.
In my opinion, a wireframe is just the result/product of the final stage of sketching. The sketch evolves from a first draft to a final wireframe. The sequence diagram of my workflow would then be little different than yours, because I usually skip mocking up (unless there are specific graphic design requirements and if I don’t use standardized design framework/guidelines), and because I include requirements writing in it: sketching → requirements → code
I´m not even close to being a professional UI designer, rather an engineer trying to figure out the correct way to design an app. This article has put things clearly. Amazing