Sketching in UX

The Oxford dictionary defines the word sketch as “make a rough drawing of.” That’s the main idea we want to get across. It’s rough. It’s not meant to be pristine and look perfect. It’s meant to rapidly translate your thoughts on paper.

There’re so many reasons why we sketch:

• We sketch to explore concepts.
• We sketch to communicate our thoughts and ideas to others. Concepts can be tricky to explain with words. Sketching helps to get the meaning across.
• We sketch to get feedback on our ideas. Sketching can be a fantastic way to validate your concepts before you spend time wireframing.
• We also sketch to hone our ideas, to make them better, to refine them into something pure. There’s almost always a way you can improve your designs. Sketching can help you get there quickly.
• We sketch because it’s fast/saves you time.

Create many different ideas. Keep exploring. UX designers are pioneers that dedicate serious time to finding new ideas and bringing those ideas into the world. We have to look at all possible options and iterate. To do that, we sketch.

Go to the Sketching tab in the Figma workbook.

Sketch out the REI Maps trail information page.Sketch 3-5 different versions. Great UX desginers always explore many solutions to any given problem.Take a picture of your sketches and add them below.

If there's one thing that's universal about UX designers everywhere, it's that we are always sketching.  

Sketching is a blast.  

It helps you get out a ton of ideas and quickly validate them.  

So get your pen and paper ready because we're going to dive in and talk about sketching in UX.  

The Oxford dictionary defines the word sketch as "make a rough drawing of."  

That's the main idea we want to get across. It's rough.  

It's not meant to be pristine and look perfect.  

It's meant to rapidly translate your thoughts on paper.  

There are so many reasons why we sketch.  

We sketch to explore concepts.  

We sketch to communicate our thoughts and ideas to others.  

Concepts can be tricky to explain with words.  

Sketching helps to get the meaning across.  

We sketch to get feedback on ideas.  

Sketching can be a fantastic way to validate your concepts before you spend time wireframing.  

We also sketch to refine our ideas, to make them better, to hone them into something pure.  

There's almost always a way you can improve your designs.  

Sketching can help you get there quickly.  

Which is another reason why we sketch because it's fast, which means it saves you time.  

To illustrate exactly what I mean about that, here's a slightly embarrassing, personal story from a conference I went to.  

During a rapid prototyping session, we were told to sketch out a bunch of ideas on the note cards and then line them up into something cohesive.  

Instead, I whipped out my computer because I was convinced that I could wireframe faster than everyone else around me who was sketching.  

At the end of the allotted time, I was only about 75% done. And I'm fast at wireframing.  

Let's put that into perspective.  

Let's say I'm starting on a project and I want to jump to wireframing instead of sketching.  

At 75%, the speed, wireframing would take me a full eight hours while sketching, would have allowed me to finish two hours earlier.  

Now, multiply that over a five day workweek.  

That would be 10 hours of wasted time.  

It adds up quickly.  

And bear in mind that 75% is a super optimistic speed compared to sketching.  

It's so much faster to sketch.

Switching between different ideas and concepts while wireframing is tough.  

Unless you're using a wireframing kit, you have to create every object from scratch, which takes time.

If you decide to move something, it takes even more time.  

Plus once you start wireframing you naturally want to make it look nicer, which is a huge mistake at this point in the process.  

If you were sketching instead, it's simple to create new ideas or switch to a new one.  

All you have to do is just move your hand over and draw more shapes.  

And the best part? Almost everyone can sketch.  

Your sketches don't have to look great to do what you need them to do.  

Again, your goals are to explore, generate ideas, communicate with others, get feedback, refine your concepts, and save time.  

Before putting pen to paper, determine if you were designing for mobile, Android or Apple, or for desktop.  

It's important to figure that out upfront, because that will determine the screen orientation and resolution for your designs.  

If you're designing for mobile, you can then use a ruler to draw a small portrait rectangle.  

The same goes for desktop, but you'll draw a larger landscape rectangle.  

To make the most of your sketching session, whip out your research, including these three items:  

First, framing the problem.  

Second, your affinity diagram.

And third, the competitor's screenshots that you put together earlier in this course.  

The framing the problem and affinity diagram are high-level documents that you should keep referring back to throughout any UX project.  

The reason you pull them back out now is to help set up your mental state.  

Use these as a refresher to kickstart the exercise.  

Then start by looking at competitors screenshots to get a sense for how they solve the problem.  

For example, let's say that you're creating a new work management app and you're working on a new feature for sharing.  

You would start by looking at your competitors screenshots to understand how they design their sharing features.  

Keep in mind, these are used to generate ideas, so don't just copy them outright.  

Now you're prepared to make the most of your sketching.

So to begin sketching, create a container for either mobile or desktop that you'll sketch inside. We talked about this earlier.  

Next, referencing your research and how others have solved the problem, start generating sketches.  

Even if you feel lost or like your ideas are stupid, just put your pen down and start drawing bad ideas.  

Keep exploring.  

UX designers are pioneers that dedicate serious time to finding new ideas and bringing those ideas into the world.  

We have to look at all possible options and iterate. To do that, we sketch.  

And with that in mind, a big difference between entry level and senior level UX designers is how many different options they explore before settling on the idea they believe is best.  

And even once they settled on an idea, they iterated on it over and over.  

They didn't just settle with the original idea.  

That's exploration.

It's about looking at all the possibilities.  

You don't know how something good might be until you see it.  

Yes, you can work through many ideas in your head, but you can't work through everything.  

Most of the time, sketching sparks new and better ideas.  

Here are a few final tips before signing off.  

First, remember that your sketches don't need to be pretty. They just need to outline the placement of your UI elements.  

Second, do your best to draw straight lines.  

It's something that you can practice and will help you with your sketching in the long run.  

Third, keep your sketches high level, at least at first.  

You don't need to get into the details or use colored pencils or pens.  

Lines, boxes, and other shapes are plenty to get the idea across.  

Think of your sketches as your solution skeleton.

They help you uncover the ideal information architecture.  

Finally, always create multiple sketches of the same screen and weigh the pros and cons of each one until you're happy with one in particular.  

Keep in mind that your sketches only show a snapshot in time.  

They don't illustrate how a user moves through your solution.  

That's what a user flow is about, but don't worry about that for now.

We'll talk about that in a future video.  

To recap, sketching is the process of making a rough drawing.  

And we sketch to explore concepts, to communicate our thoughts, to get feedback, to generate many different ideas, to refine those ideas, and because it's fast.  

Now it's your turn.  

Open the Figma workbook and go to the sketching tab.  

If you haven't already downloaded the Figma workbook, go to kickassux.com and go to the free course page.  

Once you've opened the file, it's time to start sketching all the screens that play a central role in your product.  

When you're done sketching, take pictures of all of your sketches using your smartphone and upload them to the Figma file.