In this article, learn to add page notes, use page styles to add backgrounds and center pages in the prototypes, apply sketch effects, and create guides.
Page Notes allow you to collect page level information about your design. You can organize page notes into separate fields. This can be useful if you want to separate notes for different audiences like clients, developers, or testers.
Type your page notes in the area below the wireframe pane. To format the page notes, use the Editor Toolbar or the standard text formatting shortcuts (i. e., Ctrl/Cmd+B, Ctrl/Cmd+I, Ctrl/Cmd+U, etc.). The formatting applies to the page notes in the generated Word specification and still respects the styles defined in your Word template (to learn more about
Specifications, visit the article Functional Specifications).
Choose Wireframe -> Manage Page Notes in the main menu, or click the Manage Notes link in the Page Notes Pane. Add, remove, rename and reorder your notes fields in the Page Notes dialog.
To switch between notes fields, choose from the dropdown menu above the Page Notes text area.
Page Formatting allows you to edit the formatting of individual pages as well edit and apply the default page style and custom page styles. The page formatting options are in third tab of the Page Properties Pane beneath the wireframe.
Format the page using the following options:
Page Style: Like widgets, you can define styles for pages. To edit the default page style or create a custom style, click on the icon to the right of the droplist
(or Wireframe -> Page Style Editor in the main menu). If you want to center every page in your prototype and add a background image by default, edit the
default page style with those settings and it will apply those changes to all of the pages.
Page Align: Left or center align the page in the prototype. This only applies to the HTML so you won’t see a change in the wireframe
in Axure RP. Centering
is based on the widgets on the page and doesn’t assume that the left most point is at x=0. You can design your page with a 100px margin on the left and the
page will still center in the browser based on the left most and right most widget.
Back Color: Apply a background color to the page.
Back Image: Import an image to use for the background. You can set that image to repeat (see below).
Horiz Align and Vert Align: Set the horizontal and vertical alignment of the background image.
Repeat: Repeat the background image horizontally, vertically, or both.
Sketch Effects gives you the option to quickly apply a hand-drawn look to your wireframes at any stage of the project. This can help everyone focus (or refocus) on the architecture, interactions, and functionality when you need to.
Sketch Effects are part of Page Formatting (so they can be set in Page Styles) and have the following options:
Sketchiness: As the Sketchiness increases, the widgets become more squiggly. We like setting the Sketchiness close to 50.
Color: Change the whole page to grayscale including images, fills, backgrounds, and font colors.
Font: Apply a uniform font across all the widgets on the page. You can use a handwriting font like Axure Handwriting, Scoder Hand, Lucida Handwriting,
or Bradley Hand ITC.
Line Width: Adding some width to the widget borders helps complete the hand-drawn look. We like +1.
Guides are great for helping to maintain a consistent layout and to align widgets.
(1 votes, average: 5.00 out of 5)