Project 2: Layouts and Letterheads

soup letterhead

The goal of this project is to dig deeper into HTML and CSS to make layouts that serve a more serious design purpose.  While web design takes much inspiration from various applications of print like magazines, newspapers, books, and pamphlets, one area often overlooked is old-fashioned company letterhead.  In their heyday, these design objects served the important role of communicating the personality of the company while providing users with critical information needed to “navigate” the services provided.

  • Pick a company letterhead: I suggest looking through the book Letters from the Avant–Garde by Ellen Lupton & Elaine Lustig Cohen.
  • Make a standard HTML structure that can easily be adapted as a standard template for the company web site.
  • Use CSS to create a style-sheet that renders the HTML as closely as possible to the sample letterhead you’ve selected.
  • You can use any images, html tags and css properties you like but please do not use HTML tables!  Use a proper CSS float based layout.
  • Make sure to incorporate a menu and a few sub-pages to see the layout in different contexts.
  • You can just put lorem ipsum text and stock images into the contents of each page.
  • Post a link to your site in the comments here.

Due in class on 01.12.2011


speak up

Add your comment below, or trackback from your own site.

Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*Required Fields