- A
- accent mark, 105
- action, 68
- alert, 91–92, 120–121
- annotation, 147–150
- anomaly, 91–92
- app
- boxes on, 30
- fitness, 27, 50
- grids within, 63–65
- lists within, 59–60
- photo, 144–147, 176–177
- points within, 44
- shapes within, 21
- tabs within, 62
- area chart, 73
- arrow
- drawing, 40, 48
- example of, 131
- forward/backward, 91
- for interactions, 143
- for motion, 146
- within network visualizations, 53–54
- for process diagram, 48–50
- for tree diagram, 51–53
- B
- balance, 168–169
- bar chart, 70–73
- Bartholomew, Matthew, 12
- basic flow, 139
- Bhimbetka drawing, 2
- Biondo, Joseph, 7–8
- Borbay, Jason, 122–125
- box
- on apps, 30
- for area charts, 73
- for bar charts, 70–73
- for buttons and actions, 68
- for cards, 76–79
- for checklists, 67–68
- content elements, 55–58
- on dashboards, 74–75
- within diagram, 24, 27
- for dialogs, 75–76, 111–113
- example of, 6, 18, 30, 47
- form layout, 68–69
- for histograms, 70–73
- as image placeholder, 55
- for line charts, 73
- for modals, 75–76, 111–113
- navigation elements, 58–65
- within network visualizations, 53–54
- for process diagram, 48–50
- for progress bars, 70
- shading to, 18
- for stacks, 76–79
- for text areas, 66–67
- for text fields, 66
- texture on, 116–118
- for tree diagram, 51–53
- Boyarski, Dan, 5–6, 178
- breadcrumb, 62–63
- bubble chart, 87–89
- Bullock, David, 3
- button
- elevation of, 116, 167–168
- example of, 30, 69, 76, 131–132, 133
- floating, 128–129
- overview of, 68, 112
- radio, 96
- texture on, 116
- C
- card, 76–79, 115
- chart
- bubble, 87–89
- within dashboard, 70, 85
- donut, 86
- emotion within, 167
- example of, 4, 5, 165
- as forms, 69
- overview of, 85
- pie, 85–86
- texture within, 118
- checklist, 67–68
- choreography, within storytelling, 178–180
- circle template, 38
- circles/circular element
- bubble charts, 87–89
- charts, 85
- donut charts, 86
- emojis, 84–85
- overview of, 81–89
- pie charts, 85–86
- pointillism within, 108
- profile icons, 85
- radio groups, 81–83
- scatterplots, 86–87
- for screens, 89
- status icons, 83–84
- as a symbol, 83
- time icons, 84
- for wearables, 89
- circular line, 38–39. See also lines
- click interaction, 99
- Cohn, Neil, 20, 179
- collaboration, 7, 10–11
- component, drawing for, 29–32
- composition, within flow, 150–155
- comprehension, drawing for, 5–6
- condition, within process diagram, 49–50
- construction line, 154, 155
- content, 160–161
- content block, 55
- content element, 55–58
- content layout, 56–58
- contour shading, 104, 105, 109
- conversation, drawing for, 11–12
- creative license, 124
- crosshatching, 104, 105, 109
- cursor, 98–99, 115–116, 131, 142
- customer review, 161
- D
- dashboard
- charts within, 70, 85
- example of, 29, 37
- line charts within, 73
- overview of, 74
- scale within, 164
- data, review of, 164–165
- decision point, within process diagram, 49–50
- deliberate line, metaphor of, 8
- dependency, within process diagram, 49–50
- design sprint, 7, 10–11, 13
- designing, drawing for, 14
- diagram
- boxes within, 24, 27
- creating, 48–54
- network visualizations, 53–54
- process, 25–26, 48–50, 133–134
- rectangles for, 48–54
- tree, 51–53
- dialog, 75–76, 111–113
- diamond, within process diagram, 49
- digital product, 20, 29–32
- Disney World, 174–175, 176
- Dondis, Donis A., 168
- donut chart, 86
- doodling, 2–3, 9
- dotted line, 53. See also lines
- drawing
- in the beginning, 10
- benefits of, 1, 4–5, 7–8, 28, 45, 52, 183
- for challenging the status quo, 14
- for collaboration, 7
- common, 23–32
- as communication, 2
- for conversation facilitation, 11–12
- for feedback, 12–13
- function of, 1
- for idea exploring, 2–5
- packaging of, 180–181
- process of, 183
- for shared understanding, 5–6
- system for, 19–23
- tools and materials for, 45–46
- for unbuttoning the process, 12
- unveilings within, 179
- as visual language, 20
- during workshops, 10–11
- drop shadow, 112, 114
- drop-down menu, 92
- E
- Electronic Ink, 161
- elevation
- cards for, 115
- cursors, 115–116
- dialogs within, 111–113
- fixed position elements within, 113–114
- hatching for, 168
- interaction hands, 115–116
- modals within, 111–113
- overview of, 110–116
- of UI elements, 116
- email, 128–134, 140–142, 167–168
- emoji, 84–85
- emotion
- capturing, 122
- on charts, 167
- invoking, 166–170
- in structural soundness, 168–169
- through shading, 167
- through texture, 122, 167
- equilibrium, 168–169
- expand/collapse control, 90–91
- F
- Faber-Castell graphite sketch pencil, 46
- feedback, drawing for, 12–13
- first impression, 169–170
- fitness app, 27, 50
- fixed position element, 113–114
- flow
- annotations within, 147–150
- basic, 139
- composition within, 150–155
- highlighting within, 153
- horizontal, 153
- information within, 144–145
- interactions within, 142–144
- labels within, 147–150
- numbering within, 153
- readability within, 153
- starting point within, 153
- syntax within, 139–142, 154
- transitions within, 145–147
- vertical, 153
- flow chart, 24–28
- focal point, 44
- form
- actions, 68
- area charts, 73
- bar charts, 70–73
- buttons, 68
- charts, 69
- checklists, 67–68
- dashboard, 74
- drop-down menus, 92
- example of, 133
- histograms, 70–73
- interface elements, 75–79
- layout, 68–69
- line charts, 73
- progress bars, 70
- rectangles for, 65–79
- text areas, 66–67
- text fields, 66
- forward/backward arrow, 91
- G
- gestural interaction, 99-101, 115-116, 142, 144–145
- gestural line, 39–40. See also lines
- Google, design sprints at, 7, 10–11, 13
- graph, 4, 5, 69
- grass, drawing, 40
- Great Wave Off Kanagawa (Hokusai), 157
- grid, 63–65
- grouped bar chart, 72–73
- H
- handwriting, 149–150
- Hassard, Steve, 10–11, 13
- hatching
- headline text, 55
- heads-down time, 13
- highlighting, within flow, 153
- histogram, 70–73
- Hokusai, Katsushika, 157–159
- horizontal flow, 153
- I
- icebreaker, 11, 13
- icon
- advanced, 92–98
- location markers, 94–95
- people, 96–97
- profile, 85
- status, 83–84
- time, 84
- triangular elements within, 91–92
- types of, 84
- idea, exploring, 2–5
- image placeholder, 55
- impasto, 124
- information source, within storytelling, 161–162
- interaction
- arrows for, 143
- click, 99
- cursors, 98–99
- describing, 100
- elevation of, 115–116
- within flow, 142–144
- gestural, 99–101
- information within, 144–145
- in photo app, 144
- pointer hands, 98–99, 115–116
- interface, drawing for, 29–32
- interface element
- cards, 76–79, 115
- dialogs, 75–76, 111–113
- example of, 140
- modals, 75–76, 111–113
- overview of, 75–79
- scroll bars, 75, 113–114, 130, 163, 164
- stacks, 76–79
- interface pattern, within storytelling, 163–164
- Internet access, comparisons of, 3–4
- K
- Knight, Carolyn, 10–11, 13
- L
- label/labeling, 49, 147–150
- landmark, within storytelling, 174–178
- language, function of, 20
- layout, form, 68–69
- Leborg, Christian, 42
- Lego, 22, 23
- light/lighting
- contour shading, 109
- crosshatching, 104, 105, 109
- hatching, 108, 112
- lines for, 41, 42
- luminance, 120–121
- overview of, 105–110
- pointillism, 104, 105, 106–108
- points for, 45
- role of, 123–124
- scribbled shading, 104, 105, 109–110
- shading and, 103–104
- shapes and, 124
- Lima, Manuel, 159
- line
- as accent marks, 105
- circular, 38–39
- construction, 154, 155
- within contour shading, 109
- within crosshatching, 104, 105, 109
- deliberate, 8
- dotted, 53
- drawing using, 16, 17
- gestural, 39–40
- within hatching, 108
- as interface elements, 30
- for light, 41, 42
- for luminance, 120–121
- for motion, 119–120, 146
- for shadowing, 41, 42
- within storytelling, 34–42
- straight, 36–37
- straight edge for, 36
- within texture, 118
- weight of, 40–42
- weights of, 35
- zigzag, 73
- line chart, 73
- list, 55–56, 58–60, 130
- location marker, 94–95
- luminance, 120–121. See also light/lighting
- M
- material, 45–46
- menu, drop-down, 92
- message header, 131
- mind map, 11, 28–29
- minimap, 151
- modal, 75–76, 111–113
- motion, 119–120, 146
- Mount Fuji, 157–159
- N
- navigation control, 90–91
- navigation element
- breadcrumbs, 62–63
- grids, 63–65
- lists, 55–56, 58–60, 130
- overview of, 58–65
- tabs, 61–62, 176–177
- Nest Learning Thermostat, 89
- network visualization, 53–54
- number exercise, 15–19, 170
- numbering, within flow, 153
- P
- paper, 46
- particle system, 135–136
- pen, 46, 113
- people, drawing, 95–97
- photo app, 144–147, 176–177
- pie chart, 85–86
- Pigma Micron pen, 46, 113
- placeholder, image, 55
- point
- drawing using, 16, 18
- example of, 42, 43, 45
- focal, 44
- for light, 45
- overview of, 42–45
- for shadowing, 45
- pointer hand, 98–99, 115-116, 142-146
- pointillism, 104, 105, 106–108, 136
- process diagram, 25–26, 48–50, 133–134
- product development, 19
- profile icon, 85
- progress bar, 70
- R
- radio button, 82–83
- radio group, 81–83
- readability, within flow, 153
- rectangle. See also box es
- for content elements, 55–58
- for diagrams, 48–54
- for forms, 65–79
- for navigation elements, 58–65
- overview of, 47–48
- recycling, 184
- Roman numeral, drawing using, 16, 17
- Rosling, Hans, 88
- S
- scale, 164–165
- scanning, drawings, 180
- scatterplot, 86–87
- screen, drawing for, 29–32
- scribbled shading, 104, 105, 109–110
- scroll bar, 75, 113–114, 130, 163, 164
- sequential diagram, 24–28
- shading
- consistency within, 177
- contour, 104, 105, 109
- crosshatching, 104, 105, 109
- emotion through, 167
- example of, 18, 122
- hatching, 108, 112
- light/lighting and, 103–104
- overview of, 103–105
- pointillism, 104, 105, 106–108
- scribbled, 109–110
- shadow
- shape. See also boxes; rectangles
- within apps, 21, 27, 28, 30
- combining, 22
- commonality of, 30–31
- drawing using, 16, 18
- light and, 124
- shared understanding, 5–6
- Signac, Paul, 106
- site map, 23–24, 53
- sound, 121–122
- Spotify, 59, 60
- Squiggle Birds exercise, 9
- stack, 76–79
- starling, 135–136
- status icon, 83–84
- stop sign, drawing, 93–94
- storytelling
- choreography within, 178–180
- content within, 160–161
- data review within, 164–165
- drawing packaging within, 180–181
- emotion within, 166–170
- information sources within, 161–162
- interface patterns within, 163–164
- landmarks within, 174–178
- with lines, 34–42
- new information within, 166
- real-world constraints regarding, 160–166
- timing within, 178–180
- visual language adaptation through, 170–174
- wayfinding within, 174–178
- widgets within, 163–164
- straight edge, 36, 37
- straight line, 36–37. See also lines
- structural soundness, 168–169
- subheader text, 55
- subway map, 173
- symbol, 92–98
- syntax, 139–142, 154
- T
- tab, 61–62, 176–177
- table, 4
- technology industry, 142, 149–150
- text area, 66–67, 70, 147–150
- texture
- within bar charts, 72
- in charts, 118
- depth through, 124
- emotion through, 122, 167
- within histograms, 72
- lines within, 118
- overview of, 116–118
- role of, 124
- within site maps, 24
- in user interface (UI), 116–117
- Thirty-Six View of Mount Fuji (Hokusai), 157–159
- time icon, 84
- timing, within storytelling, 178–180
- tool, 45–46
- transition, within flow, 145–147
- tree diagram, 51–53
- triangles/triangular element, 89–92
- U
- UX drawing
- elevation within, 110–111
- information sources within, 161–162
- motion within, 120
- new creation of, 134–137
- personal experience regarding, 123
- system overview of, 128–134
- texture within, 116–117
- V
- Van Gogh, Vincent, 34–35
- vertical flow, 153
- visual language, 20, 139–140, 170–174
- The Visual Language of Comics (Cohn), 179
- visual library, 139–140
- visualization, scale within, 164
- W
- warning, triangular elements within, 91–92
- wayfinding, within storytelling, 174–178
- wearable, visualization on, 89, 166
- widget, 161, 162, 163–164
- workflow diagram, 171, 172, 173–174
- workshop, drawing during, 10–11
- Wright, Frank Lloyd, 149
..................Content has been hidden....................
You can't read the all page of ebook, please click
here login for view all page.