Going from idea to wireframe

Every design starts out as an idea. Sometimes that idea is sketched out on paper; other times you've only envisioned it in your mind. In either case, it is a good idea first to solidify your thoughts in a wireframe format before you begin the design phase. A wireframe gives you the flexibility to make changes without worrying about design details. It also provides an opportunity to get approval from your client on the design direction early in the process.

In this section we'll take a rough sketch of an idea and turn it into a simple but flexible wireframe. At the same time, we'll use several new features available in Fireworks CS4 that increase productivity and reduce your production time.

Create a new document

If you haven't already, be sure to download the sample files at the start of this tutorial.

1. Launch Fireworks CS4.
2. Select File > New.
3. In the New Document dialog box, set the width of the canvas to 1024 pixels and the height to 640 pixels.
4. Set the canvas color to white.
5. Click OK.

Import the sketch

Now import the sketch:

1. Select File > Import.
2. Navigate to the sample files folder and select the file named sketch.jpg.

3. Click the right-angle shaped cursor on the canvas in the upper left corner (0,0) to place the imported sketch at that location. The sketch should be centered horizontally on the canvas.

   Alternately, you can simply drag and drop the file from your file system onto the Fireworks canvas (see Figure 3).

   

   Figure 3. The imported sketch is centered horizontally on the canvas

Use guides, smart guides, and tooltips

To quickly create an accurate layout use guides and tooltips:

1. Make sure that the rulers are visible by selecting View > Show Rulers.
2. Enable guide snapping by selecting View > Guides > Snap to Guides.
3. Enable smart guides by choosing View > Smart Guides. Select the options to Show Smart Guides and Snap to Smart Guides.
4. Enable Tooltips by selecting View > Tooltips.
5. From the top ruler, drag a horizontal guide onto the canvas. Use the tooltip to position the guide at precisely 76 pixels.

6. Drag a second horizontal guide onto the canvas. Position it at 604 pixels.

   Tip: Press Shift as you drag out a guide (or anytime after guides are placed on the canvas) to see the distance between the current guide, all other guides, and the edge of the canvas.

7. Select the imported sketch and position it so that the top and bottom of the main content area roughly matches the two guides you just placed on the canvas.

8. In the Layers panel, click the second column next to the sketch object to lock the layer (see Figure 4). We'll use this sketch layer as a background reference as we lay out the wireframe elements.

   

   Figure 4. Lock the layer by clicking in the second column from the left to make the lock icon appear

Create the wireframe layout

Creating the wireframe involves drawing some basic rectangles and text. The full design will be added later, after the overall layout is more developed.

1. At the bottom of the Layers panel, click the New/Duplicate Layer button to create a new layer.
2. From the Tools panel, select the Rectangle tool in the Vector group.
3. In the Properties panel, use the Fill drop-down menu to select None from the list. Click the Stroke color swatch and choose a dark gray color from the color picker that pops up.

4. Drag out a rectangle to fill the area between the two guides that covers almost the entire canvas. There should be approximately 6 pixels remaining uncovered by the rectangle on both the left and right edges of the canvas.

   Make sure the rectangle is perfectly centered horizontally. To do this, open the Align panel (Window > Align). Select the "To Canvas" icon and choose the option "Align horizontal center" (see Figure 5).

   

   Figure 5. In the Align panel, select the "To canvas" button and choose the icon to center the rectangle horizontally

5. Draw a small rectangle in the top right corner to represent a button. Using the tooltips, start drawing the rectangle at approximately x = 850 and y = 35. Drag to the right and down. Using the smart guides, align the right side of the small rectangle with the right side of the content box (larger rectangle). Press the Up arrow key while dragging the rectangle to add slightly rounded corners (see Figure 6).

   

   Figure 6. Press the Up arrow on your keyboard while dragging the mouse to draw a rectangle with rounded corners

6. With the newly created button rectangle selected, Alt-drag (Windows) or Option-drag (Mac) to the left to create a copy of the rectangle, leaving a little bit of space between the two buttons.

7. Repeat this step (Edit > Repeat Duplicate). This action creates a second copy with the same gap space between copies (see Figure 7).

   

   Figure 7. Create three copies of the rounded buttons

8. Repeat steps 4–8 to build a smaller set of four buttons in the bottom left area of the document.
9. Now it's time to add the text labels. From the Tools panel, select the Text tool in the Vector group.

10. In the Properties panel, click the Fill color swatch and choose a dark color. Set the justification to left and the Text Size to 24 (see Figure 8).

    

    Figure 8. While the text is selected, use the Properties panel to define how the text will appear

11. Click once in the top left of the document and enter the header title: Ignition Carshare.

    Tip: When you are finished typing in a text box, press Control-Enter (Windows) or Command-Enter (Mac) to quickly exit type editing mode.

12. Click above the left-most button in the top row. Type the text: Find Cars. While the text is selected, change the text size to 16 in the Properties panel.
13. With the Pointer tool, Alt-drag (Windows) or Option-drag (Mac) the text to the other two top buttons. Change the text on the other two buttons to Check Rates and More Info. You can change the text by double-clicking the text box, highlighting the text to be changed, and typing the new text.
14. Repeat this process with the smaller buttons in the lower left, creating text labels that say about us, partners, press, and home using a text size of 10.

15. To hide the image of the sketch from the canvas, select the Layer panel (which may be grouped with the Pages tab) and scroll down to Layer 1. Click on the eye icon next to Layer 1 to turn the visibility off (see Figure 9). The layer containing the sketch image is no longer displayed.

    

    Figure 9. Toggle the visibility of Layer 1 off by clicking the eye icon to hide the sketch

With the sketch layer turned off, your image should look like Figure 10.

Figure 10. The wireframe design of the Ignition Carshare page

Create the other pages of the wireframe

Now that you have created the very basic wireframe of the site layout, the next step is to create a few pages showing various content. Fireworks CS4 allows you to create as many pages as needed, with shared and unique items on each page.

1. Open the Pages panel (Window > Pages) if it isn't already displayed on the right side of the workspace.

2. With the current page selected, click the panel Options menu. Choose the option to "Set As Master page" from the list that appears (see Figure 11).

   

   Figure 11. Set Page 1 as the master page using the panel Options menu

3. At the bottom of the Pages panel, click Add Page three times to add three blank pages. Each page displays the master page in the background.

4. Double-click the page names to rename them to match the three button labels at the top: Find Cars, Check Rates, and More Info (see Figure 12).

   

   Figure 12. In the Pages panel, create three new pages and name them to correspond with each page of the site

5. Navigate to the Master Page by selecting it in the Pages panel.
6. On the Master Page, select and copy the rectangle behind the Find Cars text at the top of the document.
7. Click the Find Cars page in the Pages panel (not the Master Page) to select it.
8. Paste a copy of the rectangle on Find Cars page.
9. In the Properties panel, change the fill color to a light gray to orient the site visitor that this is the active page.
10. Returning to the Master Page, select and copy the text label: Find Cars.
11. Click the Find Cars page in the Pages panel, and paste the Find Cars text over the newly created light gray rectangle.

12. Use the Text tool to add a page title at the top of the content area: Choose your type of driving and a city (see Figure 13).

    

    Figure 13. The light gray background on the Find Cars button indicates to the site user that this is the active page

13. Repeat steps 5–12 on the other two pages to copy and paste the second and third buttons. Use the Text tool to add the appropriate page title text to each content area: See available rates and Learn more.

Use Common Library assets to complete the wireframes

Now that you've added the overall wireframe structure and pages, it's time to finish off the content on each page. This web app consists of a series of familiar interactive controls, such as scrollbars, drop-down menus, and text input fields. We can use the included Common Library assets to mock these up quickly.

1. Select the Find Cars page in the Pages panel.
2. Choose File > Import or drag and drop to insert the demo file Map_usa_wireframe.png onto the page. This file is an illustration of a map with a graphic outline.
3. With the map element selected, open the Align panel (Window > Align). Center the map horizontally by clicking on Align horizontal center. We'll take care of the vertical centering later.
4. Open the Common Library panel (Window > Common Library).
5. If you are in Windows, expand the folder named Win. Alternately, if you are in Mac OS, expand the Mac folder.
6. From the Common Library panel, drag one instance each of Button and ComboBox onto the document.
7. Position the ComboBox so that the left side is aligned to the left edge of the map. It is helpful to have smart guides turned on as you do this. You can also use the Align panel to align the two left edges (be sure to toggle off the "To Canvas" button).
8. From the Tools panel, select the Scale tool in the Select group. Drag the middle right sizing handle of the ComboBox so that it is about 400 pixels wide.
9. Alt-drag (Windows) or Option-drag (Mac) the ComboBox to the right to create a duplicate copy.
10. Select the Scale tool again, and drag the middle right sizing handle to rescale the second ComboBox to approximately 160 pixels wide.
11. Move the Button to the remaining horizontal space to the right of the two ComboBoxes. Use the Scale tool to resize the Button as Needed.
12. Select the Text tool. Set the text size to 16. Type the words Type of Driving above the first ComboBox.
13. With the Pointer tool, Alt-drag (Windows) or Option-drag (Mac) the text box to the right. Position the copied text above the second ComboBox box. Use the Text tool to change the text to City.
14. Open the Symbol Properties panel (Window > Symbol Properties).
15. Select the first ComboBox. In the Symbol Properties panel, set the Label to Personal.
16. Select the second ComboBox. In the Symbol Properties panel, set the Label to Boston.

17. Select the Button. In the Symbol Properties panel, set the Label to Go (see Figure 14).

    

    Figure 14. The Find Cars page with the added ComboBoxes and Button from the Common Library

You can repeat this process to add the other Common Library UI assets. In the sample files folder, open the file named Ignition_Carshare_Source.png to view the other wireframe pages.

Export an interactive PDF

Now that you have created the basic wireframe of the application flow and structure, it is useful to export the entire document as a multiple page document complete with interaction to send to the client for review.

1. Navigate to the Master Page by selecting it in the Pages panel.
2. From the Tools panel, select the Hotspot tool in the Web group.

3. Draw a hotspot over the top of the first button. Draw two more hotspots over the second button and third buttons.

   Tip: Alternately, you can select the three rectangles that comprise the buttons, right-click, and choose "Insert Hotspot" and then choose "Multiple." This will add a hotspot around each of the selected objects.

4. Select the first hotspot with the Pointer tool. In Properties panel, set the link to Find Cars.html. Select the second hotspot and set the link to Check Rates.html. Select the third hotspot and set the link to More Info.html.

   Since the hotspots are located on the Master Page, every page will be linked to each other when the interactive PDF is exported.

5. Select File > Export. Choose Adobe PDF (.pdf) from the Export drop-down menu.
6. Click on Options. Since this is just a simple wireframe, set the quality to Medium, and select the option to Convert to grayscale. Click OK to exit the Adobe PDF Export Options dialog box.
7. Make sure the check box next to "View PDF after Export" is checked. Click Export.

Now you can view the PDF, click through the pages, and make comments as needed using all the tools available in Adobe Acrobat. An interactive PDF is ideal for facilitating the client review process because the client can click through the flow of the site. This allows them to experience the presentation of pages as site visitors will experience them in the final product.

Page 3 of 4

Previous Page

Next Page