Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Using Fireworks As a Design Environment

When designing any web site it is always a good idea to have a visual concept in mind before getting to far along in a project. Using Fireworks we can design our site to the pixel and use that mock-up as guide for how we would like our site to look. In this example I will discuss my process for creating a draft design in Fireworks.

I will be working on a fixed width layout design. I will assume the end user will be viewing the site at 800x600 screen resolution.

Setting up the Workspace

Before I begin with the design work I typically set up my canvas and the rough layout of elements on the page. To do this I follow the following steps.

1. Open Fireworks and create a new document. The canvas should be set to 800x600 with a resolution of 72dpi, canvas color - white.
2. Using the guide tool (view > rulers) you can drag guides from both the horizontal and vertical rulers to position them on the canvas. To fine tune their placement, double click any guide and enter a pixel position for the guide.
   
   For this example I will use a 700px wide centered page area with a colored background. To set this up I will drag guides on the vertical axis to 50px and 750px positions.
3. Next, I will set guides for the masthead (header image). I would like a 15px margin at the top and for it to be 100px tall so I set guides on the horizontal axis to 15px and 115px. I will also set up guides for the footer portion of the site. I would like that area to be 30px tall so I will set guides at 550px and 580px
4. Next, I set up guides for the columns that will contain my navigation elements and the extra content div of the layout I selected. I am using this layout from the layout templates as a starting point. By looking at the CSS for that layout I am able to determine that the content area is 500px wide and the navigation column is 200px wide and is on the right side of the screen.

5. Once I have my guides in place, I begin the process of designing my page. I typically will choose a color scheme before I begin. I have decided on using this scheme for the design.
   
   Tip: The Tab key in fireworks toggles the panels on and off. Pressing the CTRL + ; toggles guides on and off.

6. Using these colors as a starting point I begin to place color blocks on the page to see where I like them. Typically, I will use a white or black background for the content areas of the page so the text is easy to read.
7. At this point my canvas looks like so:

8. At this point I start placing text on the site to get a feel for the fonts I like. It is always a good idea to use some filler text as you design to give you an idea of how text is going to look on the page. You can generate that text at this site and paste it in your Fireworks document. You can also use guides to set up the margins on your text elements.
   
   Tip: Remember to set all body text to the system anti alias setting so it will appear as it does in the browser!
9. With text added the page is starting to take shape:

10. Save the document to your resources folder on your flash drive as a .png file (Fireworks Default Format). We will revisit this design in the future to take portions of it for our design.