Documente Academic
Documente Profesional
Documente Cultură
The elements and principles of design are the building blocks used to create a work of art. The
elements of design can be thought of as the things that make up a painting, drawing, design etc.
Good or bad - all paintings will contain most of if not all, the seven elements of design.
The Principles of design can be thought of as what we do to the elements of design. How we
apply the Principles of design determines how successful we are in creating a work of art.
LINE
Line can be considered in two ways. The linear marks made with a pen or brush or the edge
created when two shapes meet.
SHAPE
A shape is a self contained defined area of geometric or organic form. A positive shape in a
painting automatically creates a negative shape.
DIRECTION
All lines have direction - Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability
and tranquillity. Vertical gives a feeling of balance, formality and alertness. Oblique suggests
movement and action
see notes on direction
SIZE
Size is simply the relationship of the area occupied by one shape to that of another.
TEXTURE
Texture is the surface quality of a shape - rough, smooth, soft hard glossy etc. Texture can be
physical (tactile) or visual.
see notes on texture
COLOUR
Also called Hue
see notes on colour
VALUE
Value is the lightness or darkness of a colour. Value is also called Tone
see notes on tonal contrast
THE PRINCIPLES OF DESIGN
BALANCE
Balance in design is similar to balance in physics
GRADATION
Gradation of size and direction produce linear perspective. Gradation of of colour from warm to
cool and tone from dark to light produce aerial perspective. Gradation can add interest and
movement to a shape. A gradation from dark to light will cause the eye to move along a shape.
REPETITION
Repetition with variation is interesting, without variation repetition can become monotonous.
The five squares above are all the same. They can be taken in and understood with a single
glance.
When variation is introduced, the five squares, although similar, are much more interesting to
look at. They can no longer be absorbed properly with a single glance. The individual character
of each square needs to be considered.
If you wish to create interest, any repeating element should include a degree of variation.
CONTRAST
Contrast is the juxtaposition of opposing elements eg. opposite colours on the colour wheel -
red / green, blue / orange etc. Contrast in tone or value - light / dark. Contrast in direction -
horizontal / vertical.
The major contrast in a painting should be located at the center of interest. Too much contrast
scattered throughout a painting can destroy unity and make a work difficult to look at. Unless a
feeling of chaos and confusion are what you are seeking, it is a good idea to carefully consider
where to place your areas of maximum contrast.
HARMONY
Harmony in painting is the visually satisfying effect of combining similar, related elements.
eg.adjacent colours on the colour wheel, similar shapes etc.
DOMINANCE
Dominance gives a painting interest, counteracting confusion and monotony. Dominance can be
applied to one or more of the elements to give emphasis
UNITY
Relating the design elements to the the idea being expressed in a painting reinforces the principal
of unity.eg. a painting with an active aggressive subject would work better with a dominant
oblique direction, course, rough texture, angular lines etc. whereas a quiet passive subject would
benefit from horizontal lines, soft texture and less tonal contrast.
Unity in a painting also refers to the visual linking of various elements of the work.
After studying these notes on the elements and principals of design, try this exercise
Elements of design
Design elements are the basic units of a visual image. These elements include:
Space
Space is the area provided for a particular purpose. It may have two dimensions (length
and width), such as a floor, or it may have three dimensions (length, width, and height).
Space includes the background, foreground and middle ground. Space refers to the
distances or areas around, between or within components of a piece. There are two type
of space: positive and negative space. Positive space refers to the space of a shape
representing the subject matter. Negative space refers to the space around and between
the subject matter.
Line
Line is the basic element that refers to the continuous movement of a point along a
surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It
is the basic component of a shape drawn on paper. Lines and curves are the basic
building blocks of two dimensional shapes like a house's plan. Every line has length,
thickness, and direction. There are curve, horizontal, vertical, diagonal, zigzag, wavy,
parallel, dash, and dotted lines.
Balance
Balance can be either symmetrical or asymmetrical. Balance also refers to a sense that
dominant focal points don't give a feeling of being pulled too much to any specific part of
the artwork. Balance can be achieved by the location of objects, volume or sizes of
objects, and by color. It can also be achieved by balancing lighter colors with darker
colors, or bold colors with light neutral colors.
Color
Color is seen either by the way light reflects off a surface, or in colored light sources. Red
colors seem to come forward while blue seems to recede into the distance.[citation needed]
Color and particularly contrasting color is also used to draw the attention to a particular
part of the image. There are primary colors, secondary colors, and tertiary colors.
Complementary colors are colors that are opposite to each other on the color wheel.
Complementary colors are used to create contrast. Analogous colors are colors that are
found side by side on the color wheel. These can be used to create color harmony.
Monochromatic colors are tints and shades of one color. Warm colors are a group of
colors that consist of reds, yellows, and oranges. Cool colors are group of colors that
consist of purples, greens, and blues.
Shape
A shape is defined as an area that stands out from the space next to or around it due to a
defined or implied boundary, or because of differences of value, color, or texture.[1]
Shapes can also show perspective by overlapping. They can be geometric or organic.
Shapes in house decor and interior design can be used to add interest, style, theme to a
design like a door. Shape in interior design depends on the function of the object like a
kitchen cabinet door. Natural shapes forming patterns on wood or stone may help
increase visual appeal in interior design. In a landscape, natural shapes, such as trees
contrast with geometric such as houses.
Texture
Texture is perceived surface quality. In art, there are two types of texture: tactile and
implied. Tactile texture (real texture) is the way the surface of an object actual feels.
Examples of this include sandpaper, cotton balls, tree bark, puppy fur, etc. Implied
texture is the way the surface on an object looks like it feels. The texture may look rough,
fizzy, gritty, but cannot actually be felt. This type of texture is used by artist when
drawing or painting.
Form
Form is any three dimensional object. Form can be measured, from top to bottom
(height), side to side (width), and from back to front (depth). Form is also defined by
light and dark. There are two types of form, geometric (man-made) and natural (organic
form). Form may be created by the combining of two or more shapes. It may be enhanced
by tone, texture and color. It can be illustrated or constructed.
Value
Value is an element of art that refers to the relationship between light and dark on a
surface or object and also helps with Form. It gives objects depth and perception. Value
is also referred to as tone.
The Design in Theory and Practice column is dedicated to helping the reader gain a better
understanding of Web design. The first step in this process is getting a grasp on the
fundamentals. To achieve this, we need to realize that the discipline of Web design is inherently
part of a larger whole. The fundamental concepts underlying Web design have been inherited
from the larger field of design, and indeed from other art forms in general. This means that we
need to momentarily step away from the medium of the Web and adopt a broader perspective.
Introduction
The elements of design discuss the components of the composition itself, and provide the
designer with a basic set of tools to begin working with.
In The Principles of Design we looked at half of the basic tenets that underlie the field of design.
The principles of design represent the basic assumptions of the world that guide the design
practice, and deal with the arrangements of objects in any given composition. In this column we
investigate the other half of the tenets, the elements of design, in an effort to bring together a
solid foundation on which we can base all future investigations.
Point
A point is an element that has position, but no extension. It is a single mark in space with a
precise, but limited, location. Alone it can provide a powerful relation between negative and
positive space, but when grouped with other points the Gestalt grouping principal of closure
tends to kick in and the brain compulsively connects the points together. Line or form is a natural
result of multiple points in space.
Line
A line is an element characterized by length and direction. Lines create contours and form, and
are often used to convey a specific kind of feeling or point to an important feature in a design.
Lines are also used to create perspective, and dominant directional lines are often adopted to
create a sense of continuance in a composition. In addition, lines that are grouped together often
create a sense of value, density or texture.
Form (Shape)
The simplest definition of shape is a closed contour, an element defined by its perimeter. The
three basic shapes are: circle, rectangle (square) and triangle. Form is the shape and structure of a
dimensional element within a given composition. Form can be both two-dimensional and three-
dimensional and can be realistic, abstract or somewhere in between. The terms form and shape
are often used synonymously, which is why they are both included here. In reality, form is
derived from the combination of point, line and shape.
Contour Dimensional
Texture
Texture is used to create surface appearance, and relates to the physical make-up of a given form.
Texture often refers to the material that something is made of, and can be created using any of
the elements previously discussed. Texture is both a visual and a tactile phenomenon.
Color
Color is the response of the eye to differing wavelengths of radiation within the visible spectrum.
The visible spectrum is what we perceive as light. It is the part of the electromagnetic spectrum
that we can see. The typical human eye will respond to wavelengths between 400-700
nanometers (nm), with red being at one end (700 nm), violet at the other (400 nm) and every
other color in between these two.
There are many different kinds of color systems, and many different theories on color. We will
get into that kind of detail in a later column. For now we will focus on the basics, using a color
wheel for illustration purposes. There are three main components of color:
• Hue: Where the color is positioned on the color wheel. Terms such as red,
blue-green, and mauve all define the hue of a given color.
• Value: The general lightness or darkness of a color. In general, how close to
black or white a given color is.
• Saturation: The intensity, or level of chroma, of a color. The more gray a
color has in it, the less chroma it has.
Color harmonies
Color harmonies serve to describe the relationships certain colors have to one another, and how
they can be combined to create a palette of color.
In these examples, a subtractive color space was used for illustrative purposes.
Color is typically organized in a hierarchal fashion, based on how colors are mixed. A color
space helps to define how the colors are mixed, based on the medium in which the colors are
used. There are two different kinds of color spaces:
Related Concepts
There are many additional concepts that are related to the elements of design. These can include
specific terms and/or techniques that are in some way based on one or more of the above ideas.
In they end, they add to the collection of compositional tools available for use by the designer.
Typography
Typography is the art of arranging typefaces, selecting style, line spacing, layout and design as a
means of solidifying language. There are many facets to typography, and only a brief
investigation will be started here based around some common terms.
Pattern
Pattern is the repetition of shape or form. It can also reflect the underlying structure of a design
by organizing the surfaces or objects in the composition. There are many different kinds of
patterns:
Movement
Movement can be defined as motion of objects in space over time, and is often described in one
of two ways:
Conclusion
We have thoroughly explored the fundamental concepts of the field of design. The principles of
design give us a way of looking at the world. The overarching axioms of the profession affect the
designer universally, and provide guidance for any composition. The elements of design discuss
the components of the composition itself, and provide the designer with a basic set of tools to
begin working with.
In order to explore the fundamentals of design, we needed to step back a bit away from any one
medium. Now it is time to focus in on the Web. In the next column we will investigate the
constraints of designing for the Web that can effect how we make use of the principles and
elements of design. We will look at medium-specific concepts, such as screen resolution,
graphics compression and color mixing in additive spaces.
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.
Line Direction
Horizontal lines
are calm and
quiet,
vertical lines
suggest more of
a potential for
movement,
Line as Value
Lines or crosshatching can also be used to create areas of grey inside a drawing. These areas of
darker shading inside a figure, called areas of value, can give a more three-dimensional feeling to
an object.
A shape is an enclosed object. Shapes can be created by line, or by color and value changes
which define their edges.
Positive/Negative shapes
In a picture, the shapes that the artist has placed are considered the positive shapes. The spaces
around the shapes are the negative spaces. It is just as important to consider the negative space in
a picture as the positive shapes. Sometimes artists create pieces that have no distinction between
positive and negative spaces. M. C. Escher was a master at creating drawings where there was no
distinction between positive and negative space. Here are two examples of Escher's work which
show the interplay between positive and negative space:
Texture is the surface quality of an object. We experience texture when we touch objects and feel
their roughness, smoothness or patterns. Texture is the artist's way of mapping these tactile
impressions on to the two-dimensional picture. Texture is created by varying the pattern of light
and dark areas on an object. Notice how the areas of light and dark give the impression of depth
to the image below.
Color
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. As you know, 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. You can see this by looking at the color squares below - the reddish outline box is
the same color in all the examples.
Properties of Color
Hue
Hue refers to the color itself. Each different hue is a different reflected wavelength of light.
White light broken in a prism has seven hues: red, orange, yellow, green, blue, indigo and violet.
White light occurs when all the wavelengths are reflected back to your eye, and black light
occurs when no light is reflected to your eye. This is the physics of light.
When it comes to using color in art, things get quite messy. Looking at the color wheel above,
when using color pigments, the three primary colors used are yellow, blue and red. These three
colors are blended together to produce other colors, called secondary colors, such as green,
orange and purple. Mix enough colors together, and you get black. Pretty strange, eh?
Computer colors are produced by Things get even dicier on computers when you go to
combining the three colors of red, green and print out these colors. Printing uses the CYMK
blue together. Believe it or not, you can get convention which takes cyan (light blue), yellow,
yellow by combining these colors (I've magenta (pinky red) and black inks and tries to
never been able to figure out why, but you recreate the color that your computer created with
can!) red, green and blue light.
Color Value
Color value refers to the lightness or darkness of the hue. Adding white to a hue produces a high-
value color, often called a tint. Adding black to a hue produces a low-value color, often called a
shade.
Intensity
Intensity, also called chroma or saturation, refers to the brightness of a color. A color is at full
intensity when not mixed with black or white - a pure hue. You can change the intensity of a
color, making it duller or more neutral by adding gray to the color. You can also change the
intensity of a color by adding its complement (this is the color found directly opposite on the
traditional color wheel). When changing colors this way, the color produced is called a tone.
When you mix complementary colors together, you produce a dull tone. However, when you put
complementary colors side by side, you increase their intensity. This effect is called
simultaneous contrast - each color simultaneously intensifies the visual brightness of the other
color.
Below are some examples of how this works, using a program called Metacreations painter. As
you can see, you choose a hue from the outer ring. Inside the triangle, you can vary the saturation
of the hue (amount of color), the tint or the shade.
When small dots of color are placed adjacent to each other, your eye will combine the colors into
a blended color. This is the principle used when printing color in magazines. Dots of cyan,
magenta, yellow and black are distributed in a pattern on the paper, and depending on the
quantity of a certain dot, you will see a specific color on the page. Paul Signac used a technique
called pointillism that involved creating art using the combination of dots to form images. View
Port St. Tropez.
Certain colors have an advancing or receding quality, based on how our eye has to adjust to see
them. Warm colors such as red, orange or yellow seem to come forward while cool colors such
as blue and green seem to recede slightly. In the atmosphere, distant objects appear bluish and
the further away an object appears, the less colorful and distinct it becomes. Artists use this to
give an illusion of depth, by using more neutral and grayish colors in the background.
Color Schemes
Monochromatic
Analogous
This color scheme involves the use of colors that are
located adjacent on the color wheel. The hues may
vary in value. The color scheme for this site is
analogous, with the colors varying only slightly from
each other.
Complementary
Triadic
This color scheme involves the use of colors that are equally
spaced on the color wheel. The primary colors of yellow, red
and green could be used together in a color scheme to
produce a lively result.
Check out Color Picker web software. This application will allow you to choose a color and then
display its complementary or triadic match. Hint: read the instructions first, then click on the link
which says "Open Color Picker 2". Color Picker 2.
Color Discord
Overlapping
A line is a mark made by a moving point and having psychological impact according to its
direction, weight, and the variations in its direction and weight. It is an enormously useful and
versatile graphic device that is made to function in both visual and verbal ways. It can act as as a
symbolic language, or it can communicate emotion through its character
and direction
Lines can be combined with other lines to create textures and patterns. This is
common in engravings and pen and ink drawings such as the one on the right
(click and enlarge to see linear detail). The use of line in combination results in the development
of form and value, which are other elements of design.
However, line is not always explicit. It can exist by implication, as the edge
of forms. As young children we usually begin drawing landscapes by making
outlines for earth, sky, and other objects. Gradually we learn that objects do
not have such outlines and we let color changes define the edges of shapes,
creating implicit lines. Thus we can speak of a horizon "line," or the "lines" of
a car or a fashion silhouette, even though we know there is no literal line
present. For additional visual examples of
Line also communicates emotion and states of mind through its character and direction.
The variations of meaning generally relate to our bodily experience of line and direction.
Deep, acute curves, on the other hand, suggest confusion, turbulence, even frenzy, as in the
violence of waves in a storm, the chaos of a tangled thread, or the turmoil of lines suggested by
the forms of a crowd. The complicated curves used to form the mother in the family group
shown above suggest a fussy, frivolous personality.
line
A line represents a "path" between two points. A line can be straight, curved,
vertical, horizontal, diagonal, or zigzag. Lines imply motion and suggest direction or
orientation. A line can also be implied, that is filled in by the mind when several
points are positioned geometrically within a frame. Placing four dots on a page in
the shape of a square can imply the points are linked as the mind searches for
recognizable patterns. The direction and orientation of a line can also imply certain
feelings. Horizontal lines imply tranquility and rest, whereas vertical lines imply
power and strength. Oblique lines imply movement, action and change. Curved
lines or S shaped lines imply quiet, calm and sensual feelings. Lines that converge
imply depth, scale and distance - a fence or roadway converges into the distance
provides the illusion that a flat two-dimensional image has three-dimensional depth.
A line is an effective element of design because it can lead the viewer's eye. To
create more effective photographs actively look for lines and arrange them within
your viewfinder to invoke specific feelings.
Shape
Shapes are the result of closed lines. However shapes can be visible without lines
when an artist establishes a color area or an arrangement of objects within the
camera's viewfinder. Some primary shapes include circles, squares, triangles and
hexagons all of which appear in nature in some form or another. Space is defined
and determined by shapes and forms. Positive space is where shapes and forms
exist; negative space is the empty space around shapes and forms. For images to
have a sense of balance positive and negative space can be used to counter
balance each other.
Color
There has been a tremendous amount of research on how color affects human
beings and some of this research suggests that men and women may respond to
colors differently. Color affects us emotionally, with different colors evoking
different emotions. In short color has the capacity to affect the human nervous
system.
Value: lightness and darkness of the color - the amount of white or black added.
Monochromatic color: use of one color where only the value of the color changes
Analogous colors: colors that are adjacent to each other on the color wheel, e.g.
yellow and green
Analogous colors next to each other on the color wheel "get along" and are referred
to as being harmonious. Analogous colors are often used in visual design and have
a soothing affect.
Complementary colors: colors opposite to each other on the color wheel, e.g.
Blue-violet and yellow, represent colors positioned across from each other on the
color wheel. Complimentary colors exhibit more contrast when positioned adjacent
to each other -for example yellow appears more intense when positioned on or
beside blue or violet (see picture below).
In the photograph above - green and yellow are analogous colors that harmonize
where as the violet color of the shooting stars appears more intense against a
complementary colored background.
Warm colors include: yellows, red and orange we associate these with blood, sun
and fire.
Sunrise behind a popular tree at Writing-on-Stone has a warm fire like feel to it.
Cool colors include: violet, blue and green because of our association with snow
and ice.
Banff Springs Hotel with light blue filter emphasizes the coldness of winter
(Monochromatic color)
Colors are called warm or cool because of our association with various elements in
our surroundings. Red, yellow and orange are considered warm colors whereas
blue, green and violet are considered cool colors. These contrasts are relative since
yellow-green are cool next to red, orange or yellow, but would be considered warm
next to blue-violet. Photographers can position different colors in an image to
maximize contrast between them and also to provide perspective. Perceptually,
cool colors tend to recede into the distance whereas warm colors appear to advance
(see image below).
Loaf Mountain - warm glow of sunrise advances where the cool blue shadows
recede.
Texture
Texture refers to the surface quality or "feel" of an object - smooth, rough, soft, etc.
Textures may be actual (felt with touch - tactile) or implied (suggested by the way
an artist has created the work of art -visual). Texture is often emphasized in oblique
lighting as it strikes the objects from one side.