Introduction to Web Design & Usability

Web Design Process Overview

In order to apply usability theory, visual design theory, and practice web standards it is helpful to have an orderly framework to work within. To me the most important such framework is the web design process.

Many web developers and designers have different approaches to designing and producing Web sites. Perhaps the most influential web design book on the process of web site design is actually focused on the process of Web site redesign: Kelly Goto and Emily Cotler have written a book called Web Redesign 2.0: Workflow That Works. This book covers project management and processes involved in of web design. While their book is primarily for project managers or one-man-show web developers, it contains information that can be applicable to any participant in the web development process.

It's interesting to learn why Goto and Cotler focus on redesign: they've discovered that as a professional Web developer one is likely to have ten times as many redesign projects as one has original design projects. In my career I've been lucky to have many original design projects for new companies, but as the dominance of the web grows the chance to do a first-time design for an organization shrinks.

Every designer may have his or her on web design process. I base mine heavily on Goto and Cotler's intuitive redesign process phases, I incorporate ideas from Patrick Lynch and Sarah Horton's Web Style Guide, 2nd Edition and through my experience I've put these together in the following key stages for design and production of a web site, from start to finish:

  1. Define the project
  2. Develop site structure & prototype information
  3. Develop sage structure & prototype interactions
  4. Design graphic user interface
  5. Build and test the web site
  6. Produce & publish web site

Each of these stages had a number of steps, which I will get into later.

If we were to try to identify each of these phases in terms of how they relate to the design arms of Web design (information design, interaction design, and visual design) we could expect something like this:

  1. Define the project
  2. Develop site structure & prototype information [Information Design, Interaction Design]
  3. Develop page structure & prototype interactions [Interaction Design, Information Design]
  4. Design graphic user interface [Visual Design, Interaction Design]
  5. Build and test web site
  6. Produce & publish web site

Based on this assessment, you'll note that what most people consider to be the bulk of Web design work--the building of the Web site--doesn't qualify as "visual design" at all. Most of the real design work falls into the preliminary work, work that establishes standards and conventions for the final production, or building phase of the work.

Don't underestimate the importance of planning and pre-production. The 6-stage process that I'm recommending treats planning and pre-production appropriately, and you'll find as you begin taking on web design projects yourself that the more upfront planning you engage in, the less problems you'll have as the project is under way.