Drawing Product Ideas

CHAPTER EIGHTUSING FLOWS TO TELL STORIES

Now that we covered the “how to draw” content, let's have some fun. We now have a working visual library of elements, and we reviewed ways to combine them and create an array of screens and detailed UX drawings. Let's take a look at how we can use this knowledge to start telling stories.

In the last chapter, we created a basic flow. We started with a process diagram and then drew screens based on each step in the illustrated process. Most digital experiences are designed based on the key needs of the people using our proposed product, website, or experience. The solutions we create should help these people accomplish their high-priority goals and tasks.

Our designs should be built around these goals and tasks. Because of this, we usually present our designs as a flow of screens, or steps, in a process that represent our proposed method for completing a task or accomplishing a goal in our proposed product. For example, let's revisit our inbox app flow from the last chapter (Figure 8.1). This design was optimized for someone who wanted to complete the task of finding an important email and replying to it.

To bring this flow to life, you first need to understand the syntax of a great screen flow, and then we'll review some additional elements that increased the impact of this drawing.

STARTING WITH THE SYNTAX

Just as there are different written languages, such as English, Spanish, French, and German, there are different visual languages. ...