Literature on Sketches in UX/UI Design

Here’s the entire UX literature on Sketches in UX/UI Design by the Interaction Design Foundation, collated in one place:

Learn How to Use Sketching as an Ideation Method

Have you tried communicating your designs to your colleagues and stakeholders, only to realize later they’ve misunderstood what you meant? Have you found yourself stuck in a design, unable to see alternative approaches? Are you sure you’re working on the most optimal solution, or are you working with the only available design? One humble tool — sketching — can help you address these issues! Let’s see how.

Sketching is a distinctive form of drawing which designers use to propose, explore, refine and communicate ideas. As a UX designer, you too can use sketching as your first line of attack to crack a design problem.

“… there are techniques and processes whereby we can put experience front and centre in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching.”
— Bill Buxton, HCI pioneer and partner researcher, Microsoft Research

In the digital age where it's easier than ever to create flawless graphics, flowcharts and interfaces, sketching holds its own.

In this video, ace designer and illustrator Mike Rohde highlights why nothing can replace the power of paper.

Show Hide video transcript

Transcript loading…

Sketches are easy, fast, and cheap to create, iterate, and if needed, even discard without much effort. Unlike written or verbal communication, sketches sidestep rules of grammar and help clearly communicate ideas, all but eliminating misunderstandings. And the best part, they are a joy to create and document!

Sketches vs. Prototypes

Some designers may assume the role of sketches in the design process is the same as that traditionally associated with low-fidelity prototyping, but that is not the case.

Sketches and prototypes have distinctive roles in the development of a design concept and its refinement. You should use them at different stages. Draw sketches first in the exploratory stages of a design to propose, refine, communicate and critique your ideas in a “tangible” format. Later, use low-fidelity prototypes to test broad concepts and specific features.

The role of sketches and prototypes is complementary, but not interchangeable. Because prototypes demand a larger investment, we can’t and shouldn’t produce as many prototypes as sketches.

Sketches and prototypes have different uses in the design process.

© Interaction Design Foundation, CC BY-SA 3.0

The design funnel below illustrates the iterative and exploratory nature of sketches during the ideation stage of the design process. As the right design comes clearer into focus (the narrowing shaded trapezium), the costs of the product development cycle (arrow) increase. Increased costs prevent you from fundamentally altering your design choices. Use sketches during the initial, ideation phases. Towards the later stages of the design process, apply usability engineering on more refined and costly prototypes that can simulate the expected functionality.

The design funnel illustrates the use of sketching to identify the right design, and the application of usability methods to refine the design. As investment increases (arrow), you lose the ability to make major changes to the design selected.

© Interaction Design Foundation, CC BY-SA 3.0

Getting the Right Design

Use sketching in the early stages of the design funnel to explore multiple design directions at low cost. Refrain from developing low- or high-fidelity prototypes at this stage. Discard promising leads that, upon closer inspection, are unable to meet your problem requirements.

In the early stages of the design process, you should explore multiple design ideas simultaneously to identify the right design. Sketching out alternatives is the fastest and cheapest way to explore ideas.

© Interaction Design Foundation, CC BY-SA 3.0

If you focus on a single design idea prematurely, you narrow your opportunities. While it’s possible that you may identify a good design from the development of a single idea, you cannot confirm whether other ideas (that you never explored) may have provided a better solution to your problem.

Moreover, if you present only one design to users, they will provide a biased input. They will try to be polite and not offend you, even falsely praising your solution, instead of comparing different ideas and sharing genuine feedback.

Getting the Design Right

Once you have identified the right design, you should continue revising and reviewing your chosen design through additional sketching to ensure it’s an optimal design solution to your problem.

At this stage, you should apply usability engineering iteratively to build, test and evaluate your selected design. Every usability cycle would thus ensure the design converges on the optimal solution without major changes.

Refine the right design through an iterative usability approach.

© Interaction Design Foundation, CC BY-SA 3.0

Design and usability processes are complementary but not the same. Design explores a space of possibilities to identify the right design or solution to a problem from competing alternatives. Usability engineering sharpens the selected design, ensuring it satisfies all relevant usability criteria (i.e., getting the design right).

Ideas, Not Art — The Five Elements of Drawing

You can convey meaning and ideas through the simplest of shapes: squares, triangles, circles, lines and dots.

© Interaction Design Foundation, CC BY-SA 3.0

Sketches help you propose, explore, refine and communicate your design ideas. Not all drawings are sketches. As Mike Rohde emphasizes in the next video, your goal is to communicate ideas, not create art.

Sketches are:

Quick: Don’t invest a long period producing them.
Timely: Produce them when and as the need arises.
Disposable: Rely on their usefulness to explore a concept and not on their production costs.
Plentiful: Produce sketches as a collection that explores different aspects of interaction over time.
Minimalist: Use sketches to clarify one concept at a time.

Grab a pen and paper and get started with sketching along with Mike Rohde:

Show Hide video transcript

Transcript loading…

Enhancing Sketches — Annotations, Arrows and Notes

Annotations, arrows and notes increase the communicative power of your sketches.

© Interaction Design Foundation, CC BY-SA 3.0

Your sketches and accompanying text must communicate your entire design rationale to you and your team. All the following elements play their part in explaining your sketches and the objects, actions and emotions they represent.

Annotations – These are names, labels and explanations located next to different parts of a sketch to expand and clarify the meaning of any element depicted. Tie annotations to different elements in your sketch using arrows, braces, numbering and spatial proximity. Write your annotations using a different color that contrasts with the sketch proper.
Arrows – Apart from pointing to specific elements in a sketch, use arrows to illustrate interaction flow, a sequence of events, movement and direction.
Notes – Any text, long or short, that provides additional insight into your sketch is a note. Use notes to do the following:
- Provide detailed explanation of the action or sequence illustrated.
- Describe an idea derived from an illustration.
- List unresolved issues.
- Explore design elements not depicted in the sketch.
- Clarify the purpose of each element you present, especially non-static ones.
- Keep a record of your thought process when you first draw a sketch.

Build Your Sketching Muscle Memory

The best way to gain confidence in sketching is to practice. Use sketching to capture the ideas and/or designs you encounter in your daily activities. Other people’s designs are concrete examples of solutions posed to challenges under different constraints. Add them to your knowledge bank to remix, influence, inspire or steer your own ideas in different — and perhaps unexpected and innovative — directions. To help you in this process, we introduce below two simple approaches to collecting virtual and real-life designs.

1. Scribble Sketching

The idea behind this technique is to capture, as fast as possible and with the broadest of strokes, the essence of the object, design or action you are trying to preserve. Leave out non-important details, decorations, text and other non-essential elements. Include textual annotations (see previous section) in your scribble sketches to clarify functionality.

Capture with “broad strokes” the essence of the object, design or action you are trying to preserve.

© Interaction Design Foundation, CC BY-SA 3.0

Make a habit of always carrying a notebook to keep a record of objects, designs and actions that provoke or inspire you. Since you are the main audience of the scribble sketching technique, don’t feel forced to strive for fidelity. You should only provide a level of detail that is good enough to prompt your memory afterwards. Those rough etchings thus serve as a bank of ideas and skeletons you can eventually refine into powerful final versions.

2. Sampling with Cameras

The goal of this technique is to use still photos and video to capture some features of the world. You can easily capture samples during your weekly grocery shopping, while running your favorite route, on your commute to work or when you meet friends for dinner. Capture objects, designs and actions that delight, inspire and irritate you.

Create a Record of Failed Design Efforts

Keep a record of failed design efforts. Gather objects and situations that annoy you. Write down the reasons behind this negative effect. This exercise will help you develop a critical eye. A critical eye will allow you to identify even the shortcomings of your own work. In doing so, you will develop and show more sophisticated design skills.

Create a Record of Successful Design

You should also keep a record of successful design. This will help you draw inspiration from multiple domains to ground your design work on features other than those of the digital realm.

The Take Away

Sketching is a time-tested approach to propose, explore, refine and communicate your design ideas. Sketching should be your first line of attack when faced with a new design challenge. Unlike prototypes, you should produce sketches in abundance, on a very low budget and with just the right amount of detail in the early stages of the design process. Use sketches to explore multiple design directions simultaneously. Refine your chosen design with the standard tools of usability engineering to ensure it satisfies all relevant requirements. Sketch, sketch, sketch!

References and Where to Learn More

Researchers from the University of Toronto and Microsoft Research conducted an experiment: They compared “usability testing of a single interface versus three functionally equivalent but stylistically distinct designs” and found that users were more reluctant to criticize a single design, than when presented with the same design in a group of three. For more on this fascinating study, read this paper, “Getting the Right Design and the Design Right: Testing Many Is Better Than One.”

For more on sketching in UX design, we recommend the following books:

Sketching User Experiences: Getting the Design Right and the Right Design by Bill Buxton

Sketching User Experiences: The Workbook by Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton.

Images

Learn more about Sketches in UX/UI Design

Take a deep dive into Sketch with our course Build a Standout UX/UI Portfolio: Land Your Dream Job .

“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 course is 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

Make Your UX Design Process Agile Using Google’s Methodology

In an age of tight resources and constrained finances companies are more reluctant than ever to commit to big design pro

1.2k shares
4 years ago

Rapid Prototyping, Faking It Until You Make it in a UX Driven World

The idea of “faking it, until you make it” is not new but it has a unique UX twist. The ability to develop and test prot

863 shares
1 year ago

Don’t Build It, Fake It First – Prototyping for Mobile Apps

The design phase for mobile applications should include a prototyping stage. It is at this point that users can “play” w

1.1k shares
4 years ago