Prof. Jenna Spevack | Teaching Site

Web Design: AD550

COURSE CALENDAR | WEEK 03 CLASS OUTLINE | Homework

  1. Review
  2. Send email to Prof.Spevack using your preferred email address.
  3. Information Architecture: The information architect's goal is to provide a simple, logical structure and experience for the site's users. Most designers/architects ask their clients to fill out a client survey in order to understand the purpose of the site and the expectations of the client. Once the purpose of the site has been determined the Information Architect follows a series of tasks. We will discuss some of the tasks in this process.
    1. Structuring of Information
      • Divide content into logical units (sample). Generally no more than 6 main sections.
      • Establish a hierarchy of importance among units
      • Once priorities are set, build Hierarchy from most important (GENERAL) to most specific (DETAILED
    2. 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)
    3. Analyzing Functionality (more on Navigation Design next week)
      • Structural Navigation (sample)
      • Sequences: sequential ordering, when visitors are required to move through information in a predetermined sequence.
      • Hierarchies: organized around central homepage, similar to a family tree, provides access to information via specific entry points.
      • Webs: mimics associative thought and free flow of ideas or when visitors may want to access the information from multiple access points.
      • Further reading
      • Shallow vs. Deep (sample)
  4. Exercise: Site Diagrams and Information Listings
    1. Make a site diagram (drawing) of your Portfolio site.
      1. Include all the future and potential pages in your site.
      2. Start with the index (home) at the top of your diagram.
    2. Make an Information Listing of this site: http://www.dtelepathy.com/
      1. Using a list format, show the first two levels of the site (the main information level and the secondary information level).
  5. Document Management
    1. Proper file naming conventions
    2. Defining a site
  6. Modifying Dreamweaver Preferences for Standards Compliance and Accessibility.
    1. 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.
      • Tantek Çelik provides default XHTML 1.1 Strict pages to work from.
  7. Exercise: Building your portfolio site.
    1. Finalize your index.html. We will use this page as template for additional pages.
      1. Replace your plain <html> with html + the XHTML namespace:
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      2. Makes sure your page validates.
      3. Your page should look like this.
    2. 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). Use lists and headings to structure the content of your page.
    3. If you'd like to add a nested list to your resume.html and anchors to the different sections of your resume, refer to HTMLDOG
    4. 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.
  8. Publishing your site using Dreamweaver and the FTP Server.

Homework | Week 3

  1. Finish your resume page
    • You should have used your finished index.html as a template for your resume.html. Make sure the following major Site Components are included:
      • Branding (Site Title)
      • Navigation List
      • Page Heading
      • Content Area
      • Footer (including copyright and email link)
    • Make sure all links are functioning.
    • 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.
    • Some sites for inspiration:
    • 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.
    • Research at least 3 existing site URL's: one with a graphic style you like, one with color scheme you like. The sites may be unrelated to your own, but be prepared to explain why the styles and color schemes will work with your site.