A better way to wireframe



What is a page?

A page is an individual screen that is a part of a prototype. Each project consists of at least one page, which may include several stencils and layers.

Creating and renaming pages

To create a new prototype, first choose a default page size. To do so select your a device. This defines the dimension of the first page. The size of all further pages depends on this particular choice.

By default, a new project contains an empty page. To create a new page, go to the Project View, click on the "+ New" button and a new page will open, and you can rename it immediately as the text field gets highlighted. You can also change the page using the corresponding tab in the breadcrumb navigation or via the context menu.

Alternatively, pages can be created and managed in My Pages. To do so, click on the "Create" button . The new page will appear in My Pages. You can rename the page immediately or at any later time by double clicking on its name.

Including pages in a screenflow

To include a page in a screenflow, open the screenflow in the Screenflow View and drag the page from the My Pages panel into the editing panel. Pages that are already part of the screenflow are highlighted in grey indicating that you cannot use them again. The remaining available pages are shown in white. Since a different set of pages can be included, the coloring may differ from screenflow to screenflow.

Editing pages

To edit a page either go to My Pages or to the Project View and open it by double-clicking on the respective page. You can now add stencils from the stencil palette to the page. You can also display layers on a page via My Layers.

Cloning pages

To clone a page (create an exact copy) click the "Clone" button in the context menu. The clone of the page will appear in the Project View under "Pages". The new page will be saved automatically as "Copy of OriginalPageName", whereby OriginalPageName is the name of the page from which the clone is derived.
Note: Layers of the duplicate page are identical with those of the original page.

Copying pages

To copy a page from one screenflow to another select the page, press the "Copy" button , switch to the desired screenflow (by selecting it in My screenflows) and press the "Paste" button to paste it into that screenflow. You can also use the keyboard shortcuts Ctrl/Strg+C (for copy) and Ctrl/Strg+V (for paste).

Changing the size of pages

To change the size of a page open the context menu from where you can type in the desired page width and height. Alternatively, select the desired page in the editing panel in the Screenflow View and pull the handles appearing around it to the desired location to adjust the size.

Adding and removing a background on a page

To add a background to a page and open the context menu. Click on "Select Image". Doing so will open a dialogue window. Click on the "Browse" button to search for an image on your local hard drive or paste a URL into the text field and press the "Add" button to link to an external source, or select previously uploaded images from the list appearing in the dialogue window.

You can rename or delete images using the "Rename" button and the "Delete" button respectively. Images can be removed from a page by clicking on "No Image".

Note: You can only delete images that are not used in the project.

Adding annotations to a page

To add annotations to a page (e.g. to specify requirements for development) open the context menu. Type your notes into the text field at the bottom of the context menu. These notes are included when exporting projects. Another way of adding notes to a page is through the use of the Comment stencil.

Closing and deleting a page

To close a page simply close the corresponding tab by clicking on the "Close" button of the page tab within your browser.

To delete a page click the "Delete" button next to it in the My Pages panel while in the Screenflow View. If you hit the "Delete" button by accident, you can restore the page with the "Undo" button undo in the toolbar at the top of the screen.

<< back to overview