Expand/Collapse Menu

7,847
2
489
This is an expand/collapse menu example that can be created using container states.

Akis Ioannou

Form examples

8,282
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

The Virtual Fashion Assistant

4,524
3
The Virtual Fashion Assistant is an interactive screen designed to sit in the change room of a clothing store and help customers try variations or accessories to complete the look without leaving the change room – a store assistant brings you the items. The goal is the customer tries and buys more clothes. The interface has been designed to be display a 55 inch touch screen display.

559d0d71-f493-11ed 9221-0e76797a4f7b

Instagram Pull to Refresh

5,456
3
313
A simple implementation of Pull to Refresh

92f2b218-504c-11ed 9221-0e76797a4f7b

Share button

3,091
1
116
An idea of a draggable share button. Much easier with one hand drag than two clicks. Just drag the share icon and you'll see.

Alexis Piperides

Inbox

4,650
1
54
Hit Refresh icon to see a loading animation for bringing new email. Swipe left on the top latest email to delete. (Inspired from http://www.beautifulinterfaces.com/item/114-covert-inbox)

Akis Ioannou

Silent Shaves (Intro)

4,806
1
250
Concept intro of a mobile app. Loading screen and logo animating to the home screen of the app. Content appears in a subtle animation.

Alexis Piperides

Hungry Birds game menu

4,410
0
10
A demo showcasing custom device size, animations and key actions. Use arrow keys to switch between "Play" and "Settings", and X and Z keys to navigate.

Akis Ioannou

Socialize

1,563
0
Social app for blocking.

5dceb9f0-504e-11ed 9221-0e76797a4f7b