Week 4 Day 2 - Wednesday, Sept 12 - Homework

1. Brainstorm possible themes you would like to explore in layout design for Project 1. Keep in mind you must use all pre-existing CSS Zen Garden text content, however the visual aesthetic, formatting and styling is completely up to you. Gather appropriate imagery related to your chosen themes and be ready to present this to the instructor next class.

2. Sketch out 3 possible wireframe layouts for CSS Zen Garden project. Wireframe sketches due at start of next class, Monday, Sept 17, 2:30pm.

Sketching and Wireframes

Wireframe Examples

Inspiration Feeds- 25 Examples
Zurb article about wireframe process, tips on design sketches, and sketching with intent/purpose


Flexible Framework and Prototyping
The Future of Wireframes
Foundation 3 --Created by Zurb flexible framework for building prototypes and production code on any kind of device

Project 1: CSS Zen Garden

Download Project 1: CSS Zen Garden project specifications

CSS Zen Garden Galleries
CSS Zen Garden Example 1
CSS Zen Garden Example 2
CSS Zen Garden Example 3

CSS Zen Garden How Tos and Tips

Week 4 Day 1- Monday, Sept 10-Homework

1. Complete Drawing HTML exercise, due by start of next class, Wednesday, Sept 12, 2:30pm. Please be sure to upload this exercise to your class site online.

Drawing Exercise

Using the text copy below and the design layout specifications provided (on dropbox and/or linked here), use HTML and CSS to construct, stylize and format a web document so it looks identical to the design layout.

Due by start of next class, Wednesday, Sept 12, 2:30pm. Please be sure to upload this exercise to your class site online.

Text copy:

Drawing

Drawing is a visual art that makes use of any number of drawing instruments to mark a two-dimensional medium. Common instruments include graphite pencils, pen and ink, inked brushes, wax color pencils, crayons, charcoals, chalk, pastels, markers, stylus, or various metals like silverpoint. An artist who practices or works in drawing may be referred to as a draftsman or draughtsman.

DEFINITIONS

Drawing is a form of visual expression and is one of the major forms within the visual arts. There are a number of subcategories of drawing, including cartooning. Certain drawing methods or approaches, such as "doodling" and other informal kinds of drawing such as drawing in the fog a shower leaves on a bathroom mirror, or the surrealist method of "entoptic graphomania,"; in which dots are made at the sites of impurities in a blank sheet of paper, and lines are then made between the dots, may or may not be considered as part of "drawing" as a "fine art."

The word 'drawing' is used as both a verb and a noun:

* Drawing (verb) is the act of making marks on a surface so as to create an image, form or shape.

* The produced image is also called a drawing (noun). A quick, unrefined drawing may be defined as a sketch.


MATERIALS

Paper comes in a variety of different sizes and qualities, ranging from newspaper grade for practice up to high quality and relatively expensive paper sometimes sold as individual sheets. Papers can vary in texture, hue, acidity, and strength when wet. Smooth paper is good for rendering fine detail, but a more "toothy" paper will hold the drawing material better. Thus a more coarse material is useful for producing deeper contrast. Bristol board and even heavier acid-free boards, frequently with smooth finishes, can also be used for drawings. Acid-free, archival quality paper keeps its color and texture far longer than wood pulp based paper such as newsprint, which will turn yellow and become brittle much sooner.

TONE

Shading is the technique of varying the tonal values on the paper to represent the shade of the material as well as the placement of the shadows. Careful attention to reflected light, shadows, and highlights can result in a very realistic rendition of the image.

LAYOUT

Measuring the dimensions of a subject while blocking in the drawing is an important step in producing a realistic rendition of the aertically can be used to measure the angles of different sides. These angles can be reproduced on the drawing surface and then rechecked to make sure they are accurate. Another form of measurement is to compare the relative sizes of different parts of the subject with each other. A finger placed at a point along the drawing implement can be used to compare that dimension with other parts of the image.


SEE ALSO

List of basic drawing topics

Category:Cartoonists

Color theory

Composition

Week 3 Day 2- Wednesday, Sept 5 - Homework

1. Complete Drawing HTML exercise, due by start of next class, Monday, Sept 10, 2:30pm. Please be sure to upload this exercise to your class site online.

 2. Continue with visual journal blog entries. I will allow posting of creative inspiration (as long original creator is cited) and personal reflections/insights related to your work and or creative field interests.

Flowchart Resources

Lovely Charts (Free Online Flowchart and Wireframe application)
Sample flowchart from Wired.com
Another sample flowchart from Wired.com
Should I make more coffee? Flowchart

Image Copyright Flowchart
Fantastic flowchart diagraming the importance of getting permission to post copyright images online. Created and designed by Pia Bijkerk Erin Loechner and Yvette van Boven.