UI/UX sketching techniques 101
UX design is indeed a complicated multi-step process. There are no fit-all guidelines and practices, and what you do will vary from project to project. One thing seems to stay constant, however, whether you’re bettering or designing a new feature, part of a flow, or an entire app from scratch — and that is a paper-pencil sketching step. I’m not the best at drawing so I have always been self-conscious of my sketches, but after doing my research and trying different things out, I can promise you it’s easy and you can make your sketches clean, easy to read and presentable as well.
Here are some tips I found the most useful, as I hope you will too.
1. Pens and Paper
Let’s start with the tools, you may have guessed that the pen and paper are a must. But if you want your sketches to truly shine, you might want to get additional tools to complete your selection. After all, having the right tools for the job (quite literally) is helpful no matter what you do.
- 0.1-0.25 pen for finer details
- 0.5 pen for regular purposes
- Marker for thicker lines
- Shading pen for highlighting as well as showing depth (buttons, modals, popovers, etc)
- One color pen for drawing attention to specific parts (CTA button, interactions, etc)
You might not need all of these pens for all your sketches, but they come in handy when there’s a higher level of detail required.
When it comes to paper, it’s really up to your personal preference, if you cherish more freedom go for blank paper without any lines. If you want more structure, there are plenty of ready-to-print templates available on sites like sketchize.
2. Mastering basic shapes
In order to quickly make professional sketches, you need to have a steady hand and confidence in what you’re drawing. Thankfully, when it comes to UI/UX you only need to get good at drawing most basic shapes. Everything else in UI sketches including icons is just a combination of those. The trick is to draw everything in one continuous stroke, the strokes also need to be steady and smooth.
- Lines - Text, Annotation indicators, Shading, Patterns, etc.
- Squares - Buttons, Elements, Containers etc.
- Circles - Tap indicators, Left/Right controls, Icons, Zoom technique etc.
- Ovals - Rounded-corner buttons, Speech bubbles etc.
- Triangles - Arrowheads, Parts of multiple icons etc.
3. Text and Annotations
When it comes to annotations and text, there are also a few general best practices and tips to make them easy to read and understand.
- Use all capital letters if your handwriting isn’t the best
- Only write annotations horizontally
- Increase weight or size to highlight text, or use color if you have it
- Use the real text inside UI when you need to draw attention to it.
- Use the language of the people you’re going to be presenting your sketches to
4. UI pattern conventions
Like with many visual fields, there are certain conventions for drawing user interface elements that people in the industry understand easily and without additional explanation. As I cannot fit them all in one picture, I only used the major ones here and you can do your own research regarding the rest, or better yet, using the above conventions as the basis, you might even develop your own visual library if that works for you and the people you present your sketches to.
Of course, your goal in sketching must not be to make it pretty or invest too much time into it, you should not feel an attachment to your sketches as they are the lowest level of prototyping/presentation and need to be destroyed and re-drawn most frequently, but nevertheless, making them look a tad better won’t hurt.
