Published on <a href="https://blog.prototypr.io/beginners-guide-to-ui-sketching-b5b1c1841575?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Justinmind <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BUQESiEF-wuIrQpYjElkBw.png">
<h3>Find out why UI designers sketch, and how to make the most of this crucial stage in digital product development</h3>
Doodling. It’s just another word for wasting time, right? Deadlines, market competition, product roadmaps — UI designers have plenty of reasons to feel like they don’t have time to sketch out interface ideas.
But beware skipping the sketching stage and moving straight onto prototyping. Sketching out UI ideas can help you find the best solutions to thorny problems, and deliver the best experience to end users.
The <a href="https://www.justinmind.com/usernote/signUp.action?blog-link-post">Justinmind</a> design team is always sketching, whether on paper or on screen with our <a href="https://www.justinmind.com/blog/sketching-web-and-mobile-wireframes-with-justinminds-ui-kit/">pre-built sketching UI kit.</a> So we decided to find out why UI designers sketch, and how to make the most of this crucial stage in digital product development.
<h4>What is UI sketching?</h4>
There’s no mystery behind the term UI sketching. It simply refers to sketching out the basics of a user interface before getting into wireframing, prototyping and coding. UI sketching comes right after you’ve had that great app or website idea, and before building screen mockups in a wireframing tool.
The UI sketch is the first step to understanding (and solving!) the problem.
<img alt="" src="https://cdn-images-1.medium.com/max/804/1*6GW2yv8jExEeBwWgv3stCQ.png">
It’s up to you how your UI sketch looks. You can sketch out on communal design boards with a Sharpie, use these fun <a href="https://www.uistencils.com/">UI element stencils</a> in your notebook, or even whip up a handmade-looking UI sketch in Justinmind. UX Movement even came up with these <a href="http://uxmovement.com/products/wireframe-sheets-sketch-your-user-interface-to-life/">downloadable UI sketch sheets</a> to help keep your sketches legible.
However you choose to sketch your initial UI ideas, keep it quick and keep it dirty. Never mind the specifics of design or functionality in a UI sketch.
A UI sketch should simply serve to help you eliminate bad ideas and brainstorm good ideas about how to bring your proposed product to the screen. The sketch should help you translate idea to interface in the minimum possible time.
<blockquote>“The ambiguity and lack of detail in sketches foster new ideas.” Lennart Hennigs, Senior ID Designer at Deutsche Telecom</blockquote>
<h4>UI or UX sketching?</h4>
Some people prefer the term ‘UX sketching’. But for us, UX sketching is something bigger. User experiences professionals should definitely be sketching all day err day, but they could be sketching anything from a user journey or user persona to a design presentation for stakeholders.
Don’t have time to sketch a user persona? Use our <a href="https://try.justinmind.com/free-user-persona-template/">free downloadable template</a>!
UI sketching, on the other hand, refers purely to the act of sitting down and working through all the possible ways you could make your idea into an interface reality. At the end of the UI sketching process you should know that you’ve figured out the absolute best way to bring your product to the screen.
<h4>Isn’t that just wireframing?</h4>
It’s easy to conflate a UI sketch with a wireframe. Both are meant to be quick and both are meant to illustrate an interface idea visually. But they’re not the same thing.
A UI sketch is you working through all the possible ways you could render your idea in interface form. It’s a chance for you to play with all the possible outcomes freely and to think how to get your user from A to B.
A wireframe is one step beyond a basic sketch. In a wireframe you start thinking about placement of UI elements, element hierarchy and size (although you’re still not ‘designing’ at this stage). You’ll be able to see the difference between a UI sketch and a static wireframe easily. A UI sketch should have a real handmade feel, while a wireframe is made up of greyscale elements.
Not sure about the difference between <a href="https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/">wireframes and mockups</a>?
<img alt="" src="https://cdn-images-1.medium.com/max/810/1*dpal5vb1tIcMgwpRupcYJA.png">
Snaps to <a href="https://thedaylightstudio.com/blog/2015/03/19/wireframes-at-daylight">Designer Tyler Davis</a> for this image of wireframes vs sketches
<h4>Pros to UI sketching</h4>
UI sketching might feel like an unnecessary step at first. Isn’t it enough to start right on the wireframe?
Well, no. We’ve already established that the two have different objectives. A UI sketch is the absolute best way to make sure that you’ve worked through all the possible options and found the most effective, user-friendly way to express your interface idea.
UI sketching is fast. There’s nothing faster than fooling around with a pen and paper. You can go through idea iterations much more rapidly than you can when wireframing on screen.
Sketching also frees you up. Whenever you’re designing with a digital tool, the parameters of that tool have an impact on what you make. If you know you can’t do something in the tool, you won’t even consider trying it out. That could have been your best idea, gone right there. When you’re doodling that won’t happen.
Having a UI sketch will make your wireframe stage more effective. You’ll be working from a strong, iterated base and you’ll know where to focus your energy. You already weeded out the bad ideas; thanks to UI sketches you can focus all your wireframing time and energy on refining the stuff that really matters
Find out how to <a href="https://www.youtube.com/watch?v=kUes0bJYokU">build your first wireframe with Justinmind</a>
<blockquote>“All of these super rough sketches are unleashed ideas. I honestly believe that if I waited until I developed them on a computer, they would either have been forgotten or become watered down.” <a href="http://blog.hightail.com/nine-reasons-designs-start-sketch/">Shawn O’Mara, Founder at ocreations</a></blockquote>
<h4>Cons to UI sketching</h4>
There are some potential downsides to sketching out the user interface. Mainly, if you sketch on paper, translating those ideas to your wireframing tool can be laborious. That’s what inspired the Justinmind design team to come up with our <a href="https://www.justinmind.com/blog/sketching-web-and-mobile-wireframes-with-justinminds-ui-kit/">Sketching UI kit</a>, which you can download for free.
The kit has over 100 pre-made, super sketchy UI elements that you can drag and drop onto the canvas as fast you you could sketch them on paper. If you sketch this way you can build the wireframe on top of the sketch, with no analog-digital translation needed.
Another ‘con’ to sketching people often table is that they can’t draw. Really, that’s not important at all. You can make marks on paper right? That’s all you need to be able to do to make an effective UI sketch.
Remember, these are quick and dirty sketches to work through ideas and will not be presented to external stakeholders. Heck, you can even hide them from your design colleagues if you want!
If you’re really not confident, check out the <a href="http://ui-patterns.com/blog/User-interface-sketching-tips-part-1">UI sketching tips from UI Patterns.</a>
<h4>How to sketch — the process</h4>
The first step to making an effective UI sketch is — focus on ideas. Churn through as many ideas and iterations as you can. Doesn’t matter if they’re not ‘good’ ideas, doesn’t matter if your sketches are unfinished and, well, sketchy. Just figure out the best way to approach the design within in the project context. Sketching is about communication, not aesthetics. You’re communicating your solution to a problem in its rawest form.
Try a bit of ‘divergent sketching’ to make sure you’re really working through all the possible permutations of your design problem. Divergent sketching is when you draw out different approaches to the same screen.
For example, you might try out a ton of different ways to design an app’s main navigation, each one sketched next to the others. There are <a href="http://erikloehfelm.blogspot.de/2009/05/iphone-ux-sketch-templates.html">printable templates</a> online to facilitate divergent UI sketching.
Write all over these sketches. Make notes just for you about the pros, cons and limitations of each sketched solution. If you don’t make notes you’ll most likely forget why you jettisoned one idea in favor of another.
Next, take a step back and say “ok, which of these ideas am I actually going to run with?” Try applying the Rule of Three and selecting more than one possible option to work on. This might be a bit more time-consuming but it’s a great way to understand your design better.
Resketch the best ideas in more detail in Justinmind with the Sketching UI kit. You can combine the best elements from different sketches at this stage — remember that your solutions should be in constant flux up to (and beyond) the wireframing stage.
<h4>Quick tips for busy UI designers</h4>
Peiter Buick over on Smashing Magazine has some really useful UI sketching tips, including:
<ul>
<li>Build the sketch up in layers</li>
<li>Add ‘interactions’ with post-it note instructions</li>
<li>Photocopy sketches and use them as templates</li>
</ul>
Read all Peiter’s advice <a href="https://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/">here</a>.
<h4>UI sketching for beginners — get started!</h4>
Sketching is nothing to be afraid of. Even if you think you can’t draw, are pressed for time or just completely in love with wireframing (we feel you!), sketching out user interface ideas will improve your product design process. There are plenty of tips and templates out there to help. So the next time you’re presenting with a sticky design problem, sit down, sketch out solutions and watch our user interface design skills improve. Your users will thank you for it.
<a href="https://www.justinmind.com/usernote/signUp.action?blog-banner-post">Turn UI sketches into interactive reality with Justinmind prototyping tool</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b5b1c1841575" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/beginners-guide-to-ui-sketching-b5b1c1841575">Beginner’s guide to UI sketching</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Beginner’s guide to UI sketching

Find out why UI designers sketch, and how to make the most of this crucial stage in digital product developm…

Top Stories