Swarm Check-in

18,832
0
177
Apply color adjustments and filters to your prototypes to create beautiful interactions and animations. https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

Form examples

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

Drag and Drop Variables

5,141
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

e-Wallet

3,886
0
74
Swipe up and down to choose between cards Credits: Card designs used from: https://www.sketchappsources.com/free-source/2453-credit-card-designs-sketch-freebie-resource.html

2be093e4-504d-11ed 9221-0e76797a4f7b

Clickt prototype

1,550
0
4
An event attendance app

9fca63b1-504d-11ed 9221-0e76797a4f7b

Carousel Onboarding

11,574
9
249
Here's the previous version of Carousel's on boarding sequence

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

Sliding Tab Menu

4,541
0
34
Sliding navigation of Tab Menu

Akis Ioannou

Keezy App Animation

6,375
1
38
Tap/Hold the black circle to see the 2 state animation of the Keezy sound looping app. A circle of circular buttons spins out onto the expanded black circle that becomes the screen background. Once you're on this 2nd state, tap anywhere to return to the initial state. I recorded a webinar showing how to create this interactive animation: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ You can also find the assets here used for the prototype. Enjoy!

Todd Siegel

UBER

15,399
9
I created a prototype of the UBER app for Android in order to demonstrate what is possible using Proto.io. This project was a massive undertaking as my goal was to simulate the user experience of what it would be like to order 4 different UBER cars in San Francisco. I plan on doing a full "behind the scenes" article on my website about the challenges I faced along the way simulating the UBER app in Proto.io. Special thanks to the awesome team at Proto.io for all of their tireless assistance along the way! If you are looking for an experienced Proto.io prototype engineer or are looking for tutorials and more information about Proto.io please visit my website: http://protonerds.com/

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

Next