Reproducing instagram info bars behaviour

4,916
9
291
A basic example of reproducing Instagram info bars behaviour. A list header floats over the list's items and remains visible at the edge of the screen until it is replaced by the next list header

Akis Ioannou

SpaceTrip high-fidelity

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

TV App Basic Content Navigation

570
0
2
This prototype demonstrates basic content navigation for a TV app moving focus model. TV Apps differ from web and mobile in that interactions are triggered by remote control button presses which can be mapped to key board presses with proto io. With a TV focus model every component will have a collection of "On" and "Off" states both between the components themselves i.e: the menu and items within those components i.e: a menu item such as "Movies". These interactions models must work in a way in which as one component is on, all others must be off and so on. This example will show basic interactions and how to navigate pages commonly used my modern TV apps for devices such as Apple TV, Roku, Google TV, Smart TV's etc. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

Nino Silva

Windows 8 Showcase

3,240
1
25
A demo showcasing Windows 8 components.

Akis Ioannou

Google Inbox - compose animation

10,294
5
286
The recently released Google Inbox app is a re-thinking of the email inbox experience that beautifully demonstrates Google's material design interactive animation language. This prototype focuses on the compose button's animation. Click the + to reveal a new state where a wave of buttons and labels float up, and the + becomes a pencil icon. It uses two states, with staggered animations.

Todd Siegel

TV App Basic Content Shelf

586
0
0
A very basic content shelf component commonly used by TV apps such as Hulu, Youtube, HBO etc. This component uses a fixed focus model where the items in the shelf move into place using key press interactions. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

Nino Silva

Football Team Formations

1,288
0
I'm going to give you an explanation of the best modern football formations. A football formation is a number set that describes the positions of players on the field. It determines how many players play on defense, the midfield, and the frontline. The first number always describes the defender, and so on. For example, a formation like 4-3-3 plays with four defenders, three midfielders, and three forwards. The goalkeeper is never mentioned in a football formation. Most formations are described in three numbers but four- and five-rank formations are also possible. This is created in Proto.io using States and States Animations.

Paul Baker

Animated Navigation Bar

3,069
0
53
This Animated navigation bar project was created to simulate feedback when interacting with a button on a navigation bar while also giving it some snap functionality. Was created using Containers and States.

Constantinos Thoma

Settings

3,395
5
92
A simple, one page prototype inspired by Ramotion's Contact Sync (https://dribbble.com/shots/1749645-Contact-Sync?list=users&offset=11). Just play with the on/off switches.

Alexis Piperides

Keezy App Animation

5,452
1
38
Tap/Hold the black circle to see the 2 state animation of the Keezy sound looping app. A circle of circular buttons spins out onto the expanded black circle that becomes the screen background. Once you're on this 2nd state, tap anywhere to return to the initial state. I recorded a webinar showing how to create this interactive animation: http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/ You can also find the assets here used for the prototype. Enjoy!

Todd Siegel

Next