The love of my life, Axure Software Solutions, has come out with its Beta version of Axure RP Pro 6 just in time for Valentine's Day! This blog post is part review, part tutorial on the program's new Page Formatting features, which will definitely add variety and realism to your prototypes.

So, less type, more tutorial… here goes!

Adding Background Colors to Your Prototypes

Before Axure RP Pro 6 Beta, the only way to add color to your prototype's background was to drag a rectangle will the fill color of your choice onto your page and place it behind all other elements on the page:

For huge prototypes, this gets annoying fast especially for ones with countless pages. Then there's the problem of having that background shape end at some point on higher resolution monitors. For examlple, here's how a prototype with a colored background shape looks in a 1024 x 768 browser (not too bad):

However, that same prototype viewed at a resolution of 1920 x 1200 clearly shows where the grey rectangle ends and the white background starts:

In Axure RP Pro 6 Beta, you can add background colors to each page without having to use large, colored rectangles that add page weight to your prototype. Simply load up the page you want in Axure RP Pro 6 Beta and locate the Page Formatting window pane at the bottom of the screen:

Click the arrow next to the paint bucket icon where it reads Back Color and choose the color you want to appear in the background of your prototype. Sorry, gradients aren't allowed yet, but there's an easy way to get around this that I'll explain later:

Selecting a Back Color using Page Formatting properties now gives your prototype a consistent background color in your browser. All you have to do is make sure to apply that background to all your pages and the entire prototype will apear to have a grey background. Here's what it looks like at 1920 x 1200:

Another addition that I love is the ability to center your page inside the browser regardless of window size. If you want your page to be centered in your browser preview, select the center-aligned icon next to where it reads Page Align in the Page Formatting properties:

Adding Background Images

Since our prototype has a primarily-white inner background, adding a image to the background will help it stand out even more. You not only can add background images, but you can align and tile them to.

Step 1: Click the Import button next to Back Image

Step 2: Choose your image

Step 3: Render your prototype and preview it in a browser

For all background images, you can choose how to horizontally and vertically align them on the page with these 6 icons (no example provided):

Creating a Tiled Background

To add a tiled background image to your prototypes, follow steps 1–3 above for Adding Background Images to load a repeatable image then select "Image Repeat" from the Repeat menu in the Page Formatting properties:

Remember to choose an image that can be repeated seamlessly so the results look decent. Something like this:

Creating a Gradient Background Using Images

If you're still sobbing over the absence of a gradient background feature, grab some tissues, I'm about to show you a work-around Above in the Repeat menu, you'll see two more options: "Repeat Horizontal" and "Repeat Vertical". We're going to use "Repeat Horizontal" in combination with a solid Back Color to create a gradient effect in your prototype's background.

Step 1: Create a gradient image in your favorite graphics program

I used Photoshop to create an 800 x 800 pixel image of a blue to white gradient, then cropped and saved it as a 10 x 800 pixel JPEG. This decreases the file size dramatically and allows me to repeat the tiny image horizontally to create the illusion that the gradient is filling the entire background:

Follow the steps above for Creating a Tiled Background, choosing the saved image of your gradient and selecting "Repeat Horizontally" from the Repeat menu. It should look like this:

To ensure your gradient fades into white and is aligned to the top-left edge of the browser window, choose white as your Back Color and set Horz Align to left and Vert Align to top (the left-most icons in each row):

Improved Browser Preview

One of the biggest problems I had with the previous version of Axure is that clients would confuse the left and bottom frames of the browser preview with being part of the actual prototype and, ultimately, the final product. This led to problems.

Notice the light purple frames to the left and bottom of the browser:

Instead of using the prototype's global and local navigations, clients would often use the Sitemap in the left frame to navigate between pages, ruining the user experience. To alleviate this problem, I would send them a link to the prototype without frames, but by doing so, would remove the bottom frame that held important notes about site features and functionality.

Luckily, in Axure RP Pro 6 Beta, the default browser preview has been beefed up! The bottom frame has been removed altogether—going away party at my house this weekend!—and notes have been combined into a simplified left frame with tabs.

To switch between Sitemap and Page Notes in the left frame, just click one of the two tabs:

As an added bonus, if you decide you would like to send a frameless version of the current page being viewed, you can now click Show Links in the Sitemap tab to generate two URLs:

Last, but not least, if the left frame becomes an eyesore, Axure lets you click the grey rectangle icon in the upper-right of the frame to collapse it. To expand the frame again, simply click the icon once more:

You Can Use Ampersands (&) to Name Sitemap Pages Now

Who's been reading my diary? Although this feature won't change the world, it will appease my OCD tendencies. In previous Axure versions, you couldn't use ampersands while naming Sitemap pages. Instead, you were limited to use the actual word "and"  to combine words.

For example, the H1 on one of your pages could read "Fine & Dandy" but the name of that same page in the Sitemap pane would have to be "Fine and Dandy". Again, it's not a huge improvement, but it helps keep naming conventions consistent across your prototypes:

Stay tuned for more reviews as I dive deeper into Axure RP Pro 6 Beta. For this go-round, I am very pleased with these new features as they will most definitely improve your future prototypes.

2 Comments

potli

March 03, 2011

You make great points here. I have studied a lot about this on early articles published by other people, but I admit that you clearly proved your point here! Will come back to read more of your information!

Alex Roper

March 24, 2011

Centered page layout is a very much welcomed addition. But all you really need to know is they finally got around to letting you control the *line-height* on text. Maybe this is just the graphic designer in me, but it seems like a program that’s all about boxes and text should have added this a little sooner than version 6.