How to create a web page wireframe in Fireworks CS4

Even if you don't know how to develop a website using HTML and CSS, you can still give your web developer an idea of what you want by drawing pictures of the layout. You can do this on paper, but for a more precise, clean rendition, you should use tools such as Adobe Fireworks CS4 to achieve the look you want. This is usually called a wireframe - a stripped down, visual representation of the page that only shows the layout, not the individual elements or content like buttons, colors, and images. In this tutorial, we're going to look at how we can create a web page wireframe in very little time using Fireworks CS4.

First, open Fireworks and create a new document by clicking File then New. You can make it any size you want, but I advise making your document a screen size resolution. I've made mine 1280 px wide by 800 px high; you always want your document to be wider to mimic a computer screen. You also want to choose your background color here. If you'd like to make it a custom color, then do so, but if you'd rather let someone else help you figure out the colors or you haven't figured them out yet, then choose white for now.



Usually, when designing a page, I start with the elements that frame the page, such as the header and the footer. Here, we can start by designating space for the top banner and the logo. We'll need to use the rulers and guides to measure out the space. If you don't see rulers, click View then Rulers. Likewise, if you are not able to pull down guides by clicking and dragging from the rulers, then click View, Guides, then Show Guides and Snap Guides. Once you've dragged your guides in place, make sure the Pointer tool at the top of the Tools panel is selected. Then you can hold down Shift to check the measurements between guides.

For this demonstration, I've pulled three guides out and measured 90 px from the top and 50 px on each side (for white space) for the banner and logo area. You can measure any amount you'd like. Once you have your guide in place, select the rectangle tool from the Tools panel. It may be hidden under another shape tool, in which case you should click on the black arrow at the corner of the button.



Now choose your color for the fill and the stroke (border) of the rectangle. To do this, look at the properties panel and click on the color swatches next to the pencil and paintbucket. If you don't see the color you want on the swatches provided, then click on the color wheel at the top of the pop up box to get more options. You can choose any color you'd like, but I generally use neutrals for wireframes. This keeps the focus on the elements of the page. I've chosen to use gray for my boxes.



Next, create some boxes to represent the logo and any other information you want to put at the top. Use the guides to measure some white space around them, so they won't be pressed against the border of the banner or the banner space. Then, select the text tool in the Tools panel and choose a font that you want to type into the boxes. You can use the Properties panel at the bottom to choose the font family, font style, font weight, font color, alignment, etc.



Since we have our banner area finished, we can move on to the navigation bar. For this demonstration, I've chosen to use a horizontal navigation bar at the top. Use the guides to measure out width and height (I've made mine 50 px high with the same width as the banner area). Use the rectangle tool to drag the box out; you can use a different color or shade for the fill if you'd like.



To represent different buttons on the navigation bar, we need to divide it and use the line tool to create dividers. To do this, measure the length of the navigation bar using your guides, then divide it by the number of buttons you want to have. For example, my navigation bar is 1180 px wide and I want 5 buttons. So I need to divide 1180 by 5, which gives me 236 px per button. Use the guides to measure out 236 px, then use the line tool (located above the rectangle tool) to create dividers. To get a perfectly straight line, hold down Shift while dragging the line down.



Next, use the Text tool to choose a font and a font size and type the names of the buttons on the navigation bar. You can use the pointer tool and guides to move the text and line them up.



In a likewise manner, you can use the same guides for the header and the navigation bar to create your footer. Just draw a box within the guides and type placeholder text where you'd want to put your actual text, such as copyrights, the year(s), and the companies or individuals that need to be credited.

Then, use the guides to measure the different divisions of your page. I've chosen to divide mine into three sections. For the first horizontal section, I've measured 160 px from the bottom of the navigation bar. For the second column, I've measured 285 px from the right side of the page. After you've decided how much space you want to give to each section of the page, select the line tool and use the color picker in the Properties panel to select a color. I've chosen a light gray to make it as unobstructed as possible. Then, hold down the Shift key while following your guides.



You can use the rectangle tool to create another placeholder (for an image, text, another element) in the sections, or you can use the Text tool to type a text placeholder. I've chosen to paste some dummy text in the top section. Again, you can choose the colors, the styles, the font family, etc.



For the second section, I've chosen to create some image placeholders. I've chosen a light blue to set it apart from the rest of the elements. Just like with the navigation bar, some math might be involved (if you have precise numbers and images already chosen; otherwise, you can eyeball it). Measure out the width of the second division from the edge of the header area to the vertical divide. Decide how much space you want between each image (and between the final image and the vertical divide) and add it up. Subtract that number from the total width and then divide that answer by the number of images you have (in this case, 3). That should give you the width of each box. You can create one box and then copy and paste it to create the others.



Now, finish adding in your elements. You can use the text tool and/or the rectangle tool to represent text and images/videos/other dynamic elements on your page. Place them wherever you'd like and format that in any way you'd like. The best rule to keep in mind is to give each element some white space on each side and line them up with other elements. The guides will help you with this.



The final result looks good – and it shows how things are laid out without overwhelming stylization. This will give you (or the web developer) a good idea about how to code the page when it comes time. Finally, save your file by clicking File and then Save As.



Now that you've seen how you can create a web page wireframe, you can design layouts and get a feel for how it will look before you start developing your site. You can talk to a design company, such as Codank Web Design, to get help developing your concept and your website.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com