back

How to create a click-through mock-up
with Adobe Fireworks CS3

by Jim Babbage

Fireworks has always been a great tool for editing and creating screen graphics, but Fireworks CS3 brings a stronger focus to the term "rapid prototyping." With the introduction of pages, master pages, and shared layers, it is easier than ever to design a variety of page layouts for client feedback and then modify and slice an approved design for use in the final web page.

Why create a click-through mock-up?

An important part of my workflow in website design is the creation of a click-through mock-up. Some of you may be concerned about the added time this can take and whether it's really necessary. Working with Fireworks for the mock-up means not much time is added to the project—and giving clients a realistic, clickable sample of a site can keep them engaged, while reducing changes later when they are harder to implement.

Creation and approval of this mock-up are, in fact, one of my production milestones; the client and I have one more opportunity to tweak the design before we hit the coding stage of the site. This can save a lot of time and frustration. Because I'm still working with graphics, it's easy to make changes and run an updated version by the client.

The click-through gives you, your team, and the client a chance to test the flow of the site and make sure that the positioning of various elements (such as navigation) are really as user friendly as you thought they were during the design stage.

Not only does the mock-up make my life easier, but it's also part of my billing process. Once the client approves the click-through mock-up, I send an invoice. This keeps my cash flow stable and the bank happy.

My click-through mock-up is not complex in terms of HTML or graphics. Essentially, it consists of flattened JPEG files on web pages, using hotspots for navigation. It's simple enough that Fireworks can generate all the necessary code with the exception of centering a layout, which I can do quickly in Dreamweaver or a text editor, if needed. I want this process to be simple and fast.

As simple as the HTML structure may be, it's important that the design be as complete as possible. I don't create a click-through mock-up until the client has approved the look of the site. The point of the mock-up is to test site flow and usability and make subtle changes to the design. It should be a visually accurate experience.

Mock-up tools

The real time-saver in this process is the use of pages in Fireworks (see Figure 1). Once my initial design is approved, I can quickly build additional pages. Pages give us flexibility as well. Each page can contain its own unique elements, layer structure, page dimensions, and canvas color. Elements that are consistent throughout the design can be shared across pages using a shared layer, which makes them easy to update. Naming your pages is also important. Use proper filename conventions because these names will become the filenames for the Fireworks generated HTML pages.

Firework's pages panel

Figure 1. Pages panel

You can use a master page if you have repeating elements that appear in the same location on every page, such as a header or background treatments. When you create a page based on a master page, the Master Page layer shows up at the bottom of the new page's layer stack. These layers are locked and can only be edited by editing the master page.

Shared layers give you the freedom to share any layer you want across any page. Unlike master page elements, shared layers can be edited from any page, but remember that changes are reflected on every page that contains the shared layer. You can share certain layers on certain pages as well.

Note: You cannot have identical layer names on different pages. If you try to rename a layer to match another page layer, Fireworks automatically adds a number to the layer name (for example, "content layer" becomes "content layer 1," "content layer 2," and so forth).

Shared web layers make this concept simple. Similar to a shared graphic layer, a shared web layer enables you to share navigation across selected pages. As you add pages to the comp, you can update the navigation on a single page and apply it to all other shared pages.

Creating the mock-up

Now let's look at the process. To follow along, you can download mockup_FW.zip file, which contains the mockup_start.png and mockup_final.png files.

The design I'm using has been generously donated by Viktor Goltvyanitsa. I have modified it to suit this article. For the purposes of this article, the design has been approved by the client, and now it's time to build the click-through mock-up.

I find it helpful to separate the Pages panel from the default panel group so I can see both the Pages and the Layers panels at the same time. To separate the panels, click and drag the Pages tab away from the panel group. As you move it, you will see a transparent box showing you where the panel will appear if you let go of the mouse (see Figure 2). I prefer to place it between the Optimize panel and the original panel group.

Tearing off a panel from an existing panel group

Figure 2. Tearing off a panel from an existing panel group

As you begin to build your mock-up, consider the following:

In this example, I have structured and named the layers for you.

This design has two main page styles for the mock-up: a home page (see Figure 3) and a gallery page (see Figure 4). We will add at least one more page style before we are finished.

Home page mock-up

Figure 3. Home page mock-up

Gallery page mock-up

Figure 4. Gallery page mock-up

The different page styles currently reside in different layers on a single page. Those layers are the main content layer and the gallery content layer, respectively. Hiding the main content layer displays the gallery. Prior to Fireworks CS3, this was a pretty typical design paradigm. With pages, however, you no longer need to show or hide layers unless you want to.

The design I am using has several elements that can be moved to a master page. This jump-starts new page creation and minimizes the number of repetitive graphics throughout the file.

First, create a duplicate of the existing page. To do this, open the Pages panel and drag Page 1 to the New/Duplicate page icon in the lower right corner of the Pages panel (see Figure 5).

How to duplicate an existing page in Fireworks

Figure 5. Duplicating an existing page

This ensures you have a version of the page with everything intact. The master page needs only certain elements. Any content that changes on subpages should be removed from the master page.

With the top page still selected, click the Page Options icon and choose Set As Master Page (see Figure 6).

Creating a master page in Fireworks

Figure 6. Creating a master page

With the master page still active, open the Layers panel and drag the following four layers to the Layers panel trash can:

Those layers will change depending on your page, so they should not be part of the master page.

Now select Page 2 and drag the following three layers to the Layers panel trash can:

Once they are deleted, you will see that the master page looks complete because those three layers are what make up our master page. Cool, huh?

Separating the page designs

Double-click Page 2 in the Pages panel and rename it index. Avoid names that include spaces or special characters because these names become the filenames for the HTML mock-up.

Create a duplicate of the index page. Because the master page displays on all subpages, the new page (now called Page 2) is identical to the index page.

Double-click this new page and rename it europe_gallery. Drag the Main Content layer to the Layers panel trash can. You now have distinct homepage and gallery page designs.

When you move from page to page, you expect some type of visual cue, so let's change the tabs for the gallery page.

Go to the Layers panel and expand the tabs layer. Unlock the layer by clicking the padlock icon. Select the tab1 object in that layer.

Expand the Assets panel group and click the Library tab. In the Library, you will find three symbols representing the tabs. Locate the tab2 symbol and drag it onto the canvas (see Figure 7).

Library panel in Fireworks showing symbol objects for the currently open document

Figure 7. Library panel containing symbol objects for the currently open document

It now appears at the top of the Tabs layer stack.

In the Layers panel, drag the new tab object lower in the stack until it appears above the original tabs.

On the canvas, zoom in on the tab area, and use the Pointer tool to position the new symbol on top of the current tabs. Use the arrow keys for precise placement. When satisfied, you can either hide and lock the old tab object or drag the object to the trash can.

Click the index page and then the gallery page, and you'll see that our simulation is taking shape.

Create a duplicate of the europe_gallery page. Rename it canada_gallery. Then you can customize the page. To speed things up, I have created a symbol containing a new group of photos. You can delete just the existing group from the Search Results sublayer and drag the canada_gallery from the Library panel. Make sure you have the Search Results layer selected before you bring the symbol onto the canvas. To make it easier for positioning, you might want to keep the original gallery in place until you have the canada_gallery in the right spot.

With the new gallery in position, save the file.

Getting interactive

To create links that will work on all the pages, create a shared web layer. Select the main web layer on any of the three pages and then click the New Sub Layer icon at the bottom of the Layers panel (see Figure 8).

Creating a new web sublayer in Fireworks

Figure 8. Placing interactive elements on a web sublayer to share them

Choose the Rectangular Hotspot tool from the tool bar (see Figure 9) and draw a box around the Home tab.

Rectangular Hotspot tool in Fireworks

Figure 9. Rectangular Hotspot tool

When you release the mouse, the Property Inspector changes so you can adjust the hotspot (see Figure 10).

Note: Hotspot shapes do not show up in the web browser.

Applying links to a hotspot via the Property Inspector in Fireworks

Figure 10. Applying links to a hotspot via the Property Inspector

Choose index.htm from the Link field. Only select links from below the dotted line. Links above the dotted line indicate links that have been used or selected previously. It's also a good idea to name your hotspots so they are easy to locate. You can do this in the Property Inspector or in the web layer.

Repeat the process for the gallery page and choose europe_gallery.htm.

Sharing links across pages

Now you have created two links. The link to the other gallery will not be a shared link. Instead, we're going to use the page counter below the thumbnail images for the third one to simulate gallery browsing.

Make sure your two hotspots are inside the web sublayer. They should appear slightly indented. If it's hard to tell, just collapse the sublayer. If the hotspots disappear, you know they are in the right place.

With the web sublayer selected, click the Layer Options icon in the upper right corner of the panel and choose Share Layer To Pages (see Figure 11). This is the same process you use to share a normal graphic layer as well.

Share Layer To Pages command in Fireworks

Figure 11. Share Layer To Pages command

When the Share Layer To Pages dialog box appears, select the two outstanding pages (on the left) and click the Add button to include them in the sharing. Then click OK. Shared layers (web or otherwise) are identified with a different highlight color. Sublayers are identified by a slight indentation from the left (see Figure 12).

Shared layer and its sublayers

Figure 12. Shared layer and its sublayers

Adding nonshared hotspots

Make sure the europe_gallery page is active. Choose the main web layer and use the hotspot tool to draw a hotspot over the numeral 2 in the page counter.

Use the Property Inspector to select the canada_gallery.html page.

Switch to the canada_gallery page. If you like, you can style the page counter so the numeral 2 is now bold and 11 pixels, and you can make the numeral 1 nonbold and set its size to 10 pixels rather than 11.

Make sure you are on the main web layer and create a hotspot over the numeral 1 in the page counter. Link it back to the europe_gallery page. Then save the file.

Now it's time to test. Choose File > Preview in Browser > Preview All Pages In [browser]. My default browser is Firefox. Yours may be different.

When the browser launches, click the tabs. You should move back and forth between those two pages (index.htm and europe_gallery.htm). Click page counters 1 and 2, and you should be able to switch between the different galleries.

Congratulations, you have made a pretty convincing graphical click-through mock-up of your site design.

Final touches

With these lessons, you can now add additional pages. I included a third tab symbol that highlights the Contact tab.

Now you just need to export the files and upload them to a web server.

Select each page and ensure the base optimization in the Property Inspector is set to JPEG – Better Quality. This is the optimization setting that will be applied to image elements that are not sliced.

Choose File > Export. In the Export dialog box, use the following settings (as shown in Figure 13):

Then click Save.

Export settings in Fireworks

Figure 13. Export settings

Note that you can either export the current page or all the pages. This means your master page will also be exported, so make sure to browse to the destination folder and delete both the HTML page and the JPEG file created from the master page.

Your final step is to upload the files to your web server—or, if you wish, open the HTML pages in Dreamweaver and adjust them so your JPEG files display in a centered style, rather than aligned left.

Where to go from here

I hope this has given you a taste of the ease — and power — of using Fireworks for creating click-through mock-ups. For more information, check the Fireworks Developer Center or drop by Community MX and read the other articles and tutorials I've written on this and other subjects.


Upcoming Flex Events

    360 | Flex Conference
     Indy, Indianapolis, IN
     May 18 - 20, 2009



Jim Babbage teaches imaging, web design, and photography at Centennial College's School of Communication, Media, and Design and at Humber College in Toronto, Canada, where he was born and raised. He is a partner in Newmedia Services and a regular contributing partner to Community MX, for which he has written many articles and tutorials about Fireworks, Dreamweaver, and general web- and photo-related topics.