Sketching for UX Designers - Boost UX work with pen & paper!
4.4 (2,478 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
14,726 students enrolled

Sketching for UX Designers - Boost UX work with pen & paper!

Learn how to boost your UX design workflow with sketching user interfaces, animations and storyboarding.
4.4 (2,478 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
14,726 students enrolled
Last updated 11/2019
English
English [Auto], Portuguese [Auto], 1 more
  • Spanish [Auto]
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 78 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • By the end of the course, you will be able to sketch user interfaces, user flows, ui animations and storyboards.
  • You will understand that you don’t need any artistic skills, sketching is about generating and communicating ideas.
  • This course is also a great starting point for other areas of visual thinking, like graphic facilitation or sketchnoting.
Requirements
  • There are no requirements necessary to enroll.
  • Whether you are a student, a beginner or a seasoned professional, improving your sketching skills is going to be a great addition to your workflow as a UX, UI or product designer.
Description

You will learn how you can boost your UX, UI or product design workflow with sketching.


Last update: new lecture  added on 16th  November 2019 - 12 Benefits of Sketching for UX - a Summary

Update: 17th October 2017 - new course material added: the Sketching for UX Designers WORKBOOK (24-page long, filled with useful sketching exercises)

Update: 5th June 2017 - new section added: a 40-minute long sketching practice activity through the different Gestalt principles.


The three main parts are

  1. Warming up and drawing basic shapes

  2. Sketching User Interfaces, User Flows and UI Animations

  3. Creating Storyboards.

Not only will I invite you to draw along with me throughout the course, I will also give you exciting exercises to quickly develop your skills.

You will be able to use your sketching skills in many more UX design or service design methods, like in creating Empathy Maps, User Journey Maps and Personas.

In addition, the course provides a great starting point for other areas of visual thinking, like graphic facilitation or sketchnoting, since in the section about Storyboarding I show you how to draw people, locations, objects, how to express process, use containers, color and effects, and so on.

Sketching skills are great for any product design process, but next to applying these skills in your professional workflow, you can improve your personal development as well for example by sketchnoting UX talks or podcasts.

Throughout the course I use pen and paper, so it won't provide you a complete workflow for using digitzier tablets for sketching, but I believe that almost everything I teach you can be applied for sketching on a tablet, so feel free to draw along with me or practice sketching with a digital tool.

Sketching is great because

  • this technique takes into account how our visual perception works - when we look at images, we understand them much faster than we read words;

  • it can reveal things we might have not seen before, connections we have not noticed;

  • it enables a mutual understanding;

  • it supports the fail fast approach;

  • it is a quick and cheap way to generate many ideas.

Important: This course is not about teaching how to use Sketch App by Bohemian Coding, but about sketching user interfaces with pen and paper!

Course update log:


Updated on the 17th October 2017: new course material (workbook)

Updated on the 5th June 2017: new section

Released on the 15th April 2017

Who this course is for:
  • UX Designers
  • UI Designers
  • Product Designers
  • Service Designers
  • Web Designers
  • Anyone who wants to improve the workflow of creating digital products (apps, websites, systems)
  • This course is NOT for you if you want to learn Sketch App by Bohemian Coding
Course content
Expand all 51 lectures 04:42:34
+ Introduction to Sketching for UX Designers
5 lectures 21:17

Introduction to the Sketching for UX Designers course.

Preview 03:28

In this lecture I show you that everyone can draw!

Preview 03:12

This lecture is about the different keywords in the area of visual thinking

Visual Thinking
04:52

I talk about the advantages of sketching in general, then I tell you why this is an awesome skill for a UX designer.

Advantages for UX Designers
07:13

Before we start to actually draw, I tell you what tools you will need to prepare if you want to follow along with me.

Tools
02:32
+ Drawing Basic Shapes
3 lectures 25:53

I show you how to warm up before sketching.

Warm-up
07:34

In this lecture I show you how to practice drawing basic shapes - lines, circles, triangles and rectangles are essential parts of the user interface sketches and storyboards!

Basic Shapes
14:20

I give you some tips, advices on how to practice your drawing skills, and how to build a habit around sketching.

Practice
03:59
+ Sketching User Interfaces & User Flows
12 lectures 01:32:10

This lecture is a quick introduction to user interface sketching. 

In the following lectures, I show you

- how to sketch the different elements of a user interfaces

- how to annotate your sketches

- how to create user flows and sketch transitions.

Introduction to UI Sketching
03:37

When choosing the detail level of your sketches, you need to consider two things:

- Where are you at the UX design process

- Who is the audience of your sketch

What is your goal?
04:01

I show you how to indicate content and text in your UI sketches.

Sketching UI elements: Content & Text
04:26

This lecture is about sketching navigation and form elements.

Sketching UI elements: Navigation & Forms
08:52

In this lecture I show you how to draw icons, next to practical tips, I include the theory behind it as well.

Sketching UI elements: Icons
16:36

In this lecture I give you an exciting icon drawing exercise.

Sketching Icons Exercise
02:49

I talk about shading, and I tell you how to emphasize the most important parts of your sketch to direct your viewers attention.

Shading & Highlighting
08:01

In this lecture I give you tips on how to annotate your sketches to make them more comprehensible.

Annotations
05:23

I talk about how you can connect your individual sketches to create user flows!

User Flows
11:01

This lecture is about sketching transitions, user interface animations are powerful!

Preview 13:53

I give you three UI sketching exercises, and I also show you a low fidelity and a high fidelity UI sketch.

UI Sketching Exercises
10:11

I give you some advices on how to improve your UI sketches, and how to practice UI sketching next to the ways I have already told you.

UI Sketching Advices
03:20
+ Storyboarding: Theory & Practice
14 lectures 01:19:12

In this lecture I introduce you to the exciting world of Storyboarding!

Preview 04:12

In this lecture I show you how to draw human beings, how to represent the users inside a Storyboard.

Storyboarding: People
09:41

In this lecture I show you how to draw locations.

Storyboarding: Location
03:53

In this lecture, we add something really human to our Storyboards: speech and thought bubbles.

Preview 04:45

Speech and thought bubbles are containers we use to express our characters’ thoughts and the things that they are saying. In this lecture, we gonna discuss other types of containers, and the ways you can apply them in your Storyboards.

Storyboarding: Containers & Frames
04:55

In this lecture, I talk about showing process inside your Storyboards.

Storyboarding: Process
03:36

In this lecture we discover the texts inside your Storyboards.

Storyboarding: Text
06:28

In this lecture, we sketch objects and concepts for your Storyboards, and I also give you an exciting exercise.

Storyboarding: Objects
08:02

I show you how to use color and effects inside your Storyboards.

Storyboarding: Color & Effects
04:05

In this lecture I create a Storyboard to show you how the different elements I showed in the previous lectures are coming together!

Storyboarding Example
06:45

This lectures about the main benefits of Storybaording, and the different goals of this method.

Storyboarding Theory: Benefits & Goals
04:11

This lecture is about the process of Storyboard-creation.

Storyboarding Theory: Process
05:48

I give you some advices on how you should construct your story, and sketch your Storyboard.

Storyboarding Theory: Advices
05:40

I tell you how and at which points of the UX design process you can use your Storyboards really effectively.

How to apply Storyboarding
07:11
+ Sketching Practice Activity Through Gestalt Principles
14 lectures 39:50

The goal of this section is to practice and develop sketching skills by going through the different Gestalt principles. Knowing these principles well will help you design better digital products, since the Gestalt laws influence the user experience as well.

Preview 03:39

The basic law of Gestalt is simplicity. So many things are competing for our attention in our surroundings, and we have limited capacity for processing the incoming input.Therefore our mind interprets the things we see in the simplest way possible. It also means that we perceive things as a whole, not as a collection of different parts - just think about the face example.

Gestalt Principles: Simplicity
02:17

This law states that our brain fills the missing parts to  get a complete figure, and it also creates a combination of parts to establish a whole.

Gestalt Principles: Closure
03:07

The figure-ground principle states that our mind tries to separate the figure from the background. The figure is the element we focus on, and the background is the figure's surrounding. This way we can drive the users attention.

Preview 03:11

The law of proximity is very important in user interface design: it states the objects that are closer to each other are perceived as more related or connected than the objects that are not positioned near them. The elements that are placed closer are seen as parts of the same group or category, and not as individual objects.

Gestalt Principles: Proximity
02:58

The principle of similarity suggests that if two objects have similar characteristics, these objects are perceived more related than the ones that don't have these same qualities.There is a wide range of characteristics we can think about: it can be size, color, texture, shape, fonts, orientation, transparency, drop shadows and so on.

Gestalt Principles: Similarity
03:05

The law of continuation or good continuation means that the elements placed on a line or a curve are perceived as more related then the one that are not aligned in that way. The principle also suggests that our perception of shapes is continued in the implied direction, so we follow the line or the curve even beyond the last parts of the composition.

Gestalt Principles: Continuation
02:51

The law of enclosure or common region suggests that the objects that have a border around them are perceived as more related, or as a group. The boundaries or borders establish a closed region which can be used to highlight the relationship between certain parts of the user interface or the content. Each element that is placed inside the border is perceived as belonging together, and in the same way everything outside the given area is seen as separated from these elements.

Gestalt Principles: Enclosure / Common Region
03:01

The principle of common fate (or synchrony) is increasingly important nowadays, since UI animations are becoming more and more popular. This law states that the objects that are moving in the same direction are perceived as being more related than the elements that don't move or moving in a different direction.

Gestalt Principles: Common Fate
02:31

This principles is also called uniform connectedness or the law of unity. Actually it has a really straightforward definition: the objects that are somehow connected visually are perceived as more related than the ones without these connections. 

Gestalt Principles: Connected Elements
02:03

The law of symmetry states that symmetrical elements are perceived as more related, and as belonging to the same unified group. Also an object that is a combination of two mirrored elements are perceived as a single object.

Another interpretation of this rule is that we tend to perceive objects as being symmetrical around a center point, so our brain separates objects symmetrical pieces. And if we see symmetrical elements next to each other, we perceive them as belonging together.

Gestalt Principles: Symmetry
02:03

Parallelism is related to symmetry: in this case the similar lines are perceived as being more related than the objects that are not parallel. Parallelism also connected to the law of common fate, lines that seem to move or point into one direction are perceived as a group.

Gestalt Principles: Parellelism
02:10

The rule of focal points is extremely important in UX and UI design. The interface should communicate what functions, options are the most important at a given step for the user.

The last principle we gonna discuss is the law of past experiences, which simply states that the elements are perceived based on the users' past experiences. This principle is really important significant in UX and UI design, the UI design patterns work thanks to this.

Gestalt Principles: Focal Points & Past Experiences
03:12

1. We gonna sketch out a onepager website for a photographer, then I gonna ask you to spot things on your sketch...

2. The second exercise type: open the websites you visit each day. Now try to spot as many Gestalt principles as you can. If you want to practice sketching user interfaces, it is also great idea to copy their structure. 

3. The third exercise is to go to a UI pattern collection website, pick a pattern, and start to identify the Gestalt principles behind that. For example think about why and how a 5-star rating mechanism work. You can also copy these patterns in order to develop your sketching skills.

4. You can create and sketch out your own Gestalt cheat-sheet, use your favorite examples!

5. You don't even need to stick with the Gestalt principles, there are many other areas in visual and UX design, create summary sketches of the things your are reading or studying about.

Gestalt Principles: Exercises to Practice Sketching
03:42
+ Advice & Resources
3 lectures 24:12

In this lecture, I summarize 12 benefits of sketching and visual thinking: why it is a great skill to develop for any (UX) designers.

Preview 09:45

In this lecture I talk about two things: how to work on your sketching skills, and I also give you some more advices.

How to work on your Sketching skills
08:35

Download the Sketching for UX Designers WORKBOOK to practice sketching even more :) And I also give you some tips on how to participate in the visual thinker community, and share some other additional resources with you.

Bonus Lecture: Participate & Discover - WORKBOOK + Other Resources
05:52
Create a mind map (a visual representation of related concepts, that expresses the hierarchical relationships between the elements, e.g. what belongs to what, how they are related etc. ) in order to practice sketching! I'll give you different ideas on what to sketch out, but feel free to experiment!
Create a Mind Map
2 questions