STATIC WIREFRAMES

AXURE RP FOR STATIC WIREFRAMES

Although Axure RP can be used to create richly interactive prototypes, it's also good for quickly putting together static, low-fidelity mockups comprising widgets with little or no interactivity. Even if projects evolve to include rich interactions later on, they'll often still begin as static wireframes. Widget styling, content reuse (masters), notes, and profiles of output options (generators) can then be added at the appropriate stage if needed.

WIDGETS IN STATIC WIREFRAMES

Early in the design process, basic shape widgets can stand in for other types of content. Later on, increase the fidelity of wireframes as needed by swapping out basic shapes for text, images, and icons. Use the widgets in the Markup section of the Default library to make notes about the design.

TEXT

You can paste text directly into Axure RP. When you paste text on the canvas, a new paragraph widget containing your text will be created.


You can also paste the text into a widget already on the canvas; just select the widget and use [CTRL] + [V] to paste the text. Use the shortcut  [SHIFT] + [CTRL] + [V] to preserve the text formatting from the widget, rather than using the formatting from the copied text.

IMAGES

There are several ways to add images. You can add an image widget from the Default library and then double-click it to choose an image file from your computer. Another option is to copy an image and paste it into Axure RP. You can also browse to an image in your computer’s file browser and then drag that item from the file browser window directly onto the canvas.


Images can be resized and rotated like shape widgets, and border and corner radius controls are also available.

MORE WIDGET LIBRARIES

Icon and design pattern libraries are also included in Axure RP. Use the dropdown in the Widgets pane to browse other libraries.


Additional libraries of icons, design patterns, and UI elements can be found on the Download Widget Libraries page of the Axure website. These resources are by-and-large created by our community of users. (Get hold of us at contactus@axure.com if you create a library that you want to share with the community!) Many of these widget libraries are free; others charge per-download.

UPDATING EXISTING USER INTERFACES

A common task in UI design work is to mock up an update to an existing web page or other user interface. The best way to get started with this type of project in RP is to take screenshots of different screens or pages of your existing UI and then paste them into your RP diagrams as image widgets. You can then use the "crop" and "slice" tools (click the "More" button in the Main Toolbar) to cut out parts of the screenshot to be moved or replaced with other widgets, or simply add new widgets on top of your original screenshots to show your proposed designs.

CONTINUE WITH CORE TRAINING

© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MASTERS

Masters are collections of widgets you can maintain in a single source location and then reuse throughout your file. Common elements that are created as masters include headers, footers, and navigation. Any edits you make to the master will be automatically applied everywhere the master is used. (This is how masters primarily differ from custom widgets, which can be used throughout a file but that don't update when the source widget is changed.) You can add masters to pages and to other masters.


There are two workflows for creating a master. If you're adding widgets to a diagram and you realize that this part of your wireframe would be better if it were reusable and single-sourced, you can select all the component widgets, right-click, and choose "Convert to Master". (The widgets you selected will still be there in your diagram, but they'll now be the first instance of your newly created master.) Alternatively, you can design content as a master right from the beginning; locate the Masters pane at the lower left-hand side of Axure RP and click on the "Add Master" icon to get started.

WIDGET SNAPPING, GRID, AND GUIDES

As you drag widgets onto the canvas, you’ll notice that the widgets snap to one another by default. Widget snapping helps keep widgets aligned. There are a number of options of this type that can help keep your diagram tidy as you build it. These options can be found in the top menu under "Arrange > Grid and Guides" or by right-clicking the canvas and selecting "Grid and Guides".


You can turn off widget snapping by unchecking "Snap to Widget". You can also show and enable snapping to the grid. By default, the grid is 10px by 10px and is drawn with dots. The style, color, and spacing of the grid can be configured via the "Grid Settings..." menu command.


You can also add guides per page or globally across your project. To add a page guide, drag from the ruler at the top or left of the design area. Hold [CTRL] / [CMD] to make a global guide—one that will appear on all pages. You can create guides based on preset values such as the 960 Grid System by navigating to "Arrange > Grids and Guides > Create Guides."


Try adding a guide by dragging from the ruler. Hold [CTRL] / [CMD] while dragging to add a global guide.

WIDGET AND PAGE STYLES

WIDGET STYLES IN THE DEFAULT LIBRARY

Each widget in the Default library has a widget style already applied. That widget style is imported to your file the first time you use a widget of that type. For example, the first time you add a Box 1 widget, the "Box 1" style (featuring white fill color, thin black border, etc.) will be added to your project.


Changes to the "Box 1" style will affect all widgets that have that widget style applied, including subsequent Box 1 widgets that you add from the library.

ADDING AND EDITING WIDGET STYLES

There are two ways to edit a widget style. One option is to edit the style directly on a widget. Click a widget on the canvas and style it however you'd like. Then, click the blue text reading "Update" which appears in the Style tab next to the Widget Style dropdown. The style changes you made to the widget will be applied to its widget style, which will then in turn be applied to all widgets in the file already using that style and all new widgets of that type added to the file in the future.


Your other option is to click "Create", which is just below "Update". The "Create" option will open the Widget Style Editor and add a new style with the properties of your selected widget. Give the style a name and click "OK" to save the changes and close the Widget Style Editor.


APPLYING WIDGET STYLES

Apply widget styles in either of two places: from the Style dropdown in the Style toolbar (top of the UI, left-most item in the toolbar), or via the Widget Style dropdown in the Style tab of the Inspector.

THE DEFAULT STYLE

All widgets share a single default style in addition to whatever other styles may be applied. If you edit a style property in the Default widget style, that change will apply to all widget styles not overriding the property.


(There are a few other styles that you'll see in all new RP files: "Heading 1"-"Heading 6" and "Paragraph". These styles are useful when pasting text onto the canvas.)

SKETCH EFFECTS (PAGES)

Use the sketch effects feature to make your pages look hand-drawn. Straight lines become wavy and uneven and can be made thicker. A single font (e.g. a handwriting-style font) can be applied to all text, temporarily overriding per-widget styling. You can also change from full-color graphics to black-and-white.


Configure sketchiness in the Style tab of the page Inspector.

WIDGET AND PAGE NOTES

When building static wireframes, use widget and page notes instead of cases and actions (more on those in the next article) to describe intended interactive behaviors. Notes can also maintain version history, keep track of status, and document sources of widget text and data.

NOTE FIELDS

Notes can have various fields to organize different types of information. Add fields by clicking the Customize Fields control in the Notes tab of the Inspector.

WIDGET NOTES

For widget notes, you can use the "Add" dropdown to choose different types of fields. You can choose between text, select list, number, and date. Page notes are always of the text type.


Widget note fields can be added to different sets that are used for different purposes. You can choose whether to view all notes or just specific sets by using the Fields dropdown at the top of the Notes tab.

NOTES IN THE BROWSER

You can also select which notes are included in the generated prototype viewed in the browser. Navigate to the "Publish > Generate HTML Files..." menu command to open the Generate HTML dialog, and then choose the "Widget Notes" tab from the left-hand list. Check the checkboxes to select the note fields you'd like to include in the output, and use the right-hand arrows to reorder them.


Widget notes aren't the only way to add note-type information to your diagram; you can also use the Markup section of the Default library or other custom widgets to add callouts and notes directly onto the diagram. Notes created using markup widgets will be always-visible in the browser instead of being accessible through clicking an icon.

GENERATORS

Your stakeholders will usually not be viewing your work directly in Axure RP. To get your diagrams out of RP and into a format viewable in a web browser, you'll need to generate an output from your .rp file. Outputs from RP are built according to option sets called "generators".


Each new .rp file already contains one generator of each type: HTML, text documentation, print, etc. Access the options for your HTML generator via the "Publish > Generate HTML Files…" menu command. Here you can control what location the output files are saved to, which pages and notes are included in the output, and lots of other options. (If your output ever seems to be missing things as compared to the version of your project you see inside RP, make sure to check the Generate HTML options!)


Learn more about generators in the Generators section of our online training.

After you create a new master, take a moment to define its drop behavior by right-clicking its line item in the Masters pane and mousing to the "Drop Behavior" submenu. The default setting is "Place Anywhere", which allows instances of the master to be located at different coordinates on their host pages. The "Lock to Master Location", by contrast, restricts all instances of the master to the same coordinates (as defined in the master itself). A navigation header master would tend to use the "Lock to Master Location" setting, because you'd probably want your header in the same spot on each page. A footer, on the other hand, might use the "Place Anywhere" setting to allow for varying page lengths.


Read (lots) more about masters in the Masters section of our online training.

You can also create and edit styles directly in the Widget Style Editor without editing a widget first. Get to the Widget Style Editor from the Style tab by clicking the icon next to the Widget Style dropdown. If you want to edit multiple styles at once, hold [CTRL] or [CMD] while clicking multiple line items.

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

Note: if you're not seeing these options, make a unique styling change to your selected widget and then they should appear.