Proto.io Examples
With Proto.io you can prototype anything, from mobile apps to interactive websites and from landing pages to wearable interfaces. Get inspired by the most popular patterns you can build with Proto.io and start prototyping today!
Scrollable
Vertical Scroll
Vertical Scroll
Use scrollable containers to build vertically scrollable areas that cover the whole or part of a page, leaving space for fixed headers and footers. A popular way to showcase different content sections or products in both web and mobile prototyping.
previewHorizontal Scroll
Horizontal Scroll
Use scrollable containers to build horizontally scrollable areas that cover a small part of the page or multiple areas. Ideal to showcase different pieces of content or sections in both web and mobile prototyping.
previewVertical & Horizontal Scroll
Vertical & Horizontal Scroll
Mix vertically and horizontally scrollable areas for an immersive user experience. You can add one or more horizontally scrollable sections inside one long vertically scrollable area. Add snapping to the scrolling behavior for a touch of realism to your prototype!
previewSnap paging with Page controller
Snap paging with Page controller
Create scrollable areas that snap to pages as you swipe through or click on the page controller buttons below. A popular solution for prototyping onboarding sequences, hero carousels, slideshows, and much more.
previewMenus
Tabbed menu
Tabbed menu
Add tabbed navigation to your prototype for a boost to its UX and overall usability. One of the most common patterns for mobile apps, which is also often used on websites and different types of dashboards.
previewSide menu - Overlay
Side menu - Overlay
This side menu opens above the rest of the screen, partially covering its contents as an overlay. A pattern most often used on mobile apps, in the form of a hamburger menu.
previewSide menu - Push Screen
Side menu - Push Screen
When opening, this side menu pushes the content of the screen to the right instead of covering it. A very common pattern on mobile apps, most often seen in the form of a hamburger menu.
previewSpeed dial
Speed dial
One of the most recognizable Material Design patterns used on Android devices. Once clicked, the floating action button reveals an expandable menu of related actions. Upon clicking on any of the actions, the whole menu closes automatically.
previewSingle page menu
Single page menu
A navigation menu that, upon clicking, automatically scrolls to different sections of a landing page or single page website. Active menu items are highlighted to reflect the user's current page position, both by clicking or scrolling through.
previewSticky menu
Sticky menu
This classic web or mobile app functionality aims to improve the overall user experience of long scrollable pages, such as responsive websites. It allows the top navigation menu to remain visible while scrolling downwards and disappear while scrolling upwards.
previewSwipe to change view
Swipe to change view
A commonly used mobile app functionality, allowing the user to navigate through the contents of different pages either by swiping from one to the other, or by clicking on each page title from the top navigation bar.
previewScreens
Overlay
Overlay
This interaction pattern allows a screen to load over another in the form of a modal, popup, or overlay across any number of prototyping screens. Very commonly encountered in mobile apps and websites, it also has wide functionality in web prototyping.
previewLoading screen
Loading screen
Also known as a splash screen, this pattern contains a progress bar that fills up to 100% before automatically switching to another screen. It is widely used in mobile apps but can also be applied to any loading or waiting sequence on dashboards, websites, and more.
previewBottom menu
Bottom menu
This common mobile app pattern allows the user to see a list of related menu options at the bottom of their screen upon tapping and holding on a list item.
previewInteractive components
Maps
Maps
This example project showcases how you can use the Proto.io Web View component to embed interactive Google Maps into your web or mobile prototypes.
previewAutoplay video
Autoplay video
Use Proto.io's video component to add a YouTube, Vimeo or uploaded video to your prototype. Videos start playing as soon as a page is reached and stop when the user leaves the screen.
previewVideo player
Video player
Use Proto.io's video component to add a YouTube, Vimeo or uploaded video to your prototype. Create a custom video player using Proto.io's advanced video interactions and play, pause, mute or unmute your video.
previewAudio player
Audio player
Create a custom audio player using your own uploaded audio files. The player includes play, pause, and mute functionality, as well as previous and next track navigation arrows. Changing songs is also possible by swiping through the album artwork at the top.
previewPicker
Picker
Find this native, fully interactive picker component ready to be used out of the box in Proto.io's iOS UI component library. Most commonly seen in the form of a date picker in iOS applications, it can be controlled either by swiping, or tapping to select an option.
previewRadio buttons
Radio buttons
Add one or more independent radio button lists to your prototyping screens to boost interactivity. A popular pattern on pages, where the user needs to complete forms, pick preferences or change settings. Buttons are grouped, so that when one is turned on others get automatically turned off.
previewScrollable Tabbar
Scrollable Tabbar
A Material Design component for mobile apps that works out of the box in Proto.io. It includes a top navigation strip with clickable tabs, each revealing different content at the bottom part of the page when active. The same content is also scrollable, snapping to each page brought in view.
previewInteractivity
Accordion
Accordion
Create content sections that are expandable or collapsible upon clicking on the header area. Particularly popular with prototyping content-heavy pages, such as FAQ sections, help centers, contact lists, step-by-step guides and so on.
previewExpand section
Expand section
A list view of expandable items that reveal more details with a smooth animation upon clicking. Works great for content listings of any type, such as product lists and user profiles, as well as different view types, such as list view or thumbnail view.
previewTooltip on hover
Tooltip on hover
Show help tooltips or relevant info prompts on mouse over and hide them on mouse out. A great interaction pattern for simulating detailed and realistic web prototypes and dashboards.
previewKeyboard navigation
Keyboard navigation
Create a prototype that is 100% navigable by keyboard or remote control, or simply enhance your prototype by introducing handy keyboard shortcuts. Add realism to your prototype, or simulate the remote control or game controller navigation of TV and gaming applications.
previewChange cursors
Change cursors
Create an impressive, realistic prototype with a mouse cursor that changes, depending on which specific component in your prototype you hover over. Proto.io supports all native web cursors but custom ones can also be created by uploading svg images.
previewVariables
Get input value
Get input value
Use proto.io variables to capture user data input and see it change text or other elements in another part of your prototype. A great way to make your prototypes more dynamic and engaging by reflecting user input.
previewSlider input combo field
Slider input combo field
Build an interactive slider using Proto.io's variables. See the numeric value change as you move your slider right or left, or type a specific numeric value manually to see the slider automatically shift to the right position.
previewCustom slider range
Custom slider range
Change the traditional 1-100 point slider to any different scale of your choice, while maintaining all the same functionality, precision, and interactivity.
previewStepper
Stepper
Use Proto.io variables to build this common interactive UI pattern. Input steppers can be found across web or mobile applications and are used to incrementally increase or decrease a numeric value.
previewEnable button
Enable button
Add a touch of logic to make your prototype feel like a real website or app. This interaction pattern allows you to enable an otherwise disabled button only when a particular condition is met - in this case when both checkboxes are checked.
previewSign-in validation
Sign-in validation
One of the most common functionalities on any website or app. Use Proto.io variables to create a realistic, interactive sign-in form with username and password validation.
preview