Web Design Process

There is a defined process for designing websites that is different than designing for any other medium.

It’s useful to develop your own standard methodology for designing websites. This helps you be efficient, and able to produce consistently good work even when inspiration doesn’t come. There are many approaches to designing a website.

The following is a Web Design Process broken into four phases:

(Be sure to click on the plus sign to view the steps)

1. Define: Project Research

The beginning of the design process is the research phase. In this phase, the designer immerses him/herself in the project requirements, target audience, client needs, and the industry/competitive analysis related to the website. This step requires research and documentation. Don’t start approaching the design of the website until you’ve completed this step.

  1. Define the scope of the website
  2. Define the client goals and requirements
  3. Define the audience
  4. Compare and contrast existing websites that have similar characteristics
  5. Educate yourself about the industry/competitors related to the website
  6. Define the attitude of the website and organization/brand it represents
  7. Determine a schedule and estimate for the project
  8. Write a formal communication brief
    Documentation from Web Redesign 2.0: Client Survey
    Documentation from Web Redesign 2.0: Communication Brief
    Documentation from Web Redesign 2.0: Estimate by Task

2. Structure: Information Architecture

Before visual design can begin, it’s important to understand how the content on the website is going to be organized. This requires study and planning in the following ways:

  1. If necessary, take a formal or informal audit of content on the existing website so you’re familiar with the content that’s on the current website.
  2. Don’t assume that the client’s current organization is the best one for the web, more likely than not, you will need to reorganize the content.
  3. Define the most clear organization of content, featuring the most important categories and achieving the goals and requirements defined in the research phase.
  4. Consolidate similar types of content under one category.
  5. Consider how the categories relate in terms of importance and quantity of content.
  6. Create subcategories if necessary, but keep the levels of hierarchy to a minimum.
  7. Create a sitemap and, if needed, wireframes.
    Documentation: Sitemap
    Documentation: Wireframes

3. Design: Design Development, Refinement and Production

Before you start the formal visual design, research a broad range of design elements to gain ideas and inspiration from. The goal is to have more than enough material to experiment and “sketch” with.

  1. Save links to websites that have great design ideas. Spend as much time as possible looking at other designers’ work on the web. Become familiar with a wide variety of different types of websites.
  2. Get photographs/illustrations of products or concepts that will be used on the website.
  3. Brainstorm design elements. Develop several possible color palettes. Gather or create logos and any other graphic elements.
  4. Based on your project research, sketch design elements and layouts to develop several possible directions and concepts. Try pencil and paper as well as Photoshop/Illustrator. Don’t use Dreamweaver–it’s not meant to be used as a web design tool.
  5. Considering your research and structure, select a design direction for the home page,  keep in mind visual style, audience, attitude, site goals, and navigation.
  6. Don’t forget to consider how the home page will relate to the subpages. You need to understand how your navigation is going to work on all your pages, not only your home page, so “think ahead” and design with this in mind.
  7. Don’t incorporate every element and idea — be willing to throw out good ideas that don’t fit or won’t work
  8. Remember the basic principles of design, including proximity, alignment, repetition, and contrast
  9. Cut, refine, simplify, and clarify your designs. Don’t expect to get it right on your first try!
  10. Select your best one or two design directions, and create a formal version in Photoshop of the home page and the landing page for one of the sections of the website.

4. Build: Technical Production

Once the client has “signed off” on the design for the website, you can now get started on building the website in HTML/CSS. Notice that building the pages in HTML/CSS is the last step of the process.

  1. Study the design comps (created in Photoshop), and take a few minutes to strategize your plan for the layout of the website. Is it going to be easiest to build it as 1 column, 2 column, or 3 column layout?
  2. Start the technical production by slicing the images and optimizing (compressing) the images for the web. This is an important step so don’t forget to optimize your images, this will make them “web ready” and will decrease the loading time of your web pages.
  3. Set up a proper Website directory structure.
  4. Start off by building the home page (index.html) in HTML/CSS using Dreamweaver or the HTML editor of your choice. Be sure to create your external CSS file during this step.
  5. Build your navigational menu with links to the rest of the pages.
  6. Test your webpage before you continue with the rest of the pages. Upload the work you’ve done so far to the server and view your webpage in multiple browsers: Internet Explorer, Firefox, and Chrome, (if possible).
  7. If your webpage looks fine in both platforms and multiple browsers, you may move on to the next step.
  8. Build the rest of the pages. I recommend saving a duplicate of the index.html file you just created as the starter for the rest of the pages. Why re-create similar pages over and over, when the rest of the page are likely very similar?
  9. Be smart! Continue to test your pages as you build them.
  10. When you are finished with all the pages, you do a final round of testing, preferably on the client’s server.

 

For those of you interested in working for a creative studio or agency, it will be a benefit to understand a more complex process. Most larger studios/agencies use some variation of the Core Process as outlined by Kelly Goto (the author of the book, Web ReDesign 2.0: Workflow that Works) in her lynda.com videos.

Learn about a more in-depth design process for web design called the Core Process by the author of ReDesign 2.0, Kelly Goto.


Core Process

Phase 1: Define the project
Phase 2:
Develop the site structure
Phase 3:
Design the visual interface
Phase 4:
Build and integrate
Phase 5:
Launch and beyond

One thought on “Web Design Process”

  1. murray says:

    Hi Jamie,
    Wanted to let you know that the example wireframe pfds ‘aren’t found’ when I tried to download from fatpurple.com

Leave a Reply to murray Cancel reply

Your email address will not be published. Required fields are marked *