CSS
Zen Garden
You will have majority of the semester to create a CSS Zen Garden project to help you better understand the power of what can be accomplished visually through CSS-based design. Your goal is to design a layout that visually represents what zen means to you. You will be expected to submit your project to CSS Zen Garden so it would be beneficial to closely review submission guidelines.
You must ftp and present your two design concepts by June 7.
You must submit your project to CSS Zen Garden (submission guidelines) and ftp to the valencia web studio for in class presentation by July 26.
Comprehensive Designs
Once these initial steps have been completed, you are ready to mock up your site design. You may use Photoshop (or your design program of choice) to create your comprehensive designs. Your designs comps should closely resemble your plans for your final functional design. It should be work you'd be proud to show a client. For this project you are to propose a minimum of two concepts (2 pages total). You must ftp your design comps by the project design comp due date. Keep in mind the following web design factors when designing your project:
- Color scheme
- Typography
- Style & Use of imagery/graphics
- Navigation - is it usable? Have you considered rollover effects?
- Content Organization. Group relevant topics together, use columns rather than having one huge body of text.
- Text. Text areas generally should never be longer than 365px wide. (Line length article: Web style guide) Use headings & subheadings to help emphasize areas of interest.
- Target audience
- You must use five hand rendered elements
- Concept - the "idea" behind your design. What is your zen?
-
to recieve the full credit for concepts you must present both comps for concept 1 & 2 and be totally different looks.
Technical Requirements
You must demonstrate your proficiency with Dreamweaver, XHTML & CSS during this project. Keep in mind the following guidelines prior to uploading your projects:
- You must download the example html & css files available at CSS Zen Garden
- You are not allowed to edit the HTML at all.
- Name your images descriptively.
- You will have only one html page which must be named "index.html".
- Use all lowercase letters for naming, and avoid special characters and spaces (except for hyphens and underscores, which are OK).
- File optimization. (appropriate file size, file format, & image quality)
- Put your images in an /images/ subfolder to keep your site organized.
- Check all your links and pages to ensure they work correctly before you are done.
- Navigational elements must have rollover effects (javascript or CSS)
- Correct use of html/css syntax
- Proper use and set up of CSS Positioning
- The site must demonstrate proper CSS formatting. Name all CSS rules (NO .style1, .style2, .style3)
- Your html file must meet the requirements of CSS Zen Garden.
- Your host directory for this project is zen
| Name: | Date: |
| Deadlines | (30 pts) | ||
Design comps due by specified date, quality, design and |
|||
| Design Considerations | (40 pts) | ||
Design Improvements |
|||
| File Organization | (5 pts) | ||
| Proper naming conventions | (4 pts) | ||
| File organization (separate directories for assets, images, css) | (6 pts) | ||
| File Optimization | (5 pts) | ||
| Appropriate file size, file format, image quality | |||
| Technical Considerations | (50 pts) | ||
Meets the requirements of CSS Zen Garden |
|||
| Presentation | (10 pts) | ||
FTP site (Do NOT FTP source files (photoshop, illustrator, flash) |
|||
| Total: | (150 pts) | ||