The Proto.io user interface (UI) components are graphical elements designed to simulate the basic mobile OS UI elements. There are three collections of components: Basic, Device libraries and Icons. You can switch between collections by clicking on the relevant tab. Switching between Libraries and Inspector is handled automatically depending on what you do. If you need to bring a series of UI components in your canvas, you can Pin the Libraries tab for convenience.
You can see the basic UI components in the image below. These are components that are frequently used and are not specific to a certain operating system.
When you want to include a specific user interface (UI) component in your design, you just need to drag it onto your canvas or double click on it in the Library.
As you pick it up to drag, you will see a red circle on the top left corner of the component (a), which will turn green as soon as your component enters the canvas area and therefore you can drop it (b).
When you drop your component onto the canvas the Properties Inspector opens up for you to edit properties and interactions. (See Properties Inspector). At the same time a relevant layer is added to the Layers list. The blue square handles that appear around the component allow you to quickly resize and rotate.
OS specific UI components
Proto.io has handcrafted the most popular UI components of the most widely used operating systems so you can easily use them in your designs. A drop-down list reveals the various libraries you can choose from. In each library, components are organized by type, e.g. toolbars, buttons, forms, etc.
Proto.io offers a great collection of icons to help you achieve your design objectives without needing to import icons from elsewhere. You can browse through the collections of icons or use the search bar for convenience. You can always use the find feature (CMD/CTRL+f) to quickly find anything you want.
There are the following 3 categories of icons:
- Generic icons (you can browse by topic)
- Material icons
Arrows and speech bubbles
Proto.io offers a gallery of arrows and speech bubbles to customize and use in your project.
Apart from the arrow’s size and position you can customize its color, size, whether it’s dashed or not, whether the arrowhead is filled or not, as well as the direction of the arrow.
Concerning speech bubbles, apart from their size and position, you can customize the styling of the text that will appear inside, the styling of the bubble itself (background color and border thickness and color), as well as the tip direction.
Components with dynamic elements (e.g. list)
Some Proto.io UI component libraries include a number of complex UI components, which basically include other individual components inside. One of these is the Basic List. When you add such a component to your canvas, you see a little ‘+’ icon at the bottom right corner. By clicking on this icon, you add another individual UI component (list item in our example).
You can manage and customize your component either as a whole entity or individually per component included. When you have one individual component selected, then you see an orange border around it and three icons at the bottom right corner, representing actions ‘Delete’, ‘Duplicate’ and ‘Add’.
These actions apply to the selected component (list item in our example) and not to the whole UI component (list in our example)
Popular and special UI components
Text is one of the most important elements on any interface and therefore used often in prototypes (from low to high-fidelity). The Proto.io text UI component is fully customizable and allows Rich Text. You can edit the text by double clicking on the component on the canvas.
The rectangle is another widely used shape in interfaces. Proto.io allows you to customize the basic rectangle UI component to create anything you like in terms of size, position, background, border and text inside.
By including images in your prototypes, you can quickly give your users a better idea of the look and feel of your application’s interface. In Proto.io you can drag the Image UI component on your canvas. You’ll see an image placeholder. You can double-click on the placeholder to pick an image to show (from the Gallery, your assets, etc.) or click on the image filename in the Properties Inspector to edit.
Also see Importing and managing your own assets.
Multimedia elements, such as audio and video are becoming a necessity for a better and more engaging user experience. You can easily include your desired audio and video by dragging in the relevant UI components and specifying the file to associate them with. Audio and video files are considered assets that have to be imported to Proto.io or linked to on the web. You can find a nice collection of sound effects in the Proto.io Gallery, found in the Asset Manager.
Also see Importing and managing your own assets for size and format restrictions, as well as other ways to import your assets.
- Interaction area
When designing prototypes you frequently need to build interactions. Sometimes you don’t wish the interaction to apply to a particular UI component (e.g. when you tap on a button), but rather on part of the interface. Proto.io includes an Interaction Area UI component for exactly that reason. You specify the desired area and then the interaction properties (trigger, actions, etc.)