Project 1 & 2 Assignments
In this course, you will develop a personal/portfolio Web site (Project 1) and a Web site for a client (Project 2). The second Web site must be for an organization. Organizations must be real or one that will actually be established. If you have an alternate idea for a project to present information on a topic, please contact me.
Project 1 - 100 points
The goal of the project is to create a four page personal/portfolio Web site demonstrating your knowledge of design, layout, typography, information architecture, writing for the Web, XHTML, Dreamweaver, CSS and FTP protocols. The site is worth 10% toward your final grade. Please complete the steps by the dates on the class schedule and turn in each outcome to the instructor for feedback and grading.
Project 2 - 700 points
There is a very high standard for both design and content in the client Web site project. Many of the best projects in this course approach professional standards. You will need to carefully choose an appropriate project that has sufficient depth of content without being overwhelming. At minimum you should have 10-15 pages of content. The project will be available for individual students or teams of 2 students. Teams of 2 students must create sites with 20-25 pages of content. Pages of content must include text and images.
Project ideas - 0pts
Submit your project ideas, and include the following information:
- Organization name and purpose
- Web site purpose and audience
- Typical content found on the site
Organizations must be real or one that will actually be established. Information rich Web sites are required, with at least 10 pages of content. Ideas will be evaluated on the thoughtfulness and completeness of the response (not necessarily "right" or "wrong"), and compliance with the information-rich requirement. Please see me if you need help developing ideas. 1 page document.
Part 1: Web site proposal and Design Discovery Survey - 50 points
Proposals will be a 1-2 page (single spaced) concise memo on what you will be doing for your project, including the site audience(s), purpose and goals, and topic considerations. In particular, the CSU Design Discovery Survey must be included. The proposal provides a plan to follow for the Web site design, production, and management.
Make sure you have read Understanding Your Web Audience before you begin. Your site specification must cover the following topics:
1. Mission statement: 1-2 concise paragraphs
2. Audience:
- Who will be using the site (main target audience, or audiences) and what are their characteristics
- How you determined those characteristics (suggest interviewing at least two of your target audience members)
3. Objectives:
- What are your objectives for the site (that is, the client or owner's measurable objectives)
- What are the specific objectives of the users of the site
4. Topic areas:
- What topics you will cover (the main content areas, such as those that will be included in the main navigation)
- How those topics will satisfy the objectives (that is, what user tasks are covered in the site)
Part 2: Site map & Preliminary content - 50 points
Based on your proposal and user analysis, develop the site map and preliminary content for your site. Your submission should be 3-4 pages. Include:
- Portions of the text, at least several paragraphs, for each of your main content areas/site pages
- Preliminary images such as sketches of a logo or other information-oriented graphics (how-to drawings, charts or graphs), photos, etc.
- Examples of other elements specific to your site, such as client information (contacts, copyrights)
Part 3: Site Mockups - 50 points
You will produce two mockups of the home page (and one inside page if different from home page) for your client's Web site. The prototypes must be mocked up in Adobe Photoshop (or another digital graphic design program) and saved as JPGs for the Web.
Part 4: Layout Design & Report - 100 points
After receiving feedback from the client, instructor and class on your design mockups, create a final mockup. Get client approval and then build out the home page in Dreamweaver, creating an HTML prototype page:
- Home page uploaded to server
- Navigation working
- Clear structure of content in appropriate subdirectories (e.g., an images directory for your images, or something more complex if your site is more complex)
- Linked external style sheet
- Images in appropriate formats
- Other evidence of conformance with usability principles (e.g., alt image tags, page titles, etc.)
Design Report
- 2-3 double-spaced pages that concisely present your rationale for your design, content, and site layout (provide a URL to the page on the Web).
- Describe the main site structure, page layout, page design, font choices, graphics use, page width, page design, and other design factors we have read about and discussed in class.
- Explain why you’ve made the design choices you’ve made.
- You must include specific references to lecture and the readings, particularly how you applied these principles, or present your rationale for deviating from them.
Part 5: Preliminary site design - 100 points
For the preliminary design, provide a URL and a list of the pages so I can view the current state of your site. At least five pages must have a complete design and all the content. In a single page, summarize changes you've made to the design since I last viewed it. Explain why you've made these changes, with references to the text and/or lecture as appropriate.
Also, include a section discussing the load time for your pages, and why you believe that your load times are appropriate for your audience.
You will be evaluated on the conformance of your site to the usability principles we've discussed in class, or your rationale for why you've chosen not to conform with usability guidelines, and the completeness and accuracy of your report.
Your project will be graded on the following criteria:
- Total page size less than 100k, or justify not meeting this guideline
- Logo is link to home page
- Page width fixed for 800x600, 1024x768, or variable
- Clear navigation system
- Consistent look across site
- Styles contained in a separate, linked style sheet
- Left-aligned body text
- Clear, scannable content
- Images optimized in appropriate formats
- Alt text on images
- Appropriate contrast and readable text
- Displays acceptably in multiple browsers, in particular Internet Explorer and Firefox on the lab machines.
- Spell checked, proofread content
- Links work for existing pages
- Has clear, concise, unique page titles
- Clear site organization—e.g., content organized in appropriate folders
- Conforming filenames and directory names
Part 6: Usability assessment or testing - 50 points
Choose one of the following:
Option A-Usability assessment
The following is a quick assessment of some key usability principles that we have discussed in class . It should suggest changes to your site design. It may be best for you to create a checklist for each page.
- List each of the five pages you chose for the preliminary design.
- What is the total size of each page and all associated files (e.g., graphics, style sheet files, etc.)? What is the estimated load time in seconds at 56k modem speeds? If it’s over 10 seconds, can you shrink or optimize the graphics, or simplify the design?
- Does every image that needs one have a descriptive alt tag per the formula?
- Preview each page of your site in Mozilla Firefox and Internet Explorer. Does the page display the same, or are the differences at least acceptable?
- View each page in your site without the style sheet (the easiest way is to temporarily rename the style sheet). Does the design break? This is how your page will look on browsers that don’t support style sheets.
- Does the entire page fit into a 1027x768 browser window? If you expect people to print the page, will it fit on 8.5x11?
- Does the page have a unique title per the formula?
- Does the logo link to the home page?
- Did you spellcheck and proofread?
- Is there a substantial amount of wasted space on the page? Can elements in the page be rearranged to make better use of the screen “real estate?”
- Are there any noticeable contrast problems between text and background colors or patterns?
- Is the page content broken up by clear links, headings, short phrases and sentences, and short paragraphs, so that scanning is encouraged?
- Use the Accessibility tools listed under Resources to test the colors, readability, and validate the code on the pages.
Write a 2-3 page concise summary report of the usability assessment.
Option B-Usability testing
As an alternative to the assessment, you may choose to perform a user test and evaluation in accordance with the guidelines set forth here.
- Perform a usability test with 3-5 typical users of your website
- Find volunteers in your target audience (as close as possible)
- Write down the name and description of each user.
- List the 3-5 tasks that you had them perform on the site.
- Make sure they understand you’re evaluating the site not them
- Have them think out loud, noting the places where they have trouble understanding or performing a task
- Take notes on their performance (things that worked and things that didn't)
- Describe the test findings and the changes you made to your site as a result.
Write a 2-3 page concise summary report of the test.
Part 7: Final Report and Project - 300 points
The final report and project counts for 30% of your course grade. Turn in the following:
- A summary of changes made since the last report and the reason for the changes in a Word doc
- A URL so I can view your project
Projects will be graded using the following criteria:
- Conformance to usability principles (100 pts) - Review the Web site Guidelines
- Quality and organization of content (100 pts) - Use bullets, sub-headings, short paragraphs, captions
- Overall aesthetics (100 pts) - Good use of colors, layout, balance, contast, typography, graphics
A summary of the project grade and course grade will be posted in RamCT. Course grades will be computed per the syllabus. Please contact me with any questions about missing assignments or grades before the last day of class.
