1 / 14

art 249 :: interface design II

art 249 :: interface design II. week 16 :: a. :: in-class examples. Douglas Bowman’s CSS Zen Garden design process: http://www.stopdesign.com/articles/design_process/ Raid on Deerfield website process http://1704.deerfield.history.museum/about/howto.jsp

domingoj
Download Presentation

art 249 :: interface design II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. art 249 :: interface design II week 16 :: a

  2. :: in-class examples • Douglas Bowman’s CSS Zen Garden design process: • http://www.stopdesign.com/articles/design_process/ • Raid on Deerfield website process • http://1704.deerfield.history.museum/about/howto.jsp • http://1704.deerfield.history.museum/about/howto_design.jsp

  3. :: in-class examples • A Design Method by Ross Olson • http://www.alistapart.com/articles/method/ • Grey Box Methodology by Jason Santa Maria • http://www.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php

  4. :: today’s agenda • Today is a working day • work on your portfolio entry for your web site • work on any sketches that you need to “clean” up • scan your sketches, then clean them up in Photoshop • design your 8.5 x 11 layout for your chosen portfolio items • what is the narrative of your portfolio entry?

  5. :: in-class project • 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. :: in-class project • 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

  7. :: in-class project • 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 michi’s layout as an example 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. :: in-class project • 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. :: in-class project • typography study examples:

  10. :: in-class project • 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)

  11. :: in-class project • a diagram/flowchart/hierarchy tree that demonstrates the full design process on one page

  12. :: in-class project • icon examples:

  13. :: last homework assignment due :: 12.07.05 • Portfolio entry item • 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

More Related