Class 09

The Week’s Topics

Midterm project critiques — Monday, April 23

Please read the following Assigned Reading:
Chapter 18:  Tables
Chapter 19:  Forms


Please be sure to upload folder named: lastname_first_midterm to our class server before our class starts on Monday, April 23.

You must attend class in order to receive a grade for your midterm project.

Be sure that all assignments are in your folder up on the class server. I’ll be grading your midterm and assignments over the next few days.

Midterm Project – Due Monday, April 23
Website Redesign

Choose a website (with at least 10 pages) that is a good example of the most common design mistakes outlined here: The 10 Most Common Mistakes Web Designers Make.

Focusing on ways to solve these design mistakes, redesign and build 5 pages of the site and “placeholder” pages for the rest of the pages. (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page). Use this Smashing Magazine article as a reference for this project: Clear And Effective Communication In Web Design

Specifications for the site:

  • The website cannot be a personal website, or a website for a friend or family. (You can do this outside of class with all the knowledge you acquire this semester!)
  • Do not choose a restaurant website. (More about this later).
  • Consider the business and communication objectives of the organization, and present the content in a manner that is consistent with these goals
  • Employ a design aesthetic appropriate for the organization
  • “Introduce” the organization on the home page
  • Direct traffic to key locations in the website from the home page
  • Contain a contact page that provides a contact form that users can email the organization through (this can be a graphic only… you do not need to build a functioning form for this project).
  • Follow basic usability principles to help the user identify their location and find their way around the site (page headings titled to match global navigation, current page identifier in navigation, redundant navigation at the bottom of pages, etc.)
  • Use Column CSS Layouts for the pages (no tables for layout)
  • Use ONE, external CSS stylesheet to style the entire site.
  • Optimize your design for an 1024×768 display (remember this means the finished width should be 990 px and that “the fold” is 560 px but the height of the pages should be longer.)
  • Read Chapter 25: Bringing it Together from our textbook to prepare for the midterm project.
  • Discuss your selection with me by posting your ideas to your blog.
Use of logo and images

For this project, please replace the actual name of the company/organization with a fictitious name and replace their logo and images with copyright free images. We need to do this because we don’t have permission to use another company/organization’s assets and content.

I suggest taking advantage of the Creative Commons license on the Flickr site.
http://www.flickr.com/creativecommons/

What is Creative Commons?
Creative Commons (CC) is a non-profit organization headquartered in San Francisco, California, United States devoted to expanding the range of creative works available for others to build upon legally and to share. The organization has released several copyright-licenses known as Creative Commons licenses free of charge to the public. These licenses allow creators to communicate which rights they reserve, and which rights they waive for the benefit of recipients or other creators. An easy to understand one-page explanation of rights, with associated visual symbols, explains the specifics of each Creative Commons license. This simplicity distinguishes Creative Commons from an all-rights reserved copyright. Creative Commons was invented to create a more flexible copyright model, replacing “all rights reserved” with “some rights reserved. – Wikipedia

Basically you have permission to use images on this site that allow attribution, share alike and/or non-commercial usage. You should still give credit to the photographer. Check the “Share This” pull down located next to Favorites & Actions to check the availability of an image to be shared.

In “Advanced Search” you can click to view Creative Commons images only, and your searches should show just those images.

You could also take a look at the Commons library on Flickr. There are images that are part of the public domain and can be used without attribution.
http://www.flickr.com/commons/

If you don’t find what you need on Flickr remember you must make use of royalty free images for your project. You CANNOT use images of found on other Web sites. You may use your own original artwork and/or photography if you prefer.

Possible sources for images:

Lastly, in preparation for midterm, upload a folder to our class server named: lastname_first_midterm. You will upload your midterm project to your folder on or before Monday, April 23.

Midterm Project checklist

Before completing your project make sure you have reviewed the checklist below:

  1. Did you research the project and define a target audience for the site?
  2. Did you successfully create a strong, visually effective site?
  3. Did you follow the specified dimensions based on a 1024 x 728 monitor resolution?
    (Finished width is 990 pixels and “the fold” is 560 pixels. Do not make your site a fixed height)
  4. Did you create your site using CSS Column Layout (did you use divs not tables)?
  5. Did you design effective main navigation and sub-navigation for your site?
  6. Did you title your pages and highlight navigation?
  7. Did you use mostly HTML text in your site?
  8. Did you create and use only one CSS file for your site?
  9. Did you create placeholder pages for the remaining pages of your site? (A placeholder page is the structure of the page with all the navigation but it doesn’t need to have complete text and photos. This is an example of a placerholder page).
  10. Did you upload the website to the server and view it on the server to make sure everything is displaying and working correctly?




Comments

  1. Courtney Yingling April 24th

    Comment Arrow

    jamie,
    can you show us how to do this?
    http://www.frankchimero.com/
    amazing home page!


  2. jamie April 24th

    Comment Arrow

    Hi Courtney,

    What about it specifically? But yes, we should look at this site and talk about it.

    He’s a great designer!


  3. courtney yingling April 25th

    Comment Arrow

    Hi Jamie,
    I’m not sure exactly how to describe it; I guess I’m most curious about the appearance that both the background and foreground are moving in opposite directions and it also has a flipbook/film-like quality in the middle. Would love to know/understand how that is achieved! Thanks!

    Courtney


  4. courtney yingling April 30th

    Comment Arrow

    here’s the link to what we spoke about at the beginning of class (how i stumbled onto the website above):
    http://www.creativemornings.com/


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Graphic Design 66