requirements

There are four preliminary, one major assignment, and a blog required for the course. All of the assignments, except for the final project, should be part of the portfolio website that includes a home page and navigation to the various assignments. This site should be separate from your final project, although elements of the preliminary assignments may appear in your final project. In addition, you are required to make one post to your blog each week as well as one comment on another's post each week. Those who make more than one comment will have their names writ in heaven, e.g. the gradebook. Reference your comment by furnishing a text link (Comment on Steve's Post, #2: Loving Design) in your own blog to the permalink of the post.

The course assignments will be weighted as follows: (1) Portfolio Home Page Assignment (10%); 2) Type Project (10%); 3) Image Project (10%); (4) Design Project (10%); (5) blog—including posts and comments (15%); (6) individual project (45%); and (6) a self-evaluation (1 page, typed, single-spaced) assessing your performance in the course (not graded but required).

portfolio home page (preliminary)

Create a standards-compliant, HTML/XHTML/CSS home page for your portfolio that includes a header, footer, content area, and nav (with the various assignments as menu items) from scratch or from a simple template. In other words, hand code a page. Usable, bare-bones layouts are available from the following: LayoutGala, Layout Wizard, Dreamweaver, StyleMaster’s Layout Wizard or JustFreeTemplates. Concentrate on creating a solid layout and visual identity (color scheme, font, images) for your portfolio site. Do not choose a layout that contains a lot of javascript, structures, or other items that you don't understand or appear to be mysterious. At a minimum, do the following:

  • design a basic layout using either one, two or three columns
  • include a header , maincontent, and a footer <div>
  • create a title (<h1>)
  • add a list (<ol> or <ul>) within the text
  • float an image in the text
  • add some text with paragraphs<p>
  • create subheads (<h2>)
  • lay out a menu (<ul> <li>; see below for menu items)
  • define a font-family
  • add a new DIV with its own CSS style
  • validation badges for XHTML and CSS

Your menu should contain the following sections: home or main, type, image, design, and about. Concentrate on creating a solid layout and visual identity from the template (color scheme, font, images) for your portfolio site. Keep it clean and simple.

type assignment (preliminary)

The goals of this assignment are to demonstrate that you are aware of word processing conventions, CSS, and can use type as both an element in information and aesthetic design. For this assignment, create a web page that includes (or takes into account) the following:

  • title
  • navigation
  • subheads
  • leading
  • line length
  • margins/padding
  • a pull quote
  • a rule
  • an image
  • endnotes
  • a block quotation

Because this assignment is meant to underpin your final web project, it would be a good idea to think about your project’s time period or subject and look for fonts that can contribute to the “look and feel” as well as the “legibility and readability” your project. One “page” of the project should be added to your web portfolio. Although not all these foundries have webfonts, you might find a good fonts and/or inspiration at one of the following:

The video on webfonts at lynda.com includes discussion of various foundries that produce webfonts and the sundry ways—open source, outright purchase, webfont services—to include webfonts in your site.

image assignment (preliminary)

The goals of this assignment are to demonstrate your mastery of image editing skills, color, and composition as well as the use of images to tell or illustrate a historical narrative. The narrative should be an account of the steps that you took to achieve the effects. Note that combining techniques in a single image is perfectly acceptable. For this assignment, create a web page that includes the following:

  • a cropped & resized image
  • a restored photograph
  • a hand-colored photograph
  • a vignetted photograph
  • a matted engraving
  • a “before & after” of two examples
  • a header that employs gradient

One “page” of the project should be added to your web portfolio. Although there are any number of image sources, these are among the best:

The key to the assignment is attention to detail and a light touch, especially in regard to the image colorization element.

design assignment (preliminary)

The goals of this assignment are to demonstrate your understanding of design and its application to the presentation of history on web. To that end, choose a historical period or topic and develop a web page design appropriate to the period. For example, if you elect to do a colonial site, the fonts, layout, illustrations, colors, and layout should reflect the colonial period. In other words, compose a web page that integrates a design theme into its typography, composition, color, and layout so that it enhances the presentation of the historical content and creates a visual identity for a prospective site. The assignment should also implement correct typography and layout strategies. Once you have finished, add the page to your class web portfolio. You may find some design inspiration at the following:

Think carefully about your image, color, and type selections, particularly about the header. Too much realism invokes the “early” web, too little turns the site into a generic, “nothing-to-see-here-move-on” website that might be selling anything.

individual project (final)

The overarching goal for the major project is the creation of a modest, reasonably sophisticated history web site. First, the content should be solid and engaging. Second, the site should be clear in its purpose and potential audience. Third, the site should demonstrate standards-based, accessible design, including a print style sheet. In other words, the site should have passed validation tests for both its XHTML and CSS. Fourth, the site’s design should also reflect knowledge of typography, layout, color, and graphic design. Finally, there should be some effort make toward interactivity or online community building.