Pro Tips & Tricks

4,976
0
39
Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

Todd Siegel

Mobile UI Framework Demo

3,988
3
A prototype being put together for a client. On the loaded report, tap the highest blue point to open up a modal window where you can swipe right/left (Right first, I think) Top right menu button only works on the landing page. Swipe right to go back from any screen. Needs polishing!

26124754-504e-11ed 9221-0e76797a4f7b

Animal species

5,196
2
138
I created this prototype of a wildlife photography app to experiment with horizontal and vertical scrolling interactions. What do you think?

71ffbe0d-9b82-11f0 ad7f-0e3ec7c5f8cf

Hoopz

2,859
0
28
Basketball game project using Variables to determine if ball lands or misses the hoop. Tracks your score, shots landed, shots missed and shot percentage. You can also select your ball from the settings.

72010307-9b82-11f0 ad7f-0e3ec7c5f8cf

Smart Pill Dispenser

1,338
0
2
This app connects and programs your Smart Pill Dispenser to ensure patients take their medication safely.

d447ab86-504c-11ed 9221-0e76797a4f7b

Sykel

1,225
0
4
School Project Dynamik List, button, maps etc feel free and copy

4f99da03-504d-11ed 9221-0e76797a4f7b

Orbit

4,333
0
13
An animation of our Solar System

Akis Ioannou

The Virtual Fashion Assistant

4,519
3
The Virtual Fashion Assistant is an interactive screen designed to sit in the change room of a clothing store and help customers try variations or accessories to complete the look without leaving the change room – a store assistant brings you the items. The goal is the customer tries and buys more clothes. The interface has been designed to be display a 55 inch touch screen display.

559d0d71-f493-11ed 9221-0e76797a4f7b

Vertical scrolling feed with 2 expandable areas

7,668
6
407
An example of our vertical scrolling feed, with 2 expandable areas. Feel free to import into your Proto.io account.

Akis Ioannou

Next