course documents

course calendar

technical support

assessments

communication

student portfolio

main index

COURSE CALENDAR | WEEK 04 CLASS OUTLINE | HOMEWORK

1. Review: Defining a Site in Dreamweaver.
2. Review student portfolio sites on FTP (example site)
3. Mini Project: NextFest Project description and requirements.
4. Fill out this sample client survey
   • What a designer needs to know before he/she begins a project.
5. Web Design Vocabulary:
   • Site and Navigation Design: Sample Site Map | 01 | 02 |
   • Interface / Page Design: Sample Wireframes | 01 | 02 |
6. The Graphic Design (for Web Design):
   • Today's web style and common features
   • Visual Hierarchy and Visual Organization: Ensuring clear relationships between elements
     • Tools to differentiate: Color, Contrast
     • Tools to associate: Grouping, Containment, Alignment, Rhythm
7. Type on the web: Use appropriate typography. One font family will suffice. Keep it legible-- no full page gradients or garish pattern backgrounds please!
   • Readability | Text
8. Color on the Web: Choose two or three colors for your color scheme: a main color and an accent color. Think about the colors you choose and what they mean or imply to a user.
   • “Nature’s colors are familiar and have a widely accepted harmony.”—Edward Tufte
   • CSS Colors understanding color on the web
   • RGB/HEX Chart
   • Color blender great for finding a quick color scheme
   • Color Theory for the color blind and designing for those with different ways of seeing
9. Sites for Reference: Find a website with a color scheme you like. Then find a website with the graphic style you like. Use these two sites as the basis for the visual design of your web site.
   • Design Meltdown
   • Zen Garden
   • CSS Beauty
   • Style Gala
   • CSS Thesis
   • Well-designed CSS sites-- AndyBudd
   • cssvault
   • Web Standards Awards
10. Building a Mockup Interface in Photoshop based on this wireframe
    • A Design Grid ensures consistency and predictability.
    • Follow these instructions to get started.
    • Define the following sections
      1. Body (background color or pattern)
      2. Branding / Header (Logo and Site Title)
      3. Sidebar
      4. Global Navigation
      5. Content
      6. Section Heading (h2)
      7. Copy (sub-headings, paragraphs, lists, bullets and inline links)
      8. Footer (copyright and email link)
    • Your color scheme and graphic style should reflect the information hierarchy and purpose of your site. Keep the overall design clean, simple and appropriate to the identity you want to convey to your audience.
    • Create a logo, photograph or digital image to identify the "brand" of your site. This should also embody your Site Persona and work with your color scheme and graphic style. The branding area is 767px wide by 126px high (the height can be adjusted to your choice).
    • Choose or create a subtle pattern for the body background of your mockup.

1. Visit the NextFest at the Javits Center (Sept. 29, 30 or 31). Review this special project description before attending.
2. Work on your mockup based on this wireframe, as discussed in class. Bring the PHOTOSHOP or ILLUSTRATOR file to class. (SAMPLE)
3. Next week will learn about PRESENTATION (Cascading Style Sheets), so have your color scheme and font figured out before we start. Bring a palette like this sample.
4. If you are having trouble finding your color scheme read through this tutorial:
   • http://www.worqx.com/color/