Design Language for Interactions

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

“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 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

ContextsPlatforms

DesignLanguageContextsPlatforms

Philosophy + Instruction Manual Document the system

visualsinteractionsstructurebrandconsumer

The Consumer

ld er cehoP la App Store

Deﬁne the target & proﬁles 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 Reﬁned Traditional Poised Expensive Conservative

CHE GUEVARA Adventure Revolution Chaos Idealistic Poetic Dreamer Driven

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 deﬁne the products

Analog KnobsFeatures that deﬁne the products

Digital Contextual ControlsFeatures that deﬁne the products

Music PulseFeatures that deﬁne the products

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

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 CTraditional approach creates silos by product

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

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/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..

Design Language for Interactions

by Mike Lemmon

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 12

Statistics