Ti u xtemplates_ticonf_amsterdam_2014.key
Upcoming SlideShare
Loading in...5
×
 

Ti u xtemplates_ticonf_amsterdam_2014.key

on

  • 53 views

 

Statistics

Views

Total Views
53
Views on SlideShare
53
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ti u xtemplates_ticonf_amsterdam_2014.key Ti u xtemplates_ticonf_amsterdam_2014.key Presentation Transcript

  • 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 select the most re-usable screens
  • ! 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
  • ! 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
  • ! STEPS: THE ANALYTIC PROCESS ! 4. developed ! - With +20 reusable and customizable - And several sample templates in one demo app.
  • ! STEPS: THE ANALYTIC PROCESS ! 5. and ! - Wireframes: OmniGraffle/PDF - Designs: Illustrator/PDF - Code: Alloy + Titanium 3.2 ! - Available in - documentation at !
  • ! 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 & &
  • speech content for today: ! 1. patterns selection and wireframes 2. templates live demo 3. components library and implementation 4. styles customization
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 to less important ! ! 2. Reusable Components as alloy widgets that integrate with standard Titanium components ! ! 3. Customizable Design with examples included, using alloy themes
  • 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.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
  • Franky: a detail view template (2/2) ti.ux.rowitem · title, subtitle and count elements ti.ux.rowitem · customizable hasChild property ti.ux.alignview
  • 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.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
  • 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
  • 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 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
  • 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 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.
  • 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
  • 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. 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
  • 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