Kapi’olani Community College Art 249 Interface Design 2In-class PresentationWeek 16A

Art 249 :: Interface Design 2 :: Week 16 :: A

In-class Presentation

:: Calendar

Week 1612.4 12.6

FINAL - portfolio presentation

WORK DAY CRITIQUE

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)

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

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

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?

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

Art 249 :: Interface Design 2 :: Week 16 :: A

In-class Presentation

:: Printed portfolio assignment typography study examples:

Art 249 :: Interface Design 2 :: Week 16 :: A

In-class Presentation

:: Printed portfolio assignment

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)

color study/background color study example:

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 pageProject Description

& Creative Brief

Thumbnail Sketch Thumbnail Sketch Thumbnail Sketch

Page Maps Site Map

Thumbnail Sketch

Round 1 Comps

Round 2 Comps

Thumbnail Sketch Thumbnail Sketch

Round 2 Comps

Round 1 Comps Round 1 Comps

Round 2 Comps Round 2 Comps

Final Comp Chosen

html coding css coding

browser & platformQA testing

Final Site Launched

Art 249 :: Interface Design 2 :: Week 16 :: A

In-class Presentation

:: Printed portfolio assignment icon examples:

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