Axure RP Prototyping Cookbook

John Henry Krahenbuhl

Chapter No. 3 "Specifications"

In this package, you will find:

A Biography of the author of the book A preview chapter from the book, Chapter NO.3 "Specifications" A synopsis of the books content Information on where to buy this book

About the Author

John Henry Krahenbuhl has over 20 years of experience in architecting practical, cost effective, innovative solutions. Being a creative thinker and having an entrepreneurial spirit has enabled him to be the lead or co-inventor on numerous utility patent applications. He is a multifaceted, collaborative management professional, highly skilled at managing products through the 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. The love and encouragement of my family, made this work possible. I would like to thank my wonderful wife, Melissa, for her limitless love, motivation, faith, and support. I would also like to thank my children Matthew, Jason, Lauryn, and Henry. Seeing the world through your eyes inspires me. I would like to thank my Aunt Teddi Robinson for her determination and drive, and for always inspiring us to follow our dreams. And lastly, I would like to thank Nikola Tesla for his vision and contribution to modern society. May your accomplishments one day be fully appreciated by the masses.

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Axure RP Prototyping Cookbook

Axure has rapidly become one of the leading tools for rapid prototyping in use today. There are many reasons for Axure's popularity. You can easily create wireframes as well as generate specification documentation. Axure also provides the ability to quickly develop prototypes that can be leveraged in web browsers or as native Android, iPhone, or iPad applications. It is no wonder that Axure has become the tool of choice for a large percentage of the Fortune 100 corporations as well as User Experience professionals worldwide. This book provides fast, practical, step-by-step recipes to create your own custom prototypes for mobile and desktop. You can now easily create your mobile-first designs as well as responsive and adaptive web design interactions. Using real-world examples developed from today's hottest technological trends, you can take your skills to the next level! You will learn how to create custom templates for specifications to impress your clients, create Masters, and build your own custom widget libraries. You will also learn to use AxShare to quickly share password-protected prototypes with clients and teammates, and explore integrate Axure prototypes with external JavaScript libraries. With the latest enhancements in Axure RP 7, you can easily design Adaptive Web Layouts (AWD) as well as create widgets for Responsive Web Layouts (RWD). You will learn how to include jQuery Mobile in Axure prototypes; connect to social media sites such as Facebook, Twitter, YouTube, and Pinterest; and create e-commerce order checkout flows to make your prototypes come to life. With this book and Axure RP Pro, you will witness increased productivity in your team by leveraging Axure team projects. There are plentiful resources available to assist you no matter what your skill level. With a passionate community and exceptional technical support, any question you may have regarding Axure will quickly be answered. Visit for access to widget libraries, the Axure forum, and more resources. Welcome to the Axure community and enjoy your journey!

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

What This Book Covers

Chapter 1, Prototyping Recipes, introduces methods to bring paper prototypes to life, create a dynamic Breadcrumb Master, create a carousel, and build a fixed Contact Us widget. Chapter 2, Enhanced Prototyping Recipes, covers using external HTML and CSS in your prototypes, using inline frames to embed YouTube and Vimeo video sources, and making active connections to social media channels such as Facebook, Twitter, and Pinterest. Chapter 3, Specifications, explains how to customize specifications and standardize annotations. Chapter 4, Wireframes and Design, introduces reusable custom Masters and libraries. Chapter 5, E-commerce Solutions, covers business-to-business and business-to-consumer fundamentals, checkout flows, and prototyping examples. Chapter 6, Using Axure in Teams, explains how to manage shared projects, work with version control, and streamline collaborative workflows. Chapter 7, Adaptive and Responsive Web Design with Axure, introduces responsive design, jQuery media queries, and jQuery Mobile. Chapter 8, Prototyping for Mobile, covers optimizing prototypes to be viewed as native Android, iPhone, or iPad applications as well as native web browsers. Chapter 9, Miscellaneous Explorations, explains how to set up SDKs for mobile platforms as well as how to set up an equivalent LAMP (Linux, Apache, MySQL, and PHP) environment for prototyping.

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications
In this chapter, we will discuss ways to streamline your workow in Axure as well as customize documentation for your organization. You will learn the following:

Customizing the document template Standardizing your annotations Annotations for widgets Annotations for pages Specication customization

Introduction
Axure is a powerful tool not only for communicating design and prototyping, but also for generating specications. We will cover quick recipes to customize the document template and dene standard nomenclature for annotations and will walk through generating specications. Note that the specication generation feature and the recipes outlined in this chapter are only available with Axure RP Pro.

Customizing the document template

One of the beautiful features of Axure is its ability to generate annotated wireframes and to document specications. With Axure, you can use the default Microsoft Word template to generate specications, edit the default template, or import your own customized template, including headers and footers. In this recipe, we will explore how to customize the document template.

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications

Getting ready
To follow this recipe, you will need:

Microsoft Word or an open source word processor that can open and save les in Microsoft Word format, such as OpenOfce, LibreOfce, NeoOfce, or Google Docs Axure A previously created Axure RP le populated with your wireframes

The following is a screenshot from an example specication document:

78

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3

How to do it...
For this recipe, you will create a custom document template from the Axure base specication template. We will use the Axure RP le from the Creating a dynamic Breadcrumb Master recipe in Chapter 1, Prototyping Recipes, to create a specication document.
1. Start Axure, click on Open..., and select breadcrumb_master.rp.
If you already have Axure open, click on File in the main menu and then click on Open... in the drop-down menu to create a new RP document.

2. For Axure 7.0, click on Publish above the wireframe pane. You can also select File in the main menu and then click on Generate Specication in the drop-down menu. 3. In the Generate Specication pop up, click on Word Template. 4. Under the Word Template option, click on Edit. Axure will open the base specication template in Microsoft Word.

79

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications 5. Make modications to the template (for example, to the document cover page, header, footer, and so on) and then save it as AxureCookbookInputFile.docx.
In the template, note the text [[INSERT AXURE SPEC]]. The specification generator replaces this text with the Axure-generated specification.

6. To import the template le, click on Import. 7. An Open pop up will be displayed. 8. Select AxureCookbookInputFile.docx and click on Open. 9. A Warning pop up will be shown letting you know that the current template will be replaced. Click on Yes.

10. Click on the General menu item. 11. To the right of the Destination le eld, click on the icon with the three dots (ellipsis) to change the location in which the destination le will be saved. 12. Enter breadcrumb_master.docx in the Destination le eld, select the folder you wish to save the specication in, and click on Save. 13. Click on the Publish button on the toolbar and select Generate Prototype Files. You can also generate the prototype by going to the main menu and clicking on Publish and then on Generate Prototype Files. 14. The specication document will be generated using the AxureCookbookInputFile.docx le you specied in step 8. The le will be saved to the destination le location as AxureCookbookInputFile.docx, and the specication le will open automatically.

How it works...
By using a custom template, you can generate a customized specication document for your organization. You can modify the default template provided by Axure or use your own. Just remember to place the text [[INSERT AXURE SPEC]] in the document where you want the generator to place the specication.

80

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3

There's more...
Be sure to explore the other options in the Generate Specication pop up. You can specify which items to include in the generate specication document. Options provided in the Generate Specication menu are as follows:

Masters Page Properties Screenshot Widget Properties Layout

See also

The Creating a dynamic BreadCrumb Master recipe in Chapter 1, Prototyping Recipes

Standardizing your annotations

To streamline your workow and assist others in understanding your functional specications, it helps to follow a nomenclature. In this recipe, we will discuss the basic methods to standardize annotations for your wireframes. Many individuals have used various naming conventions throughout their careers. Currently, two naming conventions stand out: CamelCase and Underscore. Since most programming languages do not let a programmer use spaces in names, the CamelCase and Underscore methods have become good alternatives. In CamelCase, most characters are in lowercase. The rst word is lowercase and the rst letter of subsequent words is upper case. For example, "menuContent" has the rst word in lowercase and the rst letter of the second word in uppercase. In Underscore, words are separated with underscores. For example, "menu_content" has the rst and second words separated by an underscore. Axure uses modied CamelCase in that the rst letter of each word is capitalized. For example, "OnClick" has the rst letter of the rst and second words capitalized.

Getting ready
All you will need is a word processor or text editor to create a document.

81

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications

How to do it...
For this recipe, you will create a document with your proposals for naming conventions and annotations. 1. Select several naming conventions for your annotations. 2. Create a document with example widgets and interactions showing the various proposals of naming conventions. 3. List the pros and cons of the various proposals.
Sometimes, the names of elements can get lengthy. If you see this as an issue, explore several different standards for shortening the names of common elements (for example, dynamic_panel_carousel becomes dp_carousel).

4. Document and discuss these options throughout your organization and collect feedback. 5. Rene your document based on the feedback and suggestions gathered. 6. Finalize your proposal and obtain sign offs from the decision makers in your organization.

How it works...
Standardizing your annotations can help others embrace the evolution of different designs and interactions. By using and communicating a standard nomenclature for the description of elements, you can create an atmosphere of comfort, enabling others to get beyond the documentation and focus on the vision.

Annotation for widgets

Labelling widgets in your wireframes helps to communicate the intent for those widgets. Labels provide you with a reminder as to the purpose of each widget as well. Consistently labelling widgets is another best practice as it assists others in understanding your functional specications.

How to do it...
In this recipe, you will place the Image widget on a wireframe and label the widget. 1. Start Axure, and under Create New, select RP Document.
82

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3
If you already have Axure open, select File in the main menu and then click on New in the drop-down menu to create a new RP document.

2. While holding down the mouse button, drag the Image widget and place it at coordinates (0,0) on the wireframe. 3. In the Widget Properties and Notes pane, select the Image widget, click on the Image Name text eld, and enter the name of the image (for example, CompanyLogo). 4. Experiment by dragging other widgets onto the wireframe and naming the respective widget name in the Widget Properties and Notes pane.

How it works...
Axure associates the label entered in the Widget Properties and Notes pane's Label text eld with the widget. As you further explore Axure and its features, you will see that labels are referenced throughout your prototype. Labels also appear in widget tables displayed in your specication document.

Annotations for pages

Labelling each page in your design helps to communicate the intent for that page. Axure RP Pro enables the use of page notes. Notes can be separated into separate elds (for example, developers, testers, clients, and so on).

How to do it...
Start Axure, and under Create New, select RP Document. Double-click on Home in the Sitemap pane. Below the wireframe, click on the Page Notes tab. Click on the Customize Notes link. In the Page Notes Fields pop up, click on the green + and type a new eld name. Add new elds and rename them as appropriate (for example, developers, testers, clients, and so on). 6. Click on Page Notes and you will see each of the note elds you added in step 5. 7. Select the appropriate note eld and type page notes.
Page notes will be shown in your generated specification typically just above the screenshot.
83

1. 2. 3. 4. 5.

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications

How it works...
For Axure RP Pro users, you can add Page Notes to each page in your Sitemap. Click on the Page Notes tab to view current Page Notes. Click on Page Notes to select from a currently dened note eld and add a new page note.

Specication customization
Axure provides several options for customization of the specication generated. In this recipe, we will cover some of the options in the Generate Specication dialog. You will be shown the options for a specic menu item and a brief explanation of the properties available will follow. We will discuss Pages, Masters, Page Properties, Screenshot, Widget Properties, and Layout.

Getting ready
To step through this recipe, you will need:

Microsoft Word or an open source word processor that can open and save les in Microsoft Word format, such as OpenOfce, LibreOfce, NeoOfce or Google Docs Axure A previously created Axure RP le populated with your wireframes

How to do it...
For this recipe, you will use the Axure RP le from the Create a dynamic Breadcrumb Master recipe in Chapter 1, Prototyping Recipes, to create a specication document. 1. Start Axure, click on Open, and select breadcrumb_master.rp.
If you already have Axure open, select File in the main menu and then click on Open... in the drop down menu to create a new RP document.

2. Click on Publish above the wireframe pane. You can also select File in the main menu and then click on Generate Specication in the drop-down menu. 3. In the Generate Specication pop up, click on Word Template. 4. You will see the Generate Specication dialog open.

84

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3

5. Click on the Pages menu item. 6. You will see the Pages dialog open.

7.

Click on the check boxes to select the pages to include in the specication. You can also choose from the following options:

Include Pages Section Section Header Include Sitemap List Sitemap Header Generate All Pages or select individual pages to generate Screenshot header Show footnotes on screenshot Exclude footnotes not in widget tables

85

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications
To the right of Generate All Pages, just next to the sitemap shown, there are four icons. Clicking on an icon performs the action. The icons, from top to bottom, are:

Check All Uncheck All Check All Children Uncheck All Children

8. Click on the Masters menu item. 9. You will see the Masters dialog open.

10. Click on the check boxes to select the masters to include in the specication. You can choose from the following options:

Include Masters Section Section header Include Master List Master list header Only list generated Masters Generate All Masters or select individual masters to generate

86

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3
To the right of the Generate All Pages option, just next to the sitemap shown, there are four icons. Left-clicking on an icon performs the action. The icons, from top to bottom, are:

Check All Uncheck All Check All Children Uncheck All Children

11. You also can select from:

Generate Masters Used on Generated Pages Do Not Generate Masters Set As Custom Widgets Document Masters in Page Sections provides you with the option to Only document first use and Exclude Master Notes

12. Click on the Page Properties menu item. 13. You will see the Page Properties dialog open.

87

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications 14. Click on the check boxes to select the page property options for the specication. You can choose Include Page Notes and Show Page Notes names as headers. If you select Show Page Notes names as headers, you are given the option to select Use heading basic style. You can also use the Select and order the Notes box. Click on a note and use the up and down arrows to change the order of the notes. 15. If you select Include Page Interactions, you can also select Section header and Use heading basic style. 16. If you select Include List of Masters Used on Page/Master, you can choose Section header. 17. If you select Include Master Usage Report, you can choose to include Section header, Pages header, and Masters header. 18. You can also choose Include Dynamic Panels. 19. Click on the Screenshot menu item. 20. You will see the Screenshot dialog open.

21. Click on the check boxes to select the screenshot options for the specication. You can choose from the following options:

Include Screenshot Screenshot header Show footnotes on screenshot Exclude footnotes not in widget tables Put border on screenshot Do not scale footnotes with screenshot Apply default OnPageLoad Cases

88

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3

Include Submenus Include expanded Trees Show default pages in Inline Frames Do not apply Background Styles Do not apply Sketch Effects

22. You can also set Max width as % of page/column width and Max height as % of page height. You also can enable Allow screenshots to split across pages for singlecolumn specications only. 23. Click on the Widget Tables menu item. 24. You will see the Widget Tables dialog open.

89

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Specications 25. Click on the checkbox for Include Widget Tables to show widget tables in your specication. You can add and remove widget tables by clicking on the Add and Remove links. Select the widget table you would like to modify by clicking on the widget table drop-down list. 26. Click on Table header to show a widget table header on the specication. You can choose from the following options:

Footnote Label Interactions Description Status Benefit Effort Risk Stability Target Release Assigned To Widget Text Widget ToolTip List Options

27. You can set Row Filters to Only include Widgets with footnotes and Remove rows with only footnote and label data. You are given the option to customize a row lter by any of the preceding columns shown and testing it for equality to a string you enter into a text eld. 28. For Column Filters, you can select Remove empty columns. 29. To see the Column Heading Labels options in your specication document, click on the show link. Column Heading Labels options can be changed from default for:

Footnote Label Interactions Text Tool Tip List Options

30. For Formatting, you can choose Allow rows to beak across pages. 31. Click on the Layout menu item.
90

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Chapter 3 32. You will see the Layout dialog open.

33. Click on the radio button to specify a Single column or Two column layout. If you have selected two-column layout, you can change Left column width %. You can order the content displayed in the columns by clicking on the content type shown and clicking on the up and down arrows. Use ---Column Break--- to specify where the column break should be applied.
For Two-column layout, most folks choose to put User Interface (Screenshot) in a column by itself and the rest of the content in the other column. This leads to a cleaner look and makes the specification easier to review.

How it works...
As we have seen, there are many options you are provided with to customize your functional specications. Feel free to explore these options and optimize the specication for your audience.

There's more...
Axure provides an excellent overview to customize and generate functional specications. Navigate to http://www.axure.com/learn/spec/functional-specifications to learn more.

91

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book

Where to buy this book

You can buy Axure RP Prototyping Cookbook from the Packt Publishing website: .
Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy.

Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.

www.PacktPub.com

For More Information: www.packtpub.com/axure-rp-prototyping-cookbook/book