Week 6 Day 2 - Wednesday, Sept 26 - Homework

1.Revise design layout for Project 1: CSS Zen Garden. We will go over Slicing and image optimization demo next class.

2. Work on Marcel Duchamp Exercise. Due by Friday, Sept 28, 6pm.

3. Keep up with weekly visual journal (blog) entries.

Week 6 Day 1 - Monday, Sept 25 - Homework

1. Continue working on design layout for Project 1: CSS Zen Garden. Keep in mind all visual content must be completed for review by Wednesday, Sept 26, 2:30pm.

2. Work on Marcel Duchamp Exercise. Due by Friday, Sept 28, 6pm.

Marcel Duchamp Exercise

Using the Marcel Duchamp Demo resources in the DropBox, create an HTML and CSS documents, when viewed in a web browser looks identical to the Marcel Duchamp design layout (below). Due for review on your website (link posted to index.html) by Friday, Sept 28, 6pm.

Marcel Duchamp Design Layout

Marcel Duchamp Design Specifications

Helpful HTML/CSS demos
http://w3schools.com/tags/tag_div.asp
http://w3schools.com/html/html_layout.asp
http://w3schools.com/css/css_boxmodel.asp
http://w3schools.com/css/css_margin.asp
http://w3schools.com/css/css_padding.asp
http://w3schools.com/css/css_positioning.asp

Week 5 Day 2 - Wednesday, Sept 19 - Homework

1. Continue working on design layout for Project 1: CSS Zen Garden. Keep in mind all visual content must be completed for review by next Wednesday, Sept 26, 2:30pm.

2. Keep up with weekly visual journal (blog) entries.

Design & Usability Resources

The What, Why and How of Textures in Web Design

Visual Direction (great article that addresses design choices and its influence on usability)

Understanding the F-Layout

Jakob Nielsen (usability expert)

PSD Tuts Basic Tutorials

Type Tool Basics

Selection Tool Basics

Layer Basics

Week 5 Day 1 - Monday, Sept 17 - Homework

1. Begin design process for Project 1: CSS Zen Garden. Keep in mind all visual content must be completed for review by next Wednesday, Sept 26, 2:30pm.

2. Post PDF of Design Layout completed in class for Enso Florists to your personal website.

3. Using your knowledge of HTML and CSS techniques, be sure to spend a little outside class time personalizing your class website (add images, change font properties, etc.)

Text Tag Examples from Wednesday, Sept 12

Text Tag Example (HTML File) from Sept 12

View Text Tag Example from Sept 12

Lecture on Social Media by Nick Schwartz this Thursday

When Thursday, September 13, 2012, 5:00 – 6:30pm
Where JEB (Janssen Engineering Bldg) Rm 104

Social media expert Nick Schwartz will look at the mechanics of how businesses participate in the social space. He will break down the key differences of small and enterprise level businesses engaging in social while taking a deeper look at some winning tactics. You'll come away from this lecture with a better view of the social life cycle form the prospective of a brand community manager to how a consumer perceives a brand voice.

Sponsored By College of Art and Architecture 

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.