19,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Explore straightforward drawing skills to help you communicate product ideas exponentially faster than you could with text
In Drawing Product Ideas: Fast and Easy UX Drawing for Anyone, RSA Fellow and Google Data Visualization Lead, Kent Eisenhuth delivers a new and exciting guide to effectively communicating product ideas by drawing just two simple things: boxes and lines! In the book, you'll learn why drawing is important and how it supports the design thinking process. You'll also discover how to build your drawing toolkit by exploring your own personal drawing style.
The author also includes:
- Strategies for how to use your drawing to support your solutions to real-world problems
- Tips and tricks for applying your new drawing skills in a workshop setting, in real-time
- An illuminating foreword by the celebrated Manuel Lima, a Fellow of the Royal Society of Arts
An essential volume for engineers, researchers, and product managers, Drawing Product Ideas is also an indispensable blueprint for anyone seeking to improve their public, ad-hoc drawing skills.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 207
Veröffentlichungsjahr: 2022
Ähnliche
Table of Contents
COVER
TITLE PAGE
FOREWORD
PREFACE
INTRODUCTION
CHAPTER ONE: WHY DRAW?
EXPLORE AN IDEA
GAIN A SHARED UNDERSTANDING
IMPROVE COLLABORATION
ANYONE CAN DRAW
RIGHT TIME AND PLACE
CHAPTER TWO: REFRAMING OUR THINKING
BREAKING IT DOWN
INTRODUCING THE SYSTEM
COMMON DRAWINGS
CHAPTER THREE: LINES AND POINTS
TELLING STORIES WITH LINES
MAKING MEANING WITH POINTS
TOOLS AND MATERIALS
CHAPTER FOUR: BUILDING FROM RECTANGLES
CREATING DIAGRAMS
CONTENT ELEMENTS
NAVIGATION ELEMENTS
FORMS
CHAPTER FIVE: BUILDING FROM CIRCLES, TRIANGLES, AND MORE
CIRCULAR ELEMENTS
TRIANGULAR ELEMENTS
ADVANCED ICONS AND SYMBOLS
REPRESENTING INTERACTIONS
CHAPTER SIX: ILLUSTRATING LIGHT, MOTION, AND OTHER CONCEPTS
SHADING TECHNIQUES
USING ACCENT MARKS
LOOKING AT LIGHTING
USING ELEVATION
USING TEXTURE
CAPTURING MOTION
CONVEYING LUMINANCE
COMMUNICATING SOUND
CHAPTER SEVEN: THE SYSTEM
PUTTING IT TOGETHER
CREATING SOMETHING NEW
CHAPTER EIGHT: USING FLOWS TO TELL STORIES
STARTING WITH THE SYNTAX
SHOWING INTERACTIONS
JUST ENOUGH INFORMATION
DEPICTING TRANSITIONS
LABELS AND ANNOTATIONS
BEING CONSCIOUS OF COMPOSITION
CHAPTER NINE: TELLING ENGAGING STORIES
REAL-WORLD CONSTRAINTS
INVOKING EMOTION
ADAPTING THE VISUAL LANGUAGE
WAYFINDING AND LANDMARKS
CHOREOGRAPHY AND TIMING
PACKAGING YOUR DRAWINGS
CHAPTER TEN: MOVING FORWARD
WORKS CITED
INDEX
COPYRIGHT
DEDICATION
ABOUT THE AUTHOR
ACKNOWLEDGMENTS
END USER LICENSE AGREEMENT
List of Illustrations
Preface
FIGURE 1
FIGURE 2
FIGURE 3
FIGURE 4
Introduction
FIGURE 5
Chapter 1
FIGURE 1.1
FIGURE 1.2
FIGURE 1.3
FIGURE 1.4
FIGURE 1.5
FIGURE 1.6
FIGURE 1.7
FIGURE 1.8
FIGURE 1.9
FIGURE 1.10
FIGURE 1.11
FIGURE 1.12
FIGURE 1.13
Chapter 2
FIGURE 2.1
FIGURE 2.2
FIGURE 2.3
FIGURE 2.4
FIGURE 2.5
FIGURE 2.6
FIGURE 2.7
FIGURE 2.8
FIGURE 2.9
FIGURE 2.10
FIGURE 2.11
FIGURE 2.12
FIGURE 2.13
FIGURE 2.14
FIGURE 2.15
FIGURE 2.16
FIGURE 2.17
FIGURE 2.18
FIGURE 2.19
FIGURE 2.20
FIGURE 2.21
FIGURE 2.22
FIGURE 2.23
FIGURE 2.24
FIGURE 2.25
FIGURE 2.26
FIGURE 2.27
FIGURE 2.28
FIGURE 2.29
FIGURE 2.30
FIGURE 2.31
FIGURE 2.32
FIGURE 2.33
FIGURE 2.34
FIGURE 2.35
Chapter 3
FIGURE 3.1
FIGURE 3.2
FIGURE 3.3
FIGURE 3.4
FIGURE 3.5
FIGURE 3.6
FIGURE 3.7
FIGURE 3.8
FIGURE 3.9
FIGURE 3.10
FIGURE 3.11
FIGURE 3.12
FIGURE 3.13
FIGURE 3.14
FIGURE 3.15
FIGURE 3.16
FIGURE 3.17
FIGURE 3.18
FIGURE 3.19
FIGURE 3.20
FIGURE 3.21
FIGURE 3.22
FIGURE 3.23
Chapter 4
FIGURE 4.1
FIGURE 4.2
FIGURE 4.3
FIGURE 4.4
FIGURE 4.5
FIGURE 4.6
FIGURE 4.7
FIGURE 4.8
FIGURE 4.9
FIGURE 4.10
FIGURE 4.11
FIGURE 4.12
FIGURE 4.13
FIGURE 4.14
FIGURE 4.15
FIGURE 4.16
FIGURE 4.17
FIGURE 4.18
FIGURE 4.19
FIGURE 4.20
FIGURE 4.21
FIGURE 4.22
FIGURE 4.23
FIGURE 4.24
FIGURE 4.25
FIGURE 4.26
FIGURE 4.27
FIGURE 4.28
FIGURE 4.29
FIGURE 4.30
FIGURE 4.31
FIGURE 4.32
FIGURE 4.33
FIGURE 4.34
FIGURE 4.35
FIGURE 4.36
FIGURE 4.37
FIGURE 4.38
FIGURE 4.39
FIGURE 4.40
FIGURE 4.41
FIGURE 4.42
FIGURE 4.43
FIGURE 4.44
FIGURE 4.45
FIGURE 4.46
FIGURE 4.47
FIGURE 4.48
FIGURE 4.49
FIGURE 4.50
FIGURE 4.51
FIGURE 4.52
FIGURE 4.53
FIGURE 4.54
FIGURE 4.55
FIGURE 4.56
FIGURE 4.57
FIGURE 4.58
FIGURE 4.59
FIGURE 4.60
FIGURE 4.61
FIGURE 4.62
FIGURE 4.63
FIGURE 4.64
FIGURE 4.65
FIGURE 4.66
FIGURE 4.67
FIGURE 4.68
FIGURE 4.69
FIGURE 4.70
FIGURE 4.71
FIGURE 4.72
FIGURE 4.73
FIGURE 4.74
FIGURE 4.75
FIGURE 4.76
FIGURE 4.77
FIGURE 4.78
FIGURE 4.79
FIGURE 4.80
FIGURE 4.81
FIGURE 4.82
FIGURE 4.83
Chapter 5
FIGURE 5.1
FIGURE 5.2
FIGURE 5.3
FIGURE 5.4
FIGURE 5.5
FIGURE 5.6
FIGURE 5.7
FIGURE 5.8
FIGURE 5.9
FIGURE 5.10
FIGURE 5.11
FIGURE 5.12
FIGURE 5.13
FIGURE 5.14
FIGURE 5.15
FIGURE 5.16
FIGURE 5.17
FIGURE 5.18
FIGURE 5.19
FIGURE 5.20
FIGURE 5.21
FIGURE 5.22
FIGURE 5.23
FIGURE 5.24
FIGURE 5.25
FIGURE 5.26
FIGURE 5.27
FIGURE 5.28
FIGURE 5.29
FIGURE 5.30
FIGURE 5.31
FIGURE 5.32
FIGURE 5.33
FIGURE 5.34
FIGURE 5.35
FIGURE 5.36
FIGURE 5.37
FIGURE 5.38
FIGURE 5.39
FIGURE 5.40
FIGURE 5.41
FIGURE 5.42
FIGURE 5.43
FIGURE 5.44
FIGURE 5.45
FIGURE 5.46
FIGURE 5.47
FIGURE 5.48
FIGURE 5.49
FIGURE 5.50
FIGURE 5.51
FIGURE 5.52
FIGURE 5.53
FIGURE 5.54
FIGURE 5.55
FIGURE 5.56
FIGURE 5.57
FIGURE 5.58
FIGURE 5.59
FIGURE 5.60
FIGURE 5.61
FIGURE 5.62
FIGURE 5.63
FIGURE 5.64
FIGURE 5.65
Chapter 6
FIGURE 6.1
FIGURE 6.2
FIGURE 6.3
FIGURE 6.4
FIGURE 6.5
FIGURE 6.6
FIGURE 6.7
FIGURE 6.8
FIGURE 6.9
FIGURE 6.10
FIGURE 6.11
FIGURE 6.12
FIGURE 6.13
FIGURE 6.14
FIGURE 6.15
FIGURE 6.16
FIGURE 6.17
FIGURE 6.18
FIGURE 6.19
FIGURE 6.20
FIGURE 6.21
FIGURE 6.22
FIGURE 6.23
FIGURE 6.24
FIGURE 6.25
FIGURE 6.26
FIGURE 6.27
FIGURE 6.28
FIGURE 6.29
FIGURE 6.30
FIGURE 6.31
FIGURE 6.32
FIGURE 6.33
FIGURE 6.34
FIGURE 6.35
FIGURE 6.36
FIGURE 6.37
FIGURE 6.38
FIGURE 6.39
FIGURE 6.40
FIGURE 6.41
Chapter 7
FIGURE 7.1
FIGURE 7.2
FIGURE 7.3
FIGURE 7.4
FIGURE 7.5
FIGURE 7.6
FIGURE 7.7
FIGURE 7.8
FIGURE 7.9
FIGURE 7.10
FIGURE 7.11
FIGURE 7.12
FIGURE 7.13
FIGURE 7.14
FIGURE 7.15
Chapter 8
FIGURE 8.1
FIGURE 8.2
FIGURE 8.3
FIGURE 8.4
FIGURE 8.5
FIGURE 8.6
FIGURE 8.7
FIGURE 8.8
FIGURE 8.9
FIGURE 8.10
FIGURE 8.11
FIGURE 8.12
FIGURE 8.13
FIGURE 8.14
FIGURE 8.15
FIGURE 8.16
FIGURE 8.17
FIGURE 8.18
FIGURE 8.19
FIGURE 8.20
FIGURE 8.21
Chapter 9
FIGURE 9.1
FIGURE 9.2
FIGURE 9.3
FIGURE 9.4
FIGURE 9.5
FIGURE 9.6
FIGURE 9.7
FIGURE 9.8
FIGURE 9.9
FIGURE 9.10
FIGURE 9.11
FIGURE 9.12
FIGURE 9.13
FIGURE 9.14
FIGURE 9.15
FIGURE 9.16
FIGURE 9.17
FIGURE 9.18
FIGURE 9.19
FIGURE 9.20
FIGURE 9.21
FIGURE 9.22
FIGURE 9.23
FIGURE 9.24
FIGURE 9.25
FIGURE 9.26
FIGURE 9.27
FIGURE 9.28
FIGURE 9.29
FIGURE 9.30
FIGURE 9.31
FIGURE 9.32
Chapter 10
FIGURE 10.1
Guide
Cover
Title Page
Copyright
Dedication
About the Author
Acknowledgments
Foreword
Preface
Introduction
Table of Contents
Begin Reading
Works Cited
Index
End User License Agreement
Pages
i
ix
x
xi
xii
xiii
xv
xvi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
127
128
129
130
131
132
133
134
135
136
137
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
183
184
185
186
187
188
189
190
191
ii
iii
iv
v
192
DRAWING PRODUCT IDEAS
FAST AND EASY UX DRAWING FOR ANYONE
KENT EISENHUTH
FOREWORD
BY MANUEL LIMA
The ability to draw is embedded in all of us from a very early age. Before we can articulate a single sentence, we are compelled to sketch—random lines and scribbles at first, patterns and geometric shapes as we get older. This early exploration is a foundational step in developing a language of thought while also improving important motor skills. Even if most of us get progressively better during childhood, as we get older, we tend to lose our innate connection to drawing. We consider it too childish or lacking intrinsic value. Or worse, we become self-conscious and start believing we are not good at it. And in the process, we forget how deeply gratifying it can be.
While we spend years in school mastering all possible rules and combinations on how to apply the 26 symbols that make up the alphabet, somehow we assume drawing skills and visual literacy should come naturally to us, without any specific training or focused practice. It is therefore not surprising that most of us eventually distance ourselves from our innate ability to draw with our hands. Such detachment appears more acute within the tech industry, where every so often a new digital tool comes around to fulfill our desire for visual depiction in unpredictable ways. Packed with extravagant pen styles, fanciful shapes, outlines, and transitions, modern-day digital tools make hand drawing seem like a thing of the past.
Repeatedly, I see designers jumping straight to the latest digital tool, enamored by its shiny new features, without thinking deeply about what they are creating in the first place and considering the various interdependent parts that make up their grand idea. This can lead to a lot of wasted time. Using pen and paper is not just important to think through scenarios before committing to a solution, it is often the most liberating step in your iteration process. If you don't allow yourself this key step, your idea becomes immediately conditioned by the tool's capabilities. I'm often asked what tool I recommend for design and data visualization. The answer is always obvious: pen and paper.
Kent's book is a fabulous guide in this context. It teaches us how to bring the pen and paper back into the lives of user experience designers and digital product creators. Whether you are developing a new user interface for a website, mobile application, service, TV system, or game console, this book will be instrumental for you to structure and articulate your ideas while building your own combinatorial visual language. In the process, not only will you save countless hours redoing wireframes and final interface mocks, but you will also discover the true power of an unconstrained creative mind.
PREFACE
I spent most of my childhood drawing and painting. As I was growing up, I aspired to be an architect. I was obsessed with buildings. Figure 1 depicts a random architectural doodle I created back then. After completing an independent study with a local architect and mentor, I quickly learned how to refine my drawing skills and create a visual style that enabled me to pitch new and exciting ideas.
FIGURE 1
For various reasons, I never achieved my goal of becoming an architect. However, I found my way into User Experience (UX) design. Throughout my career, I've carried a lot of the ideas, principles, and techniques I learned from childhood, and I've spent a lot of time refining them. My drawing style is a combination of techniques I applied in watercolor painting, drafting, and digital design. The drawing in Figure 2 is a fine example of how I combined these various techniques. As a result of blending these skills and techniques, I've experienced a lot of success sharing ideas early and often.
Drawing has improved the quality of ideas explored by the teams on which I've worked. I've been able to successfully apply drawing in a way that enabled me to challenge the status quo, explore new ideas, and share the breadth of my thinking. I've used drawing to enable my teams to align on ideas that we co-created.
FIGURE 2
For example, I used hand-drawn sketches to design one of the first mobile and web apps for controlling lights and shades in homes. I also used drawing and sketching to convince a customer to drastically change the way in which scientists interact with an atomic force microscope. One of my early atomic force microscope concept drawings is displayed in Figure 3.
FIGURE 3
Later in my career, I used hand-drawn sketches to help pitch Rivet, an AI-powered reading skills practice app offered by Google. I also used drawings to enable the team, a group of non-designers, to explore some early minimum viable product, or MVP, designs for the app.
Finally, I successfully created a hand-drawn presentation to convince a Google Cloud team to shift from a text-driven interface to a visual interface that used visualizations to highlight insights within the data.
I want to share my success with you, and I truly believe that my style and technique doesn't require artistic talent to master. I'm confident that with a few quick and easy adjustments to your drawing technique, you will be able to draw digital product designs, like the one in Figure 4, with finesse, polish, and confidence. Most importantly, you can start creating more impactful designs with your team.
FIGURE 4
INTRODUCTION
Do you find drawing unapproachable or intimidating? A lot of people do, and for good reason. Drawing gets a bad rap. Most people think you have to be an artist or seasoned designer to be able to do it well. They believe that it requires formal training. This is definitely not true.
If you create digital products and you're not a designer, you have a reason to read this book. By sharing everything I've learned throughout the years, I'm hoping to empower you to channel your artistic skills and include drawing and sketching in your everyday process. It's a fact that the human brain processes images more quickly than it processes words. Images are the essential language we use when sharing and collaborating on new ideas. As people who design and build digital products, we will continue to rely on this as the design problems we tackle become more complex and as design thinking continues to gain popularity.
Do you work on digital products? Do you consider yourself a designer? If not, do you want to contribute to the creative process? It turns out that you can and should. In fact, you can be good at it, too. As design problems become more complex, designers are relying on teammates like you to help co-design solutions. I truly believe that everyone is a designer and the best ideas are built in a group. The success of your team's product might depend on your input, and drawing can be your ticket to success.
Are you already a seasoned designer? Is drawing a key part of your process? If so, this book will enable you to build confidence in your drawing ability. It will provide methods for getting your colleagues on board with your process so you can all become better collaborators.
If you're not a designer, you have even better reasons to read this book.
Are you a subject matter expert? If so, you can use drawing to ensure your team's designers are seeing and understanding your domain-specific point of view. For them, it's important that your expertise shines through in the end product.
Are you a researcher? If so, you can use drawing to ensure your user experience (UX) research and requirements are well represented in your team's final product. If you work in a siloed organization, drawing will help you blur the lines between you and your design counterparts.
Are you going to build the product? Are you an engineer or developer? If so, you may use drawing to co-design an end solution that is useful, exciting, and fits within identified technical requirements and constraints. If you can draw boxes and arrows similar to the ones displayed here, you have what it takes to draw a design—and a good one for that matter. Remember, in order to draw with your team, you don't have to be a critically acclaimed artist, nor do you have to be a designer.
FIGURE 5
So what do you think? Are you ready to get started? If so, let's jump in.
CHAPTER ONEWHY DRAW?
Great digital products start with great design. A great design isn't created in a vacuum. It takes time, research, and the unique perspective of many contributors along the way. I've always viewed the design process as a form of problem solving, and as technology advances, the problems become more complex. As a result, our teammates from all functional areas are participating in this process, whether they realize it or not.
Throughout this process, drawing is the key method for developing, testing, and collaborating on new ideas, and there are several benefits to including drawing in your product development process, as illustrated in the mind map in Figure 1.1.
FIGURE 1.1
Drawings attract people to an idea. It's true that a picture is worth a thousand words, and drawing has withstood the test of time, having been used as an effective communications tool for tens of thousands of years. This isn't an exaggeration. Figure 1.2 is a recreation of a drawing from the rock shelters of Bhimbetka. Some of the drawings in these shelters are considered to be 30,000 years old. In today's digital age, drawing is not only still relevant but needed more than ever.
FIGURE 1.2
Source: Based on Bhimbetka drawings (Kent Eisenhuth)
Drawing is a quick and easy way to start putting form to an early idea. Let's go back to our original mind map of the benefits of drawing and further examine the three main types of benefits that come from including drawing in your product development process.
EXPLORE AN IDEA
Drawing is a low-risk exercise that allows you to rapidly work through many concepts. Early in the process, I usually start with some quick doodles. The focus on quantity over quality helps me clear out initial biases, and it forces me to think of alternate solutions. It brings me closer to the problem at hand, because thinking about alternative ideas causes the creative juices to flow.
Usually my first few ideas are bad before they're even penned. It's usually my fourth, fifth, and sixth doodles that represent ideas that begin to hold water.
I'm not alone in this line of thinking. As my former professor David Bullock used to say, there's nothing quite like developing an idea through mind, hand, and paper. Putting a multitude of ideas down on paper instead of focusing on the first thing that comes to mind leads to a better solution. Breadth in thinking enables you to discover connections between two seemingly disconnected ideas, which can lead you to focusing on the right answer.
In doing this, I found that it's important to get the bad ideas down on paper first so I can open up the headspace to focus on other, more thoughtful ideas. Most of my doodles have a long-standing date with the trash can, and they never see the light of day. They're merely chicken scratch and that's okay. I'm the only one who has to understand them at this point in the process. Once seeing the idea on paper, I can better understand why it might not work, learn from it, and move on to a better idea. I learn a lot from these quick doodles. In Figure 1.3 you can see some quick doodles I created to help me explore some ideas for visualizing an organizational structure within a company.
FIGURE 1.3
At one point, I was working on a website that would shed light on the digital divide in America. Our goal was to highlight segments in the American population that live in urban and rural areas alike. We wanted to spotlight critical issues affecting these areas that were caused by a lack of high-speed Internet access.
The first goal was to compare the two categories. To do this, the first and most obvious way was to show two tables side by side as drawn in Figure 1.4. One table would list all the urban counties, their populations, and the number of people without Internet access. The second would focus on the rural counties and do the same. During this process, I knew I wanted to get the obvious ideas down on paper first.
FIGURE 1.4
Once I was able to get the obvious down on paper, I was able to think more clearly about the information we wanted to share and how it would support the underlying story. As a result, I started to think about how different charts and graphs might be used to display the information in a more insightful way.
For example, I explored how a graph might help us compare access rates across the two categories. Additionally, I wanted to explore where the most affected people are located. Finally, I wanted to see how resulting issues affected the populations in each category. My later explorations, as depicted in Figure 1.5, represent concepts that uncover more of these insights. I was even able to explore a few experimental ideas just so that I could start the right conversations with my teammates and project stakeholders.
Drawing enables you to quickly explore alternate, possibly better ways to solve the problem at hand. It can help you understand when and why you should break the rules of your company's underlying design guidelines and not just use an out-of-the-box component available to you.
Drawing can help you intimately connect with the problem you're trying to solve and explore a range of solutions that provide a range of benefits to your product's users. Too many times this part of the process is overlooked, and it shows in the end result. Product teams should never be happy with the status quo. We need to push the boundaries of our work. Let me ask you this, Do you want to create a product that meets expectations or exceeds them?
FIGURE 1.5
