Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fred Spencer: Designing a Great UI

1,579 views

Published on

The cornerstone of UX, user interface design presents unique, user-centric challenges, exposing exciting opportunities to produce cohesive and engaging interactive experiences. Covering mobile-specific UI principles, practical implementation and rule breaking, Fred Spencer will share with you how the Titanium platform can make it easy to meaningfully improve user experience and exceed user expectations.

Located in the greater Boston area, Fred Spencer is an Appcelerator senior application architect and digital media instructor at the Rhode Island School of Design, Continuing Education.

Published in: Technology, News & Politics
  • Be the first to comment

Fred Spencer: 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

×