A Short Guide to Polishing Interfaces by Andriew Maier

Artistic Interfaces • Interface as a work of art • Influenced by graphic design, illustration • Immediately noticed: visceral reaction • The design leaves the lasting impression • Brittle: static canvas for single–serving content Application Interfaces • No overarching design, simple colorsshapes • Influenced by operating systems, usability • Generally unnoticed • The functionality leaves the lasting impression • Versatile: dynamic canvas for multi–dimensional content

Polishing Interfaces Andrew Maier August, 2009 Monday, August 10, 2009 Andrew Maier Interaction & User Experience Designer andrew@uxbooth.com @andrewmaier Hello, My name is uxbooth.com hashrocket.com Monday, August 10, 2009 Follow Along http:// uxbooth.com/files/delve/ polish.zip Monday, August 10, 2009 Polishing Interfaces • Artistic Interfaces • Application Interfaces • Polished Interfaces • Creating an Interface • Polishing Techniques • Next Steps Monday, August 10, 2009 Artistic Interfaces Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Artistic Interfaces • Interface as a work of art • Influenced by graphic design, illustration • Immediately noticed: visceral reaction • The design leaves the lasting impression • Brittle: static canvas for single–serving content Monday, August 10, 2009 Application Interfaces Monday, August 10, 2009 [...]...Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Application Interfaces • No overarching design, simple colors/shapes • Influenced by operating systems, usability • Generally unnoticed • The functionality leaves the lasting impression • Versatile: dynamic canvas for multi– dimensional content Monday, August 10, 2009 Polished Interfaces Monday, August 10, 2009 Monday, August... Monday, August 10, 2009 Monday, August 10, 2009 Polished Interfaces • Holistic design, makes use of motifs • Influenced by operating systems & illustration • Noticed upon reflection • Functionality leaves lasting impression • Follows conventions & patterns for ease–of–use through familiarity • Versatile: dynamic canvas for multi– dimensional content Monday, August 10, 2009 Creating an Interface Monday,... Monday, August 10, 2009 Establish a Theme • Grunge • Minimalist, Typography • Metallic, UI • Abstract/Transparency, HUD • Web 2.0 Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Image used with permission from Collis Ta’eed Minimalist Monday, August 10, 2009 Image used with permission from Collis Ta’eed Brushed Metal Monday, August 10, 2009 Image used with permission from Collis Ta’eed... Things to Avoid ‣ Over Polish ‣ Breaking your own conventions ‣ Over/Under–contrast ‣ Bad anti-aliasing & pixel hinting Monday, August 10, 2009 Applied Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Monday, August 10, 2009 Demo Monday, August 10, 2009 Next Steps Monday, August 10, 2009 ... Collis Ta’eed Abstract Monday, August 10, 2009 Image used with permission from Collis Ta’eed Web 2.0 Polish Techniques Monday, August 10, 2009 Polish Techniques Lighting Effects Other Effects ‣ Drop Shadow ‣ Texture & Patterns ‣ Bevel ‣ Dither ‣ Gloss/Glare/Glow ‣ Blur/ Wet Floor ‣ Photo Effects (dodge/burn) ‣ Color/Hue (icons, etc) Monday, August 10, 2009 Things to Avoid ‣ Over Polish ‣ Breaking your