Designing or redesigning your website is like designing or remodeling your home - you figure out what features and conveniences you want before you design your layout. Good web design has solid architecture.  The deliverables from this phase are:

1.Content Outline
2.Site Diagram
3.Wireframes / Page Description Diagrams

These three deliverables are dependent on each other and need to be completed sequentially.

Content Outline
Working closely with you, create a list of all existing content you have for your site. Brainstorm content that needs to be created for the site. Review these lists of content, and trim out anything that does not match the goals or 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 content into categories. Once the categories are established, create an outline and review it with you for accuracy.

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.

Wireframes & Page Description Diagrams
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 your site.
Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.

We will create Page Description Diagrams (PDD). The focus of a PDD is two-fold:
1.What content belongs on this page
2.What is the priority of each chunk of content

The advantages of the PDD over the wireframe include:
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.

"Structuring the site on paper before starting the visual design is a critical step toward effectively presenting content to your intended audience."
"Designers are not mind readers or magicians (although we all think we are). Good design is dependent on good site structure and a solid project definition."

Now it is time to let our designers be creative! Review the project brief, sitemap and wireframes with the designer, then give us free reign to brainstorm solutions and develop the different visual designs. Our designers 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, our designers have 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 personal design principles (clarity and how easy it should be for every visitor to a website) and the knowledge of design principles (balance, rhythm, proportion, dominance), design elements (point, line, shape, color, typography) and user centered design (usability), we can develop the design to meet your website's goals.

A sample of the visual design tasks:

1st draft of visual design for your home page and one sub-page
You provide feedback on design

2nd draft of visual design for home page and one sub-page
Your approval of final design

1st draft of all unique sub-pages
You provide feedback on design

2nd draft of all unique sub-pages
Your approval of final design

Now it is time to actually build the site. There are two major steps during this stage:

1.Technical / Functional Plan
2.Build and Integrate the Site

Technical / Functional Plan

Set the technical / functional specifications for the site:

Browsers - what browsers will you target?
Operating Systems - Mac, Windows, Other?
Display Resolution - what is the main screen resolution? What other resolutions will be supported gracefully?
Connection Speed - what is the expected connection speed for your primary users? What other connection    speeds will you target, if any?
Page Download Size -
30K and under
30-80k (typical page)
80-100k (graphic heavy)
100k+ (not recommended unless all users are high-bandwidth)

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'.

7.CSS
8.Flash
9.(X)HTML version
10.JavaScript
11.Rich Media (video, audio)
12.Search
13.Secure Credit Card Transactions (Third Party)
14.Backend Technologies (database, cgi, CMS, personalization, login)
15.Web Analytics

Project Plan - review the original timeline and the technical and functional specs you've just established. Do you have the resources you need to complete the project on time and within budget? Refine and add details to the project plan you drafted during the Project Definition Stage. Your project plan should now include a detailed list of concrete tasks, assignments, target dates and dependencies between tasks.

Build and Integrate the Site

Finally, It's time to turn all this planning into reality!

The steps include:
Build templates using web standards
17.CSS - separate presentation from content
18.(X)HTML - use valid (X)HTML
19.Javascript - add light scripting, make sure to degrade gracefully and maintain accessibility
20.Optimize - optimize images, css and (x)html
21.Run initial tests on templates

Create Pages
22.Pour content into templates
23.Establish method for content contributors to review, update and add content

Backend Development
24.Code dynamic features of the site that require database/cgi and integration like:
search
personalization/login
secure transactions
web analytic

Quality Assurance Testing

1.Content - accurate, understandable, spell checked and grammatically correct 
2.Links - review site for broken links using an automated tool like WebXM
3.Functionality - does the site perform the functions defined in the original project definition, create task list and conduct methodical testing
4.Validity - validate (X)HTML, validate CSS
5.Accessibility - automated section 508 tests using an automated tool like WebXM , manual section 508 tests
6.Browser/OS/Resolution - test site on the target browsers your defined earlier either manually or using browsercam
7.Connection Speed - use the Web Page Analyzer to get analysis and recommendations on the speed/size of your pages
8.Usability - conduct informal or formal usability testing with your target audience
9.Search Engine Optimization - review your site for semantic markup. Read 10 Tips on SEO by Alan Knecht in his article entitled SEO and Your Web Site
10.Load Testing - contact your server administrator to discuss load testing techniques
11.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 permits
Priority 3 - future enhancement, nice idea / feature, will consider for future release

Refine Site
After all of this good work, make sure you actually implement the priority 1 changes to the site before release.

1.Style Guide
2.Launch

Style Guide
As the site gets ready to go to production, it is important to document the 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 your 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 unexpected challenges during the first few days or weeks of the site debut.

Implement the maintenance plan.
Emphasize 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