Designing a web site is a process consisting of six phases: Project Definition, Site Structure, Visual Design, Site Development, Testing, and Launch Plus.

Project Definition

The most critical step in the web design process is creating an accurate project definition. A project definition includes a project brief and a project plan. The client survey is used to gather the information needed to develop the project brief and plan.

Step 1: Conduct a Client Survey Interview - The purpose of this interview is to determine the purpose of the project, the target audience, branding/perception goals, content source, technical specs and communication strategy.

Step 2: Write the Project Brief/Creative Brief - Based on the information gathered in the client survey, we write a project brief that states in black and white the project specifics.

Step 3: Develop Persona(s) - Look back at the client survey and project brief and develop a persona for the primary audience.

Step 4: Write the Project Technical Specifications - Using the information gathered in the client survey along with the technical standards of our organization, document the Technical Specifications to clearly establish requirements like screen resolution, browser compatibility, download time, web standards and accessibility.

Step 5: Develop the Project Plan/Timeline- Establish the timeline for deliverables and tasks for each phase of the project. Assign due dates and resources.

Step 6: Document Maintenance Considerations - Develop a web site maintenance plan that documents how the site will be updated and reviewed regularly.

Site Structure

"Redesigning a website is like remodeling a kitchen - you must figure out what features and capabilities you need and how you will use them before you design your layout, place appliances and plugs, and select tiles, curtains and countertops." -- Web Redesign 2.0

Good web design requires a solid site architecture based on the site's goals and target audience established in the project brief. The deliverables from this phase are: Content Outline, Site Diagram, Page Description Diagrams, and Wireframes. These four deliverables are dependent on each other and need to be completed sequentially.

Step 1: Content Outline - Working closely with our clients, we create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Take time to think about the future and how the site content might need to grow. Next group your content into categories. Once your categories are established, create an outline of your content and review it with our clients for accuracy.

Step 2: Site Diagram -Take your final content outline and create a sitemap or site diagram. A site diagram is just a visual representation of your content outline and site structure.

Step 3: Page Description Diagrams - Clarifies all content for a given page clarifies the priority of each chunk of content completely removes visual design (color, font, placement) from this stage of the conversation.

Step 4: Wireframe - A wireframe is a non-graphical layout of a web page. It is a simple drawing of the chunks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site. Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.

Visual Design

"Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience."

"Designers are not mindreaders or magicians. Good design is dependent on good site structure and a solid project definition."

Now it is time to for the designers be creative! We review the project brief, sitemap and wireframes then brainstorm solutions and develop the different visual designs. The designer will also review any branding guidelines as well as the technical requirements for screen resolution, browser compatibility, download time, web standards and accessibility.

At this point, the designer has a clear idea of the purpose of the site, the content that will comprise the site, the site architecture and the elements that need to be on each page. Drawing on our knowledge of design principles ( balance, rhythm, proportion, dominence), design elements (point, line, shape, color, typography) and user centered design (usability), we can develop design options that meet the project goals.

A sample of the visual design tasks:

• 1st draft of visual designs for home page and one sub-page
• Client provides feedback on designs
• 2nd draft of visual designs for home page and one sub-page
• Client selects design and provides feedback
• 3rd draft of visual design for home page and all unique sub-pages
• Client provides feedback on design
• Final visual designs for home page and all unique sub-pages
• Client approval of final design

Site Development

Now it is time to actually build the site. There are two major steps during this stage: Technical/Functional Plan and, Build and Integrate the Site.

Technical/Functional Plan

Step 1: Start by reviewing the Project Brief, Site Structure and Visual Design and confirm that everything is in alignment and supports the overall project goals and needs.

Step 2: Set the technical/functional specifications for the site:

• Target Technical Specs - what browsers, OS, resolution and connection speeds will you target.
• Browsers* - what browsers will you target? see UT's web guidelines on browsers
• Operating Systems* - Mac, Windows, Other?
• Display Resolution* - what is the screen resolution the site will be designed for? what other screen resolutions will be supported gracefully?
• Connection Speed* - what is expected connection speed for your primary users, what other connection speeds will you target?
• Page Download Size - 30K and under 30-80k (typical page) 80-100k (graphic heavy) 100k+ (not recommended unless all users are high-bandwidth) * For the latest information see:
• Browser, platform and display resolution statistics Connection Speed Functional Specs - what functionality does your site require? Use of W3C web standards is recommended to insure that your site pursues the goals of web for everyone and web on everything.
• CSS
• Flash
• (X)HTML version
• JavaScript
• Rich Media (video, audio)
• Search - htdig and google at UT
• Secure Credit Card Transactions
• Backend Technologies (database, cgi, CMS, personalization, login)
• Web Analytics - Urchin Statistics for your site at UT

Step 3: Project Plan - Refine and add details to the project plan you drafted during the Project Definition Stage. Our plan now includes a detailed list of concrete tasks, assignments, target dates and dependencies between tasks.

Build and Integrate the Site

Finally! Time to turn all this planning into reality!

The steps include:

Build templates using web standards  

• CSS - separate presentation from content
• (X)HTML - use valid (X)HTML
• Javascript - add light scripting, make sure to degrade gracefully and maintain accessibility
• Optimize - optimize images, css and (x)html
• Run initial tests on templates.

Create Pages 

• Pour content into templates
• Establish method for content contributors to review, update and add content

Backend Development - Code dynamic features of the site that require database/cgi and integration

• Search
• personalization/login
• secure transactions
• web analytics

Testing

Our original project plan always allocates time for formal testing. We identify a person to serve as the Quality Assurance Lead. This individual's priority will be to create a realistic QA plan, manage the testing process, prioritze issues, insure that high priority issues are solved and conduct the final review and release of the site.

Quality Assurance Testing

• Content - accurate, understandable, spelling, grammar (review conducted by content contributors / content editors)
• Links - review site for broken links using an automated tool like WebXM
• Functionality - does the site perform the functions defined in the original project definition, create task list and conduct methodical testing
• Validity - validate (X)HTML, validate CSS
• Accessibility - automated section 508 tests using an automated tool like WebXM , manual section 508 tests
• Browser/OS/Resolution - test site on the target browsers your defined earlier either manually or using browsercam
• Connection Speed - use the Web Page Analyzer to get analysis and recommendations on the speed/size of your pages
• Usability - conduct informal or formal usability testing with your target audience
• Search Engine Optimization - review your site for semantic markup. Read 10 Tips on SEO by Alan K'necht in his article entitled SEO and Your Web Site
• Load Testing - contact your server administrator to discuss load testing techniques
• Security - request automated SecurityXM Scan, review file authorizations, review authentication method, conduct authentication test

Prioritize Issues

Taking the time to conduct testing prior to production is an important element in launching a high quality site. However, if you wait until the site is perfect, you will never launch. There is a balance between perfection and realistic quality that must be struck. As you monitor the list of issues that are uncovered during the testing phase, prioritizing them in at least three categories:

• Priority 1 - critical, must be fixed before launch
• Priority 2 - would enhance the site, but we can go live without it, address as soon as time permitss
• Priority 3 - future enhancment, nice idea/feature, will consider for future release

Refine Site

Implement the priority 1 changes to the site before release.

Launch

1. Style Guide
2. Launch
3. Maintenance

Style Guide

A style guide consists of the following elements:

• Visual Design Standards - logos, colors, typography (to keep the site on brand)
• Naming Conventions - for files, directories, css, images, titles
• Site Structure - document the site diagram and indicate how the structure is built to handle growth
• Templates - provide the (X)HTML templates and CSS indicating layout, typography, size, color, navigation, menus

Launch the Site

Plan the best date to go live. Consider current web site traffic patterns and attempt to launch in a way that minimizes downtime. Make sure that everyone on the team is on call for any challenges that might occur during launch. If possible, consider a soft launch (a quiet beta launch that allows you to confirm everything is up and running before the official launch date).

• Conduct one final stage of quality assurance testing on the live site after it is fully in production to make sure everything is running smoothly.
• Take a moment to celebrate and then get some sleep!
• Prepare for last minute surprises by scheduling time to fine tune or solve any unexected challenges during the first few days or weeks of the site debut.

Maintenance Plan

Implement the maintenance plan that was developed in the first stage of this process.

The importance of keeping a site

• Complete
• Current
• Coherent
• Searchable
• Accessible
• Attractive
• Robust
• Secure
• Cost Effective
• Aligned with the spirit and goals of the project