[home][details][policies][calendar][projects][links]

Project 1: Website

Except where otherwise specified, you are not required to wait until the due date to complete and submit your work. Due dates are listed on the course calendar.

Milestones

1. Mockup, ready for peer review
2. First draft, ready for peer review
3. Report
4. Final draft, ready to be graded

Overview

This Project asks you to create a website that introduces who you are to the class (your audience). The design and content should reflect some aspect(s) of yourself that you want to share with me and your classmates. It can be professional, personal, silly, serious ... the choice is yours. Later in the semester, you will be asked to revise your website for a different audience..

When creating your website, take into account what we’ve learned about design choices, and make smart decisions about

• emphasis
• contrast
• organization
• alignment
• proximity

The Details

The following are requirements of this project:

• Hand code the website using a text editor. No WYSIWYG software like Dreamweaver, in other words. You are welcome to use HTML or CSS templates, or borrow code from other sites and tweak it to your own use, so long as you do not make unauthorized use of someone else’s intellectual property. You must include credit for the source of your code.
• You must include an external style sheet and have at least 6 instances in use (IDs, styles, or defining an existing tag) with a range of declarations (they can't all be, say, to change the color or the font).
• The site must include at least three separate HTML pages and links between those pages. The home page for the site must be named index.html.
• The site must include at least two images that are both sized and proportioned properly for the web. In other words, don't include a 7 megabyte image that slows down the load time of the page. Also, don't change the proportions of the image so that it is squashed horizontally or vertically. The images must be licensed in a way that you have permission to use them.
• The site must include at least one link to an external site.
• The HTML must validate using http://validator.w3.org/. The CSS must validate using http://jigsaw.w3.org/css-validator/
• The site must not have any significant accessibility errors.

Milestone 1: Mockup, ready for peer review

Create a website mockup for your project. Refer to this page on mock-ups for help and for mock-up guidelines. The mockup should be as close as you can make it to the finished product and should follow the mock-up guidelines. You will need to submit your mockup to the "Assignments" section of Blackboard; this could be a PDF, a scan of a hand-drawn mockup, or some other kind of digital file. Make sure that whatever you submit is oriented correctly; in other words, don’t post images that are rotated 90 degrees off of horizontal. Bring a digital copy of your mockup with you so that it can be peer-reviewed by your fellow students.

Milestone 2: First draft, ready for peer review

The rough draft website should be online and fully usable. Other students will provide you with feedback in a draft workshop. Refer to Chapter 7. You should have as many of the bullet points on page 110 done as possible. Some may not be possible yet, but do the best you can. Submit your first draft to the "Assignments" section of Blackboard.

Milestone 3: Report

After peer review, write up a roughly 300-word report using Microsoft Word that details what people liked, what they wanted to see changed, and what you intend to work on for the final draft. Submit this report to the "Assignments" section of Blackboard.

Milestone 4: Final draft, ready to be graded

Submit to the "Assignments" section of Blackboard the final draft of your project. At the same time, submit a roughly 600-word report explaining your design choices in terms of what we've learned about emphasis, contrast, organization, alignment, and proximity.

Adapted from an assignment by K. Arola http://arola.kuurola.com/355/fall14/project2.html

[home][details][policies][calendar][projects][links]