The Path to Designing
Better UI
An Actual Designer’s Perspective
by derekbender
Photo by Wonderlane

the Intro
Photo by Wonderlane

the Intro
I don’t know it all
Photo by Wonderlane

the Intro
I don’t know it all
these lessons won’t work in every case
Photo by Wonderlane

the Intro
I don’t know it all
these lessons won’t work in every case
here’s what I learned
Photo by Wonderlane

a few things...
Photo by Jule_Berlin

a few things...
if you think you’re done, your app sucks
Photo by Jule_Berlin

a few things...
if you think you’re done, your app sucks
mockups are SOOOOOO important!
Photo by Jule_Berlin

a few things...
if you think you’re done, your app sucks
mockups are SOOOOOO important!
your UI should depend on 2 things:
your users
your goals
Photo by Jule_Berlin

making a User Interface
Photo by Trois Tetes (TT) / dope art by Banksy

making a User Interface
focus on usability
Photo by Trois Tetes (TT) / dope art by Banksy

making a User Interface
focus on usability
examples & good practices
Photo by Trois Tetes (TT) / dope art by Banksy

is it worth it?

use ajax affectively
Photo by law_keven

the old way

the new way

front page login
Photo by kuschelirme

verdict: bad

Text
Text

Text
Text
verdict: good

Text
Text

Text
Text

Text
verdict: meh
Text

Text
Text

the fourohfour is important too
Photo by ceceyy

the fourohfour is important too
Photo by ceceyy

the fourohfour is important too
always have a search
Photo by ceceyy

the fourohfour is important too
always have a search
error, no page, permissions?
Photo by ceceyy

the fourohfour is important too
always have a search
error, no page, permissions?
links + a back link
Photo by ceceyy

take advantage of css3

take advantage of css3
border-radius

take advantage of css3
border-radius
box-shadow

take advantage of css3
border-radius
box-shadow
rgba

take advantage of css3
border-radius
box-shadow
rgba
downgrade gracefully

...more UI techniques
Photo by Ben

...more UI techniques
be consistent with element placement!
Photo by Ben

...more UI techniques
be consistent with element placement!
DO NOT depend on icons
Photo by Ben

...more UI techniques
be consistent with element placement!
DO NOT depend on icons
simple is better
Photo by Ben

Key Points
subtraction is iteration too
get feedback
get out there!
minimalism
common sense goes
a long way
Photo by publicenergy

A Few Resources
smashingmagazine.com
/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
/2009/02/18/9-common-usability-blunders/
Daniel Burka’s Design Lessons Learned in the Trenches
http://events.carsonified.com/fowa/2009/miami/slideshows/daniel-burka
Steven Krug’s Don’t Make Me Think
PSDTUTS.com
psd.tutsplus.com/articles/6-interface-design-principles-and-tips-every-web-designer-should-know/
UXbooth.com — good stuff!
Photo by lord marmalade

I’m derekbender
twitter: @derekbender
derekbender.com
memberfuse.com
nfistudios.com
Photo by kuschelirme