Imagination is our power

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 1200×750px.

instantShift - Creating a Wireframe Using Adobe Fireworks

Select the “Rectangle Tool.”

instantShift - Creating a Wireframe Using Adobe Fireworks

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

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

Add a Logo/Header

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

instantShift - Creating a Wireframe Using Adobe Fireworks

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 “…”

instantShift - Creating a Wireframe Using Adobe Fireworks

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”.

instantShift - Creating a Wireframe Using Adobe Fireworks

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

instantShift - Creating a Wireframe Using Adobe Fireworks

(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.

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

I then added a picture for visual purposes…

instantShift - Creating a Wireframe Using Adobe Fireworks

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

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

instantShift - Creating a Wireframe Using Adobe Fireworks

Your website should look something similar to this:

instantShift - Creating a Wireframe Using Adobe Fireworks

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).

instantShift - Creating a Wireframe Using Adobe Fireworks

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!”).

instantShift - Creating a Wireframe Using Adobe Fireworks

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.”

instantShift - Creating a Wireframe Using Adobe Fireworks

Your two pages are now linked!

instantShift - Creating a Wireframe Using Adobe Fireworks

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.

Advertisements

Comments on: "Creating a Basic Wireframe Using Adobe Fireworks" (1)

  1. Good write-up. I certainly love this website. Keep writing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: