CSS Zen Garden Project: Creating an Engaging Visual Design - Prof. Barton Tyner, Study Guides, Projects, Research of Typography

Download CSS Zen Garden Project: Creating an Engaging Visual Design - Prof. Barton Tyner and more Study Guides, Projects, Research Typography in PDF only on Docsity! Spring 2009 CSS Zen Garden Project Due date: Wednesday, March 18, before midnight. Online critiques due: Friday, March 20, before midnight Objective To create an original, engaging visual design following the CSS Zen Garden model at http:// www.csszengarden.com/. Techniques such as CSS positioning for page layout, descendant selectors, background imagery, and image replacement will be emphasized. Project Schedule • Design brief due—Monday, Feb. 16, before class • Demonstration/Lab time—Wednesday, Feb. 18 • Demonstration/Lab time—Monday, Feb. 23 • Demonstration/Lab time—Wednesday, Feb. 25 • Demonstration/Lab time—Monday, March 2 • Project due—Wednesday, March 18, before midnight • Online critiques due—Friday, March 20, before midnight Design Brief Write a one-page overview that addresses the following aspects of your design: • Design theme/approach—Describe the overall approach. How will your design be unique and engaging? What are your sources of inspiration? • Typography—Explain your selection of typefaces for both graphic display type (banner and headings) as well as HTML text. Address how you will use type to establish/reinforce visual hierarchy (relationship of display text, headings, and text content). • Imagery—Discuss sources of imagery. Address use of display imagery as well as decorative/accent images. How will image choices and treatments be used to reinforce the overall design? • Color palette—Identify specific primary and secondary colors in their hexidecimal values (e.g., Dark blue #003399). Describe how you plan to use these colors. Be sure to address color application for the various link states. • Layout—This can be either a digital or hand-drawn sketch. Study the HTML closely and identify the key “div ID” areas of the page. Indicate their location in your layout sketch. How will you utilize “empty,” or “white,” space in your design? Expectations Your CSS Zen Garden project will be assessed on how well you satisfy the following criteria: VCD P374 Computer Art and Design II VCD P374 Computer Art and Design II—Spring 2009 1 Spring 2009 • Create an engaging design through effective use of layout, imagery, color, and typography. • Stylize all HTML elements. Do not leave any HTML elements at their default browser styles. • Provide individual as well as sufficiently contrasting link styles for the a:link, a:visited, a:hover, a:active states; i.e., each link state should be stylized and easily recognizable. • Successfully use either float and/or position techniques to control the page layout. • Incorporate CSS background images for various <div> and other HTML elements. • Use an image replacement technique for all headings (<h1>, <h2>, and <h3> tags) to replace HTML heading text with graphic text. • Fully optimize images in Adobe Photoshop. Maximize cropping and compression to achieve the smallest possible file size while maintaining acceptable image quality. Images should be saved at 72dpi. • Keep the index.html, zengarden-sample.css, and all image files you create in the same folder (i.e., no subfolders or paths). You may not edit the .html file. • Create near-identical presentations in the latest versions of both Internet Explorer and Mozilla Firefox. • Validate your pages for proper use of CSS. Use the CSS validator at http:// www.w3.org/. Note: You may ignore CSS warnings. Critiques You will give critiques of each other’s work through Blackboard Vista. Online discussion will constitute 10% of your mid-term project grade. Instructions • Download the HTML and CSS files from Blackboard Vista or the course companion site. Save these files (index.html and zengarden-sample.css) in the same folder and use Dreamweaver to edit the CSS file. Do not change file names or edit the HTML. • Design your page by editing the sample CSS file. The file contains initial styles that you ultimately change to suit your design. Alternatively, you may want to begin completely from scratch. • Publish your final work to your personal Web space (either via FTP or directly to your network space located on your I: drive). VCD P374 Computer Art and Design II VCD P374 Computer Art and Design II—Spring 2009 2