Your SlideShare is downloading. ×
  • Like
  • Save
Designing a Great UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Designing a Great UI

  • 1,141 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Designing a Great UI Fred Spencer
  • 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. Clockwork Orange © Warner Bros.Kubrick & Miyazaki
  • 4. Design is in the details
  • 5. Details are both what you introduce and what you take away.
  • 6. Don’t swim in the Sea of Details. Don’t wade in theRiver of Overdesign.
  • 7. Photo by ThinkGeek
  • 8. WHaT IS UI?
  • 9. UX !== UI
  • 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. UX is driven by how we solve problems. UI is our implementation.
  • 12. HOW QUICK IS zero to a-Ha?
  • 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. The Elevator Button Problem
  • 15. Modern hardware and the iOSplatform have enabled developers, raising user awareness and expectations.
  • 16. BE Inspired
  • 17. Dribbble, Cargo Collective, and the restroom.
  • 18. PRINCIPLES aND PROCESS
  • 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. Audiences will rant and rave no matter what.These are opportunities to iterate, but…
  • 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. Whiteboard. Flowchart.Wireframe. Prototype. Do it.
  • 23. Connect
  • 24. Motion leads the eye.
  • 25. Providing movement betweencontexts and requests gives theuser an opportunity to process their interaction.We call it “intuitive learning”…
  • 26. Late Night with Jimmy Fallon (iPhone / Android)
  • 27. Late Night with Jimmy Fallon (iPhone / Android)
  • 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. …don’t follow guidelines, experiment and get feedback.Motion design is also about voice, individuality and expression.
  • 30. Sound?
  • 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. •  Heavily influenced by product requirements…Common PS •  Most CommonPatterns •  Module/Revealing Module, Factory •  Upcoming •  CommonJS ‘require’ modules
  • 33. RESOURCES
  • 34. §  boxesandarrows.com §  alistapart.com/topics/ userscienceAbsorb §  sixrevisions.com §  thinkvitamin.com §  www.uxmag.com
  • 35. §  dribbble.com §  colourlovers.com §  lovedsgn.comInspire §  behance.net
  • 36. §  Code (ignore DOM) §  codecademy.com §  learn.appendto.comLearn §  Design §  lynda.com §  psd.tutsplus.com
  • 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. §  glyphish.com §  findicons.com §  www.zambetti.com/projects/Use liveview §  appcooker.com §  balsamiq.com