All about UX Sketching and tips to do it better

Ux&You
5 min readJan 27, 2023

--

User experience (UX) designers use UX Sketching as a tool for the design thinking process. It’s usually a step early in the process and it’s an essential skill and common practice that can help individuals or teams. It is a crucial, yet often overlooked, aspect of UX design. It’s a very efficient way of communicating design while allowing designers to iterate multiple ideas before settling on one.

UX Sketching also creates more purposeful solutions and increases usability which translates to higher engagement and retaining users. In this article, we’re going to go over what UX Sketching is, why it’s important and provide some helpful tips to do it well!

What is UX Sketching?

UX Sketching is simply rough drawing by hand, commonly used for generating, communicating and refining ideas. It can be for your own reference, or to be shared with co-workers, team managers, or clients and stakeholders.

UX Sketching Is a Two-step Process

Many options must be considered in design, which results in the choice and the execution of the best one. Designers consider their options, and then proceed to work out the details, thus making UX design a two-step process:

Idea Generation

In the initial stage, multiple ideas are generated, it’s important jot those down. All of those cannot be fully shaped from the get go. It’s not uncommon for some of the elements to be incomplete or missing. The main thing is to consider different approaches and to decide which is the most efficient in the context of your task and the various constraints of the project.

• Adding Detail and Refinement

Step by step, you settle on a few promising variants and proceed to work out the specifics, thus rendering some ideas unsuitable.

Differences between Sketch, Wireframe and Prototype

Sketch — A sketch is a hand-drawn representation of your site, typically created as part of the design process. Sketches are usually hand drawn images that represent the layout or design structure of a site.

A good UX designer never stops creating sketches for future projects — they’re essential tools that every professional needs when designing interfaces with intricate details by hand. Recently there’s been a shift from Analog to Digital: Apps like Adobe Sketch helps keep up

appearances while making designs both better-looking and more efficient than ever before; all without any messiness.

Wireframe — Wireframe is a term used to describe a visual representation of an interface. It is usually composed by hand or through the use of wireframe software, and it often communicates how different content areas on a webpage will be arranged and interconnected with each other.

Wireframes are the blueprint of your website or app. They show how everything will work and what it’ll look like without getting in too deep with graphic design yet. Think about them as a rough sketch before you add colour to your painting — that way, when you’re done you can be sure no details were missed!

Prototype — A prototype is a sample version of a final product to test the functionality of the product before launch.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement, and it’s the only way to get an accurate read on how your users will interact with a product design.

Benefits of UX Sketching

· Boost creativity — Sometimes it can be challenging to move past a rut when coming up with a content. If you do sketch, you can express your ideas differently and think of things that you may not have thought of before.

· Communicate ideas — With UX Sketching, you and your team can also validate your ideas and make any improvements before you get to the details. It is a fast way of getting feedback and evaluating the practicality of the solution.

· Challenges the UX designer — Being a UX designer requires different levels of thinking. One of these ways is keeping in mind the user’s intentions and experiences. If you sketch, it’s easier to express ideas to other people, and it also may challenge the UX designer to conceptualize things differently.

· Developing quick concepts — One of the benefits of UX sketching is drawing out the overall vision and concept for a project on a single page. This is especially helpful when preparing pitches, or early in initial engagements with clients, as it summarises your slides, early ideas, and overall experience in one simple image that creates a vision for the project’s future development.

Tips & Tricks for UX Sketching

· Practice — For a start, you can try to draw a few apps. Open a web or mobile app and try to copy the screen, describing the elements in the notes. Whenever you have some free time practice drawing basic building blocks of your designs. In general, practice makes perfect. In a while, it will become part of your designer self.

· State the problem and goal to solve — To avoid going off topic and doodling into your own imagination, it’s best to state the problem and goal first to have a clear direction on what you will be Sketching. If you are unsure of them but have an idea in mind, work backward and find out the user pain points that you are thriving to solve. There is no UX if there are no user issues to solve or no improvements to be made.

· Experiment and customize — In time, you’ll find out what suits you best; which methods, which sequence of steps, what exactly fulfils your creative potential. You will get there only if you constantly try something new, which is why it’s important to experiment with different formats, styles, and try new templates.

· Don’t worry about the quality — UX Sketches are meant to be rough drawings and it’s meant to be messy. It’s recommended to leave them at that and focus on the goal rather than perfecting that star symbol you have drawn. Remember to go for breadth and keep expanding your ideas instead of going too in-depth or they will stick and limit your creativity.

· Set time constraints — UX Sketches can easily get out of hand, it is good to set a schedule with a time limit for the activity. This prepares the team members for the activity and keeps the team focused.

· Use Templates — It’s smart to prepare some stencils with commonly used icons or user flow diagram symbols cut-outs, or mock-up templates to cut downtime for drawing the exact sizes of phones.

· Share and get feedback — It’s very important to share your sketches with the team. Involving others and getting their feedback, especially early on, helps save time and resources in the long run. You can also encourage others to draw the way they envision the design.

· Document everything — Keep your Sketches and notes! It’s important to keep the iterations and ideas in case you need to come back to it, or if you need to revisit it.

~by Barnana Banik

--

--