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

iOS app prototype using the magnificent Proto.io that let users share their stories about their travel. A work in progress but definitely in good direction! To experience, simply click anywhere on the main screen. On mobile, tap on the password field and then tap done.

Number pad designed for easy re-use. I saw some dialpad examples in Spaces, but I felt that they had way too many moving parts (the circles, the numbers, and the hotspots were all separate) and it was impossible to easily reuse because the circles and numbers were assets and changing look and feel retired changing the assets. So I created this as a completely re-useable dialpad and I have included a few color pickers as an example of how to manipulate the properties quickly through variables.

Done to explore setting colors with sliders and some Math expressions. Additional features, should anyone wish to build, would be to convert to HSV space, and to produce Hex color codes as well. To use colors, in the color controls of an element, replace the #XXXXXX hex code with this: rgb(255,125,45). Two swatches are provided, since color combinations are more interesting than single colors. Swatches are draggable.

Here is a prototype of a music player. Click play and add different sort of beats to the audio. Sample audio is from http://tricoolore.com/ Enjoy!

Thank you Proto for all this free stuff. :3

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