Create a Client Mockup in Fireworks - dummies

By David Karlins, Doug Sahlin

An early step in the process of a building a website is to define the concept behind the website and how it should look to appeal to its target audience. The next step is to create a mockup of the website — or, as some web designers call it, a comp. In a nutshell, the exercise amounts to creating shapes that define the major parts of the web design.

You can easily create several versions of a mockup in Fireworks. If you used Fireworks to do your storyboarding, use that document as the basis for your client mockup. Flesh out the shapes with actual content.

If you have assets already created, you can incorporate them into the design. Add link titles to the shapes you created for the navigation menu. Then you’re ready to create alternative versions of the mockup.

To create alternative versions of your mockup in Fireworks, just follow these steps:

  1. Open the States panel.

  2. Select the first frame and then click the New/Duplicate State icon.

    Fireworks creates a carbon copy of the first state.

  3. Create a variation of the first state.

    This is the second design you present to the client. You can change how the menu is displayed, placement of objects, choice of colors, and so on.

  4. Create additional states to create different variations of the design.

  5. After creating different variations of your design, choose File→Export.

    Fireworks displays the Export dialog box.

  6. Choose the desired file format in which to save the images. Then from the Export drop-down menu, choose States to Files.

  7. Name the document and then click Save.

    After you export the states, you have multiple files with the same filename, appended by the number of the state. You can now send the individual versions to your client for consideration.