Hulu TV App Home Screen

3,524
1
4
Interactive TV app prototype of Hulu's home page. Use the arrow keys on your keyboard (note: mouse click to enable keys) or map to a remote control on a television screen to explore a Hulu like home screen with proto io. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

Nino Silva

Shopping cart calculations

2,992
1
28
Shopping cart using variables to calculate selected item amount, and total costs using variables. Project also includes a thumbnail gallery

17056140-504e-11ed 9221-0e76797a4f7b

Short Examples

1,714
0
17
The project contains numerous examples completed using variables and conditional logic.

Akis Ioannou

Inbox

3,810
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

Google Inbox - compose animation

10,502
5
286
The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

Todd Siegel

Panning animations

5,454
0
61
This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see panning animations in all directions.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Expand container that moves adjacent content in sync

3,018
3
55
This simple prototype demonstrates how have a container expand and collapse while moving adjacent content in sync.

Todd Siegel

SpaceTrip high-fidelity

7,308
0
192
Designers can use their favorite design tools like Photoshop and Sketch to design the finest details of the user interface for their app. Single or multiple touch interactions can be applied on any UI element (layer) on each screen. Sophisticated animations can be created on-screen as well as screen transitions, using the powerful timeline animation features that Proto.io offers.

a03851e9-504c-11ed 9221-0e76797a4f7b

Form examples

7,477
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

Menu Overlay Animation - Google Calendar for iOS

6,328
0
166
Prototype of the Material Design menu animation of Google Calendar for iOS. See how it was created step-by-step in the video of the webinar "Adaptive Prototypes & Material Design UI Library" http://docs.proto.io/videos/adaptive-prototypes-material-design-ui-library/ Skip to minute 35:14 of the webinar to specifically see this prototype being made. TAGS: material design google iOS calendar Enjoy.

Todd Siegel

Next