Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 14B

1. Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 14B

2. :: Calendar

3. :: Today’s Agenda • Quick lesson on how to begin setting up your printed portfolio entry (your last assignment) • Today is a full working day • Please put your name on the board and I will go around the room helping everyone out 1-1, 10 minutes per person.

4. :: Checklist • make sure your site validates • markup - http://validator.w3.org/ • css - http://jigsaw.w3.org/css-validator/ • section 508 - http://www.contentquality.com/ • make sure your site works on all browsers & platforms • consider the following: • optimizing your code • how can your code be “cleaner” • is there any unnecessary repetition of code? • will multiple css files clarify your code? • optimizing the interface/usability of the site • does your site have multiple means of navigation? • bottom text nav? breadcrumb navigation for sub pages? • do all images have alternate text and/or alt tags? • what is “odd” or simply not working in your design? could it be fixed? how? • Update/revise your sitemap • work on “cleaning up” your sketches for your portfolio entries • online checklist: http://www.w3.org/TR/WCAG10/full-checklist.html

5. :: Printed portfolio assignment • How to prepare your web site to become a portfolio entry • Gather all of your assets • Creative brief • Sketches • Site map • Page maps • All comps (early drafts through final drafts) • Coded site (source html and css files • Save out 300dpi images of your content • make a folder to place all of your portfolio entry images • digitize your sketches (scan them, clean them up, save them out as uncompressed .tiffs) • update and save out your site map and page maps (.tiffs) • save out any comps that you will need (.tiffs) • take screenshots of your code - include BOTH .css AND .html code (.tiffs) • take screenshots of your final site

6. :: Printed portfolio assignment • Tips for digitizing your sketches • “clean” up your sketches before scanning them • use a thick black marker in order to get a high contrast scan • adjust the scanner contrast settings before scanning • scan your sketches at 300dpi • clean them up in Photoshop • erase dirt and unnecessary artifacts from your scan • don’t go crazy with this, they are sketches after all • adjust your image (levels, contrast, etc.) • save all images as uncompressed .tifs into your portfolio folder

7. :: Printed portfolio assignment • tips for designing your portfolio layout • design the layout for how you want to show the progression of your designs from sketch to final • consider a diagram/flowchart/heirarchy tree showing the full design process on one page • use last year’s layouts as examples if you like, but please feel free to design your own as well • you can design your layout in either portfolio or landscape view • things to keep in mind: • what is the narrative of my portfolio entry? • beginning, middle, & end • beginning: what is the primary design problem at hand? who is the client? what is the targeted audience? what is your primary goal/objective for the site? what are the major obstacles? • middle: what steps did you take to try to solve your design problem(s)? • end: how did you ultimately solve/resolve all of your design problems? • how can I best show this full design problem solving process from concept to final design?

8. :: Printed portfolio assignment • elements to consider including in your portfolio entry: • your name, the class, the date • a project title • brief description of the project (1 or two paragraphs at the most - consider including your primary goals/objectives, main design problems at hand, and target audience) • thumbnail sketches • artwork/concept sketches • thematic color studies and/or typography studies • multiple rounds of comps • a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page • code screenshots to demonstrate that you coded the site • icons to demonstrate the QA testing process • final images of the site, perhaps seen inside of a browser window, or perhaps a zoomed-in close-up or detailed view

9. :: Printed portfolio assignment • typography study examples:

10. :: Printed portfolio assignment • color study/background color study example: DIRECTION A: “HOT”Stylistic risk level: HighColors: Warm (Shades of Reds, Oranges, Yellows, Black, Greys, and White) DIRECTION B: “COOL” Stylistic risk level: MediumColors: Cool (Shades of Blues, Greys, and White)

11. :: Printed portfolio assignment • a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page

12. :: Printed portfolio assignment • icon examples:

13. :: Assignment Final site due : 11.27.06 • Finish your site • Prioritize your bugs • Top priority bugs • CONTENT: Get all content on the site • FUNCTIONALITY: Get all pages up and working • Mid-level bugs • AESTHETIC: Get the site looking good on all browsers/platforms with no bugs • VALIDATION TEST: Get your site to validate (HTML, CSS, & Section 508) • GOOD MARKUP: Re-examine your html markup. Is it set up the best way possible? • Low-level bugs • ENHANCEMENTS: Add the advanced features once all majot bugs are • CLEAN UP YOUR CODE: get rid of any redundancies. • OPTIMIZE YOUR SITE: add meta tags

14. :: Last Assignment due on the last class : 12.06.06 • Printed Portfolio Entry • assignment: Choose which assets/productions documents (sketches, site maps, page maps, comps, etc.) that you created in this class and prepare them to become a part of your personal portfolio. Design the layout of your portfolio entry in such a way that demonstrates the full design process from concept to final product. • format: • digital: .pdf file of your portfolio entry • printouts: 8.5” x 11” sheets of paper