From my talk at Interactions 12 in Dublin on February 2, 2012. You know how you can recognize a Porsche sports car regardless of the model or year? This is effective design language at work. A design language establishes the visual vocabulary, relationships and hierarchies that allow diverse products to become recognizable and unified. This tool has long been used in industrial design to create coherent families of products. But as products become digital and shift to multi-platform app-driven ecosystems, what constitutes an effective design language for interaction that can drive consistency across these varied experiences?

1. Design
Language for
Interactions
Mike Lemmon
@mikelemmon

2. Hello!

3. Background

4. Once upon a time...

11. Once great products have
become digitized

12. But often,
something gets lost
in translation.

13. We risk a digital dilution

14. We can learn from
industrial design.

15. We see design language everywhere
Ziba + KitchenAid

16. We see design language everywhere

17. We see design language everywhere

18. We see design language everywhere

19. “Form Language” — Jacob Jensen

20. surface
material
color
function
For industrial design, it starts with
the elements of form

21. surface
material
color
function
brand
consumer
Authentic + Relevant

22. surface
For digital products & services,
“form” is more than the surface pixels.

23. visuals
interactions
structure
For digital products & services,
“form” is more than the surface pixels.

24. visuals
interactions
structure
brand
consumer
Authentic + Relevant

27. Android Design
GET STARTED
Creative Vision
Design Principles
UI Overview
STYLE
PATTERNS
BUILDING BLOCKS
DEVELOPERS
Welcome to Android Design, your place for
learning how to design exceptional Android
apps.
Creative Vision
Except as noted, this content is licensed under Creative Commons Attribution 2.5.
For details and restrictions, see the Content License.
Site Terms of Service – Privacy Policy – Brand Guidelines

28. Contexts
Platforms

29. Design
Language
Contexts
Platforms

30. Philosophy + Instruction Manual
Document the system

31. visuals
interactions
structure
brand
consumer

32. The Consumer

35. ld er
ceho
P la
App Store

37. Define the target & profiles
Ziba + SiriusXM

38. Your Brand

39. The “B” Word

41. Brand is a promise

46. thinking
introverted extroverted
feeling
What’s the personality of
your brand?

49. A recent brand exercise at Ziba
Started with 2 brand characters

50. QUEEN ELIZABETH
Planned
Steady
Refined
Traditional
Poised
Expensive
Conservative

51. CHE GUEVARA
Adventure
Revolution
Chaos
Idealistic
Poetic
Dreamer
Driven

53. Visually tell the story of your brand.
What do you aspire to?

54. successful
usable application
of brand
unique

55. Structure

58. Simplicity comes from the structure

60. Interaction

65. Visuals

66. Visceral elements
Color
Typography
Iconography
Layouts
Messaging Voice
Motion Design

67. Windows Metro Visual Theme

69. Android iOS Windows
Phone
Be a good citizen on each platform

70. Case Studies

72. Challenge
How do you revive an analog icon
in the digital age?

73. TDK Integrated Product + Interaction
Design Language

75. TDK’s Brand
Heritage in music culture

76. Features that define the products

77. Analog Knobs
Features that define the products

78. Digital Contextual Controls
Features that define the products

79. Music Pulse
Features that define the products

80. 08 Key Scenarios
(screens not to scale)
FROM ANY SOURCE: Change EQ
10 seconds
Press + Release or
EQ Button Selection Knob
Clockwise 5x
BACK
EQ
From any Source
Sonic Systems Sonic Systems
Bass
Now Playing VISUALIZER Now Playing EQ ADJUSTMENT
Normal behavior. Normal Behavior Normal behavior. The EQ mode starts with Bass adjustment,
shown here as neutral. The Bass side of the
adjustment curve is highlighted.
The EQ provides +/- 5 levels of gain for both
Bass and Treble.
Selection Knob
Press OK Clockwise 5x
BACK
OK
Continued on
next page
Sonic Systems Sonic Systems
Bass Treble
Now Playing EQ ADJUSTMENT Now Playing EQ ADJUSTMENT
Normal behavior. Turning the knob clockwise increases the Bass Normal behavior. Treble adjust is shown highlighted in a neutral
TDK User Interface
curve, corresponding to raising the adjustment level. The Bass level curve is still shown on the Design Guidelines
curve on screen. The music immediately reflects left.
the selected EQ levels.
Project 209-112 Feb. 11, 2010
22
Interactions

81. Visual Palette

84. Challenge
Simplify access to digital media for a
new consumer.

87. Structure
Clear top-level sections

88. Interactions
Collage facilitates discovery

89. Interactions
Grid provides familiarity

90. Visuals
Inspiration & theming

91. Voice
Establish a character

92. Some Learnings

93. Feature A Feature B Feature C
Feature A Feature B Feature C
Feature A Feature B Feature C
Traditional approach creates
silos by product

94. Feature A Feature B Feature C
Feature A Feature B Feature C
Feature A Feature B Feature C
Try designing by feature,
rather than by product

96. visuals
interactions
structure
brand
consumer

98. We are
digital product
designers now.

99. Thanks!
Mike Lemmon
@mikelemmon
Ziba is hiring in Portland!
ziba.com/careers

100. Creative Commons
Image Attribution
http://www.flickr.com/photos/timmythesuk/
2260171886/
http://www.flickr.com/photos/lyza/49545547/
http://www.flickr.com/photos/
70636282@N00/5199603455/
http://www.flickr.com/photos/mackarus/
5160514448/in/photostream/
http://www.flickr.com/photos/my-other-eye/
5337747461/sizes/l/in/photostream/
http://www.flickr.com/photos/jliba/4359401964/
sizes/l/in/photostream/
All other images belong to their respective owners..