Embed Size (px)
Citation preview
Proprietary and Confidential / © 2016 The Nerdery, LLC
How to speak designer
2
Proprietary and Confidential / © 2016 The Nerdery, LLC
Who am I?Mobile Technology
Manager
Proprietary and Confidential / © 2016 The Nerdery, LLC
Who am I?An odd duck…
Proprietary and Confidential / © 2016 The Nerdery, LLC
What is required to speak someone’s language?
5
Proprietary and Confidential / © 2016 The Nerdery, LLC
Empathy & Curiosity
6
Proprietary and Confidential / © 2016 The Nerdery, LLC
Designer Developer
Can overestimate the incremental cost of producing additional units.
Can underestimate the cost of one-off design elements or contextual variations.
May not account for the impact of device or data variations.
7
May attempt to force everything to a pedantic consistency.
Can miss details that have a big impact on the design.
May surprise people with significantly different estimates for seemingly
similar tasks.
Proprietary and Confidential / © 2016 The Nerdery, LLC
Designer: Artisan Developer: Industrialist
8
Proprietary and Confidential / © 2016 The Nerdery, LLC
Designer: Artisan Developer: Industrialist
9
Proprietary and Confidential / © 2016 The Nerdery, LLC
Designer Developer
Can overestimate the incremental cost of producing additional units.
Can underestimate the cost of one-off design elements or contextual variations.
May not account for the impact of especially long or short data.
10
May attempt to force everything to a pedantic consistency.
Can miss details that have a big impact on the design.
May surprise people with significantly different estimates for seemingly
similar tasks.
Proprietary and Confidential / © 2016 The Nerdery, LLC
Design Intake
11
Ted FlynnFront End Asset Intake: The Art of Being Systematichttp://bit.ly/1njWWxX
Proprietary and Confidential / © 2016 The Nerdery, LLC
What to Audit
13
▪ Text Attributes
▪ Colors and Opacity
▪ Design Variations
Proprietary and Confidential / © 2016 The Nerdery, LLC
Font Face, Weight, and Size
14
TEXT ATTRIBUTES
The quick brown fox jumps over the lazy dog.Font Face: Hoefler Text Weight: Regular Size: 32
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Font Face: Roboto Weight: Black Size: 32
Proprietary and Confidential / © 2016 The Nerdery, LLC
Leading and Line Spacing
15
TEXT ATTRIBUTES
The quick brown fox jumps over the lazy dog.Font Face: Hoefler Text Weight: Regular Size: 32 Line Height: 39
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Font Face: Roboto Weight: Black Size: 32 Line Height: 29
Proprietary and Confidential / © 2016 The Nerdery, LLC
Letter Spacing, Kerning, and Tracking
16
TEXT ATTRIBUTES
The quick brown fox jumps over the lazy dog.Font Face: Hoefler Text Weight: Regular Size: 32 Line Height: 32 Letter Spacing: 0
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Font Face: Roboto Weight: Black Size: 32 Line Height: 29 Letter Spacing: .05 em
Proprietary and Confidential / © 2016 The Nerdery, LLC
Typography Matrix
17
TEXT ATTRIBUTES
Font Face Size Leading Letter Spacing
Navigation Roboto 16 16 0
Inline Heading Roboto 17 20 0
Headline Roboto 44 40 0.05
Subhead 1 Roboto 17 20 0
Body Roboto 14 25 0
Caption Roboto 12 17 0
Proprietary and Confidential / © 2016 The Nerdery, LLC
Measure Colors
18
COLORS AND OPACITY
Red #C60021
Opacity: 1.0
Red #C60021
Opacity: 0.9
Red #CF1E33
Opacity: 1.0
Proprietary and Confidential / © 2016 The Nerdery, LLC
Blend Modes Are Powerful (And Evil)
19
COLORS AND OPACITY
Multiply: f(a,b) = ab
Darkens based on luminance, white is neutral.
Screen: f(a,b) = 1 - (1 - a)(1 -b)
Lightens based on luminance, black is neutral.
Proprietary and Confidential / © 2016 The Nerdery, LLC
Can you spot the problem?
20
Proprietary and Confidential / © 2016 The Nerdery, LLC
Going from Static to Dynamic
21
Proprietary and Confidential / © 2016 The Nerdery, LLC
Going from Static to Dynamic
22
Proprietary and Confidential / © 2016 The Nerdery, LLC
Going from Static to Dynamic
▪ Long names and numbers
▪Multiple lines
▪ Screen sizes (both addressable display pixels and resolutions)
▪ Image aspect ratios (i.e. portrait image in a landscape hole)
23
DESIGN VARIATIONS
Proprietary and Confidential / © 2016 The Nerdery, LLC
Let’s Talk Animation
24
Proprietary and Confidential / © 2016 The Nerdery, LLC
Simplistic Animations
25
Proprietary and Confidential / © 2016 The Nerdery, LLC
Simplistic Animations
26
Proprietary and Confidential / © 2016 The Nerdery, LLC
Compound Animations
27
Proprietary and Confidential / © 2016 The Nerdery, LLC
Compound Animations
28
Proprietary and Confidential / © 2016 The Nerdery, LLC
What Does Good Look Like?
29
▪ Complexity != Good. Craft and attention to detail == good.
▪ The goal is communication. It should tell a story.
▪ It’s a team sport
▪ As with seasoning and spices a little bit goes a long way
Proprietary and Confidential / © 2016 The Nerdery, LLC
Excellence is a partnership
30
