Advanced Web Design: AD650
COURSE CALENDAR | WEEK 06 CLASS OUTLINE | Homework
- Background Images and Image Replacement (ZIP)
- Tiled backgrounds
- Background image positioning
- Rounded corners: fixed and flexible
- Image Replacement methods
- Styling Lists and Links (ZIP)
- Creating Buttons and Simple Rollovers (pg 76)
- Rollovers with images / regular and Pixy-style (pg78)
- Visited-link styles (pg 80)
- Highlighting the current page in the nav bar (pg 90)
- Creating a horizontal nav bar (pg91)
- CLIENT WORK/Wireframe Development
(See Week 05)
- You should have a wireframe (created in Illustrator or Photoshop)
- Have your wireframe(s) printed and available for paper prototyping
- If you don't have your wireframe(s) printed draw them out on a piece of paper. Create one for each level of your site
- CLIENT WORK/Interaction Development
- Interaction Design
- User Profile: A user profile is a realistic (but fictional) example of a target audience member. (sample)
- Use Case: Use cases are narratives and/or diagrams that describe how a user might use a site. They illustrate a sequence of events that a user might go through in order to accomplish a specific goal. (sample)
- Usability Testing with Paper Prototyping: Define a task/goal for the user. Using your wireframe as guide, draw each page in your site involved in that task. Ask your partner to "be" the user profile's character. You will be the computer. Ask the user to complete the task by navigating the paper prototype until they reach the goal. Take notes during the testing. Do not give hints or advice to the user. (sample)
- IA deliverables
- Design Patterns
- Analyzing Functionality
- 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.
- Shallow vs. Deep (sample)-- have an awareness of the balance between home page and content page
- Types of Navigation-- Horizontal Navigation, Vertical Navigation, Horizontal Global Navigation and Vertical Local Navigation, Tabbed Navigation, Drop-Down Navigation, Breadcrumb Navigation.
- Finish navigation exercises in Chapter5 (Creating Vertical and Horizontal Nav Bars)
Midterm Project is DUE Week 08!!
- Finalize your User Profile and Use Case Diagram(s).
- All content for Phase1 and Phase 2 should be complete by next class
- Phase3 Visual Design Development:
- Research, Research, Research- find some inspiration from this list of resources. Here you will find info about color schemes, layouts, graphic styles. I suggest Design Meltdown to start.
- Bring to class 1 or more interface designs/mockups. If your level one (home page) is different in layout from the rest of the site, include designs for all levels.
- Your mockups should account for:
- Key page elements & location: header, footer, navigation, content objects, branding elements
- Grouping: side bar, navigation bar, content area, etc.
- Labeling: page title, navigation links, headings to content objects
- Place holders: dummy text (lorem ipsum dolor...), and image place holders
- A developed color scheme with color choices for all key page elements including headings, bullets, links, plus, visited, hover, and active links.
- A cohesive and appropriate graphic style using branding and background images.
- Make at lease one BACKUP of your work!!