How to Create a Website Prototype Using Adobe Fireworks

Being able to mock up a website quickly and efficiently is an essential ability of any designer. I mainly work out my designs on paper and begin to develop them in Fireworks. Fireworks is a great tool for creating functioning web prototypes, making it easy to export components and code your site. Using a Fireworks workflow just makes sense, and in CS6, there have been a lot of additions to the templates and Common Library components.

Screen Shot 2012-08-21 at 11.34.55 PM

Start up Fireworks and you should see the new document screen, giving you the option to create a new document to your specifications, or you can create a new document based on a template. Fireworks has upgraded their line of template files to give you real world template files that a designer would actually use. They have also included templates with grid layouts such as 4, 8, 12, 16, and 24 columns, a document based on the golden grid, frameless, blueprint, and the 960 grid. These are base documents with guides already set up so you can align your work to the grid.

Screen Shot 2012-08-22 at 12.25.12 AM

I chose one of my favorites, the 12 column grid, because it gives a lot of flexibility. You can create a row of 3 items, a row of 4, 2 columns of 6, 6 columns of 2, etc. You can import images into Fireworks, so I imported a basic logo that I’d created. When you import images into Fireworks, they are converted to bitmap images. You won’t see anything at first, but notice that your cursor has changed in appearance. It should look like a sideways “L”, but it is actually a crosshair that you use to click and drag out where you would like your imported image to be placed.

Screen Shot 2012-08-22 at 12.28.37 AM

Here is where the speed factor comes in. Keep your grid document open and go to File > New From Template and when the dialog box comes up, choose Miscellaneous Assets. When the new document comes up, you will see a variety of pre-made website components, such as horizontal and vertical menus, tabbed areas, a calendar, a comments section, breadcrumbs, and more. This is great, because they are all basic, colored as white with grey text or borders, and are completely editable, including the text. Select the components that you need and drag them to your document.

Screen Shot 2012-08-22 at 12.44.11 AM

Another option to save you a ton of time, and also keeping you from reinventing the wheel is the Common Library Panel. It includes all of the components shown in the template file above, plus many other useful items, such as pre-styled buttons, and relevant icons, such as email, social media, sound, home, etc. There are also a variety of other components such as forms, pre-made menus, drop down lists, checkboxes and more. Keep an eye out for components that you could use to save you time from having to create them from scratch.

Create an Image Slider

Next we will create an image slider for our prototype. Select the rectangle tool and choose a linear gradient. Draw a box the full-width of your site and roughly 300px high. Select #CCC as one color and white as the other color in your gradient. Set the angle to around 230°.

Screen Shot 2012-08-26 at 12.39.10 PM

Next, copy the rectangle that you just created and resize it so it has an equal border around all sides. The size is roughly 932 x 280 and centered over the top rectangle. you can make it a solid color so that it is easier to see, because we will be clipping an image into it later.

Screen Shot 2012-08-26 at 12.43.20 PM

Let’s add a forward and back button for our slider. Fireworks has integrated several much-used components to make life easier. Go to the Common Library panel and under 2D Objects choose Media_Play. Drag it from the panel to the canvas and resize it so that it isn’t too big. When you are done, copy, and paste it, hit Command/Ctrl+T to transform the copy, and while holding shift, rotate it so that it is pointing in the opposite direction. Fireworks should snap it into alignment with your first button.

Screen Shot 2012-08-26 at 1.21.04 PM

Screen Shot 2012-08-26 at 1.21.18 PM

Select the Eyedropper Tool and sample a color in your logo at the top. The color value from my sample logo is #37A0B9. Select the Rectangle Tool and draw a rectangle that spans the width of your website, and create it just below the slider. The height of the menu is roughly 55px.

Screen Shot 2012-08-26 at 9.49.47 PM

Next, we will create the sample menu text. Select the Text Tool and select a simple typeface such as Helvetica. Type out your menu button text, spacing it in the center of each two column span.

Screen Shot 2012-08-26 at 9.58.15 PM

Fireworks has a nice feature called States. States has its own panel that we can use to preview hover states for buttons, etc. Select the menu that you just made, including the colored bar and the text and copy it to your clipboard. Go to your States Panel, click the new state icon (it looks like the new layer icon) and with state 2 selected, hit paste. It will automatically paste in place. It is okay if  you don’t see the other elements. Select a darker color for state 2 of the menu bar and select a different color for the text as well.

Screen Shot 2012-08-26 at 10.41.34 PM

To utilize the states that we just created, make sure that you are on state 1 and select the slice tool. Draw a rectangular slice around each button, using the middle of the 3 column guidelines as your guide to start and stop each button.

Screen Shot 2012-08-26 at 11.22.37 PM

Then, with the Select Tool, click on a slice and a circular symbol should appear. Click on that symbol and a menu should come up. Choose Add Swap Image Behavior. A dialog box should pop up. Select to show the swapped image from State 2, where we chose a different color for the menu and text. Make sure to leave the bottom 2 options checked, because you want the image to switch back to the original on mouse out. If you want to preview how your menu will look and react, go to File > Preview in Browser and then select your browser.

Screen Shot 2012-08-26 at 11.23.42 PM

Next, we will add 3 small columns of text with a header and paragraphs. We have set up a 12 column grid, so if we have 3 columns of text they can be up to 4 columns wide. Select the Text Tool and choose Gray as the Color, and Helvetica Bold as your font choice. Type out 3 separate headlines, but try to keep them within the 4 column-width guideline that we have set up.

Screen Shot 2012-08-26 at 11.54.28 PM

We need to add body text for each column, so I am going to generate some dummy text just for demonstration. You can generate Lorem Ipsum from inside Fireworks simply by going to Commands > Text > Lorem Ipsum. Fireworks will automatically generate a paragraph for you. Select dark gray as the color, drop the size to 12pt and use the Pointer Tool to resize the text box to fit within our 4 column restriction. Align the text to the left and be sure to narrow the paragraph so that there is plenty of space on the right so that it isn’t too crammed against the next column.

Screen Shot 2012-08-27 at 12.04.02 AM

Create a button to go under each paragraph to connect with the corresponding page. Each button can be made as 1 column wide, which is a good size for our paragraphs. You can repeat the same steps as before to create different states for these as well. Select the Rectangle Tool and draw a rectangle across the bottom and give it a 3px gray stroke.

Screen Shot 2012-08-27 at 12.56.04 AM

For our slider, I imported an image that I made, but it doesn’t quite fit the dimensions of our slider area. Select the smaller rectangle and while holding Shift, click the image itself. Go to Modify > Mask > Group as mask. this is the same as a mask in Photoshop. this is a nice representation of how an image would look in our slider.

Screen Shot 2012-08-27 at 1.03.51 AM

Conclusion

It is really quick and easy to create a prototype of your next project within Fireworks. The ability to create states allows you to simulate rollovers and other effects, and you get to see the effects live, without having to code them first. Using this method you can work visually and fine-tune your work, export assets for your site, and find out what works and what doesn’t without spending too much time on your project.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote