The Path to Designing Better UI

2,344 views
2,286 views

Published on

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

Published in: Technology, Design
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total views
2,344
On SlideShare
0
From Embeds
0
Number of Embeds
231
Actions
Shares
0
Downloads
204
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide


















































  • The Path to Designing Better UI

    1. 1. The Path to Designing Better UI An Actual Designer’s Perspective by derekbender Photo by Wonderlane
    2. 2. the Intro Photo by Wonderlane
    3. 3. the Intro I don’t know it all Photo by Wonderlane
    4. 4. the Intro I don’t know it all these lessons won’t work in every case Photo by Wonderlane
    5. 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. 6. a few things... Photo by Jule_Berlin
    7. 7. a few things... if you think you’re done, your app sucks Photo by Jule_Berlin
    8. 8. a few things... if you think you’re done, your app sucks mockups are SOOOOOO important! Photo by Jule_Berlin
    9. 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. 10. making a User Interface Photo by Trois Tetes (TT) / dope art by Banksy
    11. 11. making a User Interface focus on usability Photo by Trois Tetes (TT) / dope art by Banksy
    12. 12. making a User Interface focus on usability examples & good practices Photo by Trois Tetes (TT) / dope art by Banksy
    13. 13. is it worth it?
    14. 14. use ajax affectively Photo by law_keven
    15. 15. the old way
    16. 16. the new way
    17. 17. front page login Photo by kuschelirme
    18. 18. verdict: bad
    19. 19. Text Text
    20. 20. Text Text verdict: good
    21. 21. Text Text
    22. 22. Text Text
    23. 23. Text verdict: meh Text
    24. 24. Text Text
    25. 25. the fourohfour is important too Photo by ceceyy
    26. 26. the fourohfour is important too Photo by ceceyy
    27. 27. the fourohfour is important too always have a search Photo by ceceyy
    28. 28. the fourohfour is important too always have a search error, no page, permissions? Photo by ceceyy
    29. 29. the fourohfour is important too always have a search error, no page, permissions? links + a back link Photo by ceceyy
    30. 30. take advantage of css3
    31. 31. take advantage of css3 border-radius
    32. 32. take advantage of css3 border-radius box-shadow
    33. 33. take advantage of css3 border-radius box-shadow rgba
    34. 34. take advantage of css3 border-radius box-shadow rgba downgrade gracefully
    35. 35. ...more UI techniques Photo by Ben
    36. 36. ...more UI techniques be consistent with element placement! Photo by Ben
    37. 37. ...more UI techniques be consistent with element placement! DO NOT depend on icons Photo by Ben
    38. 38. ...more UI techniques be consistent with element placement! DO NOT depend on icons simple is better Photo by Ben
    39. 39. Key Points subtraction is iteration too get feedback get out there! minimalism common sense goes a long way Photo by publicenergy
    40. 40. 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
    41. 41. I’m derekbender twitter: @derekbender derekbender.com memberfuse.com nfistudios.com Photo by kuschelirme

    ×