Tumblr

6,276
0
108
Tumblr has a very nice series of animations that happens when you enter the compose mode. I thought it would be interesting to recreate this in Proto.io to show others how to achieve these kind of effect in their own protototypes. I have made a companion tutorial video where you can see exactly how I did it. This video is available here: http://docs.proto.io/videos/recreating-tumblr-compose-animations-in-proto-io/

8ea06e34-504c-11ed 9221-0e76797a4f7b

Form examples

8,272
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,107
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

Atom Bank App

4,470
0
A fun and interactive way to engage users for Atom Bank App.

33115daa-ab16-11ef a04a-0e3ec7c5f8cf

Safari Browser

3,094
0
61
This allows you to swipe up and down the page, using the native safari Browser Behaviour. Useful for any web project you are working on. Comes in both Regular and Private Browser. Also allows you to enter the URL. Carousel thrown in for good measure.

44699c0b-504e-11ed 9221-0e76797a4f7b

Instagram Pull to Refresh

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

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

Sliding menus - Animation on screen

5,282
0
29
Sliding menu with animation on screen

Akis Ioannou

Next