John Warnock and Charles Geschke founded Adobe Systems Inc. in December of 1982. John was working at Evans & Sutherland, where he began developing a concept that would allow printers to print text and images from a computer. Warnock and Geschke formulated this concept in 1982, and Adobe was born with their first product, Postscript.

The company continued to focus on improving their font printing technologies until 1986, when Adobe Illustrator was born for the Macintosh. “Illustrator 88” was the first program to employ Bezier curves which allowed the most accurate vector drawings. In 1990, Adobe Photoshop was released to the public, bringing Adobe to the main stage.

The first version of Photoshop included a surprising number of features including, color correction, image output optimization, color curves and levels, and a clone tool. However, Adobe wasn’t used as a web design tool until 1998 when Adobe Photoshop 5.0 was released. Photoshop 5.0 introduced a slew of additions including a “History Palette” and “Color Management” capabilities.

With this technology, Adobe gave birth to its first fully functional web design platform. Photoshop continued to add new features. 6.0 added Vector Shapes, 7.0 gave the ability to fully vector text, CS gave support for JavaScript and a slew of other languages.

Although Photoshop paved the way for web design and wireframe creation, Fireworks is rapidly becoming a simple solution for web designers looking to create a fully functional wireframe with linking elements. Fireworks CS5 allows the users to preview their document in web browsers, and can create binding links with pages and subpages. You can find a good article about the differences between Photoshop and Fireworks here.

You may be interested in the following related articles as well.

• How to Design a Phone Icon in Photoshop
• Create a Season’s Greetings Card from Scratch to Print
• 60 Excellent Adobe Illustrator Icon & Logo Design Tutorials
• 100+ Fresh and Excellent Photoshop Tutorials
• Shooting Sky: Creating an Archive and Blending to Enhance Washed Photos

Please feel free to join us and you are always welcome to share your thoughts that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Why Do I Need A Wireframe?

Wireframes are essentially the backbone to your website’s overall design. Whether you are using complicated programs or a pen and paper, a wireframe is the road map for site navigation, design elements and overall effectiveness of the layout.

Makes Design Changes a Breeze

The wireframe allows users to understand which elements they love and hate about a website before it is a fully functioning, coded page. If you didn’t think an eye popping intrusive header would be distracting, wireframes allow you test this theory. They are the middle ground between idea and full conception.

Makes Site Design More “User Friendly”

Planning for your content is extremely important. Wireframes allow businesses to understand their true content needs. If your site has different ways to sort your content, and people are beginning to search for your content differently it may be require additional resources to integrate a new element in to your website that has already been coded. The wireframe allows web designers and coders to look at a barebones version of your site in order to adapt and remedy a problem.

Helps Clients Understand Their Needs

The most common application for wireframes is to help the site owner understand their website needs. The wireframes give a preview to how the site will look and navigate. They ultimately end up sparking conversations that (hopefully) lead to important design changes with your site.

Unfortunately, I could not find a beginner guide to making a wireframe in Fireworks when I was looking to create my own website; so after I learned the essentials, I set out to make a user friendly guide to creating a basic photography website wireframe. There are plenty of reasons people decide to create their own wireframe for their websites. It allows them limitless creativity and gives them a preview of their needs before diving in head first to a web design project. If you are on the fence, about creating a website wireframe check out The 7 Wonders of Wireframes.

However, if you want to base your website around another website, there are limitless templates available for you to use. The templates are the easiest way to create your websites design if you are one of those, “I want it now!” people. They are often already set up to be coded, include easily linked pages and pre-thought out site navigation elements. However, if you are a long-term thinker, the “I’d rather learn” type of person, creating your own wireframe is a great place to start.

If you are just following this lesson, or building your own wireframe by following the steps in the tutorial you will learn the fundamentals of the necessary web elements and page linking within a wireframe. The site I’m building is nothing fancy, but its simplicity keeps the users focus on my photography. Before we start, make sure that you have Adobe Fireworks CS5 and about an hour to spare. Here we go!

Creating a Basic Wireframe Using Adobe Fireworks

Create a New Fireworks Document at 1200x750px.

Select the “Rectangle Tool.”

Drag it across the transparent background, and adjust the background color to your liking (I chose white because it is subtle and clean). Hint: make sure you are in “Iconic” mode in the upper right hand corner before proceeding with the rest of this tutorial.

Set up your grid to help you align all of your elements.

Go to View > Grid > Show Grid

Insert a New Main Page Content Rectangle

This will be a base for you main page content. Add this by simply selecting the Rectangle Tool (U) and dragging another smaller rectangle on to your web page background. This layer should be a different color to help organizational elements pop. You can adjust the layer by setting the color to one that is different than the background image.

Next, select the two elements of your background (Main Page Rectangle and your Background) by holding Shift and clicking on both images. Move your cursor over to the “Layers Box” and group (CTRL or Apple+G) the two items of your background in your layer folder. Name it “Background” for referencing purposes.

Add a Logo/Header

Select the layers toolbox, and select “New Layer” label this folder “Home page” create a subfolder labeled “Title heading.”

This is pretty simple and all you have to do is select the Font you desire, and place it in the top left corner. Be sure to line up your Title with the gridlines. Hint: if you ever need assistance with what your website will look like on a browser, go to File > Preview in Browser > Preview in “…”

Adding Navigation Bar & Menu and Buttons

This is where the tutorial gets a bit more advanced; however, it is still do-able for any beginner. The main purpose of our navigation bar is to link to other pages within our website. With this, Fireworks allows you to link your .png home page to other pages within your wireframe.

First, click the “Rectangle Tool” to drag a horizontal bar across the top of your wireframe, either below or next to your heading/logo. (I chose to place the navigation bar next to my header). Match the color to your main page content rectangle, by selecting the nav bar and using the “Eyedropper Tool”.

Click the “Slice Tool” and create a rectangular box within your navigation bar.

(These will serve as linking elements that will direct the user to a new page). After you create rectangle within the navigation bar, copy it and paste it 3 more times. Since there will only be 4 header pages “Prints”, “About”, “My Blog”, & “Best of” being linked to we will add 4 slice tooled rectangular boxes.

Adding Text to Navigation Buttons

After you have set up your sliced navigation buttons, click the text tool and type “About” (or any text that you may need for your site). Change the font to a web friendly generic font, I chose “Calibri” size 20. Align your text using the grid guidelines. The font should be placed directly in the middle because it looks more professional; I use the “Snap To Grid” option to make sure that all of my text is aligned.

Create A Separator

For aesthetics, create a separator between these 4 menu buttons. Select the “Rectangle Tool” and create a thin rectangle on top of your navigation bar. Once you find a size you like, copy and paste it 2 more times over your navigation bar.

Adding Main Page Content

For this wireframe, I would like the main focal point of the website to be samples of my best photos. I first created a rectangle from the “Slice Tool” that will house my main content image.

I thought it would be nice to have an expose’ each week that includes a bit of information on, where the picture was taken etc… I selected the text tool and created a text heading, and underneath it placed a sub-heading. I decided to keep the size and fonts consistent with the menu nav bar fonts for CSS purposes.

I then added a picture for visual purposes…

Adding A Side Bar

Okay, your home page wireframe is almost done! A side bar is important for any wireframe, it not only is functional but many website viewers expect a sidebar with some sort of information.

My sidebar is going to have a sample of the different types of photos I take “Nature” photos, “Action” photos, and “Still-Life” photos. It is a visually appealing subcategory/ sort method.

First, I create a layer folder called “sidebar”. Add another rectangle using the “Rectangle Tool” and drag it over the main background. Change the color to a darker gray #333333

Adding Sub Category Links

I have 3 main sub categories that are going to be linked in my sidebar. I want them to be linked to each image. Select the Slice Tool and create 3 boxes within the sidebar.

Add Text Headers to the Top of Your Sidebar.

Choose the same text and font you used in the menu nav bar. “Calibri” size 20 and this time I bolded it and made it white.

Now Drag Your Sample Images on to the Wireframe.

Resizing them so that they are aligned with the slice tool rectangles.

Make sure that everything in your “Layers” palette is organized by Folders.

Your website should look something similar to this:

Creating a Secondary Page

Creating a second page is very important. Although we’ve all seen the 88 single page websites, having a multi page site can be good for both SEO and navigation purposes.

First you must create a page. Find the “Pages Icon” on the right hand side. For ease of use, you should duplicate the page (This will ensure that formatting is consistent and that a consistent theme is seen through the website).

Delete the duplicate content including the “Text” and all “Main Page Content”. Add new content that is specific to the sub page. The first page we will focus on is the “About” page. Add text in the existing text box that is relevant to the “About page. (“About Me”, “I.LOVE.PHOTOGRAPHY!”).

Go back to Page 1, find the “About” text box in the navigation bar. Click on it and find the “Properties” box at the bottom of the screen. Link the “About” box to your Page 2 by selecting the “Link” dropdown box and selecting “Page 2.htm.”

Your two pages are now linked!

You should be able to duplicate the process of linking pages and adding visual and text elements to your wireframe until you have filled in all the pages from your home page. The wireframe that we just created will have around 10 different pages all inter-linked. Remember keep the theme consistent! If something looks a bit off make sure that is lined up with the gridlines, the font is exactly the same and that it is not hidden behind other layers. The best websites will follow a “3 click rule,” meaning the user should be able to access the content they are looking for within 3 clicks. Hopefully the user stays around for longer than 3 clicks, but that all depends on your content.

Don’t worry about trying to find minor mistakes with your wireframe, if you are paying for somebody to code your website, they should be able to address this issue for you. The most common coding method is HTML and CSS. Many design services will be able to get you a fully functioning website, coded for under $500.

Creating a wireframe in Fireworks is the easiest way to begin a web design project. It allows you to incorporate “Web Layers” within your documents. This Fireworks wireframe will give you a holistic viewpoint of a website from design elements-up. A wireframe will also help you negotiate abbreviated rates to your website coder. They will appreciate your strategic planning for your site because there is a smoother transition behind idea to conception.

Find Something Missing?

While writing this tutorial, it’s always a possibility that we missed some other great tips. Feel free to share it with us.