Tip This prototype demonstrates basic to intermediate level functionality. Any advanced interactions, animations or additional functionality were omitted on purpose.
Tip This is a simple screen with the logo and a call to action button to go to the next screen.
Tip The Smoothies to Door prototype is a sample project created for you to explore the capabilities of Proto.io. You can preview it and experience how it would look and feel like on a mobile device. You can also open it in the Proto.io mobile app. Try editing it and observe the changes.
You can always learn more about certain features by using the Help tool (bottom left).
Tip These tips and notes are not part of the prototype and are not visible when you preview. They are here to give you some guidance on how the prototype is set up.
If you want to remove them, you can unlock the relevant layers from the left Layers pane and delete them.
Let's begin!
Tip This is a typical app Sign in form. In this sample project it accepts any values. There's also a "Go to screen" interaction on the Sign up link to take you to the Sign up screen.
Don't have an account?
Sign up
Sign In
User Name
Password
Sign In
PROTO.IO
15:03
90%
Tip This is a typical app Sign up form. The form is interactive but for the purposes of this sample project it does not store or validate any values entered by the user.
This screen has two interactions. One on the Sign Up button and one on the Sign In link.
Already have an account?
Sign In
Sign Up
User Name
Email
Password
Sign Up
PROTO.IO
15:03
90%
Tip This screen contains a scrollable container (carousel) for user onboarding and a button to skip this and proceed to the Signin screen. Double-click on the container to edit it.
To learn more about containers, use the Help tool (bottom left).
Continue
Select the documents you need and we will create it for you
Create the documents
you need
Tip This container has 3 pages of 375px width. When attached to a screen it can be configured to act as a scrollable carousel.
To add a new page just modify the width of this container to 1500px and add your content.
Use sensors (sold separetly) or manually add the results of your event and manage your teams
Manage results and teams
Create, manage and make others talk about your event
Managing sports events made easy
Tips 1. You can change the rating by changing the value of the Container state of the Rating Stars container (through Properties Inspector).
2. The Ingredients / Preparation tab are used to change the page of the scrollable paged container (carousel) that displays the details. The carousel also links back to the tabbar by using the "On container page enter" interaction.
3. The screen interaction in place (you can edit it by clicking on the interaction icon next to the screen in the Screens menu) controls the button animation at the bottom of the page.
Tips This container has two pages of 320px width each and it is used as a 'carousel' in the Smoothie screen.
When
Where it is
Modality
Size
# Inscriptions
Visibility
November 1-3, 2018
College's Football camp
Football
Medium (maximum of 100)
15/100
Public
Description
Don't miss this year's fall tournament!
Midterms's Football Tournament
Nov 1-3
Football | Medium Event
Details of Your Event
Tips This simple but yet powrful container with 3 states allows you to attach it multiple times on a screen with different starts states to indicate if an item is liked or not.
Each 'heart' has an interaction to go to the next state and show the corresponding State Transition.
You will notice that the 2nd state "Heart Big" acts like an intermediary state, used just for the state transition. For this reason you will find a "On State Transition End" interaction on the the State Transition from Heart OFF to Heart BIG, which simply sends the Heart Big state to the next and final state which is Heart ON.
PROTO.IO
15:03
90%
Tips The Screen interaction in this screen, triggers the State Transition animation to animate from State 1 to State 2.
You can create, edit, manage and navigate your states from the Screen States tab in the bottom pane. State Transitions are designed and previewed in the relevant tab.
To learn more about States and State transitions, use the Help tool (bottom left).
Generating Documents
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Continue
Invitations
Results Tables
Sponsors Documentation
Extras
Food & Drinks Documentation
Health Documentation
Security Documentation
Create Documents (1/2)
PROTO.IO
15:03
90%
Local Documentation
Announcements / Posters
1. Select the documents you want to create
Create Documents
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Generate Documents
Sponsors Authorities​​​​
Food & Drinks Authorities
Health Autthorities
Security Authorities
Create Documents (2/2)
PROTO.IO
15:03
90%
Local Authorities
2. Give us some info about the documents
Create Documents
Tips 1. In this screen you will find a Slide In Menu layer (container) at the very top. It is locked so that it does not interfere with your changes on the canvas. You can find the Slide In Menu and Navigation Menu containers under the Containers menu.
2. This screen has a screen interaction that starts the animation of the Scroll Indicator Container (arrow to scroll down)
3. The Smoothies List Vertical Scrollable container is scrollable. It has an interaction that "when scrolled" it makes the Scroll Indicator container to disappear.
4. You can edit the Smoothies List Vertical container by double clicking on it or by selecting the corresponding container from the Containers menu.
To learn more about containers, use the Help tool (bottom left).
The Geller Cup
Volleyball | Small Event
SEE DETAILS
December 1-2, 2018
Tenis Cup 2018-2019
Tenis | Big Event
SEE DETAILS
November 23-26, 2018
Tips 1. This is the container that includes the 3 cocktails used in this sample project, arranged vertically.
2. The interaction on the button "See Details" takes you to the Smoothie screen. For the purposes of this sample project all links go to the same screen.
Midterm's Football Tournament
Football | Medium Event
SEE DETAILS
November 1-3, 2018
Welcome Back!
To see your events, slide down
Or use the menu to create an event
Tips You may not see the arrow icon on the canvas as it white (same as the canvas background). You can simply change the canvas backbround from the Container Settings to something darker.
There are also two State Transitions that handle the arrow animation (preview project to observe this).
The City Running Project
PROTO.IO
15:03
90%
Tips This container originates from the "Slide-in menu" interactions design pattern (accessed from the Patterns icon on the top menu). You can find more on how it is set up in the video under Pattern settings.
The hamburger menu icon may not be visible on the canvas as it is white (same as the canvas background) but you can see it on the left pane layers list.
This container has 2 states. State 1 is for the menu 'closed' and State 2 is for the menu 'open'. You will also find 2 State Transitions that animate the menu to the screen.
To learn more about patterns, states and state transitions, use the Help tool (bottom left).
Tips To edit the links of the menu just click on the list and then click again to select each individual menu item.
Under the interactions tab in the Properties Inspector you will find the interactions necessary to close the slide-in navigation menu and change screen.
elizabeth@example.com
Elizabeth Smith
ES
ver. 1.00.2018.07.11
Give us some information about your event
PROTO.IO
15:03
90%
Create Event
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Let's start!
Create an Event
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Add Result
Add Result
PROTO.IO
15:03
90%
Winner
Team/Player B
Team/Player A
Date of the game
Result
Add your scrollable content here
Add your scrollable content here
Add your scrollable content here
Add Result
Give us the info about the result
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Add Participants
Add Participants
PROTO.IO
15:03
90%
Team
Participant contact
Participant Name
Tips This container handles the animation of the number. There are 5 states and 8 state transitions to and from each adjacent state.
01 02 03 04 05
Add your scrollable content here
Select the number of participants to add
Add Participants
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.
Update results
Results
PROTO.IO
15:03
90%
Add your scrollable content here
To obtain the latest results from your sensors
Results per game
use Update results options
Tips This screen has a container with 5 States at the very top that displays the number of servings. Double-click to edit the container.
The Number of Servings container in this demo does not change the total cost of the order.
The checkboxes next to the ingredients are interactive but they don't calculate anything, nor change the total cost which is always the same for demo purposes.