wats1010-css-zen-garden

This is the source repository for the CSS Zen Garden assignment in WATS1010: Introduction to Web Development. This assignment is designed to allow you to focus on design and presentation. You will create a new visual style for the venerable demo website, http://CSSZenGarden.com. This website has been remade by many web designers and developers over the years (check out their Github repo: https://github.com/mezzoblue/csszengarden.com), with several hundred examples available to look at. You will create a new design for the website, and in doing so you will practice an approach to graphic and interface design.

Requirements

This assignment is broken into two deliverables. For each deliverable, you will need to complete a different portion of the larger task of re-styling CSS Zen Garden.

Part One: Redesign Concepts

First, you must come up with the concept of your new design. Look at the designs featured on CSSZenGarden.com and think about how you would like to approach a redesign of the page. What themes will you play with? What graphical style could you pull off with your current skills?

Please note: You are not being judged on the quality of your graphic design production skills. You should think about design from the user perspective and try to benefit ease of use of the page. At the same time, you should attempt to make the page as visually attractive as possible.

Deliverables for Redesign Concepts:

• Wireframes that show the placement of information on the page
• A written description of your approach to the redesign that outlines:
  • Your overall concept and/or theme
  • How you hope to impact/affect the user
  • Links to inspirational designs you have looked at

Part Two: CSS Zen Garden Redesign

Once you have developed your concept, you will spend another week implementing your designs. You must put together a finished redesign of the CSS Zen Garden page. You may not alter the HTML at all in the CSS Zen Garden index.html file.

Deliverables for Completed Redesign:

• Updated style.css with a complete redesign of CSS Zen Garden
• New style that considers the following:
  • Information architecture/organization
  • Content grouping
  • Appealing graphic style
• Use of advanced selectors to facilitate styles
• Use of interactive elements such as :hover and :focus pseudoclasses
• Use of animate, transition or transform properties to enhance page content