Fireworks is a great tool for creating a wireframe and while it doesn’t work perfect with Photoshop, you can export over there and then build off your wireframe. We’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks. For those of you not familiar with this program, it will be a good jumping off point for using it to wireframe your web design projects. This is a first part of a multi-part series and will be fun!

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.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month. You can view the final artwork, the final website design at full-size, or visit the live site.

Step 1 – Looking at a Wordpress Theme

Below is my Wordpress theme, as you see the theme consists of a few zones, like the "header." Here I want to change the background header image and post something that can express more about me as designer and illustrator as well.

Step 2 – Start with Sketching on Paper, No Digital Here!

I always start with a few sketches on papers. This really help me to focus some ideas better and have something to trace afterwards in Illustrator. Here a fun video I did for this tutorial.

Step 3 – The Sketches

So my idea is to create a strange future world with robot workers and a girl as commander. Preliminary sketches are shown below.

The image below shows the final pencil sketch to post in Illustrator as a template.

Step 4 – Start with Illustrator CS4

Now I’m ready to sit down in front my PC and start with Adobe Illustrator CS4. I open a new document and place the sketch as a template (by double-clicking on the layer and checking Template).

Now I create a new layer above the “template” layer. Then I start to trace the basic sketch lines. I always trace with the Pen Tool palette open to work faster (little tip).

Follow the first steps in the video below.

Step 5 – Inking

With the Pen Tool, I make the black inking; I like to refer to this as inks because I’m into comic book art. See the video below.

In the end, you can see the layer with the characters inks.

Also, see under the background layer ink.

The “template sketch” layer doesn’t need to be used anymore, so I deleted it. Here all all the layers placed together.

Step 6 – Basic Color Steps

After inking, I need some basic color, here is the “basic color characters” layer.

Under the background basic color is shown below.

Here are all the basic color layers together.

Step 7 – Depth and Shadow

After the basic colors, I need some depth and shadow to make the illustration more real. Here is a quick study on how the light will fall within this illustration.

I return in illustrator and i start to trace the shadows where needed. For those I often copy and paste the shapes then apply Divide from the pathfinder palette.

In the end the final image is shown below, or view the final artwork.

Step 8 – Saving Images for Wordpress

From this image, I needed two parts for my Wordpress theme, one for the header and one for the body. With the guides I draw the two zones.

After placing the guides, I create the slices by going to Object > Slice > Create From Guides.

Now I save the two images by going to File > Save For Web (I’m only saving the images and no html). Then I upload the final exported image into the Wordpress theme fold. Now it’s ready to be coded into the theme.

Conclusion

You can see the final results below, which has been fully integrated into the final Wordpress theme. You can view the final artwork, the final website design at full-size, or visit the live site.

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

Final Image Preview

Here is the overall website we’ll be creating. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just $9/month. You can view the final image preview below or view a larger version here.

Step 1

Start a new document with a width of 960 px and a height of your choosing. I’ve chosen this width because this website will likely incur internet traffic who have average to large monitors. A width of 960 pixels is a safe size that will favor the majority of visitors. Last, set your Color Mode to RGB.

Step 2

The black border shows the document size (called the Artboard) that we created. I like to place a blank screenshot of a browser window on its own layer while I’m designing, to get a good idea of what my website will look like when it’s done.

Step 3

This next step is very important. Make sure you are aware of what zoom you’re viewing the document at. When all is said and done, your website will be seen at 100%. Feel free to zoom in and out while working on your layout, but be certain all your text and design elements are readable when viewed at 100%. Use the drop down highlighted below (or simply type in the percentage you want) to change the zoom to.

Sidenote: sometimes Adobe Illustrator gets testy and doesn’t show the numbers as you type them into the zoom area highlighted below. For example, if you type 58% sometimes the numbers don’t change as you’re typing. If this is the case, simply press return after you enter your values, and your document will be resized to the number you entered.

Step 4

The Artboard can be toggled between visible and invisible by going to View > Hide Artboard. The problem with this is that it takes a little longer than showing and hiding guides (Command + Semicolon Key) So, I find it best to use guides and hide the Artboard. Over the course of laying out a whole website you will find it much easier to press a quick key command rather than going to the top of the screen and selecting from a list every time.

Step 5

You may find it easy to establish balance and a nice hierarchy by first drawing simple grey boxes on your page. The thin rectangles represent where I plan on using text while the large grey boxes will be images.

Step 6

After you have a general idea of what the layout will look like you can add guides and remove the grey boxes.

Step 7

Using only the guides as a reference, add other elements like navigation, text, and tighten-up where the logo, images ,and icons will go. It is helpful to toggle your guides on and off (Command + Semicolon Key), while you are finessing the layout. If the guides you drew don’t work as well as you thought, definitely adjust them as you see fit.

Sidenote: when you toggle guides on and off they automatically become locked. You cannot move locked guides. To unlock guides quickly press Command + Option + Semicolon.

Step 8

Continue finalizing your header with images, icons, and graphics.

Step 9

Below I’ve decided to add a light blue color to enhance the header.

Step 10

Add styling to your text, making sure to decide what links and headings will look like. I find it much easier and faster to accomplish as many design elements inside Illustrator so I can concentrate on programming and coding the website when the time comes.

Step 11

There are a couple different ways to prepare a design for use inside a WYSIWYG (What You See is What You Get) editor, like Adobe Dreamweaver. The first method is using slices. Slices can be made using guides or a selection. To use guides to make slices first drag guides onto your page around each object that will require its own link. For example, an icon that, when clicked, goes to a specific page. Below I have four icons, each icon will lead the visitor to a different web page or area of the site.

I have drawn guides between each icon and just outside of the blue area. It is usually cleaner if you draw your guides about 1 or 2 pixels outside of the area that you are slicing. This ensures none of your artwork will be cut off.

Sidenote: Do not draw guides over your entire layout at once. Instead, do sections one at a time. For example, first do the header area. Clear all of your guides by going to View > Guides > Clear Guides. Save your slices for the web (discussed in a later step) and repeat this process for other areas of the layout.

Step 12

Once you have your guides drawn the next step is to make slices out of them. To make slices from your guides go to Object > Slice > Create from Guides. On occasion, Illustrator may not make slices the first time you attempt to. I have found that I sometimes need to repeat this step three or four times before Illustrator actually will make slices. Below, the black numbered boxes indicate that the slices have been made.

Step 13

To save your slices for use on a website go to File > Save for Web & Devices… Use the Slice Select Tool (K) highlighted in the upper left corner to select the specific slices that you want to save. Select multiple slices at once by holding down shift. Adjust the settings on the right to suit your needs. JPEG images work best for items that have several colors, while the GIF file format works well for items that have large areas of color and not many colors in general, PNG file format works well for transparent graphics (though may require some work to adjust for older IE browsers). You may want to test quality versus file type and adjust the Quality to save bandwidth. Once your ready, click Save.

Step 14

Decide where you want to save the images to. I’ve chosen the Desktop. Under format select Images Only, then click Save.

Step 15

On your Desktop you will now have a folder called Images. Inside this folder will be the specific slices (images) you selected. These images are ideal in resolution and file size for use on the web.

Step 16

As mentioned in Step 11, clear your guides by going to View > Guides > Clear Guides. Now, draw new guides around the next area that you want to slice. The hover state (when the mouse is over the navigation) will be red, while the off state will be grey. You will need to make both versions of the navigation. To efficiently accomplish this, first make all of your navigation red then go to File > Save for Web & Devices…

Step 17

Select the specific slices you want to save. Since my navigation is not made up of images or an abundance of colors I have decided the best filetype for the navigation will be GIF, then click Save. Also, note that if your user a web supported font, then you may decide to use html text instead of images.

Step 18

You can give your images a new name at this point. However, they are automatically named for you so this is not mandatory.

Step 19

If you saved your images to the same location as before, you will notice the Images folder on your Desktop now includes the additional images you just saved. Repeat Steps 16-18 to make the off state for your buttons.

Step 20

Keep in mind this is just one possible workflow. Alternatively, you could place on and off states somewhere in your document, create all your slices, and export them together.

The other method of creating slices is by selecting an object then going to Object > Slice > Create from Selection. Creating slices using guides or from a selection is fine as well. Use a workflow that you find comfortable and best for the particular project you’re working on.

Step 21

On occasion you will not need to include the text that falls within a slice. For example, the footer will have text that is typed inside of the WYSIWYG editor. If this is the case simply delete the text before or after you make the slices, but previous to saving the slices for the web.

Step 22

Below you’ll notice that I deleted the text after the slices were made.

Final Image

Observe the final website. As you can see, laying out a website in Adobe Illustrator is simple and effective. You can quickly experiment with design and give this phase of the web design process the attention and thought it needs. You can view the final image below or view a larger version here.

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