John Yesko User Experience
Home
Portfolio
About

Website Design Process
Following are the general steps I take to create a website. Depending on the scope of the project, the entire process may take anywhere from a few weeks to several months.

1. Requirements Gathering
First, I like to hear what the goals and intended audience are for the proposed site.

  • Is the goal to market a company, sell a product, educate, or entertain?
  • To whom is the site targeted, e.g., CEOs, stay-at-home moms, or high school students?
  • If there's more than one audience, which is most important?
  • How fast are target users' connection to the Internet, and what screen resolution are they likely to be using?
  • Are there special hosting requirements, based on the site’s technical features?

Answers to these questions go a long way toward determining the content and organization of the site.

Another key part of website planning is understanding where the client organization is coming from in terms of branding. I like to see what communications materials have been produced in the past (brochures, previous websites, annual reports), and hear what's been effective. What visual elements should be carried through to the proposed website, such as a logo or color palette? What "voice" does the organization use? Do branding elements not even exist yet, and need to be created from scratch?

In the case of a site re-design, part of requirements gathering may be the development of a user experience audit. This report details the usability-related issues seen in an existing site, with an eye toward improving them in the next generation.

2. Information Architecture
Information architecture can be thought of as creating the "blueprints" for a website. It's critical to establish the scope, structure, and navigational scheme for a site before attacking graphic design issues. The "building a house" analogy is overused, but it does apply here. You don't start talking about the color of the carpeting or what style of bidet you want before deciding how many rooms your house has, what materials it's made of, and in what neighborhood it will be built.

The two main deliverables out of this process are a navigation map (also known as a "site map" or "flowchart"), and wireframe document (sometimes called a "LoFi"). The navigation map is "tree" diagram that shows the hierarchical structure of the site--what the main content divisions are and how "deep" the site is.


A website's information architecture begins to take shape

A wireframe is essentially a sketch of each key page in the site. It shows the navigational scheme (links and buttons used to move around the site), general content scope, and how these elements are prioritized and positioned in relation to each other.

3. Graphic Design
In web development circles, graphic design is technically known as "the fun part." Using the information architecture deliverables as guidelines, the graphic look and feel of the site is created. Elements such as page layout, colors, fonts, illustration, photography, and navigational graphics are all addressed in this phase of the project.

I usually begin by creating three different home page treatments. While all three treatments share the same content (as established in the information architecture process), they will differ in areas such as layout, color, and imagery. However, all treatments will be consistent with the client's established branding guidelines. I may also mock up an interior (second-level) page for each treatment. The client selects one of the design treatments with which to proceed. Sometimes, the chosen approach ends up being a combination of two treatments.

If necessary, photography is shot or purchased. Illustrations, animations, or other graphics are created.

  • Design treatments example from a site I designed for University of Illinois at Chicago. (Three home page alternatives are shown.)

4. Production and Programming
The last step before website launch is putting it all together. All of the individual pages--and the HTML code that makes them work--are produced. When a site requires more intensive back-end programming than I can provide (such as database development or a secure purchasing system) I partner with other developers to manage this part of the job.

All of the deliverables listed above--from information architecture documents to the final working website--are posted on private page of my website for client review. When everything’s perfect, we publish it to the live public server.

5. Website Maintenance
To keep a site fresh, it should be updated on a regular basis. While some of my clients prefer to handle updates themselves, for others I continue to perform maintenance well after initial launch. These updates are usually billed on an hourly basis.