Planning for designing Web pages

Planning and Designing a Web Site - Overview

Many Web developers and designers have different approaches to designing and producing Web sites. Perhaps the single most influential work 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 is the second edition of their preeminent book on project management and processes of Web design. While their book is primarily for project managers or ambitious one-man-show Web developers, it contains information that can be applicable to any participant in the Web development process. This is a book that I've strongly recommended for anyone continuing on in the field of professional Web development.

Based on Goto and Cotler's intuitive Web redesign process phases, and incorporating ideas from Patrick Lynch and Sarah Horton's Web Style Guide, 2nd Edition, I've identified the following key stages for design and production of a Web site, from start to finish:

1. Define the Project
2. Develop Site Structure & Organize Content
3. Design Graphic User Interfaces
4. Build Web Site
5. Produce & Publish Web Site

If you continue on in the Web track of the Multimedia program at UVSC, you'll find that we revisit this process in greater detail and depth in DGM 2740 - Web Design. In that class I add another step between steps 2 and 3:

3. Develop Page Structures & Organize Interactions

This additional stage is a little more abstract, but it articulates a philosophy of Web design influenced by Web standards, accessibility, and usability. For our purposes in this class, 5 stages will do just fine!

Let's look at these stages a little closer and define what they mean:

1. Define the Project

   Project definition may seem relatively unimportant, but having a succinctly definedaudience and purpose as a mantra you can repeat throughout the design process will keep you focused and on-task.
   This first stage consists of gathering and analyzing the information necessary to clearly identify the scope of the project and then prepare for kick-off. You will start by asking a lot of questions, and you will amass a lot of data that will be used to shape and communicate the expectations of the project.
   In stage 1 you also define project scope, where ideally you understand everything from budget to ongoing maintenance. No matter the size or scope of the project, thorough planning is critical to success and efficiency.
2. 

   
   

   Initial sketch of a Web site map.

   Develop Site Structure & Organize Content

   In this stage we take a look at the content that our client has given us. We take that content page-by-page and try to write an outline of the entire site. This outline can be represented using a site map, which visually shows each section and page of the site and how those pages interlink. We'll actually do this at the end of this lesson.

3. Design Graphic User Interfaces

   A graphic user interface or GUI is simply the visual elements of a Web site that users see and use--buttons that are clicked on, the placement of content, the typography, color schemes and other design elements. GUI design is not taught in this course, but is glossed in DGM 2740 - Web Design.

4. Build Web Site

   In practice, I've found that the actual building a Web site consists of the following steps:
   1. Create a basic XHTML template to structure the information for each web page
   2. Produce Web-ready images (JPGs, PNGs, GIFs) for use in the Web site's graphic user interface
   3. Create the Cascading Style Sheet to produce the designer graphic user interface
   4. Modify the XHTML template as needed to meet the needs of the CSS
   5. Copy finished XHTML template for each page in the site
   6. Copy, paste, and markup content for each web page
   7. Proof-read, error-check, and usability-test each and every page
   Though we won't be extensively exploring each of these steps in this course, you will want to come back to these steps when it comes time to work on your Final Project!

5. Produce & Publish Web Site

   Once the Web site and all its pages are complete, you can't just leave them on your computer! You have to publish them on the World Wide Web for the public to view. This final stage consists of two steps:
   1. Upload the Web site to a public Web server
   2. Employ a variety of strategies to publicize the site

If some of these stages used terms that were over your head, don't fret! You'll learn soon enough how this process can be applicable to both small- and large-scale Web site design. For now we'll keep it simple and deal with stages 1 & 2