COURSE CALENDAR | WEEK 03 CLASS OUTLINE | Homework

  1. Review
  2. NextFest FieldTrip: September 29, 30, 31, 2006 at the Javits Center
    • Get your free ticket by sending an email to 10 friends (see site for details)
  3. Information Architecture
    • Organizing your content
    • Site Maps/Diagrams
    • Information Listings
  4. Basic linking, understanding path structure and site structure
  5. Document Management in Dreamweaver
    • Defining a site
    • Proper file naming conventions
    • Modifying Dreamweaver Preferences for Standards Compliance and Accessibility.
    • Using XHTML Strict DTD
      • Use default.html when you create a new html file
      • Or choose XHTML Strict from the doctype menu when you create a new file in Dreamweaver 8.
      • Or visit the W3C to find choose an appropriate doctype for your project.
  6. Adding a navigation list to our page.
    • MORE Basic Rules and Syntax of HTML (complete up to Links)
    • Create a resume.html page using your index.html page as a guide. Be sure into include the main page elements (site title, page heading, content, footer and navigation)
    • Create the three future pages: bio.html, projects.html, contact.html. You don't need to add actual content, but add the main page elements (site title, page heading, content, footer and navigation). Use Lorem Ipsum text for place holder paragraphs.
  7. Publishing your site using Dreamweaver and the FTP Server.

 

Information Architecture

The information architect's goal is to provide a simple, logical structure and experience for the site's users. We will discuss some of the tasks in this process. The first task is understanding the purpose of the website. Most designers/architects ask their clients to fill out a client survey.

Structuring of Information

Creating an Organizational Framework
  • An Information Listing, like a Table of Contents, to show the structural relationship between units. (sample)
  • Creation of Site Diagrams, like a Site Map, is a communication tool to indicate the content and navigation options available on the site. (sample)
Analyzing Functionality (more on Navigation Design next week)

Homework | Week 3

  1. Finish your resume page and define bio.html, projects.html, contact.html
    • You don't need to add actual content to bio, projects and contact, but instead use Lorem Ipsum text for place holder paragraphs.
    • You will need to take into account the architecture of the information you are presenting and make sure the following major Site Components are included on every page.
      • Branding (Site Title)
      • Global Navigation
      • Page or Section Heading
      • Content Area
      • Footer (including copyright and email link)
    • Make sure all links are functioning and your site is uploaded to your folder on the FTP Server.
    • CHECK YOUR SPELLING AND GRAMMAR!
  2. Research your portfolio site's Graphic User Interface (GUI) .
    • Begin by researching existing sites that you are fond of. Start noticing and thinking about metaphors, color schemes and graphic styles that define your identity as a designer or professional in your career.
    • Take notes, make sketches, gather little scraps of paper or objects. Find anything that gives you inspiration: photographs, architecture, painting or drawing, comic books, fashion, film, etc. Next class we'll move on to creating a complete Visual Concept Board using Photoshop.
  3. BRING THE FOLLOWING TO CLASS
    • Ideas, color schemes, sketches-- anything that gives you inspiration.
    • At least 3 existing site URL's: one with a graphic style you like, one with color scheme you like. Be prepared to present these to the class.