Ti UX templates
!
www.uxmobilepatterns.com

!
https://github.com/jaraen/uxmobilepatterns
@jrayon @sonianoneka
Slides introduced at tiConf EU 2014
Amsterdam, 28/06/2014
!
What is Ti UX templates project?
!
!
1. a selection of
!
2. that we
CODE
!
3. to
!
STEPS: THE ANALYTIC PROCESS
!
1. we got a selection of
!
- analyzing most used Apps
- looking for best practices
- to se...
!
STEPS: THE ANALYTIC PROCESS
!
2. we
!
- under user centered design principles (UCD)
- applying the Pareto Principle aka ...
!
STEPS: THE ANALYTIC PROCESS
!
3. asked designers to apply
DIFFERENT STYLES
!
- Customizable Alloy Themes
- Based both on...
!
STEPS: THE ANALYTIC PROCESS
!
4. developed
!
- With +20 reusable and customizable
- And several sample templates in one ...
!
STEPS: THE ANALYTIC PROCESS
!
5. and
!
- Wireframes: OmniGraffle/PDF
- Designs: Illustrator/PDF
- Code: Alloy + Titanium ...
!
RESULT: THE SINCRETIC VIEW
wireframes
+ +AT&T 11:56 AM
Back ActionTitle
Title title title title
10€
Saturday, 28th Jun 2...
speech content for today:
!
1. patterns selection and wireframes
2. templates live demo
3. components library and
implemen...
1. ACTIVITY
2.CONTENT DETAIL
3. FORM + SIGN IN & SIGN UP
4. LIST
5. GALLERY
6. SEARCH
!
Keeping in mind ACTIONS&TOOLS over...
content detail_metatemplate
iPhone 5
screen
Saturday, 28th Jun 2014 at 2 pm
Tobacco Theater, Nes 75, Amsterdam
15 470 km30...
AT&T 11:56 AM
Back ActionTitle
Title title title title
10€
Saturday, 28th Jun 2014 at 2 pm
Tobacco Theater, Nes 75, Amster...
AT&T 11:56 AM
Back Title
AT&T 11:56 AM
Back ActionTitle
Title title title title
10€
Saturday, 28th Jun 2014 at 2 pm
Tobacc...
AT&T 11:57 AM
AT&T 11:56 AM
Text text text text text text text text text text
text text text text text text text text text...
AT&T 11:57 AM
AT&T 11:56 AM
Text text text text text text text text text text
text text text text text text text text text...
AT&T 11:57 AM
Repeat
Alert 15 min before
SETTINGS
Show as Busy
Repeat Never
Location
Public in Twitter
Public in Facebook
...
Alert 15 min before
SETTINGS
Show as Busy
Repeat Never
Public in Twitter
Public in Facebook
Add location
Notifications
All ...
Public in Twitter
Public in Facebook
Add location
Every Month
Every Year
...
Notifications
Add invitees
Mail
⃝
⃝
Google
map...
Or mailto window:
AT&T 11:56 AM
Singin Process
First Download
AT&T 11:56 AM
Video
txt txt txt txt txt txt txt txt txt txt ...
AT&T 11:56 AM
Singin Process
First Download
AT&T 11:56 AM
Video
txt txt txt txt txt txt txt txt txt txt txt txt
txt txt tx...
Or mailto window:
AT&T 11:56 AM
Our Nice App
txt txt txt txt txt txt txt txt txt txt txt txt txt
txt txt txt txt txt txt t...
AT&T 11:56 AM
Sign Up
upload your photo
name
If tap modal window:
a! Choose photo
b! Take photo
If does not tap, modal win...
AT&T 11:56 AM
email
WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 GO
name@emailcom
AT&T 11:56 AM
email
WQ E...
AT&T 11:56 AM
skip
mobil number
Caiman Island (+134)
Picker with country +
code !2 columns"
Or new window with
scroll
AT&T...
DEMO
3 keys
	1. Meta structure
The Pareto Principle aka the 80–20 Rule or the Law of the Vital
Few and Trivial Many
from more t...
COMPONENTS LIBRARY 

ALLOY CODE
Franky: a detail view template (1/2)
ti.ux.title
ti.ux.image
ti.ux.iconlabel
ti.ux.scrollableview
ti.ux.alignview
ti.ux.ic...
Franky: a detail view template (2/2)
ti.ux.rowitem
· title, subtitle and count elements
ti.ux.rowitem
· customizable hasCh...
Franky - Alloy XML Code
Settings: A form template
ti.ux.forms.row.switch
· switch button with icon and label
· Font Awesome support
ti.ux.forms.ro...
Settings: A form template
ti.ux.forms.row.optionspicker
· pick one element in 3 different styles
· optionsDialog, popup or ...
Settings - Alloy XML Code
Sign up: A form assistant step-by-step
ti.ux.forms.scrollableform
Create forms by a JSON object
ti.ux.forms.text
· several...
Sign Up - Alloy XML Code
Sign Up - Alloy Controller Javascript Code
Screen size is optimized for
iPhone, although structure and
contents are valid for both
Wireframes Code
Templates work on ...
Alloy Themes
/*ti.ux.pagingcontrol*/	
!
".view-pagingcontrol":{	
	 height:"10",	
//	 backgroundColor:"#fff",	
	 zIndex: "9...
DESIGN BY
@MaiBerreando
sign up&in_login
sign up&in_login
BY NIGHT
BY NIGHT
Welcome!
First, you need to sing with us to access
to our great stuff we made for you.
...
content detail
content detail
forms
WHAT’S NEXT?

Improve performance

Full support android

Code all wireframes

New templates (lists, gallery…)
WEB

GITHUB

!
www.uxmobilepatterns.com

!
https://github.com/jaraen/uxmobilepatterns
CODE BY
Javier Rayón
@jrayon
WIREFRAMES BY
Sonia Villanueva
@sonianoneka
http://uxmobilepatterns.com
Ti u xtemplates_ticonf_amsterdam_2014.key
Ti u xtemplates_ticonf_amsterdam_2014.key
Upcoming SlideShare
Loading in …5
×

Ti u xtemplates_ticonf_amsterdam_2014.key

351 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
351
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ti u xtemplates_ticonf_amsterdam_2014.key

  1. 1. Ti UX templates ! www.uxmobilepatterns.com ! https://github.com/jaraen/uxmobilepatterns @jrayon @sonianoneka
  2. 2. Slides introduced at tiConf EU 2014 Amsterdam, 28/06/2014
  3. 3. ! What is Ti UX templates project? ! ! 1. a selection of ! 2. that we CODE ! 3. to
  4. 4. ! STEPS: THE ANALYTIC PROCESS ! 1. we got a selection of ! - analyzing most used Apps - looking for best practices - to select the most re-usable screens
  5. 5. ! STEPS: THE ANALYTIC PROCESS ! 2. we ! - under user centered design principles (UCD) - applying the Pareto Principle aka 20/80 rule - both on the design of the project and the design of the wireframes - defining re-usable components
  6. 6. ! STEPS: THE ANALYTIC PROCESS ! 3. asked designers to apply DIFFERENT STYLES ! - Customizable Alloy Themes - Based both on basic “wireframe” style and pro designs - Following style name conventions
  7. 7. ! STEPS: THE ANALYTIC PROCESS ! 4. developed ! - With +20 reusable and customizable - And several sample templates in one demo app.
  8. 8. ! STEPS: THE ANALYTIC PROCESS ! 5. and ! - Wireframes: OmniGraffle/PDF - Designs: Illustrator/PDF - Code: Alloy + Titanium 3.2 ! - Available in - documentation at !
  9. 9. ! RESULT: THE SINCRETIC VIEW wireframes + +AT&T 11:56 AM Back ActionTitle Title title title title 10€ Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 1470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text textReserve VIEWS Massive AttackBack T-Mobile 23:17 75% SAT 14 Sonar Club 22:45 - 00:15 Massive Attack escoge Sónar para la presentación de su nuevo espectáculo... Massive Attack escoge Sónar para la presentación de su nuevo espectáculo... now playingnow playing Girl I Love You Heligoland 2010 5:27 Karmacoma Protection 1994 5:16 Playlist See All designs STYLES code CONTROLLERS & &
  10. 10. speech content for today: ! 1. patterns selection and wireframes 2. templates live demo 3. components library and implementation 4. styles customization
  11. 11. 1. ACTIVITY 2.CONTENT DETAIL 3. FORM + SIGN IN & SIGN UP 4. LIST 5. GALLERY 6. SEARCH ! Keeping in mind ACTIONS&TOOLS over the content (behaviors, share, geolocation, routing, reservations…) and GESTURES
  12. 12. content detail_metatemplate iPhone 5 screen Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Rating 9 Photos 20 Comments 10 nombre usuario 20 jun 2014 Text text text text text text text text text text text text text text text text text text nombre usuario 10 may 2014 Text text text text text text text text text text text text text text text text text text Hotels 9 Restaurants 20 Write a comment Twitter Pinterest Tumblr Vine / Instagram . . . . Share You can invite to your friends and share this content Social content Boundary area main action Secondary info iPhone 5 screen iPhone 5 screen AT&T 11:56 AM Back ActionTitle Title title title title 10€ Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Write a comment Twitter Tumblr You can invite to your friends and share this content ID data Name + Photo + very few ID data: + more critical info or actions Social content Boundary area main action iPhone 5 screen AT&T 11:56 AM Back ActionTitle Title title title title 10€ Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Rating 9 Photos 20 Comments 10 nombre usuario 20 jun 2014 Text text text text text text text text text text text text text text text text text text nombre usuario 10 may 2014 Text text text text text text text text text text text text text text text text text text Hotels 9 Restaurants 20 Atractions 10 Bedrooms 1 Bathrooms 20 Material 100% cotton Services See more Map (same link on the top) Pull to previous (pull to next on the top) Write a comment Twitter Pinterest Tumblr Vine / Instagram . . . . Share You can invite to your friends and share this content ID data Name + Photo + very few ID data: + more critical info or actions Social content Boundary area main action Secondary info iPhone 5 screen iPhone 5 screen
  13. 13. AT&T 11:56 AM Back ActionTitle Title title title title 10€ Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 1470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text textReserve Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Back ActionTitle See more Rating 9 Comments 20 Photos 10 nombre usuario 20 jun 2014 Text text text text text text text text text text text text text text text text text text nombre usuario 10 may 2014 Text text text text text text text text text text text text text text text text text text Hotels 9 Restaurants 20 AT&T 11:56 AM Reserve content detail_device view
  14. 14. AT&T 11:56 AM Back Title AT&T 11:56 AM Back ActionTitle Title title title title 10€ Saturday, 28th Jun 2014 at 2 pm Tobacco Theater, Nes 75, Amsterdam 15 470 km30 2027º . . . . . Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Title title title title title title title Bed&Breakfast, Apartment 98% cotton, 2% elastane Reserve Info a) Actio Comme b) Men Section Action Button (Play, Reserve, Buy, Ask, Show prizes…) AT&T 11:56 AM Back ActionTitle Song song song so Band band band band Album album al 0sg Playing from library 12sg Title title title title title title title Bed&Breakfast, Apartment 98% cotton, 2% elastane AT&T 11:56 AM Back Title i Profile Add Photos Bloc iPho content detail_first screen cases mix
  15. 15. AT&T 11:57 AM AT&T 11:56 AM Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Repeat Title Alert 15 min before SETTINGS Show as Busy Repeat Never Instructions Release to close / update Location subsequential navigation (navegación secuencial) Public in Twitter &DROPDOWN NAVIGATION Public in Facebook Add location Never Every Day Every Week Every Month Every Year ... Name of da Notifications All day Starts Ends 28/06/2014 14:00 15:00 Calendar or picker. Secuencial o dropdown? Add invitees Mail ⃝ ⃝ Google maps Am Amman Amman, Jordan Ampuriabrava Girona, Spain Amsterdam North Holland, The Netherlands Q W E R T Y U I O P Single selection on new window DROPDOWN NAVIGATION Tap any part of the raw to drop up Write a comment Add location Keyboard appears or Google Maps f Delete Amsterdam 12 results Keyboard appears AT&T 11:56 AM Title Add to favs Bloc Settings Export Position Send Delete Lock Note Call Videocall Import contactsAT&T 11:57 AM Import contacts AT&T 11:56 AM Import contacts Cancel Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Import from Contacts Import from Facebook Import from Mail Import from Twitter Import from LinkedIn Main action Invitees iCloud ⃝ Message AT&T 11:57 AM Invitees Favorites All your contacts Search by name, nickname or mail Name Nickname Name Nickname ⃝ Or select: Name Nickname Name Nickname ⃝ Name Nickname Name Nickname Name Nickname ⃝ Invite friends AT&T 11:57 AM Comment Multiple selection on drop down WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 return Hi everyone! I’m just typing to show how works this nice layout… . . . . . Name of the event event event Multiple selection on new window (big amount of data) Release to go up form_overview
  16. 16. AT&T 11:57 AM AT&T 11:56 AM Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Repeat Title SETTINGS Show as Busy Repeat Never Instructions Release to close / update Location ation cial) Name of da All day Starts Ends 28/06/2014 14:00 15:00 Calendar or picker. Secuencial o dropdown? Am Amman Amman, Jordan Ampuriabrava Girona, Spain Amsterdam North Holland, The Netherlands Q W E R T Y U I O P Single selection on new window Add location Keyboard appears or Google Maps Keyboard appears AT&T 11:56 AM Title Add to favs Bloc Settings Export Position Send Delete Lock Note Call Videocall Main action Name of the event event event form_first screen
  17. 17. AT&T 11:57 AM Repeat Alert 15 min before SETTINGS Show as Busy Repeat Never Location Public in Twitter Public in Facebook Add location Never Every Day Every Week Every Month Every Year ... Notifications All day Starts Ends 28/06/2014 14:00 15:00 Calendar or picker. Secuencial o dropdown? Add invitees Mail ⃝ ⃝ Google maps Single selection on new window DROPDOWN NAVIGATION Tap any part of the raw to drop up Write a comment f Invitees iCloud ⃝ Message our contacts or mail ⃝ ⃝ ⃝ AT&T 11:57 AM Comment Multiple selection on drop down Multiple selection on new window (big amount of data) form_secondary screens
  18. 18. Alert 15 min before SETTINGS Show as Busy Repeat Never Public in Twitter Public in Facebook Add location Notifications All day Starts Ends 28/06/2014 14:00 15:00 picker. Secuencial o dropdown? Add invitees Mail ⃝ ⃝ Google maps Single selection on new window DROPDOWN NAVIGATION Tap any part of the raw to drop up Write a comment f Invitees iCloud ⃝ Message AT&T 11:57 AM Invitees Favorites All your contacts Search by name, nickname or mail Name Nickname Name Nickname ⃝ Or select: Name Nickname Name Nickname ⃝ Name Nickname Name Nickname Name Nickname ⃝ Invite friends Multiple selection on drop down Multiple selection on new window (big amount of data) form_secondary screens
  19. 19. Public in Twitter Public in Facebook Add location Every Month Every Year ... Notifications Add invitees Mail ⃝ ⃝ Google maps Tap any part of the raw to drop up Write a comment f Delete Import contactsAT&T 11:57 AM Import contacts AT&T 11:56 AM Import contacts Cancel Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Import from Contacts Import from Facebook Import from Mail Import from Twitter Import from LinkedIn Invitees iCloud ⃝ Message Search by name, nickname or mail Name Nickname Name Nickname ⃝ Or select: Name Nickname Name Nickname ⃝ Name Nickname Name Nickname Name Nickname ⃝ Invite friends AT&T 11:57 AM Comment Multiple selection on drop down WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 return Hi everyone! I’m just typing to show how works this nice layout… . . . . . Multiple selection on new window (big amount of data) Release to go up form_secondary screens
  20. 20. Or mailto window: AT&T 11:56 AM Singin Process First Download AT&T 11:56 AM Video txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Continue Highlight s Our Nice App Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up Video AT&T 11:56 AM Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up modal window transparent email password forgot password? AT&T 11:56 AM Login Sign Up upload your photo name WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO If tap modal window: a! Choose photo b! Take photo If does not tap, modal window to remember: a! Skip photo b! Set photo It would be desirable to design a different screen rather than a standard window "as below!, specially with alerts. AT&T 11:56 AM email WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO name@emailcom AT&T 11:56 AM email WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO name@emailco OKCancel Oops! the mail address is not correct! O_o AT&T 11:56 AM password Oops! you may have a password with 2 Uppercase, 23 lowercase and at least 45 numbers with no meaning at all. LOVE! AT&T 11:56 AM name WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO soni scale and move When tap keyboa rd appear s 8 TUV 7 PQRS 9 WXYZ 5 JKL 6 MNO 4 GHI 3 DEF 2 ABC 1 0 chocolate123 AT&T 11:56 AM skip mobil number Caiman Island (+134) Would you like to close your existing pages before turning on Private Browsing? Skip photo? Skip Set photo Picker with country + code "2 columns!, Or "from Viber!: AT&T 11:56 AM DONE mobil number Spain (+34) 676 788 000 8 TUV 7 PQRS 9 WXYZ 5 JKL 6 MNO 4 GHI 3 DEF 2 ABC 1 0 AT&T 11:56 AM welcome to Our Nice App Share Upgrade START! (and find friends) Update your profile Video lo más chulo es poner sólo el start o el find friends, pero depende de cada app… X AT&T 11:56 AM Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up email password forgot password? X WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO sign up&in_overview
  21. 21. AT&T 11:56 AM Singin Process First Download AT&T 11:56 AM Video txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Continue Highlights Our Nice App Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up Video sign up&in_first download
  22. 22. Or mailto window: AT&T 11:56 AM Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up modal window transparent email password forgot password? Login X AT&T 11:56 AM Our Nice App txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt Sign in with Facebook Sign in with Twitter Sign in with Google+ Sign in with Facebook Sign with us I Sign Up email password forgot password? X WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO sign up&in_login
  23. 23. AT&T 11:56 AM Sign Up upload your photo name If tap modal window: a! Choose photo b! Take photo If does not tap, modal window to remember: a! Skip photo b! Set photo It would be desirable to design a different screen rather than a standard window "as below!, specially with alerts. AT&T 11:56 AM name WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO soni scale and move When tap keyboard appears and the content moves upWould you like to close your existing pages before turning on Private Browsing? Skip photo? Skip Set photo sign up&in_name and photo
  24. 24. AT&T 11:56 AM email WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO name@emailcom AT&T 11:56 AM email WQ E R T Y U I O P SA D F G H J K L Z X C V B N M .@space123 GO name@emailco Oops! the mail address is not correct! O_o AT&T 11:56 AM password Oops! you may have a password with 2 Uppercase, 23 lowercase and at least 45 numbers with no meaning at all. LOVE! 8 TUV 7 PQRS 9 WXYZ 5 JKL 6 MNO 4 GHI 3 DEF 2 ABC 1 0 chocolate123 sign up&in_mail and password
  25. 25. AT&T 11:56 AM skip mobil number Caiman Island (+134) Picker with country + code !2 columns" Or new window with scroll AT&T 11:56 AM DONE mobil number Spain (+34) 676 788 000 8 TUV 7 PQRS 9 WXYZ 5 JKL 6 MNO 4 GHI 3 DEF 2 ABC 1 0 AT&T 11:56 AM welcome to Our Nice App Share Upgrade START! (and find friends) Update your profile Video find friends on profile sign up&in_phone number
  26. 26. DEMO
  27. 27. 3 keys 1. Meta structure The Pareto Principle aka the 80–20 Rule or the Law of the Vital Few and Trivial Many from more to less important ! ! 2. Reusable Components as alloy widgets that integrate with standard Titanium components ! ! 3. Customizable Design with examples included, using alloy themes
  28. 28. COMPONENTS LIBRARY ALLOY CODE
  29. 29. Franky: a detail view template (1/2) ti.ux.title ti.ux.image ti.ux.iconlabel ti.ux.scrollableview ti.ux.alignview ti.ux.iconvalue ti.ux.expandabletext · cache remote images · loading indicator · zoom in full screen · supports retina images · parallax FX · supports Font Awesome icons · supports Font Awesome icons · Distribute horizontal elements · Customizable pagingControl · Expand text on touch for full reading
  30. 30. Franky: a detail view template (2/2) ti.ux.rowitem · title, subtitle and count elements ti.ux.rowitem · customizable hasChild property ti.ux.alignview
  31. 31. Franky - Alloy XML Code
  32. 32. Settings: A form template ti.ux.forms.row.switch · switch button with icon and label · Font Awesome support ti.ux.forms.row.text · Support several input types: · text, email, url, number, password, text area · Each type customizes its keyboard and validation method ·Textarea opens a new window on focus ti.ux.forms.row.timepicker · Shows/hide a date/time picker
  33. 33. Settings: A form template ti.ux.forms.row.optionspicker · pick one element in 3 different styles · optionsDialog, popup or modal window · Font Awesome support More Form widgets coming: · Location selector · Multiple selector (in line and in a popup/window) · Picture/Media picker OptionsPickerdialogandpopupscreenshots
  34. 34. Settings - Alloy XML Code
  35. 35. Sign up: A form assistant step-by-step ti.ux.forms.scrollableform Create forms by a JSON object ti.ux.forms.text · several types supported:Automates steps creation Callbacks for cancel, success and fieldValidated events · Create your own validation methods with asynchronous response (i.e. validate if a username already exists in your server) Synchronous and async validation · Includes most popular validators or add your own validate method · text · password · email · phone · number · Keyboard and validation method customized on each type · Properties supported: title, tipText, hintText, mandatory, autofocus and errorMessage · url
  36. 36. Sign Up - Alloy XML Code
  37. 37. Sign Up - Alloy Controller Javascript Code
  38. 38. Screen size is optimized for iPhone, although structure and contents are valid for both Wireframes Code Templates work on both platf, although android is limited in some behaviors. ! Most Widgets works on both platforms, with some limitations on android. The aim is to give full support.
  39. 39. Alloy Themes /*ti.ux.pagingcontrol*/ ! ".view-pagingcontrol":{ height:"10", // backgroundColor:"#fff", zIndex: "999", width: Ti.UI.SIZE }, ".view-pagingcontrol-dot":{ height:4, width:4, borderRadius:2 }, ".view-pagingcontrol-dot-active":{ backgroundColor:"#000" } ".view-pagingcontrol-dot-inactive":{ backgroundColor:"#999" } • All widget styles are defined in app.tss theme file • FontFamily are defined in config.json, for easy customization and used as 
 
 Alloy.CFG.fontNormal fontBold
 • All widget styles follow the same name convention:
 
 TiComponent-[parentcomponent]-[widget]-name-status ! • Templates styles could be defined in your app.tss file, in controller style file or even in your xml file • For reusable views, use theme styles
  40. 40. DESIGN BY @MaiBerreando
  41. 41. sign up&in_login
  42. 42. sign up&in_login BY NIGHT BY NIGHT Welcome! First, you need to sing with us to access to our great stuff we made for you. Sing In Sing Up Maiberreando| email password Oops! the mail address is not correct! BY NIGHT Welcome! First, you need to sing with us to access to our great stuff we made for you. Sing In Sing Up
  43. 43. content detail
  44. 44. content detail
  45. 45. forms
  46. 46. WHAT’S NEXT? Improve performance Full support android Code all wireframes New templates (lists, gallery…)
  47. 47. WEB GITHUB ! www.uxmobilepatterns.com ! https://github.com/jaraen/uxmobilepatterns
  48. 48. CODE BY Javier Rayón @jrayon WIREFRAMES BY Sonia Villanueva @sonianoneka http://uxmobilepatterns.com

×