iOS Spotlight

26,665
0
79
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

onboarding of Service App

5,167
4
137
Re-creation of the onboarding sequence of the app "Service" See how it was done step-by-step in the on-boarding webinar: http://docs.proto.io/videos/creating-great-on-boarding-experiences-with-proto-io/ The app itself: https://itunes.apple.com/us/app/service/id1005945537?mt=8

Todd Siegel

IMDb Redesign

10,033
2
300
Hey guys! I'm back with an amazing prototype for you guys. This has been my longest and quite a challenging redesign project for IMDb whose prototype is pretty awesome and contains lots of stuff like Nested Containers, a bit of animation, some really beautiful visual elements and interactivity for you to explore! I had so much fun making it with Proto.io and I truly hope you guys love it and would love to know your views and suggestions on how can I improve it :) Cheers! Aman

fda4c75e-504c-11ed 9221-0e76797a4f7b

The Virtual Fashion Assistant

4,524
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

Halal Local

2,351
1
Non-professional tour guide is a popular alternative for travellers seeking for cheaper price of service. Travellers want an integrated platform to personally pick a tour guide that meet their specific needs

1ab9f6b7-504e-11ed 9221-0e76797a4f7b

10 Second Timer Example

7,123
5
213
I simulated a 10 second timer that counts down from 10 to 0. This is very simple to do. All you need to do is change the text property of the text value with a custom value and include a delay of 1 second. Then add a callback for the next number with a delay of 1 second. Repeat this until you get to the number 0. There is no need to use variables to simulate a timer. If you are looking for someone to help you with your prototype, we are available for hire at: http://protonerds.com/

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

Tumblr

6,280
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

GoodReads

6,193
2
166
This is the redesign of GoodReads app for Android. Hope you guys love it, and I would love to know your views about it!

fda4c75e-504c-11ed 9221-0e76797a4f7b

Pro Tips & Tricks

4,984
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

Next