Upload
rosaline-underwood
View
215
Download
0
Tags:
Embed Size (px)
Citation preview
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.