Many documents are created throughout a good 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, but there are certain documents that are crucial for communication and feedback. It is important to present the minimum number of documents needed to ensure a successful project. Otherwise the client can easily be overwhelmed or confused. The following are the standard deliverables that should be presented to a client for review and approval.

Creative Brief

I use the creative brief as an overall project definition document. It includes all the requirements and specifications of the project, including scope, audience, objective, call to action, and technical specification for the website we will be creating.

Web Design Creative Brief

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.

Web Design Content Outline

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.

Website Site Map - Site Flow

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.

Web Design Wireframe

View Sample Wireframe

Mood Boards

Mood boards are used to define the visual style for the website, including fonts, colors, and graphics. They are much easier to put together than full mockups. They are helpful in learning the client's taste in visual style and can save a lot of time compared to going back and forth on a full mockup.

Web Design Mood Board

(click to enlarge)

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. Note: It is now standard practice to provide mockups for desktop, tablet, and smartphone versions of the website.

Web Design Mockup

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.

Updated May 2017

Comments  

0 #11 Akshay Soni 2017-01-23 19:42
Hey Troy,

This information was very helpful. It served two purposes, one it sufficed all my questions as to how a brief should look and secondly linked documents have now become a source wherein i have new and more important questions to search for..

Thanks
Quote
+2 #10 Web Design Dover NH 2016-03-07 14:46
I discovered your blog to be pretty darn informative, thanks a lot for posting this advice.

I waas surprised to see a number of the responses nonetheless, I'd have
believed that everyone else would have usually agreed together with
the principal behin your post.

Here is my web blog Web Design Dover NH: http://www.andyraynor.com/
Quote
+1 #9 Marcus 2014-03-19 22:44
Thanks for the information. Very helpful to learn web design!
Quote
+1 #8 Troy 2013-04-27 11:01
Great Tim! Thanks for visiting. :D
Quote
+1 #7 Troy 2013-04-27 10:58
No problem Mo. Glad I could help.
Quote
+3 #6 Tim 2013-03-08 11:19
Thanks, very helpful to know how to engage the entire process for me as a new freelance web designer.
Quote
+1 #5 Mo 2013-01-22 19:37
This has been extremely useful now that I am just about to brief my web developer about a new project. Thanks a lot for sharing
Quote
+2 #4 Kesselly 2012-09-09 21:35
I will be completing my studies in IT in about a month from today.

I want to start a web development business. Where should I start from.
Quote
+2 #3 Barb 2010-04-08 08:41
I am starting a side web design business and this article has been very helpful. Thanks so much.
Quote
+2 #2 John 2009-11-17 12:41
As said above, great advice. Its amazing how many freelancers overlook these important aspects of their business!
Quote

Add comment


Security code
Refresh