Final Image Preview

Below is the wireframe we'll be working towards and you can view the full-size wireframe version here. Want access to the full Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Fireworks CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1 hour

Benefits of Wireframing

There are numerous benefits to creating wireframes as a separate stage in your website design process. Here are some of them:

• Wireframes are excellent for creating layouts, planning functionality, and organizing the information of your website.
• Wireframes allow you to explore numerous positioning, functional options, and how elements will work together on the page (or between pages) rapidly.
• Wireframes help insure that functionality is explored prior to time-consuming pixel perfection work is done.
• Wireframes limit option and target your focus, which improves your layout designs. Removing options like style and color helps you focus on things like positioning, size, and hierarchy.
• Wireframes allow you to work out the basic design of pages. You can have the position of where elements will go, text size, and tone (weather light or dark) decided before working on other design details.
• Wireframes help to insure that layouts, functionality, and other elements are signed off on before moving on to time-consuming pixel perfect design.

Choosing Your Wireframing Tool

There are quite a few programs out there for web designers to use for website wireframing. Some criteria to choosing a program to use on a given project are: your familiarity with the program, your ability to work quickly in it, the given programs functionality, it's adaptability to the project at hand, it's ability to store reusable elements, and it's flexibility for making edits.

You may want to use a program outside the Adobe family, such as Omni Graffle, and there are certainly others as well. If you're going to use a program within the Adobe Suite for wireframing though Fireworks rules supreme.

You could use Photoshop, though it's slower to work with for wireframing and lacks multi-page functionality and other features that make Fireworks quick to plan websites big or small. I wrote an article on using Illustrator for building wireframing back in early 2008 (more a proof of concept than a recommendation). While it's possible to use for this purpose, it lacks the tools Fireworks has for wireframing. I recommend using Fireworks in most cases for wireframing. It's really built well for this purpose.

Using Fireworks

We're using Fireworks for this project because it's quick to work with. Also, you can easily build boxes, position them, add text, add rounded corners and quickly construct layouts with Fireworks. It's set up for web development and prototyping. When you draw boxes they automatically snap to pixels. This is without even tapping into the programs more advanced features.

It's also possible to export to Photoshop when you're done creating the wireframe, which is an ideal workflow when you're final design will have details best created in Photoshop. There are some issues I'd like to see Adobe address in it's next version though with integrating the workflow from Fireworks over to Photoshop.

Now let's get started with the process of planning our project and building our wireframe.

Step 1 - Defining Your Project Scope

Before jumping into Fireworks and starting to build a website there are a few steps to go through. The first of course is defining your project, the content it will contain, it's purpose, etc. Once you've worked this out with the client, or narrowed your focus if it's a personal project, then it's time to do some research.

For this fictitious project we're creating an iPhone application promotional website for Aurora, which is a hypothetical iPhone app for lighting up your iPhone with Aurora Borealis light patterns. The idea is this is one page of a larger project for a company that sells multiple iPhone apps. We're focusing on this one page for this tutorial.

Step 2 - Visual and Functionality Research

As designer's we're somewhat concerned with style from the beginning. You may want to make notes on styles you come across in your visual research or build a mood board. Our primary focus on creating a wireframe though is defining our layout and functionality (without concern for color or style at this point).

For this project I looked through a bunch of iPhone application sites. I noticed that there are some common bits of functionality that I think would help sell an app. I came across some layouts that I liked. Here are a few of them:

I liked the secondary menu at Tapulous. There were a few other sites that had multiple app icons running vertically, which has an advantage that they could add unlimited apps and the menu would fit it, but I really liked the easy access of having it run horizontally toward the top, as this site does.

The site Tapbots has quite a few elements that are common on many of the more successful iPhone app promotional sites. It has a large iPhone image that has an embedded video file showing the app in action. It has a clear features list, testimonials and other content in an organized grid, thumbnail links to larger screenshots, and a link to the iPhone app store that stands out boldly.

The Sonico Mobile site also has a secondary navigation made of horizontal icons that I liked. I also really liked their use of promotional space and how the vertical standing iPhone broke up that horizontal promotional space. The way they broke off the pricing from the promotional space is well done also.

I'm sure I could find more sites that influenced the design, but those are the ones that really mashed together the most for the basic layout of the site. At this point I've got a good idea of what I want the site to look like in my head. So now I need to get it down on paper.

Step 3 - Sketching

You can see the sketch below. I often do multiple sketches to try out different layouts, which is really quick to do when working raw with a pencil and paper, but in this case it felt right after the first design so I was finished. Notice I tackle the issue both visually and verbally, making notes and listing features I want to see.

Keep in mind it's fine for things to change as you go from sketch to wireframe in Fireworks, but the sketch helps to get your core ideas down and work out your initial thoughts.

Step 4 - Setting Up Your Document

Now that we know what we're going to create, let's set up our document. I decided to use the 960 Grid System as the basis for the design. Now it doesn't necessarily matter if that framework is even used to code it in the end, but it's a grid that is already established, it's easy to work with, and I know it fits in most monitors, so I often use it for designing.

Go ahead and download the 960 Grid System. Unzip it, within that folder select templates > fireworks and open the document "960_grid_12_col.png" in Fireworks (the PNG is a layered Fireworks file).

Go to Modify > Canvas > Canvas Size and change the canvas size to 1060px wide by 1500px height. Now click on the "12 Col Grid" layer folder in the layer palette. Unlock it, then select all the pink columns, stretch them down to the full length of the document, and relock the layer folder.

Now go to File > Save, choose where to place it and name it "wireframe.png."

Step 5 - Organizing Your Folders

Now let's set up our layers to help keep our file organized. We'll make changes as we go along, but this is a good start. Follow the screenshot below. Note the "Web Layer" isn't something we'll be using for this project, but it can't be deleted from Fireworks.

Step 6 - Begin Constructing the Layout

Creating a wireframe layout is a bit of an organic process. Refer to your sketch and begin with the largest elements first. We'll start with placing our backgrounds for our main sections. Some sections are going to use the background of the site.

Use the Rectangle tool (U) to create the "header" (80px height) and "bottom" (360px height) backgrounds, which span the full-width of our site. Also create our "promotion" background area (leaving room for our secondary navigation) and it is 940px wide (the size of our main document area with 10px margins on each size) by 280px height.

One of the advantages of working with Fireworks is the Properties inspector. I've given this box a roundness of 10% from the inspector, which looks good. Note that one thing you want to avoid doing with your rounded boxes is manually resizing them, as it will throw off the curvature of the box. Use the width and height fields in the Properties inspector to adjust the size instead.

Step 7 - Adding the Navigation

Let's start with the "header" and "secondary_nav areas." Much of these areas make up the main navigation and secondary navigation, and a few other details as well. First, place the site name lined up on the left side of our "header." This is a place holder for the final logo design.

Begin by placing the navigation text in the "header" layer using the Text tool (T) and use a standard sans-serif font like Helvetica, Myriad Pro, or any font you prefer. You may want to stick with web-friendly fonts. I set the type at 13pt, with a color of black, and made it bold. Then add rounded boxes that are 26px height and appropriately wide. Set the spacing as you see fit and align the boxes to the right guide line as shown. Notice how the selected navigation is represented with a dark background and white text.

Now add boxes for the secondary navigation. Create each app icon box at 57px by 57px with a strong roundness. Leave room for another box 90px wide by 100px height to fit behind the icon navigation with space allotted between each one. Add names under each icon set at 10pt, black, and bold. Also, I've added a placeholder graphic for a standard App Store button aligned right, which adds a call to action and some legitimacy.

Step 8 - Finishing the Promotional Area

The first step here is to create two boxes using the same methods as described above. The large one on the right represents a space where an image of an iPhone will go, which video could be added to the screen of. The lower box is our main call to action.

Now this button is about the same size as the standard App Store button and they both link to the same place (they are serving a similar function). This may feel like overkill in the wireframe, but with color and other details this can work once we create the final design. This is something to make note of though.

My feeling is that that the Standard button adds a bit of credibility, and we can treat the other button stylistically in a way that it stands out more and really draws the eye as the main call to action.

Notice how these boxes overlap the promotional area background. This kind of layout really makes these two elements stand out on the page.

Let's create an area to place the price of the app. First create a box using the Rectangle tool (U). While creating the box hold down the Shift key to make it a perfect square. Go ahead and make this 170px wide by 170px height.

Now hit Command + T, hold down the Shift key, and rotate the square to a 45 degree angle. Then line it up as shown below so that it is evenly placed over the promotional area background. Now copy (Command + C) the promotional area background and Paste (Command + V), which in Fireworks automatically pastes a copy in place.

Now select the square and the background, then go to Modify > Combine Paths > Intersect. And your left with the shape we want.

Now add all the text as we did before. You could explore various text options at this point. I'm mostly focused on size, weight, and position in this wireframe and I'll work on style and fonts in the final design. Also the price is created by hitting Command + T, holding shift, and rotating the text 45 degrees. Then change the spacing and size until it looks good.

Also add a horizontal rule below the largest text (1px height rectangle). Then turn on the guides by pressing Command + Colon key. Make sure everything you've created lines up as shown below.

Step 9 - Add the Body Information

The techniques used to place this information are all basic. It's all basic boxes and text. So go ahead and place the body information as shown below (you may want to turn on your guides and grid overlay as shown in the next section). The purpose of this section is to add sales details. We're describing the app, what it does, showing screenshots of it in action, adding minor technical details, and providing testimonials.

Go ahead and turn on the "12 Col Grid" layer which holds our grid overlay and turn on our guides. Notice how this section utilizes a three column setup. Each column is 300px wide. The grid isn't as obvious above, but you can see how the iPhone box lines up with the third column, and the promotional text lines up with the first two columns of the body section. The structure of our grid is really showing now.

Be sure to keep your layers organized, as shown below.

Step 10 - Add the Bottom Section

The image below shows what we are creating for the bottom section. There are four sections, so keep your layers organized accordingly. This section is focused on the company and not the application. Many sites that sell iPhone apps have more than one app their selling, or in some cases focuses that cover more than selling iPhone apps. So the purpose of this section is to promote the company, it's blog, it's customer support, and it's Twitter feed.

Notice how we're utilizing our grid differently for this section. We've gone with a four column set up here, which makes each column 220px wide.

Most of the construction of this section is basic text and boxes. The link boxes at the bottom of each section are the same size as our main navigation and can be copied from there. Lets take a look at a couple aspects of this section. First up is how to create a dotted line, which is simple to do in Fireworks.

You can of course use the Line tool (N) to create the line, but I used the Rectangle tool (U) instead. Make the size 220px wide by 1px tall. Give it no fill and a stroke color that is a darker gray than the background. Make the stoke size 1. Then click on the button next to the stroke size, which gives us line options. Go to Dashes and then choose Dotted as shown below.

One thing I often do when creating wireframes is think about any icons that will be used in the final design. In this case there is only one that we'll be using from elsewhere. You could keep the icon full color, but I want this wireframe in grayscale and to focus on layout and spacing, and not color at this point.

Download the free Practika Icon pack from Smashing Magazine. Drag and drop the 64px by 64px file "twitter.png" into the document. Place it as shown and make sure the box it is placed on is wide enough for it to fit in. Now with the image selected go to Filters > Adjust Color > Hue/Saturation, then turn the Saturation all the way down.

Again, let's keep our folders organized.

Step 11 - Adding the Footer

This is really basic. Make sure you add the site name and copyright. Also, place textual links repeating the main site navigation. If there are any important supplementary links, then you may want to place them here as well. Align the copyright to the left edge and the links to the right edge as shown below.

Step 12 - Adding Notes to the Wireframe

In the tutorial Building a Website Wireframe in Illustrator I discuss adding callouts to a wireframe, and that's one useful way to add notes to a wireframe. Another useful way is to place the notes inline. This is fairly straight forward and is helpful for communicating features, functionality, or issues with clients.

I like to place notes in blue, so that the notes rest on top of the wireframe and blue has a blueprint feel. The final wireframe is below and you can view the full-size wireframe version here.

Step 13 - Setting Up Our File for Export to Photoshop

Ungroup everything that you don't want to rasterize when it goes to Photoshop. If you want to maintain edibility for text for example, you'll need to make sure the text isn't grouped to anything. It's fine to place things in folders though. This is one of the peculiarities of exporting from Fireworks to Photoshop.

You may also want to decide if it's worth bringing the text from Fireworks over to Photoshop (you could choose to delete it and then recreate it in Photoshop). I've had the experience that the text boxes come over strange, which you'll see in the next tutorial that takes this wireframe and creates a full-color Photoshop website design. In this case, we'll keep the text in place.

Go to File > Save As and click Options. The default setting is Maintain Edibility over Appearance. Go ahead and leave this at the default then click Save. Maintaining edibility will place our shapes as shape layers in Photoshop, rather than rasterizing them, which in this case is preferred.

Conclusion

Fireworks is great for wireframing and prototyping websites. Even in a one page design you'll notice how quickly you can work out various layout options and rapidly build the structure of your design. Once you start working with this program for larger projects you'll discover a wealth of tools as well. In our next tutorial in this series, we'll take this iPhone application wireframe and finish off the design in Photoshop.

Additional Resources

There are quite a bit of additional features in Fireworks, which weren't covered in this tutorial, but would help you on your next project. Below are a couple of useful tutorials on using Fireworks for Wireframing you may want to review as well. Also, if you come across any relevant tutorials or resources, then be sure to link to them in the comments to share with the community.

• Wireframing with Fireworks CS3
  • Numerous additional Fireworks wireframing features are covered in this tutorial.
  • Learn about creating pages, using frames, building and using library widgets, like buttons and more.
• Designing a website application with Fireworks CS4
  • This tutorial covers wireframing in Fireworks within the context of making a functional design. It is detailed and step by step.
  • Advanced features like using Master Pages and exporting Interactive PDFs are covered. More basic wireframing tools and steps are covered as well.
• Designing a Website in Fireworks CS4
  • This video tutorial is really detailed and covers an interesting wireframe project.
  • It covers details like using customized prebuilt library elements in a wireframe, smart guides, setting up grids.
  • It also covers advanced details like working with multiple pages importing Illustrator files and more.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.