Mobile1st ux/ui with Titanium
•
15 gefällt mir•3,814 views
The document discusses mobile first UX/UI design with Titanium. It begins with introductions and definitions of terms like T-shaped skills, user experience design disciplines including user research, interaction design, and visual design. It emphasizes designing for mobile first with responsive design. Examples are given of building cross-platform mobile apps with Titanium, including leveraging various Titanium modules. Tips are provided for coding UX/UI in Titanium like avoiding memory leaks and optimizing performance. Resources for further learning are also included.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Mobile1st ux/ui with Titanium
Ähnlich wie Mobile1st ux/ui with Titanium (20)
Mehr von Alessio Ricco
Mehr von Alessio Ricco (15)
Mobile1st ux/ui with Titanium
- 1. Mobile First UX/UI with Titanium @alessioricco TiConf 2015 Dhaka
- 3. @alessioricco Let me introduce myself not a classic software engineer
- 4. @alessioricco UX Designer ScrumMaster Titan Javascript .net Startupper Community Manager Impro Actor Coach Speaker Software Developer NLP Facilitator Co-Design Appcelerator
- 5. @alessioricco T-shaped skills • The concept of T-shaped skills, or T-shaped persons is a metaphor used in job recruitment to describe the abilities of persons in the workforce. The vertical bar on the T represents the depth of related skills and expertise in a single field, whereas the horizontal bar is the ability to collaborate across disciplines with experts in other areas and to apply knowledge in areas of expertise other than one's own. http://en.wikipedia.org/wiki/T-shaped_skills
- 8. @alessioricco UX design User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. User experience design encompasses traditional human– computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. User experience is any aspect of a person's interaction with a given IT system, including the interface, graphics, industrial design, physical interaction, and the manual.[3] http://en.wikipedia.org/wiki/User_experience_design
- 9. @alessioricco UX Disciplines • User Research • Content Strategy • Information Architecture • Interaction Design • Visual Design • Usability Evaluation http://www.slideshare.net/nickf/the-ux-disciplines UX Disciplines
- 12. @alessioricco Interaction Design In design, human–computer interaction, and software development, interaction design, often abbreviated IxD, is "about shaping digital things for people’s use”, alternately defined as "the practice of designing interactive digital products, environments, systems, and services." What clearly marks interaction design as a design field as opposed to a science or engineering field is that it is synthesis and imagining things as they might be, more so than focusing on how things are. http://en.wikipedia.org/wiki/Interaction_design UX Disciplines
- 14. @alessioricco Mobile First Mobile first RWD 1. Allows websites to reach more people (77% of the world’s population has a mobile device, 85% of phones sold in 2011 equipped with browser) 2. Forces designers to focus on core content and functionality (What do you do when you lose 80% of your screen real estate?) 3. Lets designers innovate and take advantage of new technologies (geolocation, touch events and more) http://web3canvas.com/what-is-mobile-first-responsive-design/
- 16. @alessioricco Type of Interactions • Lookup/Find (urgent/ local) Eg. “Where’s the nearest restaurant ?” “Where is the street I’m looking for ?”
- 17. @alessioricco Type of Interactions • Explore/Play (bored / local) “Let me see the news feed” Watching our list of twitter followers Finding the soulmate on a dating app
- 18. @alessioricco Type of Interactions • Checkin/Status (repeat / microtasking) Checking the email Watching our Likes on FB Tweet something important for us
- 19. @alessioricco Type of Interactions • Edit/Create (urgent / microtasking) Send an important message, email, sms Payment Downloading a file Fill a form
- 21. @alessioricco
- 22. @alessioricco
- 24. @alessioricco A real world example 2 dev 1 int. designer 15 days android / iOS http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
- 25. @alessioricco A real world example http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/ ds.slideMenu webView wordpress
- 26. @alessioricco A real world example http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
- 27. @alessioricco A real world example ACS Custom Widget com.mcongrove.tabs http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
- 28. @alessioricco listView custom chat server (REST) network aware smooth scrolling NO NATIVE MODULES! & CROSS PLATFORM ACS Push notification via chat server http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/ backgroundRightCap
- 34. @alessioricco Wikitude BUILT FOR TITANIUM 3D MODELS AND ANIMATIONS IMAGE RECOGNITION AND TRACKING LOCATION-BASED SERVICES WITH GEO DATA VIDEO AUGMENTATIONS http://www.wikitude.com/products/extensions/titanium-module-augmented-reality/
- 35. @alessioricco SoniaVillanueva and Javier Rayonhttp://www.uxmobilepatterns.com/
- 38. @alessioricco Memory Leaks • Memory Leaks are the worst enemy! • Use inspector and DDMS • Remove UI objects and null their references • Always remove the event listeners (close event) • Be careful with closures • Don’t pollute the global scope • Avoid Ti.App events
- 39. @alessioricco Optimization • Cache your data • Be careful with the images • Use the font libraries for the symbols • Don’t abuse of the Ti.Platform properties • Pay attention at the unattended double clicks • Open your windows/views immediately showing cached and local data
- 40. @alessioricco And…. Always Keep It Super Simple!
- 41. @alessioricco Some links Fifty Shades of Alloy http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry http://blog.careerfoundry.com/the-difference-between-ux-and-ui-design-a-laymans-guide/ http://weblogs.asp.net/craigshoemaker/history-of-user-experience http://www.slideshare.net/nickf/the-ux-disciplines http://www.meetup.com/NYC-Titanium-Users-Group/events/120510002/ http://vincentjordan.com/2011/10/designing-great-ux-via-appcelerator-titanium/ http://shortboredsurfer.com/2010/08/11-principles-of-interaction-design-explained/ http://www.amazon.com/Mobile-First-Luke-Wroblewski/dp/1937557022 http://vimeopro.com/appcelerator/advanced-titanium-mobile-development/video/44338177