Remember those carefree days when a pencil was your most powerful tool for imagination? As a young budding creative, you may have picked up your pencil and sketched out your loved ones, surroundings, or even your family tree. This was your way of capturing, on paper, the images, connections, and thoughts you had in your mind.
Idea sketching in UX design is a return to that creative freedom. It’s about capturing raw ideas, exploring possibilities, and laying the groundwork for exceptional user experiences.
Let’s discuss the purpose of idea sketching, techniques and tools, the general process, tips for effective sketching, and more to help you leverage idea sketching efficiently in your design process.
What is idea sketching?
For UX designers, idea sketching is a way to conceptualize and communicate your design ideas through quick, hand-drawn sketches. This rapid-fire approach allows you to generate and explore multiple design possibilities and refine them before committing to more detailed (and time-consuming) digital designs.
One of the biggest creativity killers is that we often fall in love with our first idea and commit to it without exploring other possibilities. Sketching helps break this habit by encouraging a free flow of ideas. Rapidly generating multiple concepts helps increase your chances of finding innovative solutions and avoid getting stuck in a design rut.
Idea sketching is a useful skill that helps designers develop a deeper understanding of user needs and behaviors. This versatile technique empowers designers to think visually and collaboratively while brainstorming layouts or mapping user flows.
Why is idea sketching valuable in the design process?
It’s important to know that idea sketching is not just a fun activity to carry out in your UX design process; it’s a strategic technique that drives innovation, especially when collaborating with a cross-functional team. Here’s why it’s essential in the design process:
- Rapid ideation — Sketching allows designers to quickly explore multiple design concepts without the constraints of digital tools. This accelerates the creative process and generates a wider range of ideas
- Improved communication and collaboration — Sometimes, when you have an idea in your mind, it’s tough to communicate it adequately by just describing it. Visual sketches can be more effective than verbal explanations in conveying design concepts to team members and stakeholders. A collaborative sketching session can also help foster teamwork and encourage diverse perspectives
- Earlier, more cost-effective problem discovery — Sketching is a low-fidelity method that requires minimal resources, making it accessible and easy to adopt at all stages of a project. It also helps uncover potential viability, feasibility, or usability issues and design flaws early in the process, saving you and your team time and resources
As you can see, idea sketching can play an important role in your design process, helping you work and collaborate more efficiently. So, let’s talk about some useful idea sketching techniques you can use next.
7 techniques for idea sketching
Although idea sketching encourages creative freedom, it can also be overwhelming to sit down with a blank page and simply start to sketch. Try out these idea sketching techniques to help you think outside the box and bring your ideas to life.
Thumbnails
Create small, quick sketches to explore multiple layout options and ideas. Think of them as tiny, visual brainstorms.
Thumbnails allow you to quickly generate multiple layout options for an interface or screen. For example, you could sketch out a series of small, thumbnail-sized layouts for a mobile app home screen, experimenting with different arrangements of icons, buttons, and content elements.
Storyboarding
Visually narrate user interactions and experiences through a series of sketches. Story mapping through storyboards helps identify potential pain points and opportunities for improvement.
You can use storyboards to visually narrate a user’s journey through a website or app. Create a series of sketches that tell a story about how a user might interact with a website or app. For example, you might sketch a user signing up for an account, browsing products, and making a purchase:
Wireframing
Wireframes allow you to focus on the skeletal structure of a user interface, outlining the main content and interactive elements. You can use them to outline the basic structure and content of a user interface.
For example, you could sketch a basic wireframe of a product page, showing the main content areas, navigation elements, and calls to action.
Moodboarding
Create a visual collage of images, colors, and typography to establish the overall design direction and atmosphere. With moodboards, you can establish the overall visual design direction and atmosphere for a project.
To create a moodboard, look for images, colors, and typography that evoke the mood or vibe you want for the website or app.
Crazy eights
Generate a burst of ideas by sketching eight or more different concepts in just eight minutes. This technique encourages rapid ideation and can help you overcome creative blocks by brainstorming and generating as many ideas as possible in a single session.
Here’s an example of how you can use the crazy eights technique to brainstorm different layout ideas for a mobile app home screen:
6-8-5 Sketching
A variation of crazy 8s, this technique involves sketching six ideas in eight minutes with five minutes for reflection and improvement. It is often done as a collaborative brainstorming activity. The purpose is to generate and refine ideas collaboratively and in a structured way.
Use the 6-8-5 sketching technique to generate a large number of ideas for a new product concept, then select the most promising ideas for further development.
Solution sketching
This technique involves focusing on one promising idea and developing it in detail. It’s often used in design sprints to refine a concept before moving to prototyping. You can use solution sketching to focus on developing a single key feature in detail.
For example, once you’ve identified a promising idea from your thumbnails or Crazy 8s sketches, create a more detailed solution sketch to flesh out the design:
The beauty of sketching lies in its simplicity, so for paper prototyping, a pencil or pen and some paper are all you need to get started with some hand-drawn sketches. However, there are a number of tools nowadays that are optimized for sketching in digital format.
General-purpose sketching tools
- Figma — Known for its versatility, Figma allows for a wide range of sketching techniques, including thumbnails, wireframes, and mood boards. Its real-time collaboration features make it ideal for team-based projects
- Sketch — While primarily a UI/UX design tool, Sketch offers robust sketching capabilities with various pen and brush options
- Adobe Illustrator — Provides precision and customization for detailed sketches and illustrations
Specialized sketching tools
- Miro — Offers a variety of templates and features specifically designed for brainstorming, mind mapping, and collaborative sketching like crazy eights
- Mural — Provides a collaborative workspace with sticky notes, shapes, and drawing tools for ideation and sketching
- Canva — While primarily a design tool, Canva offers basic free-hand sketching capabilities and templates for storyboarding and wireframing
- Boords — Specifically designed for storyboarding, Boords offers a user-friendly interface and pre-built templates
The idea sketching process
Idea sketching is more about rapid generation and iteration, not the drawing skill itself. Try not to get stuck in the weeds about how to sketch “properly” with perfectly straight lines and well defined strokes.
But before you even put pen to paper, you will need to:
- Understand the problem — Immerse yourself in the problem space from the user’s perspective to develop empathy for your users and gain insights into their needs, pain points, and behaviors. You may carry out user interviews or even review session replays depicting the user problem. Be sure to refine these findings into key insights that will drive your explorations
- Define the problem — This involves clearly articulating the problem statement, focusing on the user’s needs rather than desired solutions. This could involve spelling out success metrics or using the HEART framework
Once you have developed an immersive understanding and empathy for your target users, you can then:
- Gather inspiration from your problem space — Collect visual references, conduct user research, and analyze existing solutions to spark your creativity
- Focus on rapid ideation — Generate a large quantity of sketches without reflecting on their viability too deeply. Focus on quantity over quality at this stage
- Refine and enhance your sketches — Review your sketches, identifying promising ideas for further development. Make use of labels, arrows, annotations and notes to further expand on your ideas
- Develop promising ideas — Create more detailed sketches of the most promising concepts that have the propensity to meet your previously defined success metrics
- Iterate and refine — Continue to refine and improve your sketches based on feedback and further insights
Remember that idea sketching is just one small part of the overall UX design process. Use this opportunity to be creative and have fun while getting closer to a usable design idea.
Tips for effective sketching
- Embrace imperfection! Don’t strive for perfection; focus on capturing ideas quickly
- Keep it simple by prioritizing clarity and communication over artistic skill
- Experiment with diverse techniques and sketching styles to find what works best for you
- Choose the tools that best suit your workflow and preferences, whether analog or digital
- Sketching is an ongoing process. Continuously refine and improve your ideas based on feedback and insights
How do you know if your sketches are effective?
Now it’s time to reflect on the work you’ve done. You’ll know whether your idea sketching exercise has been successful effective if they:
- Are clear and easy to understand, clearly conveying the design concept without overwhelming details
- Use visual hierarchy cues to guide the viewer’s attention to important elements
- Include annotations and labels to explain specific design features or interactions
- Show different views or angles of the design to provide a comprehensive understanding
- Contain the key features that will solve the user pain points or meet the user needs you identified during the ‘understand’ phase
Key takeaways
Idea sketching is a fundamental tool for UX designers to explore and communicate design concepts more easily. This may involve a combination of analog and digital tools to find the best approach for your workflow and preferences.
For maximal impact, collaborate with cross-functional teammates to foster user empathy and gather feedback, thus generating new impactful ideas.
One final note: keep in mind that the goal of sketching is not to pursue artistic perfection but to generate and communicate ideas. Incorporating sketching into your design process can give you a competitive edge and help you deliver products that truly resonate with users.