Annotated wireframes are useful for visually communicating the layout and functionality of an application or web site. Learn how to create, organize, and setup your pages, design using widgets, and annotate your wireframes.
The Sitemap is used to add, delete, and organize pages in your design. There’s no limit to the number of pages you can add, but once you’re over a couple hundred, we recommend looking for opportunities to divide the file.
To add a page, click on the “Add Child Page” button in the sitemap toolbar.
To rename a page, do a slow double-click on the page. You can rename pages safely without breaking links to the pages.
To delete a page, select it and click the “Delete Page” button in the sitemap toolbar.
You can also add, rename and delete pages using the context menu shown when you right click on a page or click the down arrow next to the page.
Drag and drop pages in the sitemap or use the arrow buttons in the sitemap toolbar to reorder pages in the sitemap. The organization of the sitemap does not affect interactions within the pages.
Double click on a page to open it for design in the Wireframe Pane.
For convenient access, open pages will have a tab in the Wireframe Pane’s tabbed interface. The tabs can be dragged to reorder. You can see a list of open pages when you click on the down arrow next to the page tabs as well as options to Close All Tabs or Close Other Tabs.
Widgets are user interface objects used to design your wireframes. The Widgets Pane contains a library of commonly used objects such as buttons, images and text panels.
In addition to the default set of widgets, you can create your own custom widget libraries or download shared libraries to load into the Widgets Pane. To learn more about custom widgets visit Custom Widget Libraries.
To select a library click on the dropdown menu and choose the library. The widgets in
that library will display in the widgets pane. To view all the widgets in all of the loaded libraries select “All Libraries”.
To search across the current library, click the search icon and type into the text field.
To add a widget, drag and drop the widget from the Widgets Pane onto the Wireframe Pane. You can also copy and paste widgets from one wireframe to another.
To move a widget, drag and drop them into place or use the arrow keys to nudge.
To size a widget, drag the handles that surround the widget. You can also use the Location and Size (located in the editor toolbar and the Widget Properties pane) to specify the exact location and size.
You can also select multiple widgets to move and size them at the same time.
There are several ways to edit the styles and properties of widgets:
Double-click: Double-click the widget to edit the most commonly
edited property of that widget. For example, double-clicking on an
image widget opens a dialog to import an image, and double-
clicking a droplist opens a dialog to add droplist items.
Editor toolbar: Use the buttons in the toolbar above the Wireframe
Pane to edit widget styles like font name, font size, font style, font
color, fill color, line color, location and size, etc. You can also select
multiple widgets and use widget layout tools like group, order,
align, and distribute.
Formatting tab in the Widget Properties Pane: Edit widget styles
and properties. You’ll find options for location and size, font,
alignment and padding, style, ordering, and fills, lines, and borders.
(1 votes, average: 5.00 out of 5)