Some fundamental principles of design are alignment, balance, color, contrast, emphasis, movement, pattern, proportion, proximity, repetition, rhythm, texture, unity, and white space.

Robert Motherwell

Words to image: One of the most basic design concepts is the principle of organization…
o Using only 4 squares is a seemingly limited palette to express such diverse words, yet these squares can be expanded into a more comprehensive language by utilizing various design techniques such as: framal reference; touching, overlapping and cropping of forms; direction; repetition and dynamics of positive and negative relationships
o Be careful when positioning objects. Be aware of the hot spots created when two elements are close but don’t touch, or when positioning an element near an edge.
o Space between elements can create tension within design


Goblet or Profile

Notan: The Zen concept that a bowl's essence is the part that is missing corresponds to the graphic concept of negative space...
Space between elements can create tension within design—be careful when positioning objects. Be aware of the hot spots created when two elements are close but don’t touch, or when positioning an element near an edge. Think about cropping images with regard to their shape and proportion on the screen, and the shapes of the elements within the images.

Also, be aware of the shapes your design elements create.
Avoid creating shapes that carry no meaning.
** Conversely, you can use shapes created as a subtle subtext to enhance your meaning.

Fendi Logo

FedEx Logo

Homework:
o Find an example (in the real world, do not create on computer) of great light/dark, positive/negative image and either cut out or photograph & paste in journal... object is to learn to see and not just look.

Color is light: Visible Spectrum
The colors we see in nature are reflections of light on the surfaces around us.

(Courtesy of kaliszincolor.com)

Primary colors
In traditional color theory, these are the 3 pigment colors that cannot be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues: Red, Yellow & Blue
o Red, Green & Blue (RGB) are primaries on light-emitting sources such as TVs and computer monitors.
o Cyan, Magenta, Yellow & Black (CMYK) are the primaries used in the printing process for mechanical color reproduction.

12-step Color Wheel
o Primary: Red, yellow & blue are primaries because they cannot be mixed from any other colors
o Secondary: Two primary colors mixed together resulting in orange, green and violet
o Tertiary (Intermediates): These are the colors formed by mixing one primary and one secondary color.

Three dimensions of color
o Hue: another name for color: Warm colors are‘aggressive’ colors: reds, oranges & yellows while Cool colors are ‘receding’ colors: greens, blues & violets
o Saturation (Intensity, Chroma): the brightness or dullness of a color
o Value (Luminosity): Tint = color + white while Shade = color + black.

Understanding 'harmony':
Personal taste aside, 'the basic principle of color harmonies are derived from physiologically postulated rules of complementaries.' (WHAT!?) Harmony implies balance, and symmetry of forces…'
o Successive contrast: Stare at a green square, now close eyes… What do you see? The eye seeks to restore equilibrium with itself.
o Simultaneous contrast: Gray square atop any pure color... Each color causes the gray to seem tinged with it’s complimentary.
o Successive & simultaneous contrast suggest that the human eye is satisfied, or in equilibrium, only when the complemental relation is established. Conclusion; two or more colors are mutually harmonious if their mixture yields a neutral gray… (Note, not all color compositions need to be harmonious.)

Basic color harmonies & schemes: Best web-based color wheel
o The monochromatic color scheme uses variations in lightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues.
o The analogous color scheme uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme. The analogous scheme is similar to the monochromatic, but offers more nuances.
o The complementary color scheme consists of two colors that are opposite each other on the color wheel. This scheme looks best when you place a warm color against a cool color, for example, red versus green-blue. This scheme is intrinsically high-contrast.
o The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complementary. This provides high contrast without the strong tension of the complementary scheme.
o The triadic color scheme uses three colors equally spaced around the color wheel. This scheme is popular among artists because it offers strong visual contrast while retaining harmony and color richness. The triadic scheme is not as contrasting as the complementary scheme, but it looks more balanced and harmonious.
o The tetradic (double complementary) scheme is the most varied because it uses two complementary color pairs. This scheme is hard to harmonize.

In-class assignment: Stained Glass

Perception & ‘optical mixtures’: Psychology of colors and color in context
o Two important things to consider:
1. Impact of any one color on it's own, and the meaning or mood of a color (think, for example, of how you feel about bright red as opposed to how you feel about a subtle smoky gray).
2. Affect or impact of color on color or color in the context of other colors.
o Made from "Dots"; Pointillism; Chuck Close

Homework: Find a palette/color schemes that captures your attention (from real world or printed image) and translate it into a 5-step diagram (Consider key color, contrasts and harmonies).
o Bring in samples of text treatments in larger sizes, magazines, posters, postcards, newspapers

Pop Quiz Download

Text: Size & Measurements (.swf)
Points: In the American point system, the height of the face of the type is stated in very tiny unit called a point. There are about 72 points to an inch.
Picas: Since the point is so small, printers use picas to measure space. Graphic designers use a ruler frequently called a pica rule. There are 12 points to a pica, so 6 picas to an inch.
Ems: Off to Wikipedia for the best explanation I've found....

Body Copy: Nifty text tool
Leading is the vertical space between lines of text. Comes from lines of lead placed between rows of text in typesetting.
Kerning is the adjustment of space between individual letters.
Tracking is the average horizontal space between all of the letters in a word (or on a line)
Baseline shift measures the distance between the letters and the base line (up or down)
Spacing & alignment: Left aligned, Centered, Right aligned, Justify

Type Do’s & Don’ts:
Do: Go for harmony. Work with one type face, and vary elements from the family (bold, u&lc, italics) or color.
Do: Strive for contrast. While more than two completely different type faces can be hard to balance, utilize other design techniques to create dynamic and interesting hierarchies of information; size, weight, structure, direction, color
Don't: Use two typefaces from the same classification - they will be so similar as to confuse.
Don’t: Use display type for body copy (serifs are the norm especially in print)
Don’t: Listen to advise, experiment and define your own style and taste.

Of Interest:
Russian Constructivists (Avant-Garde)
A documentary on the designer David Carson

Homework: Text as narrative
Choose one word from the list provided. In the first box, arrange the word to express its meaning using only the typeface Arial. You can vary the point size, spacing, placement and orientation of the letters. You can execute the project by tracing, cutting and pasting photocopies or by using a computer (or any combination of these methods).
In the second box, use any combination of typefaces (fonts) you want to communicate the meaning of the word. Again, you can vary point size, weight, direction and placement of letters but the emphasis on the concept should rest on the type style selected.

Resources:
Free fonts
LinoType
Emigre
Logotype

Collage (to stick), montage (to mount) & assemblage (to bring together): all describe an image that has been created from a combination of sources and materials.

Décollage in art, is the opposite of collage ("décollage" translates into English literally as "take-off" or "to become unstuck."); instead of an image being built up of all or parts of existing images, it is created by cutting, tearing away or otherwise removing, pieces of an original image -- thereby introducing a new collage of images

A similar technique is the lacerated poster, a poster in which one has been placed over another or others, and the top poster or posters have been ripped, revealing to a greater or lesser degree the poster or posters underneath. The lacerated poster was an artistic intervention that sought to critique the newly emerged advertising technique of large-scale color advertisements. In effect, the decollage destroys the advertisement, but leaves its remnants on view for the public to contemplate.

Collage made from photographs, or parts of photographs, is called photomontage
Photomontage is the process (and result) of making a composite picture by cutting and joining a number of photographs. The Dada movement in Berlin was instrumental in making montage into a modern art-form. Major exponents were John Heartfield and Kurt Schwitters.

Parallel to the Germans, Russian Constructivist El Lissitzky, a Russian artist, designer, photographer, typographer, and architect. He was one of the most important figures of the Russian avant garde. His work greatly influenced the Bauhaus movement and would go on to dominate 20th century graphic design as a whole.

One American designer greatly influenced by the work being done my modern artists in Eurpoe was Lester Beal.

In class assignment Surrealist artists have made extensive use of collage. Surrealist utilized numerous unique techniques and games to provide inspiration. Many of these are based on free association as a method to free oneself of conscious control. The importance of the subconscious as a source of inspiration is central to the nature of surrealism. Cubomania is a collage made by cutting an image into squares, which are then reassembled automatically or at random.

Leading the viewer’s eye: A composition may be broken down by reads.
o Images, positive & negative, silhouette
o Scale/Size of various elements
o Line: curved or straight
o Shape: the basic primitive shapes are rectangle, circle and triangle (shape is anything that has height and width)
o Texture is the look and feel of a surface
o Space is the distance or area between or around things (distinguishing figure and ground).

Gallery & Links:

Collage today: Works done in collage are often called ‘mixed media’ (think multi-media).
o Creating a photomontage has become easier with the advent of computer software such as Adobe Photoshop and digital cameras.
o Don’t stop at photos. Use sound, motion & video (as appropriate) to add texture and meaning of your designs.
o Multi-Media artist, Annette Weintraub.
o Photomontage.com

Homework: Collage as technique, collage as narrative.
Using any method discussed above that you want, work in electronic or print, photographic or animation, typographic or 3D, visualize:
o ITP (no type)
o Financial stability
o Natural and clean

11am-12pm

• Symmetrical Balance would be described as a central axis dividing the composition in the middle, horizontally or vertically, with the same design on both sides, what we would think of as a mirror reflection. Symmetrical balance guarantees left to right balance, which is the most important aspect of balance. Top to bottom balance is also important. Most images seem more stable if the bottom seems slightly heavier. If the top seems too heavy the composition can look precarious. EXAMPLES: Near Symmetry, Inverted Symmetry, Biaxial Symmetry
  
  
• Asymmetry means without symmetry. That by itself has nothing to do with balance. It just means that there are no mirror images in a composition. The term, however, is usually used to describe a kind of balance that does not rely on symmetry: asymmetrical balance (informal balance). A small visually interesting object can balance a much large less interesting object. Negative space has visual interest if used properly. EXAMPLES:
  

Basic elements of design:
o Visual language involves the use of graphic elements to lead the viewer’s eye. One way to achieve balance that is almost a formula is to have more or less equally interesting things randomly distributed throughout the format.

• Line: Lines are one of the basic elements of design. Alone or in combination with other lines or shapes they can aid in the readability, appearance, and message of a design. Use lines to organize: create contours, divide space, decorate. EXAMPLES:
  
• Shape: We have already worked with the element shape... There are many different kinds of shapes. Two general categories for shape are: mechanical and organic. Mechanical shapes are those made with straight lines, circles and a ruler... These are man made shapes sometimes called geometric shapes. Organic shapes are shapes found in nature... the shapes you draw freehand. They are generally complex and have a natural, spontaneous feel to them. EXAMPLES:
  
• Size/Scale: A common practice to create emphasis is to use different sizes or weights. Mass equals size. Each piece you create has a physical mass. Additionally, each component of the design have their own mass relative to the whole piece. For example, a photo that is physically 3 inches by 5 inches can appear smaller or larger depending on the physical size of the paper it is printed on and the size and proximity (closeness) of other items on the page. EXAMPLES: Warhol.org vs Missing Pixel
• Texture: Literally, texture means the sensations we get by touch. We may also add visual textures through the arrangement of lines and shapes or the use of photographic images of specific surfaces. There are two kinds of texture: tactile and visual. EXAMPLES:ch.am.p
• Color: When color is used in a layout, it causes that part of the layout to attract attention. Color can have a strong emotional and psychological impact on the reader. Yellow, orange, and red are considered warm colors and often denotes aggression, excitement, and danger. Blue, green, and violet are considered to be cool colors and are associated with nature and passiveness. EXAMPLES:pixeleden.com

In-class assignment: For this project avoid using the center of anything as a reference for placement.
o Make an asymmetrically balanced collage using only circles, triangles and/or rectangles. The shapes can overlap or be trimmed to make new shapes. Up to four colors may be used. Try creating a flow or rhythm in the composition. The shapes should look like they are placed in relationship with each other and not just randomly distributed. Apply what you've learned from earlier projects to control the figure/ground relationship and color combinations.Do a sketch first to experiment with your ideas for layout, then select your colors and cut your shapes.

Visual interest is what you balance in design. Different colors, shapes sizes, etc. create different degrees of interest. It is the distribution of this interest that you need to control.

• Repetition & Rhythm: repetition creates consistency across multiple pages and visual unity throughout a piece by repeating visual elements (colors, shapes, textures, etc.) and styles. Repetition in design reinforces your message, provides consistency, and creates familiarity. This is especially important on the Web site since it is so common to follow links off-site. The repetition of similar or varying elements in a design can set up a visual rhythm, setting up a pace for the viewer’s eye to follow through a design. Rhythms can be calming or disruptive. EXAMPLES: Stylegala.com
  
• Contrast & Opposition: As a contrast to repetition, which can become boring when over used, contrast serves a function in design by presenting differing elements for comparison from which meaning can be derived. Contrast can happen in a variety of ways: contrast of size, color, texture, proximity, value & type. EXAMPLES:
  
• Emphasis: Designers can create unity in their designs by creating a single focal point. This focal point would be used to direct the user’s attention to the most important element in the design. Focal points can be created by use of any of the elements mentioned above, as well as placement. Remember that we live in a left-to-right reading society. The viewer’s eye naturally travels from the top left to the lower right... You can use this knowledge to place important design elements in that path. EXAMPLES: West Elm vs Home Decorators
• Unity: Unity exists when elements look like they all belong together. Symmetrical images have a strong sense of unity because at least half of the image is repeated... At the same time they lack variety because only half is unique. Unity without variation can be uninteresting. Unity with diversity generally has more to offer...EXAMPLES: Tim Benzinger
  

Homework: Book cover redesign – from the example below, use all of the same text elements (headline, subhead and author name) and any graphical elements you deem appropriate to create a unified design (symmetrical or asymmetrical) - utilizing as many of the design principles from the list above to achieve your goal. Link to Amazon

Grid design systems: A grid is made up of a system of rectangles, the borders of which determine the location of various elements in a layout. Books, cities, multi-media interfaces, and buildings are all examples of things that are laid out on a grid.

• Historically, typographic grids have served as frames for blocks of text. Consider the margins of the typical book with pristine white borders surrounding a solid block of black/grey text. Single column layouts still remain the most common book format.
• In the 19th century the multi-columned, multi-media pages of newspapers and magazines challenged the traditional layout of the single column book and it's bounding frame. By questioning the protective function of the frame, modern artists and designers unleashed the grid as a flexible and systematic creative tool. By describing the expansion of space in all directions, the modern grid moved past the classical frame of the page.Examples: Thinking With Type
• Margins & Alleys (ground & foreground): Margins define the outside boundary of a page/screen. They frame the content of your layout. Margins may not be equal all around but are normally consistent from page to page or screen to screen. When you divide the interior space of your layout into uniform parts the space between units are alleys. Depending on how you've set up your grid the alleys may run horizontally, vertically, or both directions on your layout. Sometimes the use of a grid is obvious to the audience, sometimes it is invisible. Bear in mind the effects of a prominent grid on a design and the impact on the user.

Generally, a grid should be based on a rectangle two of whose sides are slightly longer than the other two. Some rectangles are more pleasingly proportioned than others. The format for a rectangle that has been used over and over for centuries was first devised by the Greeks, kown as The Golden Mean or Golden Rectangle. The Golden Rectangle may be subdivided into more of its own proportions... that is proprtionately decreasing sqaures can be created using the golden mean. Mathematically, the ratio of the short to the long side is about 1 to 1.618. The Greeks considered these proportions the epitome of natural beauty. The Parthenon was based on this ideal shape.

• The golden rectangle and the golden ratio sometimes pop up in nature. The Fibonacci Spiral is a spiral which comes from the golden rectangle, which is very close to the shape of the shell of a chambered nautilus. This figure is self-similar, each part is similar to smaller parts and larger parts. This makes it a rudimentary fractal...
• Some designers live by grids and the idea of an ideal to achieve balance and untiy in design. Grid design is highly utilized in print, mostly newspapers and magazines and even the Golden Section in book design

In-class assignment: One grid, many solutions. Adhere to the grid and use every square, by omission or inclusion... consider the grid lines themselves (alleys and gutters) and the white space they create as a part of the overall design and layout. Endeavor to create a balanced design by utilizing the principles of contrast we discussed last week such as scale, texture, repetition, etc... Combine boxes as desired.

Grid design for the Web: Grids can be used to establish a consistency in screen designs as content changes. The grid underlies the elements which appear on the screen, without being seen, and gives the user a sense of where to look for various elements as content changes. This makes information easier to extract from the design, since once the user knows where to look, they don’t have to think about where to look to find something out. For this reason, certain kinds of recurring elements should hold the same position from screen to screen (such as logos, back buttons, close or exit buttons, etc).

• The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing the most important elements within those thirds. Over the past several years we've seen a rise in certain grid configurations which are all based on the amount of columns. Usually 2 or 3 column layouts - These grids have quickly become a convention.

Homework: Download this template and this Word file, then working in either Photoshop, Illustrator or with paper and scissors redesign one page of the ITP web site as per the instructions.

<
• If you have not done so already, go to Blogger.com and create a site for yourself.
• Enjoy Spring break, see everyone back on 20th.

Themes: In computing, a theme is a preset package containing graphical appearance details, used to customize the look and feel of an OS (think wallpaper), widget set or layout. Graphics themes for individual applications are often referred to as skins, and the words may be equivalent.

Templates: A template is some form of device to provide a separation of form or structure from content. In publishing for example, a template may be a predefined layout to give you an idea what to write where with boxes and lines; a letterhead template for example availve in (MS Word), might have a specified column width, specifc text treatment, space for a picture and/or logo and gaps for addresses and other related info. Web templates are ready-made web design used to mass-produce "cookie cutter" websites for rapid deployment. Examples:
• BigBlackBag.com
• freesitetemplates.com

CSS or, Cascading Style Sheets is a W3C programming language. It allows web site designers to create formatting and layout for a web site independently of its content. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows greater control of your website layout and makes your pages faster and easier to update.
• HTML vs. CSS & XHTML

HTML:

XHTL:

CSS: View the stylesheet for the newest version of this layout.

Examples:
• bluerobot.com
• CSS Zen Garden

Plug-ins:

Customizing Blogger:
• Design Sponge
• Ex-votos

Homework: "Hacking" Blogger
• If you have not done so already, og into Blogger and create new blog
• Create blog name
• Select a template/theme
• Go to “Theme” tab
• Work with Bbedit, copy style sheet/template and save into Bbedit
• Everything between the "style""/style" tags are open for modification
• To add links, scroll to the bottom of the style sheet to the header that says “MainOrArchivePage”, find the “h2” tag that defines “Links” and add/replace as desired.
• To change header artwork, scroll top where it says “/*Header”, “background” and replace URL.
• Change background color
• Change link color
• Change letter spacing

Why Accessibility Is Important: (thanks to accessify.com)
Because there is a significant proportion of people using the web who have one kind of disability or another. Making a site accessible to everyone is just the right thing to do.

• Visually Disabled Users: Visually disabled users ranging from color blind to fully blind have problems with images that do not provide a text description of what they show. Without a text description a user who can't see an image has no way of knowing what it is or what it represents. These users also have problems understanding sites that are not logically built when "viewed" using a non-visual browser such as a screen reader. A screen reader is a Web Browser that reads Web sites out loud so as to make them accessible to visually disabled users.

• Hearing Disabilities: In a similar way to visually disabled users not having any way of understanding an image, users with hearing disabilities have no way of understanding information that is communicated with sound, unless an alternative is provided that does not use sound, such as a text description (transcript) or an image.

• Physical Disabilities: Have you tried using a Web site without your mouse? Unless you were lucky with the site you chose then you probably found it very difficult. Physically disabled users are often incapable of using a mouse. Unless these users needs are taken into account when creating Web site navigation and input methods physically disabled users will sometimes find a Web site completely inaccessible.

• Cognitive and Neurological Disabilities: Web sites can be complex, and finding the information we want can be difficult for the most able of us. This is not helped by sites that use an overly complex design, navigation that works differently on different pages (inconsistent) and distracting repetitive animation. All of these problems are compounded for users with Cognitive and Neurological Disabilities and this makes some sites completely inaccessible for them.

Beyond Disabilities:
Accessible Web Design has benefits for other users too. Because going through the process of making a web site accessible makes a better site. A lot of the things you have to consider, and techniques you'll apply, will make your site easier for everyone to use. As such, making a website accessible is also a good business practice. Let's see who else can benefit.
• Users of mobile phones, Web-TV (slim browsers),
• Low bandwidth users,
• Users with "screen glare",
• Users who are driving,
• Users with a low literacy level,
• Second-language access and
• Dealing with accessibility issues also improves:
• Page transmission and site maintenance,
• Machine indexing of content and as such searching of content (SEO)

Accessible design means greater usability for all
"Accessibility" is used to describe how easy something is for everybody to use, regardless of impairment or disability. It is important for web designers to understand what can make sites difficult for some people to access, and what we can do to make it better.
• Greater usability for man and machine.
• Disabilityinfo.gov

WAI: (W3C Web Accessibility Initiative)
• Guidelines

Legal Requirement:
For certain Web sites, addressing accessibility can be a legal requirement. This is usually for government sites but can affect others. For more information on the requirements in different countries see the W3C page Policies Relating to Web Accessibility.
• US Government accessibility standards (Section 508) and accessibility over accommodation.
• Section 508 verifier, Cynthia Says

Screen readers:
• Demo Apple's "Univeral Access"
• JAWS for Windows
• Lynx browser

FYI:
According to current figures disabled users currently make up around 10% to 20% of the population in most countries. The average age of the population in many countries is also increasing. Aging results in a number of accessibility issues including vision and hearing changes and changes in dexterity and memory. If your market includes a significant number of elderly users then you can increase that 20% to a much larger percentage of users who will reap the benefits of accessible Web Design.

Homework:
Be prepared to present to the class what project you will be working on for your final project. Be it a website, application interface or digital video. The project should be screen based (any screen) and utilize several graphical elements such as typography, images and or animation/motion.

Traditionally colors are represented on a wheel of 12 colors: three primary colors, three secondary colors and six tertiary colors. Harmonious colors are colors that work well together, that produce a color scheme that looks attractive. Complementary colors are colors directly across from each other on the wheel. These are typically colors that will produce a strong contrast.

Warm colors are all those that have a yellow undertone, such as bright red, oranges, yellows, and are typically thought to express warmth, comfort, and energy. These colors also tend to make things stand out and advance towards you from the page or screen. Cool colors have a blue undertone, and include violets, blues, and greens. When they are used together, cool colors seem to move away from the viewer, and express coolness, stability, and calmness.
• webexhibits.org
• colorschemer.com
• lynda.com

Type: Typography is the art & technique of setting written subject matter in type using a combination of fonts, point size, line length, leading (line spacing) and letter spacing. One of the most effective tools a designer has in his/her reserve is typography. etc. http://en.wikipedia.org/wiki/Typeface
• thinkingwithtype
• typetester
• abstractfonts.com

A raster graphics image, or bitmap, is a data structure representing a generally rectangular grid of pixels, on a computer monitor. The color of each pixel is individually defined. Raster graphics are distinguished from vector graphics in that vector graphics represent an image through the use of geometric objects such as curves and polygons.

The quality of a raster image is determined by the total number of pixels (resolution), and the amount of information in each pixel (often called color depth). For example, an image that stores 24 bits of color information per pixel can represent smoother degrees of shading than one that only stores 16 bits per pixel. Likewise, an image sampled at 640 x 480 pixels will look rough and blocky compared to one sampled at 1280 x 1024 Because it takes a large amount of data to store a high-quality image, data compression techniques are often used to reduce this size for images stored on disk. Some techniques sacrifice information, and therefore image quality, in order to achieve a smaller file size. Compression techniques that lose information are referred to as "lossy" compression.

Popular graphics file formats
• Joint Photographic Experts Group: JPEG is used extensively for photos and other continuous tone images on the web. Uses lossy compression by trying to equalize eight by eight pixel blocks; the quality can vary greatly depending on the compression settings.
• Graphics Interchange Format: GIF is used extensively on the web. Supports animated images. Supports only 255 colors per frame, so requires lossy quantization for full-color photos (dithering); using multiple frames can improve color precision. Uses lossless LZW compression, that used to make GIF avoided sometimes due to patent issues concerning LZW.
• Portable Network Graphic: PNG is an image format with lossless compression, offering bit depths from 1 to 48. It was mainly designed to replace the use of GIF on the web.

Layout Resources:
• thecounter.com
• webmonkey.wired.com
• eyetrack

Development: CSS & XHTML
• w3schools.com
• Designing with CSS

Concept Design:
• Bauhaus History
• digitalmash.com
• mikeindustries