Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

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

  • Print
  • + Share This
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 01

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.

Download UI map example here.

Application

Rating

Notes

Illustrator

_

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 02

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

Download story board and process flow example here.

Application

Rating

Notes

Illustrator

__

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 03

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.

Download mood board example here.

Application

Rating

Notes

Illustrator

___

Excellent illustration tools, but difficult for multipage documents.

Photoshop

__

Difficult for multipage documents.

Freehand

_____

Great for simple layouts with photos and illustrations.

Fireworks

___

Difficult for multipage documents.

OmniGraffle

_____

Great for simple layouts with photos, but limited illustration.

Pen & Pencil

_____

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 04

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.

Download wireframe example here.

Application

Rating

Notes

Illustrator

___

Excellent illustration tools, but difficult for multipage documents.

Photoshop

__

Difficult for multipage documents.

OmniGraffle

_____

Excellent tools for precision wireframing, but limited illustration tools.

ConceptDraw

___

Awkward for heavy illustration duties.

FireWorks

___

Difficult for multipage documents.

Freehand

____

Excellent illustration tools and allows multipage documents.

  • + Share This
  • 🔖 Save To Your Account