1. Kapi’olani Community College Art 155 Information Architecture In-class Presentation Week 8B

2. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Calendar

3. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Examples  We will look at last year’s student wireframes  We will look at three working wireframes  KCC|NMA site  Markle Foundation  Parsons Design + Technology Site

4. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Today’s Agenda  Lesson: Wire Frames  Also known as “page maps”  Very similar and often treated like “page schematics”  We will take a look at some of last year’s examples.  START BY MAKING SEVERAL DIFFERENT SKETCHES!!!

5. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Assignment – Part 1due :: 03.05.07  Homework Project: Wireframes (minimum of 3)  Purpose/Objective:  To visually communicate a page structure that enforces “a consistent hierarchy of design elements where the relevant elements are emphasized and the content is displayed in a logical and orderly manner.” –pg. 180 from Usability for the Web  To conceptually consider the advantages and disadvantages of existing page layouts and navigational techniques in order to make organizational changes for improved usability.  Assignment: Use Microsoft Power Point, Adobe Illustrator, or any other visual mapping program to create wireframes for the home page and at least two sub pages of your site:  The Home Page  At least one sub page (a template, for example)  Any other sub page that is important for your study.  Format:  Digital version: Microsoft Power Point document (.ppt). If you used another program, please save out the images and then paste them into a power point document to be posted onto your class web page.

6. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Assignment – Part 2due :: 03.05.07  Taking into consideration all comments during the critique, please revise your site maps and post revised versions of both site maps on your class web page.

7. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Reading Assignment  In our text Usability for the Web, please read:  The end of Chapter 5: Pgs. 155-169  All of Chapter 6: Pgs. 180-210

8. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation :: Mid-term Projectdue :: 03.19.07  Client Documentation Packet and Presentation  Purpose/Objective:  To combine all client documentation to date into one unified document.  To design a presentation packet that communicates all background research, discoveries, and future recommendations for the site redesign.  To use your copywriting skills to edit your previous documentation content in order to highlight primary project objectives.  To use basic design elements of line, color, and shape in combination with a standardized style of consistent typography, typesetting, and layout.  To illustrate to the client how your proposed design changes will impact the target users.

9. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation  Client Documentation Packet and Presentation  Assignment: Two documents are due! 1.One Microsoft Word document of your “Client Documentation Packet” – this packet should include all client documentation to date. 2.One Microsoft Power Point Presentation – do not include all content from the documentation packet!!! Only include what you need in order to communicate to the client the changes that you are suggesting/recommending. You should include a summary of the primary objectives, your revised site map, selected wireframes, three new site interaction episodes, and your conclusion. :: Mid-term Projectdue :: 03.19.07

10. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation  Client Documentation Packet and Presentation  Assignment: Two documents are due! 1.One Microsoft Word document of your “Client Documentation Packet” – this packet should include all client documentation to date. Be sure to include the following assets:  A Title Page  A Table of Contents Page  Revised Project Creative Brief  Revised Primary User Scenarios  Summarized Forrester Review Test Results (a summary of results including the final score)  An updated and abbreviated Usability Checklist listing all primary objectives of the redesign.  Current Site Map  Revised Site Map based upon your personal observations and recommendations  Wireframes (include all relevant pages)  Three (3) new “Site Interaction Episodes” using the same three users from your User Scenario section.  A conclusion section/page consisting of a bulleted list of primary objectives and how you have resolved your primary goals/design problems as a usability consultant. :: Mid-term Projectdue :: 03.19.07

11. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation  Client Documentation Packet and Presentation 1.For your documentation packet, you will be primarily copy and pasting content from previous assignments. All content must be revised and edited. Be sure to stylize your final document with consistent typography and typesetting. Use margins, indenting, bulleted lists, and a combination of color, font size, font decoration, and capitalization to create a visual sense of hierarchy that is consistent throughout the document. 2.During the mid-term presentation critique you will present your revised site maps and wireframes and walk us (the client) through your three new “Site Interaction Episodes.” These will be your three primary targeted users walking through your new site to achieve their goals. You should aim to have them succeed, where previously they either failed or had trouble achieving their goal on the client site. :: Mid-term Projectdue :: 03.19.07

12. Art 155 :: Information Architecture :: Week 8 :: B In-class Presentation  Client Documentation Packet and Presentation  Format: Two formats are due! 1.Digital Client Documentation Packet (.doc): One (1) Microsoft Word document to be posted on your class web page. 2.Digital presentation (.ppt): Microsoft Power Point document of your mid-term presentation to be posted on your class web page. :: Mid-term Projectdue :: 03.19.07