iOS Spotlight

24,362
0
78
Using color adjustment and filters, I've simulated the iOS spotlight animation. Learn how you can apply these filters at https://proto.io/en/new-features/adjustments-filters/

a03851e9-504c-11ed 9221-0e76797a4f7b

Movies & Series

3,795
1
Movies & Series App project Design Credits: https://www.sketchappsources.com/free-source/2896-sample-iphone-x-movies-app-sketch-freebie-resource.html

1f83aed2-504d-11ed 9221-0e76797a4f7b

Scrollable Contacts List

2,082
0
37
Simulation of scrollable Contacts list using variables (Use of variables and 'On scroll Interactions')

34041018-d2c9-11ed 9221-0e76797a4f7b

Flipboard Animation

4,926
1
56
The Flipboard animation created using states.

469c1b7e-504e-11ed 9221-0e76797a4f7b

Form examples

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

Net Magazine Prototype - Juxtacaption

2,557
1
12
This is prototype was created for the Net magazine article "Design Prototypes That Reel Real - with Proto.io. It includes a step-by-step written tutorial with screenshots here: http://www.creativebloq.com/web-design/design-prototypes-feel-real-protoio-21619311 It's a product concept for juxtaposing two photos and typing a caption about the connection between them. It should look like this. The tutorial starts with bringing in a range of external assets. Then it'll show how to design assets and customize native components within the tool. Interactions will be triggered by gestures, keyboard input, and automatically as the prototype loads, then choreographed along an animation timeline. Enjoy... TAGS text input capture staggered animation variable variables show captured text input on different screen

Todd Siegel

FOLIO app starter project

2,592
0
31
This project provides you with templates and UI elements to get started with building your own prototype of a FOLIO app.

Filip Jakobsen

Trello Navigation

3,356
2
28
Using swipe interactions, i have created an alternative way to navigate through Trello boards on mobile. I was also inspired by Aurélien Salomon's design on Dribbble (https://dribbble.com/aureliensalomon). Any thoughts?

Christos Chatzikkos

Clubbing and Nightlife

5,776
1
118
This project is inspired by Vasjen Katro’s concept ‘Clubbing & Nightlife’ App ‘2Night’. It showcases how Proto.io can be used to create a beautiful parallax scrolling effect. If you’d like to find out how I achieved this effect feel free to import the project into your own account for reverse engineering. https://dribbble.com/shots/2041810-City-intro-animation

Christos Chatzikkos

Sign in Screen

9,011
5
775
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

Next