Notice! App is made for productivity based students and is intended to be a tool meant for organizing tasks, taking down notes, reminders, calendar, and earning rewards.
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/
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/
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
Re-creation of the horizontal swipe parallax effect in Yahoo Weather.
See how it was created step-by-step in this webinar:
https://support.proto.io/hc/en-us/articles/223073307-Prototyping-parallax-effects
TAGS:
parallax
variables
variable
Meet your virtual personal assistant to go out
A virtual personal assistant that connects users social profiles to the best coupon offers at restaurants.
Save Money: Get top matching coupons nearby
Save Time: Sit back and let "Out" do the search for you
Connect with Friends: Get notified about nearby friends to eat out