Your SlideShare is downloading. ×
Design Language for Interactions
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Language for Interactions


Published on

From my talk at Interactions 12 in Dublin on February 2, 2012. …

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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