Axure Prototyping Blueprints

By John Henry Krahenbuhl
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
About this book

Axure garners rave reviews from the design community and is one of the leading tools for rapid prototyping in use today. With Axure one can easily create wireframes and clickable prototypes. Additional enhancements to Axure (e.g. the Repeater widget and Adaptive Views) as well as AxShare (e.g. AxShare Plugins) and the AxShare Mobile App, provide a new level of prototyping excellence.

To begin, this book provides you with a rapid introduction to Axure’s interfaces and adaptive views and quickly familiarizes you with pages, panes, and the design area. After a brief introduction to Axure, this book will help you to develop the capabilities to build simple to more complex interactive prototypes. This goal will be accomplished with a quick run through of Axure's fundamentals, followed by an exploration of detailed blueprints of different prototypes. From there, you'll walk through creating common interactions for a header, an interactive carousel, right column feed to social media channels, and a footer for a community site prototype. You'll also learn how to build a Content Aggregator, pulling together information from multiple sources and a sample portfolio prototype. You’ll learn to incorporate social media feeds from Facebook and Twitter and also build a photo contest for a Facebook application. Towards the end of the book you'll utilize the Repeater Widget to build an eCommerce prototype.

This book will exhibit to novice as well as experienced users, common design patterns for exploration and continued learning. Equipped with these new design patterns and methods, readers can complete engaging interactive projects faster.

Publication date:
August 2015
Publisher
Packt
Pages
334
ISBN
9781783551972

 

Chapter 1. Laying the Foundation

As with any structure, the foundation is critical for stability. Having a solid understanding of Axure's environment and interface provides us with a solid foundation. Once you are familiar with specific aspects of the environment, you will be able to rapidly create interactive prototypes. The interface comprises the main menu, a toolbar, a sitemap, the design area, and several panes.

In this chapter, you will learn about:

  • The environment and interface

  • Adaptive Views

 

The environment and interface


Axure's environment has a similar feel to other desktop applications. We will now explore the environment and interface.

Note

Please open a blank Axure document so we can familiarize ourselves with the tool. In future, this chapter can serve as a quick reference for Axure interface elements. More advanced users may want to skim this section as a refresher.

When you open a blank Axure document, the interface looks like this:

Note

The preceding screenshot depicts the Mac version of Axure RP. The PC version may differ slightly in appearance.

Axure's main interface is organized into sections: the main menu, the toolbar, the design area, and the surrounding panes. First, you will explore the interface as follows:

At the top is the main menu, which contains the following menus:

  • File: This provides us with options such as New for creating new RP files, Open, Save As, and Import from RP File, and also allows us to print, export, backup, and recover.

  • Edit: This menu facilitates options such as Cut, Copy, Paste, Find, and Replace.

  • View: This menu has options such as Panes, Toolbars, Reset View, Masks and show options.

  • Project: This menu covers the options for widget and page (for example, style editors and note fields), Adaptive Views, global variables, and project settings.

  • Arrange: This menu has options such as Group, Ungroup, Bring to Front, Send to Back, and alignment (for example, left, right, center, and so on). It also covers options for grids and guides.

  • Publish: This menu facilitates us with the new Preview option that enables quickly viewing your prototype, the Generate HTML Files option, and the option to generate specifications. It also has the More Generator and Configuration option.

  • Team: Team projects allow you to share and work on single projects in a team environment. Items in this menu are Generate Team Project from Current File, Get and Open Team Project, and Browse Team Project History.

  • Window: This covers the Minimize and Zoom options.

  • Help: This menu will have options to search, access Axure forums, manage license keys, and check for updates.

Near the top of the RP interface is a toolbar. The toolbar comprises two sections stacked vertically:

  • The top toolbar section contains the following options:

    • Selection mode: Intersected Mode, Contained Mode, and Connector Mode

    • Zoom: A dropdown to set the default zoom level

    • Publishing: Preview your prototype, AxShare (for example, publish your prototype to Axure's cloud-based sharing service), and options from the Publish menu

    • Arrangement of widgets: Group, Ungroup, Front, Back, Align, Distribute, and Lock and Unlock widget positions

    • Interface layout: Left or Right. Click on this to toggle (show or hide) left and right panes

  • The bottom toolbar section contains the following options:

    • Dropdown for selected widget style

    • Widget style editor

    • Format painter

    • Font formatting options (for example, font family, typeface, size, bold, italics, underline, color, bulleted list, and insert text link)

    • Text alignment (for example, left, center, right, top, middle, and bottom)

    • Fill color

    • Outer shadow

    • Line options (for example, color, width, pattern and arrow style)

    • Widget location and visibility (for example, coordinates (x,y), w: for width, h: for height, and hidden)

In the center of the interface is the design area. The design area is where you open pages, and drag and drop widgets to build your interface. The design area is surrounded to the left, right, and bottom by panes. The panes are organized as follows:

  • The left-side column contains the following panes:

    • Sitemap: The Sitemap pane provides a hierarchical overview of the pages in your design.

    • Widgets: The Widgets pane shows widget libraries that enable us to rapidly create wireframes and flow diagrams.

    • Masters: The Masters pane organizes templates that can be reused throughout your design. Common uses for masters are page elements such as headers and footers.

  • Under the design area, the bottom-center column contains the page properties pane, which has the following three tabs:

    • Page Notes

    • Page Interactions

    • Page Style

  • The right-side column contains the following panes:

    • Widget Interactions and Notes: The Widget Interactions and Notes pane has two tabs: Interactions and Notes (in the Axure RP Pro version)

    • Widget Properties and Style: The Widget Properties and Style pane has two tabs: Properties and Style

    • Widget Manager: The Widget Manager pane enumerates widget states (for example, dynamic panel states, and so on)

Note

Axure is available in two versions: Standard and Pro. The Pro version includes additional functionality such as documentation and team projects. Learn more at http://www.axure.com/compare.

Pages

Traditionally, a sitemap provides a top-down view of the pages for a website. In Axure, the Sitemap pane can comprise pages and folders organized in a hierarchical fashion. Just under the toolbar, you will find the Sitemap pane.

The Sitemap pane

When you open a blank RP document, you will see four pages in the Sitemap pane. The pages are labeled Home, Page 1, Page 2, and Page 3, and are organized as follows:

Note

In the Sitemap pane, you will notice (4) next to Sitemap. This number indicates the total number of pages currently in the Sitemap pane.

At the top of the Sitemap pane, you will see a row of eight icons as follows:

  • Add Page

  • Add Folder

  • Move Up

  • Move Down

  • Indent

  • Outdent

  • Delete

  • Search

Creating a child page

Icons of the pages highest in the hierarchy are left justified. When a page becomes a parent page by having a child page association, a grey arrow is shown to the left of the page icon. The gray arrow enables you to collapse or view pages in that branch of the hierarchy.

There are several ways to create a child page:

  • You can create a child page by clicking on the page in the Sitemap pane, clicking on the indent icon, and then clicking on Move Up or Move Down icon to move the page.

  • Another method is to click and drag the page to the right, and drag up or down if you need to move the page. You will see a blue box appear around the page that will become the parent page.

  • You can also create child pages by right-clicking on the parent page, moving the cursor over Add, and then clicking on Child Page, as shown in the following screenshot:

The design area

The Design area (that is, the blank canvas) is in the center of the interface, as shown in the following screenshot:

Opening pages

Pages can be opened in the design area by double-clicking on the page name or icon in the Sitemap pane. Masters are also opened in the design area by double-clicking on the master name or icon in the Masters pane (bottom-left). When a page or master is opened in the design area, a tab will be added to the top of the design area with the name of the page or master (for example, double-clicking on the Home page in the Sitemap pane will display that page in the design area in a tab named Home.)

When you open more than one page or master, the tabs will remain available in the design area until you choose to close the tab. Inactive tabs will be colored gray and the active tab will be white as shown:

Note

To close a given tab, click the x next to the tab name. You can also manage tabs by clicking on the down arrow to the right of the tab names.

Showing the grid

When placing widgets in the design area, you may prefer having a grid to use as a visual reference. To show the grid, right-click in the design area, mouse over Grid and Guides and click Show Grid as shown:

Note

The default spacing for the grid is 10 pixels. To change the default spacing, right-click in the design area, mouse over Grid and Guides and click on Grid Settings….

Adding page guides

You can also add page guides to pages in your design. You can select from preset guides or add single page guides. To add page guides, right-click in the design area, mouse over Grid and Guides and click on Create Guides. In the Create Guides dialog window, click on the Presets dropdown to select from the following options:

  • 960 Grid: 12 Column

  • 960 Grid: 16 Column

  • 1200 Grid: 12 Column

  • 1200 Grid: 15 Column

You can also create custom guides by changing the default values offered in the Create Guides dialog window. The options presented are as follows:

Note

By default, guides are created as global guides. To create a guide just for the current page, uncheck the checkbox next to Create as Global Guides.

We can also create single guides for a page. Here are the steps:

  1. To create a single guide, click on the left or top ruler, and drag the guide onto the wireframe.

  2. To reposition a guide, click and drag the guide to the new position.

    Note

    By default, single guides are blue and only appear on the current page. To make a global single guide that will be shown on all pages, hold down the Command key on a Mac (or the Ctrl key on Windows) while clicking and dragging the guide onto the wireframe. By default, global single guides are pink.

  3. Guides can easily be removed as well. To remove a single guide, click on the guide and press Delete.

  4. To remove all guides, right-click on the design area, mouse over Grids and Guides, and select Delete All Guides.

Panes

As mentioned briefly, the design area is surrounded to the left, right, and bottom by panes. You will now explore these panes in further detail.

The widgets pane and libraries

In the left-side column under the Sitemap pane, you will find the Widgets pane as shown here:

The Widgets pane allows you to view and use common interface objects also known as widgets (for example, Image, Button Shape, Rectangle, and so on) in your design. Widgets are organized into custom libraries that can be shared and loaded into the Widgets pane.

Masters

In the left-hand side column at the bottom, under the Widgets pane is the Masters pane as shown:

Note

In the Masters pane, you will notice (1) next to Masters. This number indicates the total number of masters available in the opened Axure project file.

The Masters pane contains all of the masters available in an RP file. Masters can range from a single widget to a collection of widgets (including interactions) used in your design. In most cases, masters enable you to make changes or updates in a single place. When you update a master, each page that contains the master will be updated as well.

Masters have three types of drop behavior (that is, the master's default behavior for location when placed on the wireframe). Possible drop behavior options are as shown:

Note

Lock to Master Location means that when a master is placed on a page, the master will always default to the same location as in the original master. Break Away masters, when placed on a page, can be edited just like widgets and do not change if the original master is updated.

The Page Properties pane

The Page Properties pane has three tabs: Page Notes (available with Axure RP Pro only), Page Interactions, and Page Style. The Page Interactions tab offers the following interactions as shown:

Note

There are three default events: OnPageLoad, OnWindowResize, and OnWindowScroll. Click on More Events to display the additional events shown earlier.

The Page Style tab is used to change the style of individual pages as well as page defaults. The Page Style tab offers the following options as shown:

You can use the default page style or define your own custom page styles. The Page Align property allows you to left or center align the page (applies to HTML only). You can also set the back color, back image, horizontal alignment, vertical alignment, and whether the back image repeats itself. Sketch effects can also be applied to give the page a handwritten feel.

Note

Learn more about page formatting at https://www.axure.com/learn/basic/page-style.

The Widget Interaction and Notes pane

The Widget Interaction and Notes pane has two tabs: Interactions and Notes. The Interactions tab presents interaction options based on the widget selected. An example from an Image widget is shown as follows:

Note

There are three default events: OnClick, OnMouseEnter, and OnMouseOut. Click on More Events to display the additional events shown earlier.

The Widget Properties and Style pane

The Widget Properties and Style pane has two tabs: Properties and Style. The Properties tab presents interaction options based on the widget selected. An example from an Image widget is shown as follows:

Interaction styles refer to a widget's visual appearance as a result of an interactive event. For example, we can define different styles when a widget is selected or disabled. We also can define styles for MouseOver and MouseDown events.

Note

Some widgets will have additional styles and properties. For example, an Image widget's Widget Properties and Styles pane has slice (looks like a fountain pen) and crop buttons. The Widget Properties and Styles pane for a Paragraph widget would not require this functionality.

Learn more about individual widgets and styles at https://www.axure.com/learn/basic/widgets.

The Style tab is used to change the style of the widget selected. The Style tab has options organized into the following categories:

  • Location + Size

  • Base Style

  • Font

  • Borders, Lines + Fills

  • Alignment + Padding

The Style tab is shown as follows:

Note

With a widget selected in the design area, we can also access individual widget styles in the Editor toolbar. We can create custom widget styles as well. Under the Base Style dropdown, by using the Widget Style Editor (available by clicking on the icon), you can create custom widget styles as well. Visit https://www.axure.com/learn/basic/widgets to learn more.

The Widget Manager pane

The Widget Manager pane is used to change the visibility of dynamic panels as well as manage panel states. Dynamic panels are often used to hide or show content.

The following is an example Widget Manager with two dynamic panels labeled Panel 1 and Panel 2:

Note

Next to the dynamic panel labeled Panel 1, there is a blue rectangle. This indicates that the default for Panel 1 is Show in view. In contrast, next to the dynamic panel labeled Panel 2, there is a gray rectangle. This indicates that the default for Panel 2 is Hide from view. Clicking on the icon will toggle the state.

At the top of the Widget Manager pane, you will see a row of seven icons as follows:

  • Add State

  • Duplicate State

  • Move Up

  • Move Down

  • Delete

  • Widget Filter

  • Search

 

Adaptive Views


Axure RP 7 and beyond allow us to create adaptive prototypes with less effort than the previous versions. This is accomplished through a new feature called Adaptive Views. Adaptive Views enable us to create variations of a given screen design. Design variations are optimized for each breakpoint associated with the Adaptive View. Breakpoints are defined based on the browser window's width and/or height in pixels.

Planning for adaptive

If available, we can refer to analytics for our website or application to determine the appropriate width and height to set our breakpoints. When we add an Adaptive View, we are given the opportunity to define new views based on width and/or height, or select from five presets. The preset options are as follows:

  • Large display (1200 x any and above)

  • Landscape tablet (1024 x by any and below)

  • Portrait tablet (768 x any and below)

  • Landscape phone (480 x any and below)

  • Portrait phone (320 x any and below)

Adaptive Views inherit properties from the parent or base view. The initial design will be created in the base view (or default view). We would then complete additional designs for each child view.

Note

Making changes in child views does not impact the parent views.

There are two primary workflows that individuals and teams leverage when working with Adaptive Views. The workflows and details are as follows:

  • Mobile first:

    • The base view is the smallest view

    • Each child view inherits from the previous as the views get larger

  • Large to small:

    • The base view is the largest view

    • Each child view inherits from the previous as the views get smaller

Managing Adaptive Views

The following steps will guide you on managing Adaptive Views:

  1. To open the Adaptive Views dialog box, click on the Manage Adaptive Views icon located in the upper-left corner of the design area as shown:

    Note

    We can also access the Adaptive Views dialog box from the main menu (Project | Adaptive Views…).

    The following screenshot shows the default Adaptive Views dialog box:

  2. Click on the green plus sign to add a new view.

  3. In the Presets dropdown, select Portrait Tablet. Click on the green plus sign to add another new view.

  4. In the Presets dropdown, select Portrait Phone. Once you have added each view, click on the OK button to close the Adaptive View dialog box.

    The following screenshot shows an Adaptive Views dialog box with two views defined:

  5. The design area with the portrait tablet and portrait phone views defined would look like this:

We now see three additional tabs in the Adaptive View toolbar corresponding to each of our views: Base, 768, and 320.

Note

By default, tabs for base or child views are not shown at the top of the design area. Tabs corresponding to Adaptive Views appear once the associated view has been created. Learn more about setting up Adaptive Views at http://www.axure.com/learn/adaptive/setting-up.

Tabs can be in one of four colors: blue, orange, gray, or green. In our example, the Base tab is blue, indicating that the view is currently open for editing. The 768 and 320 tabs are orange, indicating that they are child views and could be affected by style changes made on the selected view. If a tab is gray, it indicates that the view will not be affected by style changes (for example, a selected child view would be orange and all the preceding parent views would be gray). Tabs turn green when the Affect All Views checkbox is selected, indicating that style changes will impact all views.

 

Summary


In this chapter, you have learned about the various aspects of Axure's environment and interface. We have explored the main menu, toolbar, sitemap, design area, and panes. We have also become familiar with pages, widgets, and masters. An introduction to Adaptive Views was also explored.

In the next chapter, we will learn how to create common interactions for several widely used web design elements, while building a community site. After organizing these elements into reusable masters, we will design a header, carousel, and a global footer.

About the Author
  • John Henry Krahenbuhl

    John Henry Krahenbuhl has over 20 years of experience in architecting practical, cost-effective, and innovative solutions. Being a creative thinker and having an entrepreneurial spirit has enabled him to perform in the role of lead or co-inventor on at least seven granted patents as well as numerous pending utility patent applications. He is a multifaceted and collaborative management professional, who is highly skilled at managing products through their entire life cycle from design to obsolescence, including specification and use case definitions, schematic and PCB layouts, production software implementation, and hardware implementation.

    He's a passionate, resourceful leader who demands and delivers excellence in design and user experience. To his credit, John is also the author of Axure RP Prototyping Cookbook as well as Learning Axure RP Interactive Prototypes, both published by Packt Publishing.

    Browse publications by this author
Axure Prototyping Blueprints
Unlock this book and the full library FREE for 7 days
Start now