Your constantly-updated definition of Sketches in UX/UI Design and
collection of videos and articles
589shares
What are Sketches in UX/UI Design?
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.
ShowHide
video transcript
Transcript loading…
Why Are Sketches Important in UX Design?
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.
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.
How to Sketch for Success: Practical Techniques
Simplify the Sketching 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.
Pen to Paper: How to Start Sketching
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.
What to Sketch
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:
Discovery Phase
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.
Definition Phase
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.
Ideation Phase
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.
Low-fidelity wireframes: Outline the basic structure and layout of an interface, showing the placement of important elements like headers, navigation etc.
Prototyping Phase
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.
Testing and Iteration Phase
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.
Add Value and Enhance Clarity: Annotate and Document Sketches
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.
ShowHide
video transcript
Transcript loading…
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.
How to Use Sketches to Elevate a 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.
How can I improve my sketching skills for UI/UX 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 do sketches contribute to the ideation phase of design?
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.
What are some well-regarded books on sketching for UX design?
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.
What are the best practices for creating effective wireframes?
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:
ShowHide
video transcript
Transcript loading…
How do I transition from sketches to digital prototypes?
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:
How detailed should sketches be in the initial stages of design?
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.
“Your portfolio is your best advocate in showing your work, your skills and your personality. It also shows not only the final outcomes but the process you took to get there and how you aligned your design decisions with the business and user needs.”
— Morgane Peng, Design Director, Societe Generale CIB
In many industries, your education, certifications and previous job roles help you get a foot in the door in the hiring process. However, in the design world, this is often not the case. Potential employers and clients want to see evidence of your skills and work and assess if they fit the job or design project in question. This is where portfolios come in.
Your portfolio is your first impression, your foot in the door—it must engage your audience and stand out against the hundreds of others they might be reviewing. Join us as we equip you with the skills and knowledge to create a portfolio that takes you one step closer to your dream career.
The Build a Standout UX/UI Portfolio: Land Your Dream Job courseis taught by Morgane Peng, a designer, speaker, mentor and writer who serves as Director of Experience Design at Societe Generale CIB. With over 12 years of experience in management roles, she has reviewed thousands of design portfolios and conducted hundreds of interviews with designers. She has collated her extensive real-world knowledge into this course to teach you how to build a compelling portfolio that hiring managers will want to explore.
In lesson 1, you’ll learn the importance of portfolios and which type of portfolio you should create based on your career stage and background. You’ll discover the most significant mistakes designers make in their portfolios, the importance of content over aesthetics and why today is the best day to start documenting your design processes. This knowledge will serve as your foundation as you build your portfolio.
In lesson 2, you’ll grasp the importance of hooks in your portfolio, how to write them, and the best practices based on your career stage and target audience. You’ll learn how and why to balance your professional and personal biographies in your about me section, how to talk about your life before design and how to use tools and resources in conjunction with your creativity to create a unique and distinctive portfolio.
In lesson 3, you’ll dive into case studies—the backbone of your portfolio. You’ll learn how to plan your case studies for success and hook your reader in to learn more about your design research, sketches, prototypes and outcomes. An attractive and attention-grabbing portfolio is nothing without solid and engaging case studies that effectively communicate who you are as a designer and why employers and clients should hire you.
In lesson 4, you’ll understand the industry expectations for your portfolio and how to apply the finishing touches that illustrate your attention to detail. You’ll explore how visual design, menus and structure, landing pages, visualizations and interactive elements make your portfolio accessible, engaging and compelling. Finally, you’ll learn the tips and best practices to follow when you convert your portfolio into a presentation for interviews and pitches.
Throughout the course, you'll get practical tips to apply to your portfolio. In the "Build Your Portfolio" project, you'll create your portfolio strategy, write and test your hook, build a case study and prepare your portfolio presentation. You’ll be able to share your progress, tips and reflections with your coursemates, gain insights from the community and elevate each other’s portfolios.
All open-source articles on Sketches in UX/UI Design
Contextual Design is a structured, well-defined user-centered design process that provides methods to collect data about
Book chapter
Open Access—Link to us!
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.