Form examples

8,233
0
165
3 prototypes showing different uses of the form components for iOS 1) Activate / de-activate button when checking / un-checking Terms of Service 2) Capture text input to change property 3) Change number of tickets - limit 8 See how they were created step-by-step in the Using Forms webinar video: https://vimeo.com/118919393 This version on Vimeo includes time-codes so you can jump to particular sub-sections (repeated below as a preview): > Range of iOS form input controls 2:02 > Labels 2:17 > Text fields 2:32 > Setting placeholder text 3:04 > 5 Input Types that display the appropriate iOS keyboard (Text, Numeric, Email, Password, Telephone) 3:30 > Using the Telephone keyboard for credit card number input (large # keys) 4:08 > Need to view prototype on device in order to see the range of keyboards 5:59 > Multi-line text area input field 6:24 > Search Bar 6:40 > Checkbox control customization 7:22 > On/Off Switch control customization 7:52 > Slider control customization 9:27 > Increasing size of slider handle 9:47 > Picker Wheel Customization 10:00 > Prototype example: Activate button when checking terms of service 10:42 > Create a button with two states (using convert to container) 12:55 > Adding interactions to a checkbox control (on change activation/deactivation) 14:45 > Definition of variable and range of uses 17:04 > Using variables with text field interactions 18:25 > Prototype Example: Using a variable to capture text input and show it in a different text box using change property. 23:27 > Prototype: Use variables to increment and decrement counter showing number of tickets being purchased. 28:40 > Searching full range of icons built into Proto.io 29:10 > Using a variable to limit the range of tickets (0 to 8) 32:46 > Copying and pasting interactions with Variables 40:08

Todd Siegel

Demo: Web parallax

7,061
3
113
Have a look at this stunning Parallax effect created exclusively with Proto.io. Feel free to import this fully editable project into your own account for use in your prototypes.

Akis Ioannou

Sign in Screen

10,334
5
776
This is an example of a sign in screen that validates a username and a password. Feel free to import this fully editable project into your own account for use in your prototypes. Use the following to successfully sign in and proceed to the next screen User Name: john Password: proto.io

Akis Ioannou

ELAGANCE with updated menu transition

6,296
3
Hey guys, I have updated the menu interaction in this version. Hope, you'll like this updated version more.. For those who are viewing this for the first time, it's a prototype of an ecommerce app. If you're looking for a proto.io engineer, feel free to hire me over upwork. Following is the link to my upwork profile : https://www.upwork.com/o/profiles/users/_~01d24fbe3d33d437b2/

00812837-504d-11ed 9221-0e76797a4f7b

Visit the Alps

3,885
0
61
This prototype is designed to be a promotional website for the Alps and features animations based on the scroll position. Thanks to https://dribbble.com/victorerixon for the inspiration.

Vasilis Odysseos

The Man Skill

2,824
0
9
This prototype is actually being used to develop a game. The game simulates what men do best. Pee. It is thank the women of the world for putting up with our inaccuracies and putting the toilet lid down for us when we forget .... It also give woman a chance to experience something skilful, difficult and unique. Peeing like a man It is a real 3D simulation - no anatomy is show - we are discussing with Movember to share profit and aid mens health issues globally. Facebook https://www.facebook.com/groups/themanskill/?ref=bookmarks Alpha version for anyone who wants to play https://play.google.com/apps/testing/ca.servicestream.ipv6 Android only for now. iOS simultaneous release We absolutely could not have done this without proto.io !!!!!

890a9477-46a4-11f0 a04a-0e3ec7c5f8cf

Brighton ToySearch

1,246
0
Final year student project.

d4b2ed62-09f6-11ef ab6d-0e76797a4f7b

Drag and Drop Variables

5,122
9
217
Project using Variables to simulate Drag and Drop to Snap functionality into a predefined area. While also adding Animations and States for a more smooth and elegant process.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Next