Create a Website Prototype Using Adobe Fireworks

&c=” border=”0″ alt=”” />

Advertise here via BSA

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. Go to the buttons section and select the light rectangle button.

Screen Shot 2012-08-22 at 1.02.21 AM

Click and drag the button onto the canvas. Right-click on it and choose symbol> Edit in Place. Once here, you can edit the button like you would anything else in Fireworks. You can change the text and the color, the gradient, it’s stroke and any other attribute.

Fuel Your Creativity

Leave a Comment