INDEX

  • 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
  • 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
  • interface pattern, within storytelling, 163–164
  • Internet access, comparisons of, 3–4
  • J
  • journey map, 24–28
  • 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
  • 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
  • O
  • octagon, 93–94
  • 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
  • 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
  • Z
  • zigzag line, 73
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset