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

2. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Calendar

3. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: 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. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Checklist  make sure your site validates  markup - http://validator.w3.org/http://validator.w3.org/  css - http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/  section 508 - http://www.contentquality.com/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.htmlhttp://www.w3.org/TR/WCAG10/full-checklist.html

5. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Printed portfolio assignment  How to prepare your web site to become a portfolio entry 1.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 2.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. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: 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. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: 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. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: 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. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Printed portfolio assignment  typography study examples:

10. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Printed portfolio assignment DIRECTION A: “HOT” Stylistic risk level: High Colors: Warm (Shades of Reds, Oranges, Yellows, Black, Greys, and White) DIRECTION B: “COOL” Stylistic risk level: Medium Colors: Cool (Shades of Blues, Greys, and White)  color study/background color study example:

11. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Printed portfolio assignment  a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page Project Description & Creative Brief Thumbnail Sketch Page Maps Round 1 Comps Round 2 Comps Round 1 Comps Round 2 Comps Final Comp Chosen html coding browser & platform QA testing Final Site Launched css coding Round 1 Comps Round 2 Comps Site Map Thumbnail Sketch

12. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Printed portfolio assignment  icon examples:

13. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: Assignment  Finish your site  Prioritize your bugs 1.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 Final site due : 11.27.06

14. Art 249 :: Interface Design 2 :: Week 14 :: B In-class Presentation :: 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