Everything you need to know about UI sketches
Do you sketch as part of your UI process?
Are there any benefits to doing it?
It can often be something that is overlooked. Yet many benefits come from sketching before diving straight into wireframes.
In this article, we’re going to cover everything you need to know about UI sketches including:
- What is UI sketching?
- What are the benefits of UI sketching?
- Tools you need for UI sketches
- How to create UI sketches like a pro
- How to create UI sketches when you’re not a designer
- 4 extra tips to enhance your UI sketching
What is UI sketching?
UI sketches form a part of the ideation process for a larger UI project. To put it simply, UI sketching is a rough idea of a UI wireframe, typically done on pen and paper.
It is used to quickly visualise a concept to get a flavour of what it would look like and how it would work. Unless you are planning on presenting them to clients, there is no need for them to look finished and beautiful.
They will be rough and ready, but that’s part of the process. You need a space where you can put whatever is in your head down on paper and start to see how it could look.
You may come up with many UI sketches, multiple times. Don’t limit yourself with this. Give yourself permission to scribble whatever comes to your head.
Embrace the fact as well that many of them won’t be very good. Things are never how they need to be from the start - that’s why it’s called a process.
UI sketches are usually the beginning, followed by the wireframes, mockups and prototypes.
Like so:
- Sketch
- Wireframe
- Mockup
- Prototype
What are the benefits of UI Sketching?
1. It’s quick
You’re in a meeting and someone wants you to explain what you’re thinking when it comes to the UI of a page.
If you were determined to do it perfectly, this would require you to make sure you had your laptop with you, open up the software, and get everything ready. You then need to click, drag, reshape and resize. Continuously.
Alternatively, if you have a pen and paper - that’s all you need.
Simply start sketching straight away.
No-fuss. Straight to the point.
2. Sketching gets ideas flowing
Have you ever found you have no ideas, but as soon as you just start putting anything down ideas start to formulate?
That’s the beauty when it comes to sketching.
If you’re a visual thinker, when you sketch out ideas it helps generate more.
You’re able to bounce off what you’ve got. You can see what’s working and what’s not working. It gets your brain thinking visually and in the right frame of mind.
3. Sketching allows ideas to fully develop
It not only gets ideas flowing, but allows you to fully develop ideas to a point where you’re happy to start putting them into a wireframe.
If you’ve sketched an initial thought and it doesn’t quite work, you can alter something about it and see how that looks. This continual process of sketching and altering can take you further into a fully formed concept.
4. You can visually show ideas to stakeholders
Whether it’s internal or external stakeholders, if you’re in a brainstorming meeting, you can show them, rather than having to try and explain to someone what something would look like.
This makes it much easier to get other people’s thoughts on something and can move the process on a lot quicker.
5. It doesn’t have to be perfect
When you create UI sketches, people aren't expecting a finished product - they’re looking for a visual idea.
This is a huge benefit. You don’t need to spend too long making sure everything is lined up, and the same size etc.
The very nature of sketching is rough, therefore saving time.
Tools you need for UI sketches
Generally speaking, you don’t need much. If you have a pen and paper, you have everything you need.
However, you can create UI sketches in different circumstances. If you’re in a meeting then using whatever you have at hand is fine.
If however, you want to use UI sketches as a more formal part of your design process, there are a few specific tools you can use to make the most of it:
- A fine pen - this can be used when you want to hone in on the detail.
- Medium pen - this will be the most used pen for general use.
- Marker - if there are any thicker lines you need to include.
- Shading pen - this can be used to highlight, as well as to demonstrate depth for elements such as buttons and modals.
- Paper - there are many different choices. If you’re happy with plain, great! If you want a bit more structure you can choose dotted or lined.
- Large table with space - to give you room to spread yourself and your items.
If you want to you may opt for a tablet and a stylus to sketch with. There can be many benefits to this.
The main advantage is that you can have these sketches in a digital format meaning they’re harder to lose and can be backed up on the cloud.
There are some tools as well which allow you to transfer these sketches into more formal shapes, which may help you save time and move quicker with the process.
How to create UI sketches like a pro
If you feel completely lost on where to begin when first introducing sketching into your process, the following steps can be used.
Getting ready to sketch
- Decide on your goal for the “sketching session”. Ask yourself, what is it I want to achieve with these sketches. Is it to jot down a few ideas? Perhaps you want a clearer focus on something specific? Whatever it is, make sure you identify it and then write it down so you don’t forget.
- Decide how much time you’ll give yourself. How long do you have or need for this? If it feels like an overwhelming task. Don’t make it too long, 25-30 minutes is a good time to get going. Alternatively, if you want to complete an hour, give yourself a 5-minute break after 30 minutes to split it up.
- Get all your tools ready. Make sure you have everything you need all laid out beside you so you don’t have to get up and grab something, disturbing your flow.
- Get warmed up. Start scribbling down a few things. Just some lines, shapes, and
icons. Nothing fancy and not for any purpose.
Begin sketching
- Begin by drawing the edges. Whatever it is that you’re sketching, make sure you draw it within the border of the interface to get a real idea of how it will look.
- Include the basic elements. This can be a range of things such as the header, footer, etc.
- Start including details. Keeping in mind the purpose of the sketches, start putting in relevant details. Make them simple.
- If sharing the sketches, include notes. Adding descriptions can be helpful to explain the role of certain elements. For example, where a button takes the user.
- Include alternatives. You want to have a range of different ideas so you can pick what works best.
- Make final touches. Here you can add the finishing elements to your sketches such as shading.
Finishing sketching
- Save your sketches. The worst thing would be to lose what you’ve done, so always make sure you save your sketches in some format. It might just be a photo, or if it’s done digitally, you can simply back them up in a separate format.
- Share your sketches. This can be useful to share your ideas and get feedback from others. You can do this using various tools, but sometimes it’s helpful to choose one where people can click and include a note directly on a certain part of the sketch.
- Wait a day or two and then review your sketches. It’s always best to leave time before looking at your sketches. It allows you to see them with fresh eyes and make further changes.
This is by no means a process your must follow, but it can helpful when feeling overwhelmed at the prospect.
As time goes on, you’ll find what works for you and come up with your own system.
How to create UI sketches when you’re not a designer
You might be thinking if you’re not a designer, there won’t be any situations where you’ll have to sketch.
You might think, “I’m not a designer and I can’t draw, so there’s no way I can contribute.”
But when it comes to ideation there will be a mixture of people, some designers and some non-designers. And the beauty of sketches is that they don’t need to be perfect. They’re meant to be messy.
All you need to be able to create are basic shapes for UI elements and a layout.
The following lines and shapes can be used for different elements:
- Lines - Can be used to represent text, patterns, shading and other things.
- Squares and rectangles - These are used for buttons, containers, etc.
- Circles - Mostly used for tap indicators, controls, icons etc.
- Triangles - Typically used for arrows, other icons etc.
- Ovals - Can be used for speech bubbles, rounded buttons etc.
If you can draw these that you know everything you need to know.
Don’t worry about them not being perfect, that’s not the point. As long as people can tell the general shape that that’s fine.
4 extra tips to enhance your UI sketching
These additional tips can help take your sketches to the next level if you’re feeling confident with the basics.
1. Buy a dedicated folder to store your sketches
If you’re sketching on paper a separate folder can be useful. It keeps them tidy and organised and will help avoid you losing them. It also keeps them protected and avoids unnecessary damage.
2. Make use of templates
Having templates on hand can be used to speed up the process. For example, you could have a layout of a web browser or of a phone printed on a separate sheet so you can dive straight in and start sketching.
You can find sites online that offer free templates, or you could create your own and print a few off so you always have them at hand.
3. Experiment with paper trays
This sounds a bit old school, but paper trays can help formulise your sketching process. One could be used for clean sheets of paper, another for sketches to finish, and finally sketches to review.
4. Use text and annotations properly
Whilst these are sketches, you want to ensure that the text is readable and follows best practices. This includes:
- Only write horizontally, don’t write at odd angles.
- Use capital letters, this makes sure it’s legible.
- Use a thicker pen when including text.
- If you know the text that’s going to be used in an element include it, for example, the name used in a button etc.
Conclusion
UI sketches are a powerful part of the design process. They get your brain in the right frame of mind and make collaboration from the very start much easier.
You might have the sketches ready, but you don’t have time or people to create the wireframes, mockups and prototypes. That’s where we come in.
As a digital design agency, we specialise in many things, including UI, UX and web design.
Take a look at some of the things we’ve created and let’s see what we can do for you.