Web Design Process

Abstract

This page documents how the Design Process works in relation to web pages or entire web sites.

Introduction

Before you begin designing pages and sites, you need to have already figured out the requirements. This is critical since it will help you design towards the goals.

The design process is an Iterative Process, meaning that you apply steps over and over until you get the desired result. Parts of the process rely on input from others. Other parts need to be owned by the lead designer and the design team.

The goal of the Web Design Process is HTML, CSS, and perhaps even JavaScript that will give an extremely clear picture to the web developer about how the page will look and work.

Phase I: Sketch

The first phase of the design process is the sketching phase. Grab pens, crayons, pencils, or whatever tools you like, and just start drawing. Crude, quick drawings are the best place to start. You get to experiment with a variety of choices.

The goal of this phase is to produce tens of designs, each of them unique and special. Don't waste a lot of time on any one design. Once you think the concept is represented, it's time to move on.

Step 1: Draw

Solicit designs from people involved in the project. Maybe they will simply give you a verbal description. Perhaps they will do some of the drawings themselves. Regardless, take what they have and put it into a concrete form. While you're at it, draw some of your own designs. Go look out at the web and draw inspiration from other sources.

The goal here isn't to have a pixel-perfect representation of what the end product will look like. The goal is simply to get an idea in a concrete form so that you can work with it.

Step 2: Refine

Take a drawing and try to bring out of it specific things that make it different or special. Note how the pages work. What things are buttons? What are links? What images are shown where? What concepts are shown where? Don't spend too much time refining it, just see where the design takes you.

Step 3: Review & Criticize

The last step is to review what you've done and point out the flaws and the strengths of each design. You may need to solicit advice from the rest of the team working on the project and from the clients.

Phase II: Functional Design

Phase II focuses on delivering about 3 designs that have all the functional elements described and laid out. In this phase, you choose what elements of the previous designs you liked and keep them in their best form. You throw away the rest of the work as an example of what didn't work.

Step 1: Draw

The end of this step should yield fairly detailed drawings and a complete description of what functional elements there are on the page and how they work. You should also very specifically state what information is shown where.

Step 2: Test

The next step is to actually walk through the design. Is it possible to do what the web pages should allow the user to do? Is it simple? Or is it needlessly complicated? You should have a set of Use Cases and even Personas to help you walk through this stage.

It is a very good idea to walk through the design with someone else's eyeballs to make sure you didn't miss anything.

Step 3: Review

Get the rest of the team involved in this stage as well as the clients. Show them the designs and walk them through each one. Listen to what they have to say. At this point, it should be very clear to the developers whether this design is even possible to implement. The clients should also be able to clearly see what they are getting.

Step 4: Refine

Until you have a design that works, you're going to have to refine what you have. You may want to go back to the discarded ideas and bring back old ideas that died if the ideas that survived aren't working.

Phase III: Pixel Perfect

Now that you have the process nailed down, it's time to nail down the colors, images, spacing, and otherwise "finalize" what you've already done.

Step 1: Colors & Theme

It's time now to really solidify the colors and theme of the design.

Step 2: Images

The colors and themes dictate the images you'll need to make the design work. Now's the time to get these images working.

Step 3: Sizing & Spacing

Work out how exactly the page is going to be laid out as well as the fonts and font sizes you will use.

Phase IV: HTML & CSS

The last step of the process is to take the finalized content and convert it to HTML. Although the HTML may not be used as-is in the final implementation, it will be an extremely valuable reference point.