Information Architecture

Information Architecture is a study of the organization and presentation of content for interactive systems and web sites.

"Try not to overwhelm me with options. If you have a lot of content, organize the options into logical groups to make it seem like there are fewer of them. Organize the site according to what your users are going to be looking for, not according to your corporate org chart, or even according to your business priorities--unless they happen to coincide with your users' interests."

Steve Krug, Usabilty Expert & Consultant, and author of Don't Make Me Think - A Common Sense Approach to Web Usability.

"Many in the design community understand that design must convey the essence of a device's operation; the way it works; the possible actions that can be taken; and, through feedback, just what it is doing at any particular moment, Design is really an act of communication, which means having a deep understanding of the person with whom the designer is communicating."

Donald Norman, Professor at Northwestern University, cofounder of the Nielsen Norman Group, and former Vice President of Apple Computer.
From the book The Design of Everyday Things.

SYLLABUS:

MAJOR ASSIGNMENT LIST:

Assignment: Week: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Due:
1. Creative Brief Week 2
2. User Profiles Week 3
3. Funct. Specs Week 4
4. Site Map Week 5
5. Wireframes Week 6
6. Designs - R1 Week 10
7. Designs - R2 Week 13
8. Designs - R3 Week 16
9. Final Project Week 17

CALENDAR:

WEEKLY SCHEDULE + DIGITAL ASSETS:

Click on the top bar for each week to expand or collapse the contents, or you can expand all weeks or collapse all weeks.

Week 1: Intro & Creative brief

Agenda:

  1. Introduction to the course
    • In this class we will go through in detail the early-to-middle phases of the design process of planning and designing web sites.
  2. Introduction to the primary project: Three Designs for one client.
    • You can choose any site that you want to work on (yes, you can choose a real-world client).
    • Your site must be relatively small (approx 4-5 pages in depth, no less).
    • You must do all research yourself and gather all content.
  3. We will take a look at student designs/interfaces from past years.

Presentation:

Class Overview - The Early-to-Middle Stages of the Design Process for Interface Design:

Class examples + related links:

Assignment: Choose a Client and Create a Creative BriefDue: Week2

  1. Set up your class web page.
  2. Purchase the required text for this course, Don't Make Me Think by Steve Krug, and read the intro & chapter 1
  3. Choose a company/organization for the web site that you will design throughout this course. Begin by conducting background research. Post your final choice, or a list of options, on your class web page.
  4. Once you have selected your site, create a creative brief document and post it on your your class web page for next week.
Week 2: User Profiles

Agenda:

  1. Go over the Creative Briefs
  2. Hot Studio - Brand, Content, & Visual Design Presentation
  3. Lessons:
    • User Profiles & Scenarios
    • Usability Goals, Checklists, & Heuristics
    • Brief Discussion of Browser differences
    • Forrester WSR tests (on Laulima)

Class examples + related links:

Assignment: User ProfilesDue: Week 3

  1. If your client has an existing site, complete the full Forrester WSR test on your client site and post your score only (not the word document) on your class web page.
  2. Write up at least three user profiles, with user goals/tasks and user-site scenarios.
  3. Read the intro, Chapter 1, and Chapter 2 from Steve Krug's Don't Make Me Think.
Week 3: Functional Specifications

Agenda:

  1. "Features" Brainstorm session
  2. Lesson: What is a Functional Specifications Documents?

Class examples + related links:

Assignment: Functional SpecificationsDue: Week 4

  1. Create a functional specifications document. It should have three parts to it:
    1. a list of features in order of priority.
    2. a page-by-page description that includes a list of the content and features found on each page
    3. a user flowchart example visually depicting one way how a user may interact with the site
Week 4: Site Maps

Agenda:

  1. Introduction to Site Maps
  2. Quick lesson on how to create a site map
    1. Sketching
    2. Paper Prototyping
    3. Going Digital (ie. Microsoft Power Point, Illustrator, etc.
  3. The Client Pitch

Class examples + related links:

Assignment: Site MapDue: Week 9

  1. Create a site map for your client site. Bring a printed version to class next week, and post a PDF file of your site map on your UH class web site.
  2. Sketch, sketch, sketch!
  3. Consider paper prototyping (using paper/index cards to layout your site map).
  4. Read Chapters 3-5 from Steve Krug�s Don�t Make Me Think.
Week 5: WireFrames

Agenda:

  1. Walking Wall Critique Then On-Screen Critique of Site Maps
  2. Lesson: Wireframes

Lesson:

  1. Wireframes (also knownas �page maps� or �page schematics�)
    • Elements include:
      • Site ID (Logo)
      • Navigation (Primary, Secondary, Ultility, etc.)
      • Page Name (Think Steve Krug & Street Signs)
      • Sections of Content * imagery
      • Universal Sections (ie. Footer, Utilties, Internal Advertising, etc.)
    • How to begin creating a wireframe:
      • Sketch, Sketch, Sketch! (Do not start your layouts on the computer!)
      • Do not design with graphical elements,instead use simple lines to communicate the structure of a potential layout (not the visual style).
      • Think: �Heirarchy, heirachy, heirachy.�

Class examples + related links:

Assignment: Revised Site Map and Wireframes (Min. 3)Due: Week 6

  1. Based upon the feedback from the initial site map critique in class, revise your site map and post the revised version on your class web page.
  2. Create wireframes. Do as many wireframes as you see fit. You should have a minimum of three. For example, the home page, a sub page template, and at least one other sub pages that may not follow a templated layout, such as a gallery/photo page or a product listing page.
  3. Sketch, sketch, sketch before you work digitally!
  4. Read Chapter 6 from Steve Krug�s Don�t Make Me Think.
Week 6: Design

Agenda:

  1. Intro to the visual mock-up design process
  2. Quick critique/review of revised sitemaps and wireframes

Lesson:

  1. Tips to Start Designing
    • Do plenty of research on visual style, color, patterns, technologies, and typesetting techniques.
      • Consider creating mood boards.
    • Do multiple sketches before you start designing digitally!!!
    • Work in Photoshop
      • The web is a screen-based medium, where the majority of web graphics are raster, not vector. We only see vector art in flash.
    • Create 3 separate Photoshop Documents (PSDs) - one for each thematic direction
      • Map out/decide on your thematic directions before you start designing. Your three thematic directions should include:
        • #1 a low risk design (ie. Prof/corporate)
        • #2 a mid risk design (ie. "fun-yet-functional")
        • #3 a high risk design (ie. experimental/wild).
      • Set up each document to be at least 1200 x 800 pixels, 72dpi. You may need to go larger depending upon your background design. The width of your layout/page (i.e. “container”) will depend upon each project’s goals & parameters.
      • Name them (think of a catchy name).
    • When designing (and coding), always working from the outside in and from the top down.
      For example, try to:
      • Design the background first
      • Then the container
      • Then the header
      • Then the navigation
      • Then the content imagery
      • Then the body content
      • Then the footer
    • Gather all Assets (ie. content & imagery)
      • My advice is to “work with what you got!”
        • At this point you may not have all of your assets, or your client may not have that many visual assets. This is your challenge as a designer. Solve it using your design skills!
    • Be sure to think about usability concerns such as:
      • The navigation & category naming conventions – should certain items be moved around, renamed, etc.
    • Lastly, have fun! Experiment with the visual layout, be creative, take risks!

Presentation:

Class examples + related links:

Assignment: Round 1 DesignsDue: Week 10

  1. Start designing your three (3) visual mockups.
  2. Sketch, sketch, sketch before you work digitally!
Week 7: Design

Agenda:

  1. Lesson: Design Patterns
    • A design pattern is a known solution to a commonly occurring problem in design.
    • A design pattern is not a finished product or piece of code, it is a concept/technique/solution.
    • A design pattern is a description/template for how to solve a problem that can be used in several different situations and in a variety of ways.

Class examples + related links:

Assignment: Round 1 DesignsDue: Week 10

  1. Continue designing your three (3) visual mockups.
  2. Read Chapters 6-7 from Steve Krug�s Don�t Make Me Think.
Week 8: Design

Agenda:

  1. Work week to continue working on the your round 1 designs.
  2. Take advantage of 1-on-1 support in class to ask for feedback on your designs.

Class examples + related links:

Assignment: Round 1 DesignsDue: Week 10

  1. Continue designing your three (3) visual mockups.
Week 9: Design

Agenda:

  1. Last work week to finish your round 1 designs.
  2. Take advantage of 1-on-1 support in class to ask for feedback on your designs.

Class examples + related links:

Assignment: Round 1 DesignsDue: Week 10

  1. Last week to finish your three (3) visual mockups!
  2. Post all three designs on your class web page for review next week,
Week 10: Design

Agenda:

  1. Midterm critique on both days.
    • 10-15 minutes per person to present.
    • Order will be determined via signup on the whiteboard on Tuesday at 1:45pm.

Critique Schedule:

Day #1 Day #2 Time
----- SETUP ----- 1:45-1:55
#1 #9 1:55-2:05
#2 #10 2:10-2:20
#3 #11 2:25-2:35
#4 #12 2:40-2:50
----- 10 Min. BREAK ----- 2:55-3:05
#5 #13 3:05-3:15
#6 #14 3:20-3:30
#7 #15 3:35-3:45
#8 #16 3:50-4:00
----- CLOSING REMARKS ----- 4:05-4:15

Assignment: Round 2 DesignsDue: Week 13

  1. There is no homework over break, but if you are feeling ambitious, please consider the following:
    • Based upon the feedback from your Round #1 designs, begin making revisions and/or creating new designs for round 2.
Week 11: NO CLASS - SPRING BREAK
  • ----- [ NO CLASS - SPRING BREAK ] -----
Week 12: Design

Agenda:

  1. Lesson: how to improve your round 1 drafts.
    1. Create a game plan that includes a schedule of time that you will spend on each design.
    2. Make a list of design patterns/Web 2.0 features that you want to add to your designs.
    3. Typography, Typography, Typography.

Class examples + related links:

Assignment: Round 2 DesignsDue: Week 13

  1. Based upon the feedback from your Round #1 designs, begin making revisions and/or creating new designs for round 2.
Week 13: Design

Agenda:

  1. Informal Critique: Round 2 Designs.
  2. Lesson: how to post your round 3 designs in a client "comp site."

Class examples + related links:

Assignment: Round 3 DesignsDue: Week 16

  1. Based upon the feedback from your 2nd round, make informed design changes to all your visual layouts, with the primary goal of choosing one to be the final design for your client, and rebranding the other two designs for new clients.
  2. Begin preparing an interactive client "comp site". See this example of a student comp site from last year or see John Doe's "Comp Site from Class" for a working example.
Week 14: Design

Agenda:

  1. Lesson: how to rebrand two of your designs for round 3.
  2. Lesson: how to post your round 3 designs in a client "comp site."

Assignment: Round 3 DesignsDue: Week 16

  1. Continue working on your three designs for three different clients in three different thematic directions.
  2. For the final design that you have chosen for your original client, continue enhancing your design by paying attention to the layout of the content. Consider adding Web 2.0 style elements.
  3. For your other two designs (the rebranded ones), first choose appropriate clients for rebranding that match the thematic design directions, then swap out content (ie. change the logo, update the navigation labels to match the new client�s site structure, swap out any primary photography, and switch out all content imagery and text).
  4. All three of your client designs must contain a home page and a minimum of three sub pages.
  5. Begin preparing an interactive client "comp site". See this example of a student comp site from last year or see John Doe's "Comp Site from Class" for a working example.
Week 15: Design

Agenda:

  1. Lesson: Business tips for interface design.

Class examples + related links:

Assignment: Round 3 DesignsDue: Week 16

  1. Continue working on your round 3 designs (three designs for three different clients in three different thematic directions - all three of your client designs must contain a home page and a minimum of three sub pages).
  2. Continue working on your interactive client "comp site".
Week 16: Design

Agenda:

  1. NO IN-PERSON CLASS ON TUESDAY! Instead, log onto Laulima to post questions.
  2. Informal Critique of Round 3 designs (to be conducted online and in-person on Thursday).
  3. Work week to finalize your designs in preparation for the final critique.

Class examples + related links:

Assignment: FINAL DesignsDue: Week 17

  1. Based upon the feedback from your Round 3 critique, make any and all changes to produce FINAL quality visual mockups for all three clients including at least 3-4 sub pages per client. In other words, three total designs (home page + a minimum of 3 sub pages) for three different clients in three different thematic directions.
  2. Post your final designs as an interactive client "comp site".
Week 17: Final

Agenda:

  1. Final critique on both days.
    • 10-15 minutes per person to present.
    • Order will be determined via signup on the whiteboard on Tuesday at 10:45am.

Critique Schedule:

Day #1 Day #2 Time
----- SETUP ----- 1:45-1:55
#1 #9 1:55-2:05
#2 #10 2:10-2:20
#3 #11 2:25-2:35
#4 #12 2:40-2:50
----- 10 Min. BREAK ----- 2:55-3:05
#5 #13 3:05-3:15
#6 #14 3:20-3:30
#7 #15 3:35-3:45
#8 #16 3:50-4:00
----- CLOSING REMARKS ----- 4:05-4:15
Search:

Find it fast.

Class info:

Information Architecture
KCC | New Media Arts
Spring 2010
Kopiko 202
T,TH :: 1:45 pm - 4:15 pm
Instructor: Chris Gargiulo
Office: Olapa 225

Laulima:

Laulima is the online course management web site for the University of Hawai‘i. Login to visit this course's online resources such as the discussion board, chat room, and drop box.

Student sites:

Below is a list of student web pages for each student enrolled in this course.

Helpful Links:

Below is a list of online resources related to this course.

Research Project:

The KCC Usability Student Group Research Project is an annual study of the usability features of seventy five different web sites across fifteen product consumer categories.

CSS Gallery Sites:

Below is a list of sites that showcase sites built using CSS.