polishing interfaces

72
POLISHING Interfaces Andrew Maier Sunday, March 28, 2010

Upload: ux-booth

Post on 28-Jan-2015

132 views

Category:

Design


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Polishing Interfaces

POLISHING

InterfacesAndrew Maier

Sunday, March 28, 2010

Page 2: Polishing Interfaces

Andrew Maier

[email protected]@andrewmaier

Interaction Designer &User Experience Enthusiast

Sunday, March 28, 2010

Page 3: Polishing Interfaces

Follow Alonghttp://designerandrew.com/files/polish.zip

Sunday, March 28, 2010

Page 4: Polishing Interfaces

Interface Types

Sunday, March 28, 2010

Page 5: Polishing Interfaces

ArtisticSunday, March 28, 2010

Page 6: Polishing Interfaces

Sunday, March 28, 2010

Page 7: Polishing Interfaces

Sunday, March 28, 2010

Page 8: Polishing Interfaces

Sunday, March 28, 2010

Page 9: Polishing Interfaces

ARTSY

Sunday, March 28, 2010

Page 10: Polishing Interfaces

VISUAL ART

Sunday, March 28, 2010

Page 11: Polishing Interfaces

NOTICED

Sunday, March 28, 2010

Page 12: Polishing Interfaces

IMPRESSION

Sunday, March 28, 2010

Page 13: Polishing Interfaces

BRITTLE

Sunday, March 28, 2010

Page 14: Polishing Interfaces

Application

Sunday, March 28, 2010

Page 15: Polishing Interfaces

Sunday, March 28, 2010

Page 16: Polishing Interfaces

Sunday, March 28, 2010

Page 17: Polishing Interfaces

Sunday, March 28, 2010

Page 18: Polishing Interfaces

SIMPLE

Sunday, March 28, 2010

Page 19: Polishing Interfaces

OS’s

Sunday, March 28, 2010

Page 20: Polishing Interfaces

UNNOTICED

Sunday, March 28, 2010

Page 21: Polishing Interfaces

IMPRESSION

Sunday, March 28, 2010

Page 22: Polishing Interfaces

RESILIENT

Sunday, March 28, 2010

Page 23: Polishing Interfaces

Polishe! .Sunday, March 28, 2010

Page 24: Polishing Interfaces

Sunday, March 28, 2010

Page 25: Polishing Interfaces

Sunday, March 28, 2010

Page 26: Polishing Interfaces

Sunday, March 28, 2010

Page 27: Polishing Interfaces

Sunday, March 28, 2010

Page 28: Polishing Interfaces

HOLISTIC

Sunday, March 28, 2010

Page 29: Polishing Interfaces

INFLUENCED

Sunday, March 28, 2010

Page 30: Polishing Interfaces

PATTERNS

Sunday, March 28, 2010

Page 31: Polishing Interfaces

NOTICED

Sunday, March 28, 2010

Page 32: Polishing Interfaces

IMPRESSION

Sunday, March 28, 2010

Page 33: Polishing Interfaces

RESILIENT

Sunday, March 28, 2010

Page 34: Polishing Interfaces

INTERFACE Creation

Sunday, March 28, 2010

Page 35: Polishing Interfaces

1 ESTABLISH a

ThemeSunday, March 28, 2010

Page 36: Polishing Interfaces

• Grunge

•Minimalist, Typography

•Metallic, UI

• Abstract/Transparency, HUD

•Web 2.0

Establish a Theme

Sunday, March 28, 2010

Page 37: Polishing Interfaces

Gru

nge

Imag

e us

ed w

ith p

erm

issi

on fr

om C

ollis

Ta’

eed

Sunday, March 28, 2010

Page 38: Polishing Interfaces

Min

imal

ist

Imag

e us

ed w

ith p

erm

issi

on fr

om C

ollis

Ta’

eed

Sunday, March 28, 2010

Page 39: Polishing Interfaces

Brus

hed

Met

alIm

age

used

with

per

mis

sion

from

Col

lis T

a’ee

d

Sunday, March 28, 2010

Page 40: Polishing Interfaces

Abs

trac

tIm

age

used

with

per

mis

sion

from

Col

lis T

a’ee

d

Sunday, March 28, 2010

Page 41: Polishing Interfaces

Web

2.0

Imag

e us

ed w

ith p

erm

issi

on fr

om C

ollis

Ta’

eed

Sunday, March 28, 2010

Page 42: Polishing Interfaces

2 PICK a SENSIBLE

LayoutSunday, March 28, 2010

Page 43: Polishing Interfaces

Sunday, March 28, 2010

Page 44: Polishing Interfaces

Sunday, March 28, 2010

Page 45: Polishing Interfaces

Sunday, March 28, 2010

Page 46: Polishing Interfaces

Sunday, March 28, 2010

Page 47: Polishing Interfaces

Sunday, March 28, 2010

Page 48: Polishing Interfaces

Sunday, March 28, 2010

Page 49: Polishing Interfaces

3 GET WITH THE

PolishSunday, March 28, 2010

Page 50: Polishing Interfaces

Lighting Effects

‣ Drop Shadow

‣ Bevel

‣ Gloss/Glare/Glow

‣ Photo Effects (dodge/burn)

Other Effects

‣ Texture & Patterns

‣ Dither

‣ Blur/ Wet Floor

‣ Color/Hue (icons, etc)

Polish Techniques

Sunday, March 28, 2010

Page 51: Polishing Interfaces

Things to Avoid‣ Over Polish

‣ Breaking your own conventions

‣ Over/Under–contrast

‣ Bad anti-aliasing & pixel hinting

Sunday, March 28, 2010

Page 52: Polishing Interfaces

INAction

Sunday, March 28, 2010

Page 53: Polishing Interfaces

Sunday, March 28, 2010

Page 54: Polishing Interfaces

Sunday, March 28, 2010

Page 55: Polishing Interfaces

Sunday, March 28, 2010

Page 56: Polishing Interfaces

Sunday, March 28, 2010

Page 57: Polishing Interfaces

DEMO

Sunday, March 28, 2010

Page 58: Polishing Interfaces

NEXT Steps

Sunday, March 28, 2010

Page 59: Polishing Interfaces

PRACTICE

Sunday, March 28, 2010

Page 60: Polishing Interfaces

INSPIRE

Sunday, March 28, 2010

Page 61: Polishing Interfaces

READ

Sunday, March 28, 2010

Page 62: Polishing Interfaces

DISCUSS

Sunday, March 28, 2010

Page 63: Polishing Interfaces

Get Inspiration

http://bestwebgallery.com

http://abduzeedo.com

Sunday, March 28, 2010

Page 64: Polishing Interfaces

Collect Inspiration

http://emberapp.com

Sunday, March 28, 2010

Page 65: Polishing Interfaces

The Non-Designer's Design BookRobin Williams

Sunday, March 28, 2010

Page 66: Polishing Interfaces

Sexy Web DesignElliot Jay Stocks

Sunday, March 28, 2010

Page 67: Polishing Interfaces

The Visual Display of Quantitative InformationEdward R. Tufte

Sunday, March 28, 2010

Page 71: Polishing Interfaces

http://uxbooth.com

Sunday, March 28, 2010