Site Planning: Project Documentation

Home >> Communication >> Site Planning >> Conception

When you hand in your final Web Site, you must also submit a Web Project Plan with the following components.

I. Assessment of Old Site

First, pick a site that truly needs to improved. Don't choose to redesign a site that is already solid. Write up a detailed assessment of the site you are redesigning. Answer the following questions followed by the Project Analysis questions.

What site have you chosen to redesign? Give a brief description of the Web site.
Why does this site need to be redesigned?
What is the biggest problem with the site?
What aspects of the site do you think are successful?
How do you suspect this site does not meet the needs of the target audience?
How do the graphics and navigation system work in this design, and how are you planning on improving the design and navigation system?
What else could help the site be more appealing, useful or interesting, while taking advantage of the characteristics of Web media? How can you present information on the Web in ways that you cannot in other media like print or TV? (Think about ways to reorganize already existing content in more visual, interactive ways. See this example of Mobile Phone Penetration Rates).
Can you think of any ways to implement more functionality using Flash, data collection forms, JavaScript, or other kinds of dynamic content (look at Bravenet, Kresch, Atomz) that are appropriate to the subject-matter of this Web site.

II. Analysis of Project

What is the site for? What is the purpose of the site? What is this site expected to accomplish?
Who is it for? Who sponsored it? Who are the intended users?
What is this site offering visitors?
What do you want users to do on your Web site? After they've left?
What kind of site is this? (Purely promotional? Educational? A publication? A point of sale?)
What features will this have?
What is the most important messages that a visitor should take away from a visit to the site?
Who (or what sites) are your competitors?
What specific content will the site include? (List all of the categories, or pages, you anticipate being associated with the site.)

III. Conceptual Development:

Includes: Mission, Vision, Target Audience, Strategy, Goals, Objectives, and a Creative Brief like in the following example:

Mission	The mission of the Advanced Student Online Classroom is to provide a centralized location for all class learning materials for students of ME435 including course related content such as syllabi, calendar, and student Web projects, as well as a vast collection of step by step tutorials that review class lessons, links to downloadable source files, and tips on using software and managing the file structure of a Web project.
Vision	Because students have all of the course materials needed to build and manage a complex Web site at their fingertips, students will become proactive in assessing and solving their own technical problems, and can use the site to expand their skills and implement additional features into their projects.
Target Audience	The main target audience of the site is the students of Advanced Web Publishing, ME435 at Loyola College in Baltimore. Secondary audiences include prospective students of ME435 including students of the Introduction to Web Publishing course, and teachers, students, and Web designers at other institutions who are looking for resources in Dreamweaver, Flash, Fireworks, ImageReady, HTML, JavaScript, and design concepts.
Strategy	The approach or strategy used in this Web site to achieve the desired result of engaging students in course material is threefold: First, students have been given access to their own Web space which is linked to from the course site. This space provides an experimental ground to practice managing a Web site, as well as a place to showcase assignments and portfolio pieces developed in the course of the semester. Second, the collection of resources including links to royalty free music, downloadable Flash files, and step-by-step image-based software lessons, will entice students to try to incorporate techniques learned in class into their course projects,as well as encouraging problem-solving by inviting students to search other environments for resources and answers to their questions. Finally, the constantly updated main page will serve as the central space for the most current course information, with briefings on What's New and What's Due. These 2 categories will provide up to date news, so students know what is expected of them and do not fall behind in class.
Goals	3 goals of this site include: Encourage students to incorporate techniques taught in class in their individual projects Provide a way for students to assess and solve their own technical problems Have students become familiar with the process of Web Site Management and keeping a site updated through FTP.
Objectives	3 objectives of this site include: Students will gain an understanding of multimedia aesthetics and be able to critically apply these skills in assessing kinetic typography, motion graphics and the use of sound in Web pages. Students will be able to create multimedia content, using Flash in conjunction with sound, motion and interactivity, and be able to embed this into an HTML page. Students will manage and update their own sites within the greater course Web site.
Creative Brief	The creative brief should take into account the above sections (project analysis, target audience analysis, goals and objectives) and then describe visually and sensorially how the interface design will address these issues. The Creative Brief defines: The mood of the site; the look-and-feel (e.g. does the site convey authority, playfulness, service? Is it conservative or provocative?) What colors the site will use, why these colors, how will they be used? What fonts will be used? How will the navigation system work? How will the navigation system and the interface design be integrated? Will there be any special features like rollover graphics, pop-up windows, multimedia, etc. [Note: you should also include Thumbnail sketches in your Creative Brief section]

IV: Information Architecture

Note: This step involves building a structure for the site that will hold the information and offer the functionality described in the creative brief. It should end with a storyboard or branching document that outlines the file structure of the Web site, showing what pages the site will include, the filenames of each page, and what kinds of information each page will contain. This will visually illustrate how the content will be organized in the hyperlinked structure of the Web.

Determine the major categories of information that you want to provide. In the example of the Advanced Student Site, the site's architecture is built around 5 main categories: Course, Communication, Production, Software, and Student Work. Each of these categories are housed in a separate folder. Subcategories are housed in subfolders within these.

View this Simple organizational chart and Screenshot of folder organization

The information architecture section should include a Simple Organization Chart like the example above, and a Root folder Organization List that accounts for all of the files (gif and jpg images, swf flash files, library items, style sheets, and HTML pages) within your site. There should not be any Raw Graphics (files with the following extensions: .psd, .png, .fla) inside your Local Root Folder, and you should remove all unnecessary files.

See How to organize your file structure in Dreamweaver for your final site project

IV: Final Site Checklist

Each page in your site will:

Have a title
Be spell checked
Be part of a uniform, aesthetic design
Link correctly to other pages in the structure
Not have any spaces in the filename (or any spaces in any of the image file names or folder names)
Not have any extra files (files unnecessary for the functioning of your Web site, such as unused HTML pages, images, and raw photoshop or flash files). You can use Dreamweaver to run reports on your defined site that will list "orphaned files" files that are not used in your site.
Include images that are optimized in Fireworks for quick downloading. No images are resized in Dreamweaver.
Include content appropriate to your Web site, according to your Web site documentation, including goals, objectives, target audience, strategy, purpose, etc.
The "first page" of your site will be called default.htm
Include meta tags in the <head> section of each page.