Sliding Tab Menu

4,568
0
34
Sliding navigation of Tab Menu

Akis Ioannou

Inbox

4,648
1
54
Hit Refresh icon to see a loading animation for bringing new email. Swipe left on the top latest email to delete. (Inspired from http://www.beautifulinterfaces.com/item/114-covert-inbox)

Akis Ioannou

The Search Project

4,379
2
79
Hi there! The Search Project is my latest prototype that allow users to search images and have live results. Happy prototyping!

f4ff2085-9250-11ed 9221-0e76797a4f7b

Swipe animations

4,739
0
38
This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see swipe animations in all directions.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Tap to animate

4,604
0
68
This is a prototype that demonstrates you some of the capabilities of Proto.io. You are welcome to import this project and use these interactions in your prototypes. In this prototype you will see the following interactions: Tap to rotate Tap to zoom in/out Tap and hold to transform.

f4ff2085-9250-11ed 9221-0e76797a4f7b

Ddu-buk-2

1,646
0
10
My first app for application idea contest in Kungbuk, South-Korea.

5c8a431e-504e-11ed 9221-0e76797a4f7b

SpaceTrip high-fidelity

8,173
0
192
Designers can use their favorite design tools like Photoshop and Sketch to design the finest details of the user interface for their app. Single or multiple touch interactions can be applied on any UI element (layer) on each screen. Sophisticated animations can be created on-screen as well as screen transitions, using the powerful timeline animation features that Proto.io offers.

a03851e9-504c-11ed 9221-0e76797a4f7b

Pandora

4,498
0
43
This prototype is a simulation of one part of the Pandora iPhone app. I have chosen to simulate the part of the app where the user selects a Pandora radio station and then proceeds to select that station. What I have demonstrated is how how the radio station animates from a small entry on a list to a large full screen entry and vice versa. If you would like to see how I created this prototype, please watch this video tutorial here: http://docs.proto.io/videos/pandora-tutorial-part-1/

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

Spacetrip App

4,560
0
122
'Space tourism for everyone' “Earth is a small town with many neighborhoods in a very big universe.” ― Ron Garan Hey, here is my prototype which I made using Proto.io. Imagine that one day we all will be able to become space travellers.

a16d9c01-504c-11ed 9221-0e76797a4f7b

Pro Tips & Tricks

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