DesignLanguage forInteractionsMike Lemmon@mikelemmon
Hello!
Background
Once upon a time...
Once great products have   become digitized
But often,something gets lostin translation.
We risk a digital dilution
We can learn fromindustrial design.
We see design language everywhere              Ziba + KitchenAid
We see design language everywhere
We see design language everywhere
We see design language everywhere
“Form Language” — Jacob Jensen
surfacematerial   colorfunctionFor industrial design, it starts with       the elements of form
surface material    color function   brandconsumer            Authentic + Relevant
surface    For digital products & services,“form” is more than the surface pixels.
visualsinteractions  structure    For digital products & services,“form” is more than the surface pixels.
visualsinteractions  structure      brand consumer               Authentic + Relevant
Android DesignGET STARTEDCreative VisionDesign PrinciplesUI OverviewSTYLEPATTERNSBUILDING BLOCKSDEVELOPERS                ...
ContextsPlatforms
DesignLanguageContextsPlatforms
Philosophy   + Instruction Manual    Document the system
visualsinteractionsstructurebrandconsumer
The Consumer
ld er    cehoP la App Store
Define the target & profiles          Ziba + SiriusXM
Your Brand
The “B” Word
Brand is a promise
thinkingintroverted              extroverted              feeling   What’s the personality of         your brand?
A recent brand exercise at ZibaStarted with 2 brand characters
QUEEN ELIZABETH                  Planned                  Steady                  Refined                  Traditional     ...
CHE GUEVARA              Adventure              Revolution              Chaos              Idealistic              Poetic ...
Visually tell the story of your brand.      What do you aspire to?
successfulusable            application                  of brand         unique
Structure
Simplicity comes from the structure
Interaction
Visuals
Visceral elementsColorTypographyIconographyLayoutsMessaging VoiceMotion Design
Windows Metro Visual Theme
Android      iOS         Windows                            PhoneBe a good citizen on each platform
Case Studies
ChallengeHow do you revive an analog iconin the digital age?
TDK Integrated Product + Interaction         Design Language
TDK’s BrandHeritage in music culture
Features that define the products
Analog KnobsFeatures that define the products
Digital Contextual ControlsFeatures that define the products
Music PulseFeatures that define the products
08                                                                                                                        ...
Visual Palette
ChallengeSimplify access to digital media for anew consumer.
StructureClear top-level sections
InteractionsCollage facilitates discovery
InteractionsGrid provides familiarity
VisualsInspiration & theming
VoiceEstablish a character
Some Learnings
Feature A   Feature B   Feature C          Feature A   Feature B   Feature C          Feature A   Feature B   Feature CTra...
Feature A   Feature B   Feature C         Feature A   Feature B   Feature C         Feature A   Feature B   Feature CTry d...
visualsinteractions  structure      brand consumer
We aredigital productdesigners now.
Thanks!Mike Lemmon@mikelemmonZiba is hiring in Portland!ziba.com/careers
Creative CommonsImage Attributionhttp://www.flickr.com/photos/timmythesuk/2260171886/http://www.flickr.com/photos/lyza/49545...
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Design Language for Interactions
Upcoming SlideShare
Loading in...5
×

Design Language for Interactions

3,011

Published on

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?

Published in: Design, Technology, Business

Design Language for Interactions

  1. 1. DesignLanguage forInteractionsMike Lemmon@mikelemmon
  2. 2. Hello!
  3. 3. Background
  4. 4. Once upon a time...
  5. 5. Once great products have become digitized
  6. 6. But often,something gets lostin translation.
  7. 7. We risk a digital dilution
  8. 8. We can learn fromindustrial design.
  9. 9. We see design language everywhere Ziba + KitchenAid
  10. 10. We see design language everywhere
  11. 11. We see design language everywhere
  12. 12. We see design language everywhere
  13. 13. “Form Language” — Jacob Jensen
  14. 14. surfacematerial colorfunctionFor industrial design, it starts with the elements of form
  15. 15. surface material color function brandconsumer Authentic + Relevant
  16. 16. surface For digital products & services,“form” is more than the surface pixels.
  17. 17. visualsinteractions structure For digital products & services,“form” is more than the surface pixels.
  18. 18. visualsinteractions structure brand consumer Authentic + Relevant
  19. 19. Android DesignGET STARTEDCreative VisionDesign PrinciplesUI OverviewSTYLEPATTERNSBUILDING BLOCKSDEVELOPERS 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
  20. 20. ContextsPlatforms
  21. 21. DesignLanguageContextsPlatforms
  22. 22. Philosophy + Instruction Manual Document the system
  23. 23. visualsinteractionsstructurebrandconsumer
  24. 24. The Consumer
  25. 25. ld er cehoP la App Store
  26. 26. Define the target & profiles Ziba + SiriusXM
  27. 27. Your Brand
  28. 28. The “B” Word
  29. 29. Brand is a promise
  30. 30. thinkingintroverted extroverted feeling What’s the personality of your brand?
  31. 31. A recent brand exercise at ZibaStarted with 2 brand characters
  32. 32. QUEEN ELIZABETH Planned Steady Refined Traditional Poised Expensive Conservative
  33. 33. CHE GUEVARA Adventure Revolution Chaos Idealistic Poetic Dreamer Driven
  34. 34. Visually tell the story of your brand. What do you aspire to?
  35. 35. successfulusable application of brand unique
  36. 36. Structure
  37. 37. Simplicity comes from the structure
  38. 38. Interaction
  39. 39. Visuals
  40. 40. Visceral elementsColorTypographyIconographyLayoutsMessaging VoiceMotion Design
  41. 41. Windows Metro Visual Theme
  42. 42. Android iOS Windows PhoneBe a good citizen on each platform
  43. 43. Case Studies
  44. 44. ChallengeHow do you revive an analog iconin the digital age?
  45. 45. TDK Integrated Product + Interaction Design Language
  46. 46. TDK’s BrandHeritage in music culture
  47. 47. Features that define the products
  48. 48. Analog KnobsFeatures that define the products
  49. 49. Digital Contextual ControlsFeatures that define the products
  50. 50. Music PulseFeatures that define the products
  51. 51. 08 Key Scenarios (screens not to scale) FROM ANY SOURCE: Change EQ 10 seconds Press + Release or EQ Button Selection Knob Clockwise 5x BACK EQFrom 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
  52. 52. Visual Palette
  53. 53. ChallengeSimplify access to digital media for anew consumer.
  54. 54. StructureClear top-level sections
  55. 55. InteractionsCollage facilitates discovery
  56. 56. InteractionsGrid provides familiarity
  57. 57. VisualsInspiration & theming
  58. 58. VoiceEstablish a character
  59. 59. Some Learnings
  60. 60. Feature A Feature B Feature C Feature A Feature B Feature C Feature A Feature B Feature CTraditional approach creates silos by product
  61. 61. Feature A Feature B Feature C Feature A Feature B Feature C Feature A Feature B Feature CTry designing by feature, rather than by product
  62. 62. visualsinteractions structure brand consumer
  63. 63. We aredigital productdesigners now.
  64. 64. Thanks!Mike Lemmon@mikelemmonZiba is hiring in Portland!ziba.com/careers
  65. 65. Creative CommonsImage Attributionhttp://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..

×