Web Design I | Wireframes and Layouts

Wireframes and Layouts

What goes where? Plan your site pages in this lecture.

In the previous lecture, we discussed how to conduct a competitive analysis and create site maps. These steps allow Web designers to build Web sites with a clear and focused vision.

Now let's look at the next step of the Web development process, which is to develop the wireframes and layouts for the main pages in your site.

Creating wireframes helps you plan the placement and size (and therefore, the importance) of the different content areas and features on your Web pages. Turning those wireframes into HTML layouts (one-, two-, or three-column page designs) prepares your content for the visual design stage.

It's important to note that wireframes and layouts are typically shown to clients prior to—and separate from—the visual design for the site. This is because designers and site owners must agree on the overall layout and functionality of a site before the visual design is created. We'll deal with visual design in Lecture Three, as you begin to turn your all site plans into CSS-styled Web pages.

Before we work on processes and techniques, let's simply define what wireframes are. A wireframe is a visual display that uses text and geometric shapes to help define the size and placement of elements on a computer interface such as a Web page. Visual elements like color, images, photographs, gradients and so on aren't included, which leaves a model that almost looks like it is made of wire. Thus, the name "wireframe"!

Why use wireframes? Well, much like you wouldn't want to build a house without a blueprint, you also wouldn't want to spend your time or your Web design client's money haphazardly. Before you spend hours developing a brilliant visual schema, you need to nail down what content will appear on each page, and where. You must gain consensus with the major stakeholders in a project before you begin.

For a small-scale project, the discussion of wireframes could involve two people: you and the client. In a more complex situation like a Web design agency or as part of an organization tasked with running the business's online ventures, wireframes are important deliverables that need to be discussed with team members and approved by management before Web development begins.

Anatomy of a Wireframe

A wireframe can be built to represent any page you find on the Web. Some typical Web examples include the home page, the major sections or levels of a site, the results page of a search engine, a shopping cart from an e-commerce site, a registration page for a social networking site, and so on.

A typical wireframe contains the basic elements that are found on almost any Web page:

	Main page elements: The important sections of the page, such as headers, footers, logos, and content boxes. Labels: The indicators of any headlines, page titles, and navigational links. Placeholders: "Dummy" text (lorem ipsum, or some variant thereof) that stands in for page content. Placeholders can also be created for graphics.

There are various ways to create page wireframes, each with their own inherent pros and cons. Ideally, you want to create wireframes that:

	1. Are easy and quick to create. 2. Don't do the work of the visual designer by including too many visual elements. 3. Make it easy for the client to visualize the way the site flows for the user.

Let's see how each of the different wireframing methods stack up with respect to these criteria.

Static Wireframes

One of the most popular methods for creating wireframes is to make fairly "static" pages that can be printed out or viewed on screen. The various page elements are represented by boxes or other graphical elements.

To continue creating the used bookstore Web site we began working on in the last lecture, let's look at a couple of wireframed pages:

Above is a wireframe for our home page. Here, we've incorporated all of the main page elements we plan to include in the final version of the home page. The page elements are represented by light blue boxes, and images are represented by brighter blue boxes.

We've also referenced the main navigational links and interactive elements (such as the search box and the newsletter signup box). Note that the colors and graphics for the wireframe are kept very minimal. We don't want to imply anything regarding the final color and graphic choices for the site. We just want to represent the page's basic structure and flow.

Let's take a look at the site's product page:

When a user selects a particular book to explore, this is the page he or she is taken to. There's a section describing a book at various levels of detail, and a section listing the copies of the book that are for sale. The user also has easy access to her shopping cart, as well as related books he or she may also be interested in. The logo and top menu are consistent with the home page.

Tools for Creating Static Wireframes

Popular tools for creating static wireframes are Microsoft's Visio for Windows (see http://office.microsoft.com/en-us/visio/) or Omni's OmniGraffle for Mac (see http://www.omnigroup.com/products/omnigraffle/), though any basic drawing program can do the job as long as you can quickly make iterative changes.

You might want to try OpenOffice's Draw program (see http://www.openoffice.org/product/draw.html) if you're looking for a free option, or, if you're using Linux, take a look at Dia (see http://live.gnome.org/Dia).

Static wireframes can be created in many drawing or imaging programs, of course. If you don't want to use one of the tools mentioned above, the vector tools in Fireworks, Illustrator, and even Photoshop can do the job just as well.

Structure and Design Principles

Although wireframes are not representations of a visual design, there are overall structural and visual considerations. When considering the structure of your wireframes, ask yourselves questions like these:

	Site structure: How many layers of navigation will you have? Will the home page and subpages have the same design? Or do you need different designs for the home page, and various sections of the site? Overall layout: Will you use one, two, or three columns? Will you use a header and footer? Navigation: Where will this appear? Will it appear in the same place throughout the site (recommended). Do you need to create a subnavigation for tertiary pages?

When designing wireframes, it's very important to create a clean and clear-looking layout. Without including any specific visual design features, the wireframe must be well-designed. After all, the client will see your wireframe as evidence of your design abilities. (So never create a wireframe in Word or PowerPoint.)

In fact, when you construct your wireframes, you are already making design decisions about your Web site.

Here are some pointers for designing attractive wireframes:

	Typography. Use a single, neutral-looking font for all type. Use three or four different sizes of type to indicate page header, headlines, body text, features, and links, so that the purpose of each area is clear at a glance—even with placeholder text! Color. Use a pleasing but simple color scheme for wireframes, no matter who your client is. In the examples above, I used two shades of blue on a white background. Group similar features by using the same color and consider using the brighter colors for the most prominent features. Shapes. Use repeated shapes with the same dimensions for content areas that are similar. You are essentially creating a page layout with columns and boxes. Try to impart visual consistency by repeating box elements, and by making the layout of text within those elements consistent. White space. Allow plenty of breathing room around box elements (making it consistent). Also bear in mind that not every page needs to be jam-packed like Amazon! Make room for white space in your design, to create some contrast in your layout and let the eyes breathe. Readability. Make sure all text is easy to read, both on-screen or upon printout. Also, if your wireframe design is likely to be printed (such as when emailed to the client), make sure it is easy to print at letter size (8.5" by 11").

If this is your first time creating wireframes, rejoice! Developing a good wireframe design in this course will give you a system and a template that you can apply to all your Web design projects.

HTML Wireframes

Static wireframes are not the only approach to developing wireframes. Some Web developers prefer to present HTML wireframes to their clients.

HTML wireframes are—surprise!—HTML documents that outline the main page elements. Unlike static wireframes, you can interact with HTML wireframes, much in the same way as you interact with the final Web site. There are two ways to build HTML wireframes: text and visual.

Text Outline Wireframes

This type of wireframe includes a very basic "outline" of the page hierarchy, displaying the various page elements in order of prominence or importance. Such an outline does not represent the layout of the page, and so lacks the visual punch of static wireframes or "visual layout" HTML wireframes. However, given that the page's layout is really in the realm of page design, these types of outlines cleanly separate the wireframe from the page design.

One of the advantages of creating an HTML document with a clean hierarchical structure, is that it makes for a potentially clean transition into an HTML document that is ripe for CSS styling (thus, giving you a prototype that can be worked into the final site documents).

This text outline HTML wireframe contains only the content and no layout or formatting.

If you have the foresight to mark up your HTML wireframe document with labeled div tags, the transition to a CSS-formatted site can be even easier. You could even position the divs with CSS in the wireframe itself, thus creating a more layout-like wireframe. The only potential worry in doing this is that you can threaten to dip into the work of the designer, which strays from the intention of the wireframing process.

Visual Layout Wireframes

Visual layout HTML wireframes, much like their static counterparts, represent the visual layout of the page. One common method for creating this type of HTML wireframe is to use a program like Dreamweaver to create a quick layout that puts the various page elements in their expected places.

This is part of a visual wireframe that includes non-functional form fields to give a sense of the functionality on the page as well as the page's layout.

Static vs. HTML Wireframes: Which to Use?

There is not a simple answer to this question, as each wireframing technique has advantages and disadvantages. How you create your wireframes ultimately is up to you, but keep the following considerations in mind.

The main advantage of creating static wireframes is that they are fairly quick and easy to create. If they are printed onto paper, they are easy to notate and the client can carry a copy with her to review at her leisure. Also, as they are not created from the same "building blocks" as the final product (HTML code), as there is not as much potential to confuse the wireframe with the final product and design.

On the other hand, HTML wireframes are much more interactive than static wireframes. The HTML wireframe is "clickable," and its pages are linked to one another, and thus the client can get a much better feel for how the site will eventually flow for the user. HTML wireframes are also much more amenable to user testing. (Note, though, that programs like Fireworks and Visio can create wireframes that are "clickable" and link to other pages of the wireframe.)

Layouts

Once you have created the wireframes for your site (and the client has approved them), it is time to begin creating the page layouts in HTML. If you've created a neatly marked-up HTML wireframe, you may be able to translate this document to your site design layout, simply styling your wireframe elements with CSS. If you've created static wireframes, you should still be able to easily represent the planned design in HTML.

The goal is to keep your layouts simple so that they act as templates for placing your site content and visual design components later. You may only need two layouts for a small site—one for the home page and one for the remaining pages—or you may need several more for different levels and page types found in a larger project.

Most Web sites today (particularly business or corporate sites) are some variant of a single or multi-columned layout. These common layouts are structured, ordered, and generally make it easy for the user to find information (hence their popularity).

There are various methods for creating Web pages featuring one or more columns. Here we cover a few of the techniques used to create common HTML and CSS layouts:

One-Column Layouts

Suppose you want to create a simple, one-column design as in the screenshot below:

You could either create a fluid column (in which the column width grows and shrinks with the size of the browser window), or a fixed-width column (where the column width remains the same no matter what the browser window size). Both types of layouts have their own distinct pros and cons.

Fluid layouts are nice because all of the Web page fits within the horizontal space in the browser; you need not worry that there are bits cut off from the user's view, forcing him to horizontally scroll across the page to access everything. However, with fluid layouts you have less control over the design, as the size of various elements varies from user to user.

Fixed-width layouts, conversely, give the designer more control over the way the page looks, as the size of the elements remains static, but parts of the page may not fit horizontally in the user's browser window if the window is too small. So, keep these considerations in mind when choosing the type of layout that best fits your site.

To create a fluid one-column layout, you just need to adjust the left and right margins of the body element in your site's CSS:

body {
margin-left: 20%;
margin-right: 20%;
}

This effectively squeezes in the content of the page by adding space to the left and right.

Creating a fixed-width one-column layout can be a bit trickier. To create a simple left-aligned column, you just need to set a width for the body element:

body {
width: 600px;
}

If you want to center the column, you first need to wrap the contents of the column in a div element (here, I have labeled it content):

<div id="content">
<h1>Suspendisse Enim</h1>
<p>
Lorem ipsum dolor sit amet...
</p>
</div> 

Then, in your CSS, add a 50% left padding to the body element:

body {
padding-left: 50%;
} 

Finally, add a width and negative left margin to the div element equal to half the width of the column:

#content {
width: 600px;
margin-left: -300px;
}

The result? A centered, fixed-width, single-column layout.

Two-Column Layouts

Now, let's move on to creating some multi-column layouts. First, we'll tackle a two-column page:

To create a fluid layout, first mark up your HTML by enclosing your header, main content column, and navigation column in their own div tags:

<div id="header">
<h1>Suspendisse Enim</h1>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div id="nav">
<h2>Navigation</h2>
<ul>
<li>Curabitur sit amet</li>
<li>Nunc sed lacus</li>
</ul>
<p>
Quisque ligula...
</p>
</div>

The crux of this technique is floating the left-hand column (here, the "main" div) with CSS. Then the right-hand column "wraps" around it:

#main {
float: left;
width: 67%;
background: white;
margin-top: 0;
margin-right: 2em;
padding: 10px 1em;
border: 1px dotted #444;
border-top: 0;
}

Note that all floated elements need a width, so you also need to set a width for the floated column (and as this is a fluid layout, we're setting the width as a percentage). Then just tweak some of the other selectors—such as the margins and padding—to get it looking just as you want it.

The two other sections of the page—the heading and right-hand column—can just benefit from some minor aesthetic styling. For this page, we're just coloring the background white and adding some margins, padding, and a border:

#header {
background: white;
border: 1px dotted #444;
padding: 0 1em;
}

#nav {
padding: 10px 1em 10px 1em;
margin-top: 0;
background-color: white;
border: 1px dotted #444;
border-top: 0;
} 

The technique for creating a fixed-width two-column layout is similar to the fluid two-column method. But, instead of setting the width of the floated column as a percentage, you give it a static width (for example, set in pixels).

Then give body element a width too, so the header and right-hand column are thereby given a width as well (the header, here, spans the width of the body, and the right-hand column's width is the difference between the body width and left-hand column).

body {
margin: 0;
padding: 0;
width: 800px;
font: 0.9em/1.5em Verdana, sans-serif;
color: #333;
background-color: #ceeefd;
}

#main {
float: left;
width: 440px;
background-color:white;
border: 1px dotted #444;
padding: 10px;
} 

Three-Column Layout

The beauty of CSS is that, in theory, you are able to completely and neatly separate structure and content from style. That is, when laying out the HTML for your site, you should be able to structure the document in a way that makes the most sense, semantically and logically, of the page's information.

For instance, if your site is made up of a main article, site navigation, and some minor related information, you should be able to structure your HTML so that the most important content (such as the main article) appears first in the document, followed by the minor players. Then, if you want to place some of the minor information to the left of the main article within the page layout, you should be able to do so in the CSS, without having to rearrange the HTML.

While strict separation of content and style is lovely in theory, sometimes it seems a bit challenging to implement. In creating our three-column layout, however, we're going to take on the challenge of constructing CSS that lets us order the columns however we want, no matter how the content is ordered in the HTML.

When we're done, the page will look something like this:

First, let's take a look at the HTML:

<div id="container">
<div id="header">
<h1>My Website</h1>
</div>
<div id="main" class="column">
<div class="wrap">
<p>
Lorem ipsum...
</p>
</div>
</div>
<div id="nav" class="column">
<div class="wrap">
<h2>Navigation</h2>
<ul>
<li>Curabitur sit amet</li>
</ul>
</div>
</div>
<div id="related-info" class="column">
<div class="wrap">
<p>
Quisque ligula...
</p>
</div>
</div>
<div id="footer">
<p>&copy; 2007 Praesent sit amet est at nibh 
viverra condimentum.</p>
</div> 

We have three columns, a header, and a footer. Note that we have placed the main div first, as it is the most important piece of content. We've labeled the columns with the column class, and have also enclosed the columns in an additional wrap div.

Now let's begin structuring the layout. First, we'll float all of the columns by styling the column class:

.column {
float: left;
} 

As all floated elements need a width, give the separate column divs the desired width. Here, we're making a fluid layout, and so we're setting the widths as percentages:

#main {
width: 60%;
}

#nav {
width: 20%;
}

#related-info {
width: 19%;
} 

So far, our columns are laid out in the order that they appear in the HTML document, like so:

However, as illustrated in the final screenshot, we want the navigation column to be on the left, and the main column to be in the middle. To position our columns, first apply a left-hand margin to the main column that's equal in width to the navigation column:

#main {
width: 60%;
margin-left: 20%;
} 

This creates a little pocket to slip the column into:

Now, to move the navigation column into that pocket, add a negative margin sufficient enough "pull" the navigation column over the middle column (which is 60% of the page's width) through the space created for it (which is 20% of the page's width):

#nav {
margin-left: -80%;
width: 20%;
}

All that's left to do layout-wise is adjust the footer so that it appears below the three columns. To do this, just set the footer's clear property to "both":

#footer {
clear: both;
} 

What if we wanted to switch the left-hand and right-hand column? We need not touch our HTML! We just need to adjust the margins of each column.

First, take out the -80% margin you added to the navigation column, and add the following margin to the related information column:

#related-info {
width: 19%;
margin-left: -100%;
}         

Since this column was originally on the right-hand side of the page, we need to pull it farther over than the navigation column to stick it in the left-hand column space. That is, we need to pull it over both the navigation column (20%) and main column (60%), through the right-hand pocket (another 20%), This gives us a negative 100% margin:

Asymmetric Layouts

If you want to create a page layout that is a bit less conventional than the ordered, columned pages that dominate the Web, CSS positioning makes it quite easy to create an asymmetrical layout, like the one below:

In the HTML, wrap the different "boxes" of content within their own divs, like so:

<div id="header">
<h1>My Website</h1>
</div>
<div id="main">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div id="small">
<p>
Mauris porttitor ipsum at velit...
</p>
</div>
<div id="medium">
<p>
Phasellus pretium nibh nec sapien...
</p>
</div> 

In your CSS, set the position property for these boxes to absolute. Then size them (by setting their widths), and place them on the page using the top and left properties:

#header {
position: absolute;
left: 550px;
top: 300px;
width: 300px; 
padding: 10px;
}

#main {
position: absolute;
left: 600px;
top: 400px;
width: 450px;
background-color: #dffca1;
text-align: justify;
padding: 5px;
}

#medium {
position: absolute;
left: 0px;
top: 130px;
width: 600px;
background-color: #dffca1;
padding: 5px;
}

#small {
position: absolute;
left: 825px;
top: 10px;
width: 250px;
font-size: small;
background-color: #dffca1;
padding: 5px;
} 

In our header, for example, we've positioned it 550 pixels over, and 300 pixels down from the top left-hand corner of the page. If you want a fluid layout (one in which the boxes adjust their position according to the size of the browser), you can set the top and left properties with percentages.

We've also positioned the background image (the little frog), using the background-position property:

body {
font: 0.9em/1.5em Verdana, sans-serif;
color: #333;
margin: 5px 0 0 5px;
background-image: url(images/frog.jpg);
background-position: bottom left;
background-repeat: no-repeat;
}

In the following exercise, you'll develop both wireframes and layouts. Think carefully about which column structure you'd like to use to support your design.

Discussion Share your thoughts and opinions on design with other students. Exercise Develop wireframes and HTML layouts for your salon site project.