Rapid Prototyping with the Pages Panel in Fireworks CS6

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.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

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.

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.

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

Newsletter

6 Comments
  1. Audrey Jacques Feb 9, 6:24 pm

    Thanks for this great article. I never used fireworks before,…but now when I see that I can do that! Funtastique. Thanks again!

    Reply
    +5
  2. Josh Feb 11, 10:50 pm

    Thanks for this – I’ve been swearing by Fireworks for over 10 years and have converted many to it since it’s light-years simpler and faster than Photoshop for web use. I finally upgraded to the latest and it’s nice to learn more about this feature.

    Keep up the Fireworks vangelizing!

    Josh

    Reply
    +2
  3. Brando Feb 12, 9:31 am

    I’ll go ahead and say what’s been echoed a million times, FW rocks! For web design, it is indispensable. Of all the programs that Adobe offers, this is now the only one I have installed and is the only one I need. 10 years ago I was like everyone else, I had learned PS and AI thanks, no need to learn anything else. All I knew about FW is that it was on the disk that came with my copy of Flash, (“probably some FTP programmy thingy” i thought).

    I’m always up for trying out different programs, (even if it means just opening them and playing around for 5 seconds then sending it to the trash) so when a co-worker said to give it a try… well let’s just say that I might have to walk away from the biz altogether if they took this tool off the market (or at least take up the open source sword for others like me). You click on something, you’ve selected it. You copy something with cmnd c, it’s copied, paste with cmnd v. This is how everything else works on a computer, and that’s what’s at the heart of this awesome little program, It’s like everything you like about every other graphic development program, all rolled up into one

    Reply
    0
  4. verpixelt Mar 6, 6:03 pm

    Thanks for this tut! Was quite helpful!

    Reply
    0
  5. simon5 Mar 23, 4:36 pm

    I’m not sure how to use say the Bricks UI package with Fireworks. I’m finding it impossible to copy a layer from one place or page to another. It seems like I can copy layers in Fireworks files I create from scratch in Fireworks. However when I import or open
    Bricks UI PSD file into Fireworks and attempt to copy layers to my Fireworks prototype pages the option to “Share the layer..” is greyed out.

    Hopefully I can figure this out because I really want to start using Designmodo UI elements in Fireworks rather than Photoshop now.

    Reply
    0
    • simon5 Mar 23, 5:27 pm

      I’m figuring it out now with the help of net.tuts and lynda.com

      Think I’m getting somewhere. btw I love your UI Packs. Thanks for making them.

      Reply
      0

Leave a Reply

*
* Minimum length: 20 characters