Gestures, touch events, screen transitions, and animations
Mobile apps, mobile websites and web apps are becoming more sophisticated and intricate when it comes to their presentation. Being able to add animations, screen transitions, and interactivity to your prototypes creates a new user experience for your clients. These features help to simulate and test a realistic representation of your mobile app, mobile website or web app. That way whoever is looking at your prototype gets the real app experience right from the prototyping stage.
Proto.io supports all the major mobile gestures and touch events like tap, tap-hold, swipe, pinch, and zoom. Interaction designers are not limited to a single ‘link’ transition anymore. Instead they can apply animated screen transitions like slide, fade, pop, flip, flow, and turn.
Further than that, they’re not limited to just screen transitions either. Users can also apply basic animations to any UI element in their prototype like move, fade, rotate, and scale. Best thing of all? It only takes a couple of minutes to create a fully functional prototype with interactive interfaces!
Prototype for any device
A new device just came out and you need to create an app prototype for it? No worries. With Proto.io you can create your own device templates, specify screen resolutions and device skins and you can begin prototyping in no time. So, if you’re thinking about Smart TVs, refrigerators, game consoles, car navigation systems, or even your bed alarm clock, Proto.io gives you a rapid and solid solution for prototyping. The result will always be stunning.
Realistic UI component libraries
When prototyping with Proto.io, you can use your own sketches, mockups or high-fidelity designs, as prepared in your favorite design software. Import your still images and then start adding interactivity.
If you don’t have a design ready you may use the out-of-the-box detailed and accurately designed UI components as seen in the most common mobile OS, like iOS, Android and Windows 8 (Metro). The components are an exact representation of the native OS components re-designed in HTML5 so that they can be used in Proto.io. Each component not only simulates the look and feel as in the native mobile OS, but is also configurable and adaptable to each project’s needs.
Aside from the native UI component libraries, thousands of SVG icons are available in Proto.io's icon gallery, ready to be used on any component such as buttons, tabbars and lists, or dragged directly onto your prototype. Being SVGs, the icons can be resized to any dimension without quality loss. What's more, the icons can be repainted to any color, making sure that they match your design's color palette!
Test your prototype directly on your mobile device
To maximize the simulation experience, Proto.io prototypes can run on the actual device. Run your prototypes on the most popular mobile devices just by visiting the prototype URL from your mobile browser.
Prototypes work, look and feel as real apps do. Getting to test your prototype on the device for which your app is aimed for, offers a unique and valuable experience as it’s as close as it gets to the real thing. You can also easily and quickly apply changes to UI, transitions and interactions and have clients see the changes happening live on their mobile device.
Publish, print and export your project
Easily publish your project for everyone or specific people to see. Proto.io lets you export your project to HTML5 and have it offline to preview or even wrap in a real app.
If you feel that printing is important for a presentation, there is a solution for that. With Proto.io you can create beautiful PDFs of your projects screens and also export zip files containing all of your screens to use in your own keynote or powerpoint presentation.
States, Animations & Timelines
A powerful feature that lets you create different states of the same screen and define how each element will transition from one state to the other. Intuitively add tween transitions and animations while maintaining full control over the timing using the all-new timelines feature!
Drag & Rotate
Making any item on the screen draggable or rotatable is now just a checkbox away. You can now enable drag functionality for any UI element on the canvas, define drag behaviours, and create sophisticated interactions based on drag-related callback events.
Variables & Item properties
Start capturing user input, record user events and calculate data from interaction callbacks. Variables can be used to get values from UI elements, do mathematical calculations and then modify text or set properties of other UI elements on the fly. You can easily combine variables with any touch events and interactions to create interactive content that changes based on user input.
It’s alive!
Proto.io is a cloud-based application. Nothing to install or download! That helps keep the product alive, a living organism. By using agile software development processes Proto.io is able to react fast and accommodate your simplest or more complex request. Features are added and existing functionality is improved constantly. To respond fast to the ever-evolving mobile and web technologies, we make several revisions to Proto.io within a week’s time. Check out our change log to get a taste!
And… there’s more!
Other stuff worth mentioning:
- Intuitive editor interface with drag-n-drop features, no coding required
- Silly-fast mobile prototyping (did we mention that already?)
- Templates and reusable containers for easy development
- Powerful digital asset manager
- HTML5 fonts support
- Auto-save function
- Version history and rollback
- 100% web-based, nothing to install
- Custom branding for your account and prototypes
- Affordable plans (we start at free)
- Overwhelming technical support (with real humans! yey!)
- Extensive documentation, screencasts, examples and sample prototypes