Class 09

Class 09 — Topics:
Midterm Project Critiques

Reading for next week:
Discuss Assessing Project Status, Establishing Guidelines, Knowing your client before you code, Setting File Structure (pages 145-156) from Web ReDesign 2.0

Questions to discuss next week:
What does the step of “Accessing Project Status” involve?
What is the purpose of the “Client Spec Sheet“?
What are the three file structure questions you need to answer before start to build your site.

Chapter 6: Designing Interface Components: Styling Lists and Menus” (pages 205-229) from Stylin’ with CSS. Check out website “Listmatic

Assignment: Based on your reading from “Styling Lists and Menus,” create a navigational menu using the list <li> tags as outlined in book  (pages 205-217). For extra credit, create a CSS based drop down menu (pages 217-229). Here’s the .htc file the author refers to in the exercise. Download the .htc file here.

PLEASE NOTE the following errors in the 1st printing of the 2nd edition: Below information provided by your fellow classmate Brian Price (thanks Brian!)

<div class="listcontainer"> and should be;
<div id-"listcontainer"> I believe that the code at the bottom of 213 is correct. At the top of page 215 the following is incorrect; color: #00; It should be; color: #000; At the bottom of page 219, if you first type; a { background-color: #DDD; } Be sure to change it to; #multi_drop_menus a { background-color: #DDD; padding: 1.0em 6px; } As found at the bottom of page 221.
Midterm Project: Due Thursday, April 29

Specifications: Design a prototype website home page and first-level page for a client** of your choice. Create a sitemap for the complete website and be prepared to present the sitemap for your presentation. Focus on implementing the thought process we studied in class and creating an interesting navigational interface that allows the user to navigate the site in multiple ways . Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.


  1. Sitemap for entire site
  2. Home page
  3. First-level page for one of the sections. (Commonly referred to as the “landing page.”)

** Note: For next week, please be prepared to discuss the client you have selected for your midterm project. You will need my final approval to proceed with your chosen client. Please pick a client that will allow you to explore ways to effectively design useful delivery of content for  both an online and mobile environment.

The client should be a real or fictitious company that is nation-wide and provides product(s) and/or service(s) to the general public. You should avoid picking small, local companies that do not have interest to a large public audience. You should also think about what kind of interactivity could eventually be added to the site. In what ways would the public need/want to communicate or interact with the company?

For example, a national grocer may want to provide ways for the public to order food, be notified of sale items, etc. See this New York Times article about making grocery shopping faster, more reliable, more convenient and more individualized through the online experience. This article illustrates ways in which the public could interact with grocers. The articles references the site Another good article about mobile interactivity is Retailers Are Learning to Love Smartphones.

Think about how you could apply these types of online interactions for the products and/or services provided by the company you choose as your client.

We will choose projects from the class midterm projects for us to work on and develop for our final projects.

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Thursday, April 29.

The midterm project web site specifications are:

  • home page and landing page for a major section of the site.
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design and concept.
  • A theme and visual concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use mostly html text in the site.
  • You must use a column div structure. (Do not build your site completely in tables or completely with AP divs!)
  • You must use an external CSS file.
  • Completion of a site map.
  • Your research and competitive analysis for this project must be posted to your process blog.

Possible sources for images for your midterm project:


Sorry, but comments are currently closed.

About Author


Instructor for Graphic Design 67