https://www.axure.com/support/training/core/3-static-wireframes

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.

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 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". (Note: if you're not seeing these options, make a unique styling change to your selected widget and then they should appear.) 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.