1. Kapi’olani Community College
Art 258 Interface Programming II
In-class Presentation
Week 16A

2. :: Calendar

3. :: Today’s Agenda
Quick lesson on how to set up your printed portfolio entry
Today is a full working day

4. :: 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
Studies
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 final site

5. :: 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. :: 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
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. :: 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
a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page
final images of the site, perhaps seen inside of a browser window, or perhaps a zoomed-in close-up or detailed view

8. :: Printed portfolio assignment
typography study examples:

9. :: Printed portfolio assignment
color study/background color study example:
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)

10. :: Assignment due next/last class : 12.07.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