Sketches are preliminary, hand-drawn representations of a user experience—including user research outcomes, user interfaces and interactions. They serve as a quick and cost-effective way to explore design concepts and communicate ideas before investing time and resources into more detailed wireframes or prototypes. Sketches are typically rough and informal, emphasizing the conceptual over the precise which allows designers to iterate rapidly and gather feedback early in the design process.
In this video, Designer, Teacher and Illustrator, Mike Rohde describes using five basic shapes to simplify sketching and focus on conveying ideas rather than creating art.
Sketches act as a visual bridge, fostering a shared understanding among stakeholders by providing a tangible representation of design ideas. They encourage collaboration, spark conversations, and facilitate early decision-making by allowing for quick exploration and identification of potential issues or opportunities. Additionally, sketches serve as a powerful tool for building consensus and showcasing a designer's problem-solving approach, ultimately leading to a more efficient and effective design process.
What’s more, sketching demonstrates how UX designers think, approach problem-solving and illustrate their design process. Designers should always show how they arrived at a solution—hiring managers and clients don’t just want to see the final result, they want to see how a designer got there.
© Mike Rohde and Interaction Design Foundation, CC BY-SA 4.0
When designers show their abilities and unique thought process through sketches, they distinguish themself from other designers—a key factor in getting hired for a fulltime job or freelance project.
Sketches act as discussion points too—particularly useful in interviews as they provide insight into the designer’s process.
Sketching is for everyone—not just for people who are artistic. Everyone has the ability to communicate their ideas visually. To get started, use five basic shapes—circle, square/rectangle, triangle, line and dot—to simplify the process. Early concept sketches, wireframes, user flows and more can all be created with just these basic shapes.
A sketch of a mobile wireframe, created with pen and paper
© Interaction Design Foundation, CC BY-SA 4.0
Start small: Begin with thumbnail sketches to quickly explore ideas. These small sketches can help iterate rapidly without worrying about details.
Use a light touch: Light, quick strokes help keep sketches loose and make it easier to iterate.
Layer drawings: Consider using tracing paper or digital layers to refine sketches without losing the original ideas.
Focus on the key elements: Don’t get bogged down in details; focus on the main components and layout of the design.
Incorporate feedback: Share your sketches with team members or stakeholders early to get input and iterate based on their feedback.
Sketches can be used for a wide variety of applications—-the entire design process can be sketched out. These sketches do not have to be perfect or particularly neat, as long as they’re legible (to both the designer and the reviewer!). Here are some examples of how the design process can be illustrated, according to different phases:
Concept sketches: Start with concept sketches like a mindmap—this captures ideas and thinking. Concept sketches can also include the rough layout, feature ideas or interactions of a design.
Empathy maps: Gain a deeper understanding of user’s emotions, thoughts and behaviors with a hand drawn diagram.
Persona sketches: These visualize user personas and help to understand their needs, goals and pain points.
User flow diagrams: Map out the user journey of the product—for example, a flowchart will depict the steps a user takes to complete a task, showing decision points and possible paths.
Storyboards: These types of sketches can effectively portray the narrative element of a design, whether it’s for a particular interaction or the entire user journey.
© Interaction Design Foundation, CC BY-SA 4.0
Low-fidelity wireframes: Outline the basic structure and layout of an interface, showing the placement of important elements like headers, navigation etc.
UI Elements: Illustrate the individual components of a User Interface (UI) in detail. Sketch buttons, icons, menus and more.
Mid-Fidelity Wireframes: Refine a layout of a design, including more details like text, images and buttons.
Paper prototypes: While still rudimentary, these can create basic representations of interactive elements and screen transitions for user testing.
High-fidelity wireframes: Detail a final design that closely resembles the product before moving on to digital tools or development.
© Interaction Design Foundation, CC BY-SA 4.0
Annotations on sketches—essentially sketches with notes or vice versa, also referred to as sketchnotes or sketchnoting—explain and clarify design decisions and thought processes. Annotations transform raw sketches into a comprehensive narrative, facilitating better communication and collaboration. When a designer annotates their sketches, it becomes more informative and the reader will gain a deeper understanding of the designer’s approach.
In the next video, Mike Rohde explains what sketchnotes are.
Documentation, on the other hand, serves as a detailed record of the design process, including user research findings, design iterations, usability testing results, and final design specifications. This comprehensive approach ensures that every phase of the design process is transparent and traceable. Effective documentation supports the rationale for design choices, making it easier to revisit and refine designs as needed. It also provides a valuable reference for future projects and helps maintain consistency and quality in design work. Meticulous annotation and documentation are a sure-fire way to demonstrate a designer’s professionalism, thoroughness, credibility and creativity—ultimately enhancing the effectiveness of their design portfolio.
“It’s not the destination, it’s the journey”
—Ralph Waldo Emerson. American Philosopher
As the well-known saying goes, it’s not just about the final solution, it’s about the design journey. Hiring managers, recruiters, clients and anyone who may look at a UX design portfolio wants to see a designer's thought process and creative problem-solving skills—not just the finished product. Sketches are one of the most effective means of communicating ideas, methods and skills—they provide a visual narrative that showcases how ideas evolve from initial concepts to refined solutions. A successful portfolio should highlight a designer's ability to iterate, improve based on feedback and reveal the journey of design decisions—sketches offer a transparent view into the reasoning behind each choice. This not only differentiates the designer from others by showcasing a clear, hands-on approach but also engages potential employers or clients by illustrating the depth and thoroughness of the design process.
Case studies are an integral part of a UX design portfolio—including sketches is necessary to successfully illustrate the steps taken in each design project. They mustn’t be added simply for the sake of it, sketches must communicate a designer’s thought process, the progression of ideas and the iterative steps taken to refine designs. The more detailed the better—a high level of detail will showcase the designer's skills and also build credibility and trust with potential employers or clients.
What’s more, sketches add an element of authenticity and relatability to a portfolio. They humanize the designer, making the design process more approachable and understandable. A portfolio enriched with sketches effectively tells a compelling story, which makes the designer's work more memorable and impactful.
Take our course Build a Standout UX/UI Portfolio: Land Your Dream Job.
Watch the Master Class How to Elevate Your Portfolio: Sketching Your Design Process.
Watch the Master Class How to Become a Visual Thinker With Sketchnoting.
Read the article Learn How to Use Sketching as an Ideation Method.
Read the book Sketching User Experiences: Getting the Design Right and the Right Design.
To improve your sketching skills for UI/UX design, practice regularly and focus on the fundamentals of drawing, such as lines, shapes, and shading. Study design principles and analyze existing designs to understand what makes them effective. Use tools like sketchbooks and pens to practice your hand-drawing skills, and digital tools like Sketch or Adobe XD for digital sketching.
Learn more about how to improve your sketching skills in our Master Classes with Mike Rohde:
How to Elevate Your Portfolio: Sketching Your Design Process.
How to Become a Visual Thinker With Sketchnoting.
Essential tools for digital sketching include:
Graphic tablets (e.g., Wacom, Huion).
Stylus pens (e.g., Apple Pencil, Surface Pen).
Design software (e.g., Sketch, Figma).
Prototyping tools (e.g., InVision, Marvel).
Learn more about sketching in our Master Classes with Mike Rohde:
Sketches contribute to the ideation phase by allowing designers to quickly visualize and iterate on ideas. They help in brainstorming sessions, facilitate communication among team members, and provide a tangible way to explore different design concepts before committing to detailed prototypes.
Learn more about sketching for ideation in the article Learn How to Use Sketching as an Ideation Method.
Buxton, B. (2010). Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann.
Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders.
Best practices for creating effective wireframes include:
Start with low-fidelity sketches to focus on layout and structure.
Use consistent design elements like grids and UI components.
Label each element clearly to convey functionality.
Keep it simple to ensure focus on the basic structure.
Iterate and refine based on feedback.
Learn more about wireframes in this video:
Transition from sketches to digital prototypes by first digitizing your sketches. Use your sketches as a guide to create wireframes, and then add interactivity and detailed design elements. Collaborate with your team to refine the prototypes and test them with users to gather feedback.
Learn more about sketching in our Master Classes with Mike Rohde:
For beginners, try these sketching techniques:
Gesture drawing: Quick, fluid sketches to capture the overall form.
Thumbnail sketches: Small, quick sketches to explore different ideas.
Detail drawing: Focus on individual UI elements.
Grid-based sketching: Use grids to maintain alignment and consistency.
Learn more about sketching in our Master Classes with Mike Rohde:
In the initial stages, sketches should be low-fidelity and focus on the overall layout and structure rather than details. Aim to capture the main ideas and flow of the design, leaving specifics like color and typography for later stages.
Learn more the foundations of UX design in our course User Experience: The Beginner’s Guide
Here’s the entire UX literature on Sketches in UX/UI Design by the Interaction Design Foundation, collated in one place:
We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.
If you want this to change, , link to us, or join us to help us democratize design knowledge!
