Midterm Project:
Deconstructing Websites
The basic idea: Each student writes from three to five website reviews and a project home page. The sites should be related to a common theme. Our approach will depend on the size and interests of the class. One theme we've used in past semesters is "online multimedia," but you can pick a different one as long as you define it clearly. Each review will demonstrate the CSS and HTML skills you have learned, and will use screen-captured images to illustrate the reviews and as part of the site navigation.
How to select a topic.
Past students' sites (some had more Web experience than you; some had less, and some may have taken their pages down before you see this -- probably because the work they are doing now is so much better): Surfing with Brandon | Coffee with Alix | Fashion with Jesse | More Fashion with Tina | Dispute Resolution with Holly | SmartPhones with Travis | Action Sports with Taylor | Blaine's Motorsports Reviews
If several students have related topics (multimedia journalism; Web advertising; technology news, etc.), you are allowed to help each other develop shared criteria for the reviews, avoid duplication, and provide preliminary feedback. Here's a whole page of suggestions about organizing group work.
You may use Dreamweaver as a code editor, but your page-coding should be your own, not a Dreamweaver-supplied layout or template. If you do work with a group, you may share a criteria paragraph on your projects' home pages, something along the line of "Here are the things we are all looking for." In that case, add a menu of links to the other students' projects on related topics.
Review criteria might include some aspects of visual design, usability, multimedia or other technical features, variety or uniqueness of site contents, evidence of "authority" or branding, etc. Just explain what you are comparing. See The Assignment and How to Proceed below.
For professional examples of "site review" publishing, check out Smashing Magazine's topical surveys including:
fashion | sports | universities and wineries.
Smashing is a designer's magazine, so "beautiful" is a major interest, and it may focus on one element of each site in a composite review article. For your site reviews, with a full page about each site, you should have more to say.
Other review sites focus more on issues of "usability," such as WebPagesThatSuck.com, UseIt.com (see this sample about websites for teenagers) and this survey by 1stWebDesigner
You do NOT have to become a subject-matter expert to get an "A" on this project. The main goal is to demonstrate that you are learning the basics of HTML and CSS.
For advanced I.T., broadcast production or journalism students, choosing "multimedia journalism or multimedia storyteling" topics can make the project twice as educational. While you are learning to code your own HTML page, you will also be learning from the sites you are reading and reviewing. Similarly, if your major is advertising or public relations, choose sites that demonstrate the state-of-the-art in Web presentation for those fields.
In all cases, the reviews should be about the sites' Web-publishing techniques and your experience, not just about site contents. For example, someone working on promotional uses of the Web could review the "Avatar" movie's website in terms of design, animated graphics, browser compatibility, loading time, online transactions, interactive features etc., without writing a "movie review" about characters, storyline or movie-making techniques.
The Assignment
The main goal of this project is to practice HTML, CSS and the basics of webpage building. A second goal is to identify interesting techniques in Web publishing or storytelling.
In addition to a review site index page, you will write three to five reports, each as a separate Web page using links, lists and reduced-size captured screen images.
By completing this project (and the exercises leading up to it) you will demonstrate that you can do all or most of the following:
- make basic HTML pages
- use embedded and external Cascading Style Sheets
- write effective headings and summaries
- use lists with bullets, numbers or other attributes
- use tables, where appropriate
- use internal (relative) and external (explicit) links
- choose images that will help tell your story
- take snapshots of your screen
- crop, resize and optimize images ("Save for Web" in Photoshop)
- position images
- link from images
- write clear, concise and accurate text
- create a navigation system for a multi-page site
- simplify the production process with a reuseable template
- evaluate the quality and usability of your pages, and of others' pages
- think critically about new Web techniques and tools
How to proceed
- Create a "reviews" folder and an overview (index.html) page in that folder. Its first draft should say what you plan to do; by the final draft, it should give your conclusions about the variety of sites reviewed, compare techniques they used, highlight their differences and similarities, etc. Most "front pages" (index.html pages) at review sites include headline links to the reviews with brief summaries and thumbnail images.
- Choose review sites carefully. As you browse through sites, watch for the work of accomplished professionals. Check out organizations that give annual awards for Web sites to get some ideas of the criteria reviewers use.
- Be discriminating; don't jump on the first item you see, compare a few and pick the best. Your job is to tell a story-about-the-story in words, while demonstrating that you are learning how to handle HTML paragraphs, headings, lists, etc.
- If you get started on this project early in the semester, post your reports as date-stamped Web pages, refining the layout and design of earlier pages as you develop more Web skills. Keep copies of old versions for comparison -- and for backup.
- Identify the "who, what, when, where and why" of the site or story: Who created it, what it is about, where it is on the Web (exact address) etc.
- Describe the format and style of the presentation.
- Edit! Each individual review and the front page should be brief, but long enough to demonstrate HTML features including wrapping text around images, positioning photos and captions, etc. Shoot for about 300 words per review. If you have a lot more to say, consider breaking your report into logical sections on separate pages, linked together.
- Revise your reviews/index.html home page when the reviews are done, so that it becomes a summary and overview rather than a proposal. Include anyrelevant lists on the project home page: Similar sites you visited, but did not review, classmates' pages that reviewed similar sites, pages you used to establish review criteria, or other resource pages that you used in the assignment (selections from http://delicious.com/bstepno/326, for instance).
- Link that front page and your review pages to each other with a project menu. The same or a second menu can link to other students' review sites.
- At least the front page should link to your /coms326 home page, usually in a header, footer or "about" section. Include a credit line (something like, "Created by /yourname/ on /the full date/ as an assignment for COMS 326 Media Production at Radford University") with appropriate links to the course home page and this assignment sheet.
Note: While this is not a "term paper," feel free to do additional research about your review sites. When you quote or paraphrase someone else's review, link back to it. Honest "transparency" about sources is very easy online: Indicate direct quotes the way you would in a news story or term paper. Identify and link to sources that inspire or inform your commentary, even if you don't quote them directly. Make it clear which observations and opinions are strictly your own, and which aren't. This project is about building your own pages, not about being an expert critic!
See also: Site Structure for COMS 326
last updated 9/21/12