Welcome dear prototype Rookie, Sensei, Guru or Ninja. No matter which level you are at, guess we all agree that getting started with a new tool takes some time. We created this guide to keep the learning curve as short as possible. It takes about 60min to read and test-drive the various steps of this guide.
With this guide you will learn:
We are putting our heart and soul into offering the best web-based experience when it comes to prototyping. If you have any questions, feedback, ideas or just want to say hi -
get in touch with us.
We hope our tool will help you to become more productive at prototyping,
The canvas size expands automatically or it can be easily adjusted to a fixed size within SETTINGS.
Switch from EDIT to REVIEW to test your prototype's interactions or to annotate feedback notes. You'll also find all standard commands (undo/redo, cut/copy/paste/duplicate/delete, align, bring to front/send to back, group/ungroup), states, layers, responsive prototyping, settings (including a custom grid system), versioning und much more.
Add, edit, delete, duplicate pages or drag and drop to reorder.
The ELMENT LIBRARY features all common standard and interactive elements, 2000+ icons and much more. Switch to the MASTER LIBRARY in order to create master templates, to the SHARED MASTER LIBRARY for sharing masters across your account. The WIDGET LIBRARY offers readymade UI widgets and mobile templates. Upload and image to the IMAGE LIBRARY and use them in your projects.
The lower toolbar displays the team collaboration status, screen views (when prototyping responsively) and various canvas settings (grid, snap to grid, rulers, guides)..
switch from edit/review; select all, cut/copy/paste/duplicate/delete; align; bring forward/send backward/bring to front/send to back; group/ungroup; undo/redo; zoom in/out; settings (canvas size/grid); states; layer; responsive prototyping; versoning; help.
add, sort, duplicate and delete pages
In REVIEW all your interactions are coming to life. Test your interactive prototypes or walk your client through them. Collaborators can leave feedback via notes delivered right to the DASHBOARD and to your email inbox
When opening a project for the first time take a look at the project's settings. In SETTINGS you can adjust the page size, center the prototype in review mode, set up a grid system or choose a background color for the canvas, the auxiliary lines and the off canvas section.
In the lower toolbar you'll find helpful canvas settings.
The GRID is the perfect alignment tool for design. By combining the use of the GRID with the SNAP TO GRID feature, you can perfectly align objects along grid lines.
The RULER feature helps you position elements precisely across the width or length of a page. You can also drag auxiliary lines out of the RULER for an even more precise workflow.
GUIDES are automatically displayed auxiliary lines to enable precise layout and alignment of items on the canvas.
The element library features a wide range of standard elements (rectangle, circle, triangle, lines, symbols ...) but also smart elements that are highly interactive (viewstack, tab, accordion, group box, menu) and many more. You'll even find pre-made sets of elements with the pre-made UI stencils located in the Master Library in the upper toolbar.
To add elements to your prototype just drag and drop them from the library onto the canvas.
Click an element to resize and to access the properties window. Right-click an element to edit the label text, to copy, paste, duplicate, cut or delete it. Double-click an element to add text to it.
In the properties window you can rename elements, change the position/size, lock the position, choose border color, fill, edit stroke strength and opacity, add gradient overlay, add rounded corners, edit font (size, color) and add interactions or tie an observer to the element.
Note: The properties window differs, depending on the selected element.
The sitemap is a set of pages on a web site, organized in hierarchical order. Add a new page by clicking the "+ New Page" button, name your new page and hit return. Duplicate or delete pages by clicking the appropriate button. To reorganize the sitemap, hover over a page name, click on the 3 horizontal lines (located on the right) and drag and drop a page. Dragging a page onto an existing page will transform the page to a child page.
There are two different versions of menu elements available: a horizontal and a vertical menu. Place a menu element onto the canvas and choose from various settings: Type: the menu element is set to automatic by default (whole sitemap will be displayed in the menu). To define your own tabs just set it to MANUAL. Page: choose a page from the dropdown to display only this designated page in the menu. This feature also allows to hide the starting page from the menu. Visible Sub-levels: choose how much detail you need. Border: choose a border color.
Upload images and use them in a selected project or across your account. Click on IMAGE LIBRARY. Select the PROJECT tab to make an image available for the current project only or choose ACCOUNT to share an image across projects.
Click UPLOAD IMAGES. Select an image from your disk and click OPEN. The image is being uploaded to your image library and will appear in the tab prior selected. To insert an image just drag and drop it onto the canvas.
To add an interaction click the element that should trigger the interaction, select INTERACTIONS in the PROPERTIES window and make your selection. Test interactions in Review mode.
Set up interactions for an element, activated on:
triggering an action:
or triggering another element:
With the observer function you can simulate different sets of states. An observer links an element to a determined state and an interaction is being carried out when this state is reached. e.g. You created a sign-in panel and want to set up different states. A state could be a distinction between a signed-in customer versus a website visitor. You want the customer experience the website differently from a visitor by displaying different views of a menu or a different website content.
Masters (=master elements) are reusable templates you can quickly add to any page in your sitemap. The huge benefit of prototyping with masters is that you edit them in one place but changes are being applied globally across your project on every page the master has been added to.
Use masters for headers, footers, menu, sign-in boxes ...
To create a master element just select the MASTER tab in the element library and click ADD MASTER and name your new master template.
Edit masters the same way as pages. Drag and drop elements onto the master's canvas.
Once you are finished editing, close the master via the "X" button.
Now you can add your master template to a page in your sitemap. Select the page you want to add your master to. Click "+" next to the preferred master element and it will be added to the selected page.
Master elements can be used as templates or modules:
Templates are set to fixed positions. You can't reposition templates on a page - only in the master's view.
Modules aren't locked to a position. Click and reposition them like any other element on the page.
To edit Masters simply double klick them or enter the master's edit mode by clicking the pencil icon within the PROPERTIES window.
Apply changes and close the master editor. Changes are now being carried out globally across your project.
The WIDGET LIBRARY offers a fast growing selection of UI widgets such as: iPhone, iPad UI elements, sign-up forms, webshop forms, login panels, modular dialogues and many more. Simply enter the library, explore and add widgets to your project to use them with your prototypes.
The SHARED MASTER LIBRARY is a collection of all your previously uploaded and shared masters. Upload your own master elements and share them across your account.
Invite team members or stakeholders to co-work on projects by inviting them to your account. To add a new person just go to the PEOPLE page. Click the ADD A NEW PERSON button and fill out the details. We will send an invitation with further instructions to the person added.
TIP! You can give someone admin access (create & edit projects, add & manage people, change project settings) when adding them.
After you've added people you can assign them to projects. Click the SETTINGS button of the project you want to assign a person to. Now select the people you want to assign from the list, choose which permission you want to give them (Editor or Reviewer permission) and click ADD.
An EDITOR can co-work on projects, but has no project or account management rights. A REVIEWER can view projects and leave notes.
TIP! Generate a preview link and email it to clients to preview the current project state. You can generate a previewlink on the PROJECTS -> SETTINGS page.
When in Review mode you can easily attach feedback notes to a particular element or area you want to discuss in depth with team members.
Click and drag a new note from the ADD NOTE button. Pick a color, choose a subject (min. 1 character), message (min. 3 characters) and click SAVE NOTE. Unless disabled, each team member on the project receives new feedback notes or comments also via email notifications. Comment by replying to email notifications or click the note on the project's dashboard or the note icon in REVIEW.
You can export all feedback notes of a project to a single rich text format file.
Switch to REVIEW. Click on the export icon in the upper toolbar and choose EXPORT TO RTF. Select all pages or single pages you want to export the notes from and click START EXPORT. Click DOWNLOAD RTF and you'll have all the notes from your project saved to one document ready for further usage.