Polishing Interfaces

Polishing Interfaces Andrew Maier August, 2009 Monday, August 10, 2009

Hello, My name is... Andrew Maier Interaction & User Experience Designer andrew@uxbooth.com @andrewmaier 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

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

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

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, August 10, 2009

Establish a Theme • Grunge • Minimalist, Typography • Metallic, UI • Abstract/Transparency, HUD • Web 2.0 Monday, August 10, 2009

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

Abstract Monday, August 10, 2009 Image used with permission from Collis Ta’eed

Web 2.0 Monday, August 10, 2009 Image used with permission from Collis Ta’eed

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 ‣ Color/Hue (icons, etc) (dodge/burn) Monday, August 10, 2009

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

Demo Monday, August 10, 2009

Next Steps Monday, August 10, 2009

Next Steps • Practice, practice, practice • Get inspired, collect inspiration • Read books, read blogs • Discuss, collaborate Monday, August 10, 2009

Get Inspiration http:// http:// bestwebgallery.com abduzeedo.com Monday, August 10, 2009

Collect Inspiration http:// emberapp.com Monday, August 10, 2009

The Non-Designer's Design Book Robin Williams Monday, August 10, 2009

Sexy Web Design Elliot Jay Stocks Monday, August 10, 2009

The Visual Display of Quantitative Information Edward R. Tufte Monday, August 10, 2009

http:// psd.tutsplus.com /category/tutorials http:// tutorial9.net Monday, August 10, 2009

http:// istockphoto.com http:// bittbox.com /category/freebies Monday, August 10, 2009

http:// iconfinder.net http:// smashingmagazine.com /category/fonts Monday, August 10, 2009

Fin Monday, August 10, 2009

http://ojngboog.blogspot.com	9
http://www.slideshare.net	5
http://www.lmodules.com	1
http://health.medicbd.com	1

Polishing Interfaces

by Andrew Maier on Aug 10, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 16

Statistics

Polishing Interfaces — Presentation Transcript