130 likes | 141 Views
Learn how to set up and prepare your digital and printed portfolio entry for Interface Design class. Includes tips for digitizing sketches and designing your portfolio layout.
E N D
Kapi’olani Community College Art 249 Interface Design 2 In-class Presentation Week 16A
:: Today’s Agenda • Quick lesson on how to set up your printed portfolio entry • Today is a full working day
:: 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
:: 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
:: 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?
:: 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
:: Printed portfolio assignment • typography study examples:
:: 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)
:: Printed portfolio assignment • a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page
:: Printed portfolio assignment • icon examples:
:: 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