Designing Webbed Environments: The Importance of the Define and Design Phases

Having a clear plan for your Web site is every bit as important as any technology you use to deliver it. But it can be easy to overlook the define and design phases of your project. Jason Cranford Teague not only shows you a tried-and-tested process for creating a blueprint for your Web site (which all members of your team can use to produce the final product as intended) but also evaluates the best software available to you for creating the deliverables.

Like this article? We recommend

Like this article? We recommend

A large Web site built without the benefit of a blueprint will fail as surely
as a large building built without the benefit of an architectural blueprint. But
even if you are building a garden shed-sized Web site, a good plan will save you
time in the long run.

All plans require that you follow a process that is understood by everyone
concerned with the project, whether they are designers, developers, managers, or
the client.

This article provides a quick rundown of each of the deliverables for the
define and design phases of the Web project along with suggested applications
for creating these documents.

Define Phase

The Web is about information, and before you can begin your Web design you
need to define the information you are presenting and how the user will interact
with that information. Defining a Web site can use many different documents, but
these are the four most commonly used:

UI (site) map

Process flows

Mood boards

Wireframes

UI Map

A UI map (often called a site map) enables members of the project (clients,
graphic designers, programmers, project managers, and so on) to see the site
structure at a glance. It gives them a common blueprint to work with and
reference.

Most UI maps will use a flowchart like structure to show how the various
pages within the site link and relate to each other. Generally, pages in the
site are represented by rectangles and links between the pages as lines.

Figure 1 The UI map
gives you a quick overview of all the pages in the Web site and how they link to
each other.

Application

Rating

Notes

Lacks many of the features to be able to quickly create UI maps such as auto
connection.

Visio

____

The standard for Windows.

OmniGraffle

_____

An excellent Mac-only alternative to Visio that includes many intuitive
features for outlining and organizing your pages.

ConceptDraw

____

Another great Mac alternative to Visio, but with a less user-friendly
interface than OmniGraffle interface.

Freehand

____

Excellent controls and intuitive features for building simple UI maps.

GoLive

__

Although GoLive includes the ability to quickly build UI maps that can then
be turned into pages for development, it has limited output options for
documentation.

Story Boards and Process Flows

Story boards take the UI map one step further, providing a general visual
representation of a page or part of the page, which contains an involved
functionality that requires additional explanation. Generally, story boards show
interactions between the user and the Web page, showing each action and the
system reaction as a separate thumbnail sketch.

Process flows go further by showing the detailed decision paths involved with
a particular interactive process showing all possible paths and decisions.

Figure 2 The process
flow shows all possible interactions with a particular feature, whereas the
story board visually displays the most common interaction.

Application

Rating

Notes

Good for general story board illustration, but limited to a single page per
document, making multipage documents difficult.

Visio

___

Good for process flows, but awkward for story boarding.

OmniGraffle

_____

Combines strong illustration tools with easy flowcharting tools.

ConceptDraw

___

Good for process flows, but awkward for story boards.

Freehand

____

Combines strong illustration tools with easy flowcharting tools.

Mood Boards

Mood boards are a first step in visual design. The designer begins to put
together the visual elements that eventually go into making the interface. These
include the basic color palette, rough sketches of the chrome, and images that
reflect the general look and feel that is desired.

Figure 3 Mood boards
begin the process of visualizing what the site will look like by analyzing the
audience and collecting the visual collateral for the site.

Drawing by hand and scanning work in for presentation can be highly
effective

Wireframes

Wireframes present the general structure (layout-grid) that will be used for
Web pages within the site and the basic placement of elements within the page.
Wireframes are not meant to indicate the exact visual treatment of the page, so
avoid using colors; although you might want to use a color such as blue to
indicate clickable items.

Figure 4 Wireframes
are a grayscale representation of what goes where on the page. It is important
not to include too much visual information. That comes with the
visual design. What’s important is getting the structure and organization
right.