Advanced titanium for i os
1 like359 views
This document provides tips and guidance for designing great user interfaces (UI). It discusses starting with research to understand what users love and hate in other apps. The key aspects of UI design covered are reducing complexity, using grids and sizing interaction zones appropriately, incorporating branding, and ensuring adequate contrast. Animation and motion are addressed as ways to guide user attention and reinforce interactions. Sound, common patterns, and resources for continuing to learn and be inspired are also mentioned.
Advanced titanium for i os
- 1. Designing a Great UI Fred Spencer
- 2. § Started designing and 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 in the details
- 5. Details are both what you introduce and what you take away.
- 7. Don’t swim in the Sea of Details. Don’t wade in the River of Overdesign.
- 9. WHaT IS UI?
- 10. UX !== UI
- 11. 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.
- 12. UX is driven by how we solve problems. UI is our implementation.
- 13. HOW QUICK IS zero to a-Ha?
- 14. § As quickly as possible… § Communicate and reinforce Zero to A-Ha? context with very little… § Can that feature be reduced or removed, entirely? § Reduce functional complexity…
- 17. Modern hardware and the iOS platform have enabled developers, raising user awareness and expectations.
- 18. BE Inspired
- 20. Dribbble, Cargo Collective, and the restroom.
- 22. § Identify apps that you, colleagues, friends, family and complete strangers love Getting started and hate… § What makes them special? § Color scheme, Navigation, Feature Implementation, etc… Research Plan Initiate
- 23. Audiences will rant and rave no matter what. These are opportunities to iterate, but…
- 24. § Use grids to assist in creating compositional harmony… § Build your interaction zones to What you 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. Whiteboard. Flowchart. Wireframe. Prototype. Do it.
- 26. Connect
- 28. Motion leads the eye.
- 29. Providing movement between contexts and requests gives the user an opportunity to process their interaction. We call it “intuitive learning”…
- 30. Late Night with Jimmy Fallon (iPhone / Android)
- 31. Late Night with Jimmy Fallon (iPhone / Android)
- 32. § Keep animation style 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. Sound?
- 35. § 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…
- 36. • Heavily influenced by product requirements… Common PS • Most Common Patterns • Module/Revealing Module, Factory • Upcoming • CommonJS ‘require’ modules
- 38. RESOURCES
- 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 (ignore DOM) § 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