Presentation for BarCamp Orlando 3 done on how to make better user interfaces, specifically for web apps. Told from a real designer's perspective.

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

2. the Intro
Photo by Wonderlane

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

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

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

6. a few things...
Photo by Jule_Berlin

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

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

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

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

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

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

17. is it worth it?

23. use ajax affectively
Photo by law_keven

24. the old way

26. the new way

29. front page login
Photo by kuschelirme

31. verdict: bad

32. Text
Text

33. Text
Text
verdict: good

34. Text
Text

35. Text
Text

36. Text
verdict: meh
Text

37. Text
Text

40. the fourohfour is important too
Photo by ceceyy

44. the fourohfour is important too
Photo by ceceyy

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

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

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

48. take advantage of css3

49. take advantage of css3
border-radius

50. take advantage of css3
border-radius
box-shadow

51. take advantage of css3
border-radius
box-shadow
rgba

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

53. ...more UI techniques
Photo by Ben

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

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

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

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

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

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