Designing a Great UI     Fred Spencer
§  Started designing and building UI                     for bulletin board systems in ‘92                   §  Digital ...
Clockwork Orange © Warner Bros.Kubrick & Miyazaki
Design is in the details
Details are both what you introduce     and what you take away.
Don’t swim in the   Sea of Details. Don’t wade in theRiver of Overdesign.
Photo by ThinkGeek
WHaT IS UI?
UX !== UI
Ultimately, UX is about building products   that people want and love to use.   UI design is how we support that awesome e...
UX is driven by how we solve problems.      UI is our implementation.
HOW QUICK IS zero to a-Ha?
§  As quickly as possible…                §  Communicate and reinforceZero to A-Ha?     context with very little…       ...
The Elevator Button Problem
Modern hardware and the iOSplatform have enabled developers,   raising user awareness and         expectations.
BE Inspired
Dribbble, Cargo Collective,    and the restroom.
PRINCIPLES aND PROCESS
§  Identify apps that you,                    colleagues, friends, family                    and complete strangersGettin...
Audiences will rant and rave      no matter what.These are opportunities to       iterate, but…
§  Use grids to assist in creating              compositional harmony…            §  Build your interaction zonesWhat yo...
Whiteboard. Flowchart.Wireframe. Prototype. Do it.
Connect
Motion leads the eye.
Providing movement betweencontexts and requests gives theuser an opportunity to process       their interaction.We call it...
Late Night with Jimmy Fallon (iPhone / Android)
Late Night with Jimmy Fallon (iPhone / Android)
§  Keep animation style consistent              to specific components...            §  Animate color when immediateWhat ...
…don’t follow guidelines,  experiment and get feedback.Motion design is also about voice,  individuality and expression.
Sound?
§  Reinforces memory through                interaction..              §  Is it essential to the experience?Using sound ...
•  Heavily influenced by              product requirements…Common PS   •  Most CommonPatterns              •  Module/Reveal...
RESOURCES
§  boxesandarrows.com         §  alistapart.com/topics/           userscienceAbsorb   §  sixrevisions.com         §  t...
§  dribbble.com          §  colourlovers.com          §  lovedsgn.comInspire   §  behance.net
§  Code (ignore DOM)           §  codecademy.com           §  learn.appendto.comLearn   §  Design           §  lynda....
§  Teehan+Lax         §  bit.ly/iphone-ui-elements         §  bit.ly/android-ui-elements         §  bit.ly/iphone-sket...
§  glyphish.com      §  findicons.com      §  www.zambetti.com/projects/Use     liveview      §  appcooker.com      §...
Designing a Great UI
Designing a Great UI
Designing a Great UI
Designing a Great UI
Designing a Great UI
Upcoming SlideShare
Loading in …5
×

Designing a Great UI

1,279 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,279
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing a Great UI

  1. 1. Designing a Great UI Fred Spencer
  2. 2. §  Started designing and building UI for bulletin board systems in ‘92 §  Digital Media Instructor, RISDAbout me Continuing Education §  Titanium Mobile Core ContributorTwitter @anovice §  Lead architect, motion designer, and co-developer, Late Night with Jimmy Fallon §  Lead architect, motion designer, and developer, NBC iPad
  3. 3. Clockwork Orange © Warner Bros.Kubrick & Miyazaki
  4. 4. Design is in the details
  5. 5. Details are both what you introduce and what you take away.
  6. 6. Don’t swim in the Sea of Details. Don’t wade in theRiver of Overdesign.
  7. 7. Photo by ThinkGeek
  8. 8. WHaT IS UI?
  9. 9. UX !== UI
  10. 10. Ultimately, UX is about building products that people want and love to use. UI design is how we support that awesome experience, by providing a bridge between user interaction and completing tasks.
  11. 11. UX is driven by how we solve problems. UI is our implementation.
  12. 12. HOW QUICK IS zero to a-Ha?
  13. 13. §  As quickly as possible… §  Communicate and reinforceZero to A-Ha? context with very little… §  Can that feature be reduced or removed, entirely? §  Reduce functional complexity…
  14. 14. The Elevator Button Problem
  15. 15. Modern hardware and the iOSplatform have enabled developers, raising user awareness and expectations.
  16. 16. BE Inspired
  17. 17. Dribbble, Cargo Collective, and the restroom.
  18. 18. PRINCIPLES aND PROCESS
  19. 19. §  Identify apps that you, colleagues, friends, family and complete strangersGetting started love and hate… §  What makes them special? §  Color scheme, Navigation, Feature Implementation, etc… Research Plan Initiate
  20. 20. Audiences will rant and rave no matter what.These are opportunities to iterate, but…
  21. 21. §  Use grids to assist in creating compositional harmony… §  Build your interaction zonesWhat you to be as large as possible…should do §  Always view comps on device and show it to others… §  Use branding to inspire, influence, and reinforce… §  Don’t forget about contrast §  Take breaks…
  22. 22. Whiteboard. Flowchart.Wireframe. Prototype. Do it.
  23. 23. Connect
  24. 24. Motion leads the eye.
  25. 25. Providing movement betweencontexts and requests gives theuser an opportunity to process their interaction.We call it “intuitive learning”…
  26. 26. Late Night with Jimmy Fallon (iPhone / Android)
  27. 27. Late Night with Jimmy Fallon (iPhone / Android)
  28. 28. §  Keep animation style consistent to specific components... §  Animate color when immediateWhat you attention is needed...should do §  Keep parallel animation to a minimum... §  Move UI into view from off ‘stage’, fade-in or zoom... §  Keep it short. 250 – 500 milliseconds... §  Or…
  29. 29. …don’t follow guidelines, experiment and get feedback.Motion design is also about voice, individuality and expression.
  30. 30. Sound?
  31. 31. §  Reinforces memory through interaction.. §  Is it essential to the experience?Using sound §  Sound may be muted or difficult to hear… §  Provide setting to disable sounds… §  Use the right audio session… §  Preload to avoid an awkward delay…
  32. 32. •  Heavily influenced by product requirements…Common PS •  Most CommonPatterns •  Module/Revealing Module, Factory •  Upcoming •  CommonJS ‘require’ modules
  33. 33. RESOURCES
  34. 34. §  boxesandarrows.com §  alistapart.com/topics/ userscienceAbsorb §  sixrevisions.com §  thinkvitamin.com §  www.uxmag.com
  35. 35. §  dribbble.com §  colourlovers.com §  lovedsgn.comInspire §  behance.net
  36. 36. §  Code (ignore DOM) §  codecademy.com §  learn.appendto.comLearn §  Design §  lynda.com §  psd.tutsplus.com
  37. 37. §  Teehan+Lax §  bit.ly/iphone-ui-elements §  bit.ly/android-ui-elements §  bit.ly/iphone-sketch-elementsUse §  http://twitter.github.com/ bootstrap/ §  https://github.com/280north/ aristo/
  38. 38. §  glyphish.com §  findicons.com §  www.zambetti.com/projects/Use liveview §  appcooker.com §  balsamiq.com

×