Rapid Prototyping with the Pages Panel in Fireworks CS6

• 6 minutes READ

Adobe Fireworks CS6 is an ideal tool for creating prototypes. There are several advantages of using Fireworks over its sibling Photoshop, but the one I want to share with you in this article is the Pages panel. This panel gives you the ability to quickly mimic functionality found in fully-coded web sites and applications, with a minimal amount of effort and zero coding. What’s important to take away from this, especially if you’re new to web design and development, is that the code, while functional, is in no way, shape, or form, is production ready. The content produced from Fireworks, in the context of this article, should strictly be used for prototyping purposes. Essentially, a client or colleague can get a sense of what to expect from the final product.

Additionally, I think it’s worth mentioning that the prototyping process is typically a second step after completing a wireframe. A wireframe is rough layout or idea to base your prototype on. The wireframe example I’m using is fairly formal, and wireframes don’t require this much effort. You could scribble a wireframe on a napkin if it suits your project. Each of these steps is designed to conserve precious development time. At this stage making changes to layout, design, or functionality is much easier. The same cannot be said once you starting coding HTML, CSS, and JavaScript.

Wireframe

Wireframe

Where to start?

At this point, I assume you have a basic working knowledge of Fireworks. Additionally, I’m assuming that there is an approved wireframe, or at least a foundation from which you can build your prototype. If that’s the case, you should start by thinking about elements that will be commonly shared across all the pages within your prototype. Based on the wireframe image, we have several sections we need to consider.

Now, to keep things as basic as possible, I have a very generic layout that I’m working with. We have a header area that contains a navigation system and search box, a section for some artwork, a section for a jQuery slider, and a footer. With this wireframe, the commonly shared elements across all pages will be the header with nav, the artwork section, and the footer. Leaving the area for the jQuery slider as the area where content will change.

Creating a Master Page

Every time I teach a Fireworks class, when the concept of prototyping comes up, I find that students who dabbled on their own don’t fully understand how to implement Master Pages in the Page panel. It is important to take a series of steps in order for the Master Page to work correctly. It’s not hard or confusing, you just have to remember the process. This can be the most critical aspect of creating a functional prototype.

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates

Creating a functional prototype

Here we see what the home page of the site should look like, complete with its jQuery slider. Now in order for us to prototype this properly we need to establish what details the Master Page should have.  As I mentioned earlier, everything except for the jQuery slider will be elements commonly shared across all pages.

Make sure you have the Pages panel open. If you don’t, you can access it by going to Window>Pages. You’ll see by default you have 1 page called “01 Page1”.

Pages panel open

It’s also worth noting that my example uses button symbols in the navigation system. If you want to prototype links, you can use hotspots, but in this case by using button symbols, you can simulate button states in your prototype.

The next step is to remove the jQuery slider. I’m going to select it using the Pointer Tool (black arrow) and cut it to the clipboard Edit>Cut. This will clear content we don’t want on the master page. With 01 Page 1 selected in the Pages panel, click the sub-menu button in the top right corner and choose Set As Master.

Set As Master

This will set 01 Page 1 to the Master Page. After you create a master page, any newly created pages automatically inherit the Master Page settings. Existing pages don’t inherit these settings unless you link them to the Master Page by clicking the little box to the left of the page. If you later change the Master Page, all linked pages, and pages created after setting a page as a Master Page update automatically.

Low-Code Website Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

Create a new Page by clicking the new page button down towards the bottom right corner of the panel.

Create a new Page

Once the new page is created, paste the jQuery slider you cut from an earlier step. Rename the page by double-clicking on its current name to About.

jQuery slider

To continue the prototype, you will build each new page the same way. For this example, I’ll just type some placeholder text indicating the name of the page. So click on the new page button again to create the new page. You’ll notice only the assets from the Master Page are included on the new page. Type Products.

Type Products

Repeat the process until you have all pages accounted for.

Creating Links

Now with all the pages created in the pages panel, it’s time to create the links between the pages. Of course we want all pages to link the same way, so we’ll create the links on the Master Page.  Because we created our new pages after we created the Master, they’ll all be updated to reflect this change.

With the Master Page active in the Pages panel, click on the About button with the Pointer Tool. With the About button selected, you’ll notice a link text field appears in Properties Panel. Access the menu associated with links text field; you’ll notice it’s populated with all the pages you’ve created. Choose About.

Choose About

Repeat this process for all the buttons in the Master Page.

Before we preview this, I want to give you a little tip. This is a small little detail that makes a big difference when presenting your prototypes and possibly one of the least obvious things to do. When I teach Fireworks classes this always confuses students. When previewing the prototype, you don’t want to see the Master Page, rather in this case the About page. There is a small button on the Pages Panel on the Master Page that will toggle visibility. You want to make sure it’s toggled off so it’s not visible. The Master Page thumbnail will not appear when its visibility is toggled off.

Master Page

Now we have all the pages complete, the final thing we need to do is preview it. Go to File>Preview In Browser>Preview All Pages in [Safari].

Preview All Pages in [Safari]

Once your content loads in the web browser you’ll be able to use the links in the navigation system.

Fireworks offers many features for prototyping websites and applications. The Pages panel is just the start, but with these basic skills you should be well on your way to creating content that you can test and evaluate before having to write code.

Matthew Pizzi

Train Simple is an Adobe Authorized Training Center offering self-paced training videos on Adobe Software and web technology.

Posts by Matthew Pizzi