ArticlesBlog
Home arrow Articles arrow Design Articles arrow Web Design Deliverables

Web Design Deliverables

Print E-mail

ImageA good number of documents are created during the web design process. There is certainly a lot for the competent web designer to document throughout the discovery, planning, design, integration and delivery stages of a complex web project. Not all of these documents are of interest to the client, and over the years I've learned only to present the minimum number of documents needed to ensure a successful project. The following are the standard deliverables I ask my clients to sign off on.

Creative Brief
This is a project definition document. It includes all the requirements and specifications of the project, including scope, audience, objective, call to action, and technical specification.

Download Creative Brief Worksheet

Content Outline
The content outline defines every piece of content that will appear on the website. If it isn't on the content outline, it isn't going to appear on the website. The content outline is part of the information architecure, and as such should be organized in a hierarchy that represents the structure of the website rather than a hierarchy based on arbitrary categorization of content.

View Sample Content Outline

Site Map
The site map represents the structure and navigation of the website and should closely coincide with the content outline. There should be a common numbering system in place. Pages are represented by boxes and links by arrows.

View Sample Sitemap

Wireframes
Wireframes are schematic versions of the pages on a website and should similate the final navigation, although the page layout at this point in the process is rough. Wireframes can be made into clickable web pages, allowing the client to preview the navigation of the site in action. Each wireframe should include all pieces of content that the final web page will display.

View Sample Wireframe

Graphic Design
Mockups/Comps The graphic design mockup is a composite image of how the final web page will look. Color, layout, typography, and images are all worked out at this stage for each significantly different page type on the website. I should make clear that even though the composite (mockup or comp for short) looks like a web page, it is still only a single image. It is not a web page, and include no code at this point in the process.

View Sample Mockup

Development Site/Prototype
During the integration/programming step of the web design process, the graphic design comps are converted into code (HTML, DHTML, CSS, scripting, database tables, etc). The site is built and tested on a domain or subdomain of a development server that has the same technical specs as the live server will have. When the site is fully functional on the development server, it is migrated to the live server. This is the final deliverable of the web design project.

Comments
Add NewSearchRSS
Dieta     | 95.108.47.xxx | 2009-02-19 06:33:56
This is really good advice. Several of my friends work designing and building websites and the ignorance of their clients is often just sad. Some people think that just because a website is not physical, changing it over and over again is not a problem ... so my friends end up doing several version of a web page for a client that doesn't even know what he wants.
Now with your approach things might finally look a bit easier for my friends!
John - Great article     | 122.148.239.xxx | 2009-11-17 19:41:10
As said above, great advice. Its amazing how many freelancers overlook these important aspects of their business!
Write comment
Name:
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
 
Security Image
Please input the anti-spam code that you can read in the image.

Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved.

 
< Prev   Next >

Bookmark Us

 
 

Newsletters

TP Designs Newsletter


Receive HTML?

Social Bookmarks

Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: StumbleUpon Add to: Furl Add to: Yahoo Add to: Blogmarks Add to: Technorati Add to: Blinkbits Add to: Ma.Gnolia Add to: Spurl Add to: Google Add to: Blinklist

Subscribe

feed image

Good Stuff

Can not find what you are looking for?
Loading