Lecture presented 022411
Karen Gutowsky
Seattle Pacific University
Co-Chair, School of Art
Professor, Visual Communication Design
C O N T R A S T
When thinking and analyzing design attributes, contrast plays one of the biggest roles in design decision making. It helps us understand how to move through a space. It helps guide the viewer, helping them to understand hierarchy of information. Visually we always go to the point on a compostion (website) that has the highest point of contrast.
Types of contrast:
Size | A guick way to achieve contrast is through size. You can make something larger in comparison to something smaller, this is called scale or proportion.
Value | When we alter value (the dark and light attributes of color) we change the contrast of the layout or image. This will change the way we see the image. The first part of an image we look at has the "highest point of contrast". This is the place on the image that has the greatest change in value.
Color | Because color has warm and cool attributes it evokes different contrasts of color. All warm colors advance, meaning we see these colors first and cool colors recede. But this is reletive, for example, if you have all blue colors which are cool then the blue with the most warm (yellow) attributes will advance within the space.
Position | When we look at design layouts often we are searching for both the positive and negative space within a compostion. The negative space (often called the "white space" is as important as the space used by text and image. By looking at how we position information we can create contrast that helps guide the user.
The Principle of Contrast in Web Design, Posted by Henry Jones on Feb 3, 2010
_______
C O L O R
In design, color is always used intentionally. Desginers often use color combinations based from the color wheel system, using combinations of primary, secondary and tertiary hues to ascribe color to a website. For example, in creating this page I used a complementary color combination of Red/Green (palette was altered with value-shade and tint). Color combinations inherintly relate to each other and enable rich full color images to contrast from a background combination.
Types of color combinations:
Monochromatic | Colors that are shade or tint variations of the same hue.
Complementary | Those colors across from each other on a color wheel.
Split-Complementary | One hue plus two others equally spaced from its complement.
Double-Complementary | Two complementary color sets; the distance between selected complementary pairs will effect the overall contrast of the final composition.
Analogous | Those colors located adjacent to each other on a color wheel.
Triad | Three hues equally positioned on a color wheel.
_______
S T R U C T U R E
Structure plays a key role in design. Designers often employ a grid when laying out and structuring a page. I encourage interactive designers to create a "grid" for layout before they move into a "wireframe." Once they have laid out the page using the grid a wireframe can then be employed around the grid. The way I seperate this is a grid is for design layout, a wireframe is a technical layout.
Developing a Grid | The first mistake a designer can make is to simply choose a unit of measurement from their computer program and mark out a default grid. The challenge of this is that there are too many units creating an "overall" look and not really giving the designer structured points to work off of. The most important aspect of a grid is that we can see the underlying structure of the grid (ie transparent to the content)
Horizontal and Vertical Stress Points | A good grid employs both horizontal and vertical stress points. By emphasizing these axises the user is able to easily navigate and understand the hierarchial structure of the page. Once a grid loses these stress points the layout becomes "over all" and weakens the understanding of content.
Mathematical and Proportional Relationships | The eye loves pattern, and when we use a grid structure that has mathematical and proportional patterns we reinforce rhythm and unity. When we break this structures we create visual discord which can cause disinterest from users. Some of these relationships are whole units 1:2, the fibinocci series (1, 2, 3, 5, 8, 13...) or the golden section.
Grid-Based Design: Six Creative Column Techniques, by Sean Hodge
_______
T Y P E
When designing websites type plays a crucial role in how users function throughout a site. When ascribing type here are some of the following thoughts a designer may be driven by.
Legibility | Uniformed web creators often use high contrast to create a sense of urgency with their content. This can have an opposite effect, in that it can create an agitation with the users when reading content. Often a mid range value between text and background offers a user friendly experience. Often designers will use a grey text on white background rather than black text to create this effect.
Style | Becase the web is a pixel based system a "sans-serif" font reads best in this medium. But becase of the universal appearance of a "sans-serif" font it often does not evoke a "feeling" or "message" such as a stylized font. When designing a site think about how to combine both. For example using the "sans-serif font" in all html text, but include a "png" or "gif" image with a stylized font for main headings or small amounts of text. A nice serif font designed specifically for the web is Georgia.
Anthropologie (a nice example of combining function and evoking a feeling or meaning)