Apple Watch using native UI library

17,416
5
185
Created using Proto.io library of fully interactive, native watchOS components.

Akis Ioannou

Sign in Screen

2,962
3
413
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

Date picker

2,320
0
129
An example of a date picker that can be imported and used in your project. (Basic use of variables)

Jason Hamilton

Trello's draggable list demo

1,046
2
Hi I tried imitating the Trello's interaction to move tiles/cards between different lists.

Mukul Chawla

Swarm Check-in

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

Marios Christou

iOS Spotlight

16,632
0
65
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/

Marios Christou

Tinder UI

18,328
5
955
Tinder UI cards

Constantinos Demetriadis

Calendar concept

6,547
2
468
A calendar picker concept based on Ramotion's example on Dribbble, https://dribbble.com/shots/1782092-Survey-Platform-Design

Alexis Piperides

Form examples

3,986
0
102
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

1,193
0
18
Drag and Drop an avatar over a target area that animates when in the drop zone. When released outside the target drop zone, it returns to the original location. Uses a variable to define the target drop zone, that then triggers animations in the zone and when dropped. See how it was made step by step in the webinar video: https://support.proto.io/hc/en-us/articles/115000637591-Advanced-Scrolling-Dragging TAGS: drag and drop dragging variables variable animations on drop animation

Todd Siegel

Next