advanced titanium for i os
TRANSCRIPT
About me
§ Started designing and building UI
for bulletin board systems in ‘92
§ Digital Media Instructor, RISD
Continuing Education
§ Titanium Mobile Core Contributor
§ Lead architect, motion designer,
and co-developer, Late Night with
Jimmy Fallon
§ Lead architect, motion designer,
and developer, NBC iPad
Twitter @anovice
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.
Zero to A-Ha?
§ As quickly as possible…
§ Communicate and reinforce
context with very little…
§ Can that feature be reduced
or removed, entirely?
§ Reduce functional
complexity…
Modern hardware and the iOS
platform have enabled developers,
raising user awareness and
expectations.
Getting started
§ Identify apps that you,
colleagues, friends, family
and complete strangers love
and hate…
§ What makes them special?
§ Color scheme, Navigation,
Feature Implementation,
etc…
Research Plan Initiate
What you should do
§ Use grids to assist in creating
compositional harmony…
§ Build your interaction zones to
be as large as possible…
§ Always view comps on device
and show it to others…
§ Use branding to inspire,
influence, and reinforce…
§ Don’t forget about contrast
§ Take breaks…
Providing movement between
contexts and requests gives the
user an opportunity to process their
interaction.
We call it “intuitive learning”…
What you should do
§ Keep animation style consistent
to specific components...
§ Animate color when immediate
attention is needed...
§ Keep parallel animation to a
minimum...
§ Move UI into view from off
‘stage’, fade-in or zoom...
§ Keep it short. 250 – 500
milliseconds...
§ Or…
…don’t follow guidelines,
experiment and get feedback.
Motion design is also about voice,
individuality and expression.
Using sound
§ Reinforces memory through
interaction..
§ Is it essential to the experience?
§ Sound may be muted or
difficult to hear…
§ Provide setting to disable
sounds…
§ Use the right audio session…
§ Preload to avoid an awkward
delay…
Common PS Patterns
• Heavily influenced by
product requirements…
• Most Common
• Module/Revealing
Module, Factory
• Upcoming
• CommonJS ‘require’
modules
Absorb
§ boxesandarrows.com
§ alistapart.com/topics/
userscience
§ sixrevisions.com
§ thinkvitamin.com
§ www.uxmag.com
Learn
§ Code (ignore DOM)
§ codecademy.com
§ learn.appendto.com
§ Design
§ lynda.com
§ psd.tutsplus.com
Use
§ Teehan+Lax
§ bit.ly/iphone-ui-elements
§ bit.ly/android-ui-elements
§ bit.ly/iphone-sketch-elements
§ http://twitter.github.com/
bootstrap/
§ https://github.com/280north/
aristo/