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 weCODE!

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 text Reserve

VIEWS

Massive AttackBack

T-Mobile 23:17 75%

SAT 14Sonar 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 YouHeligoland 20105:27

KarmacomaProtection 19945: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

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 dataName + Photo

+ very few ID data:+ more critical info or actions

Social content

Boundary area

main action

Secondary info

iPhone 5 screen

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

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 dataName + Photo

+ very few ID data:+ more critical info or actions

Social content

Boundary area

main action

Secondary info

iPhone 5 screen

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

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 dataName + 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 text Reserve

Text text text text text text text text text text text text text text text 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 titleBed&Breakfast, Apartment 98% cotton, 2% elastane

Reserve

www . . . . .

Info Actions

a) Action (Share, Edit, Add to favs, Comment, Copy, Save, Read…)b) Menu (My profile, Friends, Favs, List, Sections…)

Action Button (Play, Reserve, Buy, Ask, Show prizes…)

AT&T 11:56 AM

Back ActionTitle

Song song song soBand band band band Album album al

0sg

Playing from library

12sg

Title title title title title title titleBed&Breakfast, Apartment 98% cotton, 2% elastane

AT&T 11:56 AM

Back Title i

Profile Add Photos Bloc

iPhone 5 screen

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

AmmanAmman, Jordan

AmpuriabravaGirona, Spain

AmsterdamNorth Holland, The Netherlands

Q W E R T Y U I O P

Single selection on new window

DROPDOWN NAVIGATIONTap 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

NameNickname

NameNickname

◯

Or select:

NameNickname

NameNickname

◯

NameNickname

NameNickname

NameNickname

◯

Invite friendsAT&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

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

AmmanAmman, Jordan

AmpuriabravaGirona, Spain

AmsterdamNorth Holland, The Netherlands

Q W E R T Y U I O P

Single selection on new window

DROPDOWN NAVIGATIONTap 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

NameNickname

NameNickname

◯

Or select:

NameNickname

NameNickname

◯

NameNickname

NameNickname

NameNickname

◯

Invite friendsAT&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_first screen

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

Release to close / update

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 NAVIGATIONTap 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

Main action

Invitees

iCloud ◯

Message

AT&T 11:57 AM

Invitees

Favorites All your contacts

Search by name, nickname or mail

NameNickname

NameNickname

◯

Or select:

NameNickname

NameNickname

◯

NameNickname

NameNickname

NameNickname

◯

Invite friendsAT&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_secondary screens

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

Release to close / update

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 NAVIGATIONTap 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

Main action

Invitees

iCloud ◯

Message

AT&T 11:57 AM

Invitees

Favorites All your contacts

Search by name, nickname or mail

NameNickname

NameNickname

◯

Or select:

NameNickname

NameNickname

◯

NameNickname

NameNickname

NameNickname

◯

Invite friendsAT&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_secondary screens

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

Release to close / update

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 NAVIGATIONTap 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

Main action

Invitees

iCloud ◯

Message

AT&T 11:57 AM

Invitees

Favorites All your contacts

Search by name, nickname or mail

NameNickname

NameNickname

◯

Or select:

NameNickname

NameNickname

◯

NameNickname

NameNickname

NameNickname

◯

Invite friendsAT&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_secondary screens

Or mailto window:

AT&T 11:56 AM

Singin ProcessFirst 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 Apptxt 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 Apptxt 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 photob! Take photo

If does not tap, modal window

to remember:a! Skip photob! 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

keyboard

appears

8TUV

7PQRS

9WXYZ

5JKL

6MNO

4GHI

3DEF

2ABC

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

8TUV

7PQRS

9WXYZ

5JKL

6MNO

4GHI

3DEF

2ABC

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 Apptxt 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 Apptxt 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 Apptxt 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 Apptxt 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 photob! Take photo

If does not tap, modal window

to remember:a! Skip photob! 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!

8TUV

7PQRS

9WXYZ

5JKL

6MNO

4GHI

3DEF

2ABC

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

8TUV

7PQRS

9WXYZ

5JKL

6MNO

4GHI

3DEF

2ABC

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

OptionsPicker dialog and popup screenshots

Settings - Alloy XML Code

Sign up: A form assistant step-by-step

ti.ux.forms.scrollableform

Create forms by a JSON objectti.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 CodeTemplates 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 performanceFull support androidCode all wireframes

New templates (lists, gallery…)

WEBGITHUB

!www.uxmobilepatterns.com

!https://github.com/jaraen/uxmobilepatterns

CODE BY

Javier Rayón @jrayon

WIREFRAMES BY

Sonia Villanueva @sonianoneka

http://uxmobilepatterns.com