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


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




                            ...
the Intro
                    I don’t know it all

these lessons won’t work in every case

                 here’s what I ...
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!




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

  mockups are SOOOOOO important!

    your UI should depend on 2...
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...
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?




                                  ...
the fourohfour is important too

always have a search

error, no page, permissions?

links + a back link




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




                                  ...
...more UI techniques
be consistent with element placement!

DO NOT depend on icons

simple is better




                ...
Key Points
subtraction is iteration too

             get feedback

             get out there!

                minimalis...
A Few Resources
smashingmagazine.com
/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
...
I’m derekbender

twitter: @derekbender

derekbender.com


memberfuse.com

nfistudios.com




                        Photo ...
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
The Path to Designing Better UI
Upcoming SlideShare
Loading in...5
×

The Path to Designing Better UI

2,139

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,139
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
204
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide


















































  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×