Kapi

1

• Kapiolani Community College
• Art 249 Interface Design 2
• In-class Presentation
• Week 14B

2
Calendar
3
Todays 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
Checklist

• make sure your site validates
• markup - http//validator.w3.org/
• css - http//jigsaw.w3.org/css-validator/
• section 508 - 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.html

5
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

6
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
• dont 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
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 years 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
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
Printed portfolio assignment

• typography study examples

10
Printed portfolio assignment

• color study/background color study example

DIRECTION A HOTStylistic 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)
11
Printed portfolio assignment

• a diagram/flowchart/hierarchy tree that
  demonstrates the full design process on one page

12
Printed portfolio assignment

• icon examples

13
Assignment
Final site due 11.27.06

• Finish your site
• Prioritize your bugs
• 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

14
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

15
(No Transcript)