Drawing Product Ideas

CHAPTER SEVENTHE SYSTEM

Let's pause for a moment and take stock of everything we've covered  up until now. So far in this book, we took an in-depth look at a comprehensive set of reusable elements, or building blocks, that can be used in all of our digital product drawings. We also reviewed several ways to describe concepts like light, sound, texture, and motion.

You are now armed with the right toolkit for creating a full product drawing. Let's think of your visual library as a system as illustrated in Figure 7.1. Just like the components in a design system, they can be combined in different ways to develop, share, and collaborate on an infinite amount of ideas. That's the focus of this chapter.

FIGURE 7.1

PUTTING IT TOGETHER

Not sold on this? Let's create a fairly detailed UX drawing. Moving forward, we are going to leverage our drawing system to create multiple drawings to convey an idea. Now, most UX drawings represent some sort of user journey, task, or flow. We will discuss this more in the next chapter. For this example, let's pretend we're designing a new email app for mobile devices.

Before we jump in, let's define the task we're going to illustrate. In this case, we'll show how someone can locate, read, and reply to an email in a hypothetical new email experience. To do this, let's first brainstorm the process for responding to an email. Then we will map it in ...