Lewisuwritingcenter.wordpress.

com

The Elements of Design

The elements of design refer to the concepts and fundamentals that make up any painting, drawing, graphic
design, etc. An understanding of these design concepts and elements are necessary so that as a designer,
conscious and purposeful choices are taken as design choices may change how a brand is perceived, how
a document is read, and more. The main elements essential to any design are line, direction, color, value,
texture, shape, scale, and typography.

Line
A line can be described as any two connected points, linear marks made with a pen or brush, or the edge
created when two shapes meet. There are various types of lines including vertical, horizontal, diagonal,
zigzag, and curved lines. Lines are useful for the following objectives:

 Dividing space
 Creating visual organization
 To lead or draw the eye to a specific location
 To suggest moods or emotion as lines can appear anxious, angry, or calm

Direction
Direction, an element synonymous with movement, refers to the way elements on a page intentionally
guide the viewer’s eyes from one area of the page to another. Depending on where you place the most
important elements on the page or what images you are using, you are establishing a dominant
direction. There are three different types of directions, all which suggest different concepts to the viewer:

 Horizontal: Suggests calmness, tranquility, and stability

 Vertical: Suggests balance
 Diagonal: Suggests movement and action
In Figure 1.1 there are examples of how
line and direction and both work
together to make this infographic a
success.

Line: Diagonal lines are used to lead

the viewer’s eye to the right side of the
graphic where there is further
information. The diagonal lines are also
helping to visually organize
information in the lower portions
of the infographic, creating pockets
where information can be placed,
adding visual organization to the
graphic.

Direction: The lines and the reduction

of the color yellow in this image create
visual movement in the piece. The
diagonal lines and fading of the
color yellow move from left to right
and assist in guiding the viewer’s eyes
in that direction. Remember that Figure 1.1
diagonal lines suggest movement and
action, connecting to the purpose of
this infographic--the movements of
spacecraft.
Lewisuwritingcenter.wordpress.com

The Elements of Design Cont.

Color
Color (also called hue) creates a mood, an ambiance for the piece and it’s typically the most obvious
element of design. Each color has its own culturally associated meaning (the color red is often linked to love
or anger), meaning that different cultures create their own meanings and impressions on colors as there is no
universal meaning associated to each color. However, the use of color in design can alter one’s impression
of the design or brand. Keep the color wheel and color theory in mind when incorporating more than one
color into a design. Use color for the following strategies:

 Repeating colors: Suggests connection between elements and offers visual organization.
 Color as contrast: Use contrasting colors to draw attention to an element.
 Plan: Choose a color scheme, a color plan right from the beginning of your design phase so that color is
consistently present in your design.

Visit our “Using Color” resource on the Lewis Owl for an in depth overview of implementing color here.

Value
Value (also called tone) refers to the lightness and darkness of a
color. The lighter a color, the higher the value, making white the
highest or the lightest value. Use value for the following strategies and
keep in mind that the human eye is drawn to an element that’s in
contrast with its background:

 To create a focal point or point attention to an important element

 To create illusion and depth
 To create contrast

In Figure 2.1 you can see different values of the color red. Remember Figure 2.1
that the darker the color, the lower the value and vice versa. The top
furthermost left square is high in value while the bottom and
furthermost left square is very low in value. In Figure 3.1 there are examples of
both color and value within the
graphic.

Color: The orange circle in the

middle of the graphic creates a center
of focus and draws the viewers eyes to
the important information inside of
the orange circle. The orange circle
also emulates the theme of space since
it looks like a sun.

Value: Color and value work together

in this graphic as the outskirts of
this graphic are darker and lower in
value while the middle is higher in
value. The contrast created in the
vibrancy of the colors creates a focal
point and adds depth (an illusion of
visual layers) to the center of the
Figure 3.1 design so all attention is brought to
the information at the center.
Lewisuwritingcenter.wordpress.com

The Elements of Design Cont.

Texture
Texture is more than what you can touch. It’s the surface quality of a shape. A shape can be smooth,
hard, glossy, or striated (striped, streaked). It can provide a three-dimensional look to any design and
build an immersive and texturized experience. For example, the audience feels more connected to a design,
finds more depth, as well as an impression in a business card with a wood-streaked print rather than a typical
business card with a white background. There are two types of texture:
 Actual/Real Texture: Texture you can
physically feel such as the weight of a
business card, the gloss of a piece of
paper.
 Visual/Implied Texture: Texture that
is simulated or invented; texture created
to look like something it is not.

In Figure 4.1, we see great examples of visual or

implied texture. The fabric of the flag as well as
the gloss and shine of the medal add an
authenticity to the piece. This stimulated and
invented texture adds a more official
experience and creates depth in this piece.
Figure 4.1

Space Figure 5.1

Space refers to the area within, around, above, or below
an object(s). When designing, consider how the elements
on the pages are grouped and arranged in your
composition. Try to give elements room to breathe and
don’t forget about the white or negative space on the
page. Negative space refers to the parts of the page
that are left blank and assist in creating the overall
image. These spaces are usually white but can also be
other colors. Space and shape tie together as you can use
negative space to create shapes as you would any other
element.

Shape
Shape can be defined as a self-contained defined area of geometric (perfect, uniform proportions such as
squares and octagons) or organic form (less well-defined proportions without rules and do not fit into
categories). They are typically defined by boundaries such as line or color. Every element on the page you’re
designing has a shape and creates invisible shapes in relation to each other. Make sure to always consider the
shapes you are intentionally incorporating as well as any shapes naturally formed by negative space on the
page.

In Figure 5.1, shape and space are utilized for a fluid design. In this graphic there is a blend of geometric
and organic form as leaves are organically used to create the illusion of a geometric circle around
the center text. Negative space or white space is also used to create this circular shape around the center
text. It is also worth noting how information is arranged and grouped together with the date, event,
and holders of the event grouped altogether in the middle of the graphic.
Lewisuwritingcenter.wordpress.com

The Elements of Design Cont.

Scale
Scale (also known as size) refers to the relationship of area occupied by one shape to that of another.
Thus an element can look smaller or larger depending on the size, color, and placement of the other elements
surrounding it. How you utilize scale will have an impact on how your audience views the composition of your
design. Use scale for the following objectives:

 Creating interest: A design could lack interest if every element is the same size.
 Creating contrast: Making one element smaller or larger than another adds contrast and visual
organization to a design.
 Conveying importance: The larger an element is, the more important the reader will view the element.

In Figure 6.1, there is an example of how scale is created in logos. The words
“Atom Labs” are larger in scale or size creating contrast against the
smaller element of the logo such as the words “Chemistry Research
Laboratory.” The more important information or phrase you want the
audience to take away from viewing the logo is the lab’s name, so this
information is larger in size.

Figure 6.1 and 8.1 were all created using the online design editor, Canva.
You can use the website to create all kinds of documents from postcards, to
invitations, Facebook ads, logos, posters, and brochures by visiting
canva.com.

For tips on using Canva, visit our resource here.

Figure 6.1

Typography
Typography, next to color, is one of the most important elements in any design and refers to the style,
weight, and size of the font used in design. Typography can enhance or hinder readability depending
on how it’s utilized. It tells a story to the viewer and speaks on behalf of a brand by offering a difference
between a serious news publication versus a more playful kids menu. There are many different types of fonts
such as script, serif, sans serif, slab serif, decorative, etc. When working on typography keep the
following things in mind:

 Simplicity is key: Use fonts that are easy to read for the body text. Using fonts such as “Comics Sans”
can hinder readability and give your work a childish appearance. Also, using more than two fonts can
interrupt consistency in your design. If you
wander into using more than two, do so with
purpose.
 Capitalization: Avoid using all caps in the body
text. All caps translates into yelling for any
viewer or reader.
 Serif Fonts: “Serifs” refer to the decorative
tails or feet added to a font.
 Sans Serif Fonts: “Sans” is French for
without, meaning that when a font is sans serif,
it is without the decorative feet that is found in serif fonts. Figure 7.1
 Web vs. Print: You must also consider which medium a document will be read when deciding
font. When reading from print, a serif font, a font with the decorative feet, is preferable for the body
text. When reading in a digital or virtual space, a sans serif font is most preferred for the body text.
Lewisuwritingcenter.wordpress.com

The Elements of Design Cont.

In Figure 8.1 there is a script font
used for the header of the
document.

A script font connotes a personal,

handwritten feeling when used.
Also, the difference in the header
font type versus that of the body
text, helps to differentiate
between the header “Happy
Holidays” and the body text of the
letter.

There is also a different type of font

used for the body, a sans serif
font. This helps to create visual
organization by using a sans serif
font instead of a script font for the
body text. Script fonts are also
especially difficult to read when
excessively used.

The sans serif font here looks fresh

and clean with the white
background. If the document is
being viewed electronically (on a
computer, phone, tablet, etc.) the
sans serif font will be easy on the
eyes.

Sans serif fonts are stronger fonts to

use in the body text, whereas for
printed content, serif fonts are the
best choice.

Figure 8.1

For more extensive information on typography, visit our resource here.

Further Assistance: For more detailed help or if you have questions, visit the Writing Center located in the
Lewis University Library or call 815-836-5427.

Sources Consulted: Technori.com, John Lovett, Creative Market, Lifewire, Art Foundations, Vanseo
Design, gdbasics, and Canva.