Layout and Design - Week 3
Lecture/Demo:
- Presentation Information Architecture (IA) Layout and Design
- Designing for your audience and client
- Using Personas
- Screen resolution and screen real estate
- Using the golden ratio and rule of thirds
- Creating blue prints
- CSS Demo - Create a Fixed Layout using positioning techniques including images by:
- Using positioning absolute and relative with images
- Understanding the Z Index with positioning
- Rounding the side column
- Faux Columns
- Floating and Clearing divs
- Inserting and Optimizing an image
- Applying a background image
- Using Bridge to import Photoshop or Fireworks files
- Copying and pasting an image from Photoshop
- Getty Images - How to login and search for images for your website.
- Free Backgrounds - Choose a background for your website
Lab:
- Class Review/Critique of Storyboards and IA Diagrams. If time allows, begin working on your blue-print. Reference Chapter 4 in the Head First Web Design book.
Homework:
- Read chapter 4 on Layout and Design in the Head First Web Design book. Use this chapter, pages 109 - 139.
- Use your story boards and IA Diagram to create your blueprint for your website. You can do this in Photoshop, Illustrator or program of your choice. Begin constructing the XHTML and CSS Mock-up for the homepage.
Resources:
