Elements of Design

Miss Bauer

Basic Elements of Design

LineShapeDirection Colour Repetition Contrast Unity

Line

It is used to define shape, width, depth, contours, and outlines, also to suggest mass and volume. Line has no depth. In web design, images can be used as lines and borders to create more striking effects.

Shape

When a line crosses itself or intersects with other lines to enclose a space it creates a shape. Shape is two-dimensional it has heights and width but no depth.

Geometric Shapes

Circles, squares, triangles, etc. We see them mostly in architecture and manufactured items.

Organic Shapes

Leaves, seashells, flowers, etc. We see them in nature and with characteristics that are free flowing, informal and irregular.

Positive & Negative Shapes

Positive shapes are solid forms in a design such as a bowl of fruit or a vase.

Negative shapes are the areas that surround the positive shape.

Static & Dynamic Shape

Static shapes appear stable and resting and dynamic shapes appear moving and active.

Direction

Direction in design provides mood and atmosphere. Direction gives the illusion of movement

within a design.

There are three basic directions in design:

In a web design, be careful with your images to determine what direction the subjects are facing. If

you have people in the picture and are looking to the right, then you should place an image on the

left side of the page. Otherwise the direction of the eyes in the photo will direct your readers' eyes

away from the page.

Use your layout to suggest direction. Position dense elements, like photos, in horizontal, vertical,

or diagonal lines. While less dense elements, like text, surround them.

horizontal

vertical

diagonal

ColourColour schemes are used to create style and appeal. Colours that create an aesthetic feeling when used together will commonly accompany each other in colour schemes. A basic colour scheme will use two colors that look appealing together.

More advanced colour schemes involve several colours in combination, usually based around a single colour; for example, text with such colours as red, yellow, orange and light blue arranged together on a black background in a magazine article.

Colour schemes can also contain different shades of a single color; for example, a colour scheme that mixes different shades of green, ranging from very light (almost white) to very dark.

Colours also have various meanings behind them so consider that when you are choosing which colours to use.

Colourful MeaningsDanger, Passion, Anger, Energy, Hot

Warmth, Creativity, Vibrancy

Happiness, Hope, Joy, Intelligence, Friendship, Hazards

Money, Nature, Abundance, Success, Roughriders

Calmness, Tranquility, Comfort, Truth

Love, Femininity, Romance, Affection

Success, Humor, Wealth, Power

Earth, Friendship, Warmth, Outdoors

Royalty, Wisdom, Confidence, Mourning, Spirituality

Marriage, Purity, Peace, Cleanliness

Industry, Fashion, Dignity, Technology

Death, Sophistication, Mystery, Fear

Red –

Orange –

Yellow –

Green –

Blue –

Purple –

Pink –

Gold –

Brown –

White –

Grey/Silver –

Black –

Colour

In colour theory, a colour scheme is the choiceof colours used in design for a range of media.For example, the use of a white backgroundwith black text is an example of a basic schemein web design.

Colour SchemesMonochromatic

Analogous

Complementary

Diad

Triad

using any shade, tint, or tone of one colour

using any shades, tints or tones of colours that lie adjacent to each other on the wheel (colours like red, orange, yellow, or yellow, green, blue, or blue, purple and red, etc).

combining two colours that are exactly opposite from each other on the colour wheel (such as purple & yellow, red & green, blue & orange, etc).

using two colours that are two colours apart on the wheel (such as Yellow-Green and Green-Blue, etc).

colour scheme in which three colours are equally spaced from each other

Repetition

Repetition strengthens web design by stringing together separate elements on the page and creating an association between them.

Another word for repetition is consistency.  By repeating the best elements from an already solid web design, you are decorating each page with an instantly familiar identity. This repetition across the pages provides your web design with unity and makes it clear to visitors that they are still on the same site, regardless of what page they are on.

Contrast in art and design occurs when two related elements are different. The greater the difference the greater the contrast. Contrast adds variety to the total design and creates unity. It is what draws the viewer's eye and helps to guide the viewer around the design.

UnityUnity is the hallmark of a good design. It's the final result in a composition when all the design elements work harmoniously together giving the viewer a satisfying sense of belonging and relationship and completeness. You know unity has been achieved when all aspects of the design complement one another rather than compete for attention.

This design works mainly because of the eye-catching theme and contrast of the composition. Realism is combined with graphics in a non-confusing way.

This is a good design because of it’s simplicity. Less can be more in good web designs.

Although fairly simple and plain, this design works because of the office theme. Once you have a noteworthy theme to play with, the possibilities are endless.

Remember the colour schemes we talked about earlier? This design shows us a great example of a colour scheme. Which one? What else do you notice about this design? Which elements does this design possess?

- Line- Repetition- Contrast - Shape (geometric) - Direction

What makes this design so appealing?

There is a strong sense of unity in the graphics, which is the combination of all design elements. The direction is obvious, there are many lines, shapes and contrasts, but mostly the colour scheme is what truly makes the design so appealing. What is the colour scheme? What category of shape would this design fit with?

Does this design have all the elements to create unity? Let’s go through them…

Line

Shape

Direction

Contrast

Colour

Repetition

What about this one?

Contrast is probably the most important contributor to the success of this design. Why?

In this design, the rabbit graphics are shown in 2D and 3D form, which is a difference. The warm colours (orange, yellow and red) are contrasting with the cooler colours (blue, grey, green), and of course, the dark lines and the white characters also create a successful contrast.

Is this web page successful or unsuccessful? Why?

There is too much confusion, disorder and clutter. There is no unity which means every element of this web page is fighting for attention. Links and logos are placed randomly all over the page, and you can hardly read some of the lettering over the graphic eyesores! FAIL!!!

Did you learn anything?

Any questions??

Pretend this is a magazine article!

Do you find PowerPoint presentations excruciatingly boring? If so, click here.