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

2. Art 249 :: Interface Design 2 :: Week 16 :: A In-class Presentation :: Calendar

3. Art 249 :: Interface Design 2 :: Week 16 :: A In-class Presentation :: Today’s Agenda  Quick lesson on how to set up your printed portfolio entry in InDesign  Today is a full working day  NOTE: Wednesday’s class is optional!  I will be here from 2-4PM to answer any questions, but I may need to stepo out periodically to attend a training session.  NOTE: All assigments are due on Thursday! 1.Art 249 digital portfolio (.pdf) 2.Art 257/258 digital portfolio (.pdf) 3.Art 249 printed portfolio (8.5 x 11 paper) 4.Art 257/258 printed portfolio (8.5 x 11 paper) 5.Art 249 html web site digitally compressed (.zip) 6.Art 257/258 flash web site digitally compressed (.zip)

4. Art 249 :: Interface Design 2 :: Week 16 :: A 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

5. Art 249 :: Interface Design 2 :: Week 16 :: A 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

6. Art 249 :: Interface Design 2 :: Week 16 :: A 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?

7. Art 249 :: Interface Design 2 :: Week 16 :: A 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

8. Art 249 :: Interface Design 2 :: Week 16 :: A In-class Presentation :: Printed portfolio assignment  typography study examples:

9. Art 249 :: Interface Design 2 :: Week 16 :: A 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:

10. Art 249 :: Interface Design 2 :: Week 16 :: A 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

11. Art 249 :: Interface Design 2 :: Week 16 :: A In-class Presentation :: Printed portfolio assignment  icon examples:

12. Art 249 :: Interface Design 2 :: Week 16 :: A In-class Presentation :: Last Assignment due next 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