Project+2

=Project 2: Grids, Content and Conversations (30%)= toc The layout of a two dimensional surface is a graphic design convention that has been thoroughly developed throughout Modernism. In graphic design, grids are often used as an underlying formal structure that helps designers achieve unity, continuity, modularity and precision in their work. The presentation of static pages in a compelling layout is format that graphic designers can apply in their designs for the web.

Web documents present a new twist for graphic designers to consider. Designers have to re-think their strategies to meet the demands of the medium while achieving aesthetic qualities in the screen based world. While some of the static conventions apply, the medium of the web has its own constraints and opportunities, in both function and form. The web has it's own internal logic that designers need to work with and understand.

In Project 2 students will learn to work with Cascading Style Sheets (CSS) to design a web presentation of the content developed in Project 1. By concentrating on an interesting aspect of the Concept Map, individuals will develop a scope of the topic as the focus for this project.

CSS introduces the notion of separating content and form. This powerful aspect of the medium has advanced graphic design on the web, with much greater control of layout and typography.

[|Blueprint CSS] is an open source set of CSS classes that we will be using to do project 2. Once understood, you will be to use a grid to design layouts, typography and forms with far more control than is achievable in static HTML pages. By using the blueprintcss classes, you will have your own toolkit for creating well-designed web pages quickly and intuitively.

Process

 * begin by focusing on an area of your concept map to investigate further
 * research/acquire/develop additional content including text copy, images and possible video/sound
 * develop information structure .... like concept map, what are the more inclusive broad topics and more fine-grained, detailed concepts. This will help define the hierarchy and navigation to be visualized in a site map diagram
 * design layout with visuals for fully realized comps
 * integrate layout into CSS/HTML formats

Deliverables
These items are to be posted on the wiki during development:
 * research work (include bibliography)
 * site map diagram
 * layout screen shots

For final submission:
 * completed and well organized process work on wiki (above items)
 * functional HTML/CSS project ( to be submitted to instructor's digital locker dropbox)

Week 1
Jan 24 Sec P, Jan 29 Sec M and N

//in class// //at home//
 * introduce Project 2, scope Project1 content
 * CSS-HTML, anatomy of CSS
 * Blueprint CSS framework, software tools
 * mapping, diagramming flow, navigation
 * generate and refine content (visual and text)
 * develop initial site map diagram
 * storyboard visual layouts

Week 2
Jan 31 Sec P, Feb 5 Sec M and N //in class// //at home//
 * discuss and review topic scope, diagram, layouts
 * more on CSS
 * refine content as needed
 * develop visual comps in Photoshop/Illustrator

Week 3
Feb 7 Sec P, Feb 19 Sec M and N //in class// //at home//
 * review visual comps
 * layout using HTML/CSS
 * refine layouts in CSS/HTML

Week 4
Feb 21 Sec P, Feb 25 Sec M and N //in class// //at home//
 * review and discuss project
 * studio work time
 * complete project

Week 5
Feb 28 Sec P, Mar 4 Sec M and N
 * Project 2 due
 * Introduction of Project 3