Designing a Great UI
- 1. Designing a GreatUI Fred Spencer
- 2. § Started designingand building UI for bulletin board systems in ‘92 § Digital Media Instructor, RISD About me Continuing Education § Titanium Mobile Core Contributor Twitter @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 inthe details
- 5. Details are bothwhat you introduce and what you take away.
- 7. Don’t swim inthe Sea of Details. Don’t wade in the River of Overdesign.
- 8.
- 9.
- 10.
- 11. Ultimately, UX isabout 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.
- 12. UX is drivenby how we solve problems. UI is our implementation.
- 13. HOW QUICK ISzero to a-Ha?
- 14. § As quicklyas possible… § Communicate and reinforce Zero to A-Ha? context with very little… § Can that feature be reduced or removed, entirely? § Reduce functional complexity…
- 15. The Elevator ButtonProblem
- 17. Modern hardware andthe iOS platform have enabled developers, raising user awareness and expectations.
- 18.
- 20. Dribbble, Cargo Collective, and the restroom.
- 21.
- 22. § Identify appsthat you, colleagues, friends, family and complete strangers Getting started love and hate… § What makes them special? § Color scheme, Navigation, Feature Implementation, etc… Research Plan Initiate
- 23. Audiences will rantand rave no matter what. These are opportunities to iterate, but…
- 24. § Use gridsto assist in creating compositional harmony… § Build your interaction zones What 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…
- 25.
- 26.
- 28. Motion leads theeye.
- 29. Providing movement between contextsand requests gives the user an opportunity to process their interaction. We call it “intuitive learning”…
- 30. Late Night withJimmy Fallon (iPhone / Android)
- 31. Late Night withJimmy Fallon (iPhone / Android)
- 32. § Keep animationstyle consistent to specific components... § Animate color when immediate What 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…
- 33. …don’t follow guidelines, experiment and get feedback. Motion design is also about voice, individuality and expression.
- 34.
- 35. § Reinforces memorythrough 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…
- 36. • Heavily influencedby product requirements… Common PS • Most Common Patterns • Module/Revealing Module, Factory • Upcoming • CommonJS ‘require’ modules
- 38.
- 39. § boxesandarrows.com § alistapart.com/topics/ userscience Absorb § sixrevisions.com § thinkvitamin.com § www.uxmag.com
- 40. § dribbble.com § colourlovers.com § lovedsgn.com Inspire § behance.net
- 41. § Code (ignoreDOM) § codecademy.com § learn.appendto.com Learn § Design § lynda.com § psd.tutsplus.com
- 42. § Teehan+Lax § bit.ly/iphone-ui-elements § bit.ly/android-ui-elements § bit.ly/iphone-sketch-elements Use § http://twitter.github.com/ bootstrap/ § https://github.com/280north/ aristo/
- 43. § glyphish.com § findicons.com § www.zambetti.com/projects/ Use liveview § appcooker.com § balsamiq.com