Lecture+03+Website+Design+Principles

COMP ED IIIW ebsi t e Design P r in cip l

es

ARREOJN LLOYD G. MANZANOInstructor

E l emen t s o fDesign

Line Shape Texture Value and Color Space

Line

A line is a form with width and length, but no depth. Artists use lines to create edges, the outlines of objects. A line is created by the movement of the artist's pen.

The direction of a line can convey mood. Horizontal lines are calm and quiet, Vertical lines suggest more of a potential for

movement, while diagonal lines strongly suggest movement

and give more of a feeling of vitality to a picture.

Sh ape

o A shape is an enclosed object.o Shapes can be created by line, or by color

and value changes which define their edges.

Tex t u r e

o Texture is the surface quality of an object.o We experience texture when we touch

objects and feel their roughness, smoothness or patterns.

o Texture is the artist's way of mapping these tactile impressions on to the two-dimensional picture.

o Texture is created by varying the pattern of light and dark areas on an object.

Va l ue

Value refers to the relative lightness or darkness of a certain area.

Value can be used for emphasis. Variations in value are used to create a focal point

for the design of a picture. Gradations of value are also used to create the

illusion of depth. Areas of light and dark can give a three-

dimensional impression, such as when shading areas of a person's face.

Co l o r Color occurs when light in different wavelengths

strikes our eyes. Objects have no color of their own, only the ability to

reflect a certain wavelength of light back to our eyes.

Color can vary in differing circumstances. For example, grass can appear gray in the morning or evening or bright green at noon.

Colors appear different depending on whether you view them under incandescent, florescent or natural sunlight.

Colors also change according to their surroundings.

Co l o r P r ope r t ies

Hue refers to the color itself

Color Value refers to the lightness or darkness of the hue

Intensity also called chroma or saturation, refers to the

brightness of a color.

Co l o r Sc hemes

Harmonious color combination There are three main sets of color schemes:

Analogous Monochromatic Complementary

Ana l ogo us

are those that are adjacent to each other on the color wheel.

hues may vary in value i.e. yellow to red, orange to violet, red to blue,

etc Examples:

http://www.zeldman.com http://www.jasonsantamaria.com http://www.gorillaglue.com

Comp l emen t a r y

This color scheme involves the use of colors that are located opposite on the color wheel such as red and green, yellow and purple, or orange and blue.

Complementary colors produce a very exciting, dynamic pattern.

Examples: http://www.ufl.edu http://www.modestmousemusic.com http://www.panera.com

Monoc h r oma t ic

This color scheme involves the use of only one hue. The hue can vary in value, and black or white

may be added to create various shades or tints. If you mix white with a pure color, you produce tints

of that color. If you mix black with a pure color, you get shades of that color.

Examples: http://www.target.com http://www.macromedia.com http://www.yakima.com

Spac e

We live in a three-dimensional world of depth. When we look around us, some things seem

closer, some further away. The artist can also show the illusion of depth

by using the following means: Size & Vertical Location Overlapping Detail (Aerial or Atmospheric Perspective) Linear Perspective

Size & Ve r t ica l Lo ca t ion

Since objects in our environment look smaller when they are farther away, the easiest way to show depth is to vary the size of objects, with closer objects being larger and more distant objects being smaller.

As well, we perceive objects that are higher on the page and smaller as being further away than objects which are in the forefront of a picture.

Ove r l apping

When objects are partially obscured by other objects in front of them, we perceive them as further back than the covering objects.

We do not see them as incomplete forms, just further back.

De t ai l

Atmospheric perspective uses color and value contrasts to show depth.

Objects which are further away generally have less distinct contrast - they may fade into the background or become indistinct dark areas.

The foreground objects will be clear with sharper contrast.

Here is a link to Leonardo da Vinci's use of aerial perspective: Investigating aerial perspective

Linea r Pe r spec t ive

Linear perspective is based on the idea that all lines will converge on a common point on the horizon called the vanishing point.

Artists use linear perspective to create a focal point for a picture.

Any walls, ceilings, floors or other objects with lines will appear to come together at the horizon line.

P r inc ip l es o f Design

Balance Unity

Proximity Repetition

Emphasis Simplicity

Ba l anc e

In a figurative sense, the concept of visual balance is similar to that of physical balance illustrated by a seesaw.

Just as physical objects have weight, so do the elements of a layout.

If the elements on either side of a layout are of equal weight, they balance one another.

There are two main forms of visual balance: symmetrical and asymmetrical.

Symme t r ica lBa l anc e

Symmetrical balance, or formal balance, occurs when the elements of a composition are the same on either side of an axis line.

Notice how the male and female figures in this painting are almost thesame in position and proportion. Even the shaded background boxes are mirror images of one another.

Symme t r ica lBa l anc e: Ex amp l e

http://grow.com

Asymme t r ica lBa l anc e

a little more abstract, and generally more visually interesting

involves objects of differing size, shape, tone, or placement

these objects are arranged so that, despite their differences, they equalize the weight of the page

If you have a large object on one side of a page, and you partner it with several smaller items on the other side, the composition can still feel balanced

Asymme t r ica l Ba l anc e: Ex amp l e

Many principles are at work in the design of John Hicks's site--this design isn't just about asymmetrical balance.

The site has great harmony, which comes from the repeated, brightly colored bullets, similarly colored headers, and consistent typefaces.

Part of that harmony arises from the fact that the site meets the principles of unity.

http://www.hicksdesign.co.uk

Uni t y

Design theory describes unity as referring to the way in which the different elements of a composition interact with one another.

A unified layout is one that works as a whole rather than being identified as separate pieces.

It's important that unity exists not only within each element of a web page, but across the entire web page--the page itself must work as a unit.

We can use a couple of approaches to achieve unity in a layout proximity and repetition.

P r oximi t y

an obvious, but often overlooked way to make a group of objects feel like a single unit

Placing objects close together within a layout creates a focal point toward which the eye will gravitate

,the five strokes that are the closest together appear to form a unified object

P r oximi t y a tw o r k

Repe t i t ion Repetition of colors, shapes, textures, or similar

objects helps to tie a web page design together so that it feels like a cohesive unit

Even though there are other similar strokes around, the nine red strokes on the left-hand side appear to be a unified group because they repeat a shape, color, and texture.

The strokes to the right of this group have no repeated pattern, so they appear isolated even though there are other shapes nearby.

Repetition is often used in web site designs to unify elements of the layout

Repe t i t ion a t w o r k

This layout contains many eye-catching elements, but the repeated use of the red wood texture in the header, menu, and page borders literally hold this design together.

Left Justified: http://leftjustified.net

Emph asis

about making a particular element draw the viewer's attention

When you design a web page layout, often you'll identify an item in the content, or the layout itself, that you want to stand out

One method of achieving such emphasis is by making that element into a focal point. A focal point is anything on a page that draws the viewer's

eye, rather than just feeling like part of the page as a whole or blending in with its surroundings.

Me t ho ds o fEmph asis

Placement Continuance Isolation Contrast Proportion

P l ac emen t

Although the constraints of practical web design do not often allow for it, the direct center of a composition is the point at which users look first, and is always the strongest location for producing emphasis.

The further from the center an element is, the less likely it is to be noticed first; for an example:

Con t inuanc e

The idea behind continuance is that when our eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along.

Continuance is also one of the most common methods that web designers use to unify a layout.

By default, the left edge of headings, copy, and images placed on a web page form a vertical line down the left side of a page before any styling is applied.

Iso l a t ion

Isolation promotes emphasis. An item that stands out from its surroundings

will tend to demand attention.

Con t r as t

is defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout.

The concept is simple: the greater the difference between a graphic element and its surroundings, the more that element will stand out.

Contrast can be created using differences in color, size, and shape

Ex amp l e: w oo t .com

P r opo r t ion

a principle of design that has to do with differences in the scale of objects

If we place an object in an environment that's of larger or smaller scale than the object itself, that object will appear larger or smaller than it does in real life.

This difference in proportion draws viewers' attention to the object, as it seems out of place in that context.

Ex amp l e: j asong r aphix.com

Simp l ici t y

Although gaining attention is an important part of any communication act, it is important to try to keep your message as simple as possible

Use only the amount of text and graphics as is absolutely necessary to get your point across

Superfluous graphics can interfere with understanding, an overabundance of fonts or colors can distract rather than assist learning.

End of Lecture