December 24, 2021

10 UI/UX Sketches Techniques

10 UI/UX Sketches Techniques

10 UI/UX Sketches Techniques

UI or UX sketches are important to get the basic concept of your design before adding other technical details. These UI/UX sketch techniques could assist you before, during, and after the sketching process. A well-planned UI/UX sketching will give a clear direction in the design concept and save you time from fixing many errors back and forth.

1: Define goals & target audience

What is the user’s problem that you want to solve? Define the user’s problem, the UI/UX sketch goals, and research your target audience. What do you need to sketch to reach your goals? This will create a rough structure in your mind on the flow of your sketch that could ease the sketching process.

2: Set time frame

Sometimes, it is easy to get distracted or overwhelmed with too many ideas at one time. Set a time frame that you are comfortable with for you to jot down ideas and reflect on the ideas. This way, you can limit yourselves from overthinking and limit your ideas to good quality ideas over quantity.

3: Brainstorming

Get the juice out of your brain! Create a mind map or any form of brainstorming method that you prefer by using the goals and time frame as guidelines. What should you sketch first? What are the arrangements of the content going to be like? Will each of your sketch components be relevant to solve the user’s problem or will the components add more issues towards the user?

At this stage, you can add or remove your ideas as you please before you start to sketch. This will save some time of keeping erasing or correcting back and forth. Ideally, you can share your ideas with someone else to get more feedback.

4: Scribble

Start scribbling your ideas! Sketching should be as simple as possible without in-depth detailing. The idea of scribbling is to explain the functionality of your UI/UX design. Write down or label your sketch for a clearer view of the flow of your design. What would the user see first, where will their eyes be attracted to next, and will the organization of the design emphasize their understanding of your design. 

Scribble what you see that inspires you. Ideas often occur when we least expect them. While watching tv, hanging out with friends, or spending time with nature. Bring your notebook along and scribble the ideas anytime you are inspired by something to improvise your design concept.

5: Use arrows

Re-guide your mind to understand your design by using arrows. Arrows help to highlight the flow of your design from one element to one element. It emphasizes your understanding of your design and the logic behind your concept. This is a good practice to prevent forgetfulness and frustration the day after you complete your UI/UX sketch. It also helps when you want to explain your design to others.

When in doubt, follow the arrows.

6: Photograph samples

Capture the features of the world through photograph samples. Other than scribbling, you can use your phone or camera to capture the attractive elements on the go and transfer the idea onto your sketch.

7: Types of Stationeries

Use stationeries that will support your understanding of your sketch. The use of stationery emphasizes the different elements of your design. Some examples are black pens with different thicknesses, UI Stencil, sketchbook, folder, and paper tray.

Keep your UI/UX sketch as organized as possible. Put it in place and for an easier reference, keep the sketch paper in sequence or number the paper. 

8: Sketch in layers

Sketching in layers allows you to outline your design step-by-step and add on other details later. Get the grasp of your ideas on your first few layers, if you are not happy with the layers, you can erase and start again. Once you are confident in building the consistent momentum of sketching, you can adjust the thickness from time to time, and increase the hue of your instrument accordingly.

Believe in the process, believe in your UI/UX sketching skills 😎.

Photo by from Pexels

9: Add content accordingly

Similar to adjusting sketch layers, add the content of your design accordingly. The first complete sketch might be lacking (usually is lacking) some content. Put your sketch aside and revisit the sketch with fresh eyes and mind. Review the organization, the elements, and the direction of your design. 

What can you add to make the sketch better? Do you understand your UI/UX sketch as you were yesterday? Add the content from time to time whenever you find it suitable for your design. Does the content add meaning to your concept or not so much?

tutorial example on UI/UX Sketch for Chatting mobile app.

10: Record fail and successful attempts

The record of failed attempts would be helpful so that you would not repeat the same mistake again. Write down or understand the reasons those ideas are not working. This will help you to find a better solution for your design.

Record successful attempts as well as this could be a good reference in future projects. 

Read here about The 5 Effective Tips on Sketching Wireframes.