Ma. Teresa A.

Lopez BSIE-HE1A

ELEMENTS OF THE DESIGN

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, designetc. Good or bad - all
paintings will contain most of if not all, the seven elements of design.

Creating beautiful design is about more than inspiration or a great idea, it’s about understanding the fundamentals of
the subject. Although it’s possible to spend years studying the nuances of design and the many varying takes on how to
be successful at it, there are a handful, or two, of basic elements that every designer should know before beginning any
project. Even amateurs in the field who maintain personal blogs or only make a hobby of it can utilize these following
ten tips to create professional looking pieces, and anyone who intends to earn money from the endeavor must know
them. Rules were made to be broken, of course, but you have to know what they are first.

Line
The first and most basic element of design is that of the line. In drawing, a line is the stroke of the pen or pencil but in
graphic design, it’s any two connected points. Lines are useful for dividing space and drawing the eye to a specific
location. For example, think about how a magazine uses lines to separate content, headlines and side panels.

Here are a few examples of what we traditionally think of when we think of lines:

Further Reading:
Design Elements: Line

6 Tips for Designing with Lines

Color

Color is one of the most obvious elements of design, for both the user and the designer. It can stand alone, as a
background, or be applied to other elements, like lines, shapes, textures or typography. Color creates a mood within the
piece and tells a story about the brand. Every color says something different, and combinations can alter that impression
further.

Further Reading:

Color Theory for Designers: The Meaning of Color

Basic Color Theory

Shape
Shapes, geometric or organic, add interest. Shapes are defined by boundaries, such as a lines or color, and they are often
used to emphasize a portion of the page. Everything is ultimately a shape, so you must always think in terms of how the
various elements of your design are creating shapes, and how those shapes are interacting.

Further Reading:
Design Elements: Shape

Using Shapes in Design

Space
Negative space is one of the most commonly underutilized and misunderstood aspects of designing for the page. The
parts of the site that are left blank, whether that’s white or some other color, help to create an overall image. Use
negative space to create shapes as you would any other element.

Further Reading:

Space

How to Use Space in Design

Texture
It’s counter-intuitive to think about texture when the piece isn’t ever going to be touched. Websites and graphic design
do rely on the look and impression oftexture on the screen, however. Textures can create a more three-dimensional
appearance on this two-dimensional surface. It also helps build an immersive world.

Further Reading:

Design and Composition: Texture

Design Elements: Texture

Using texture to get the most out of design

Typography
Perhaps the single most important part of graphic and web design is typography. Like color, texture, and shapes, the
fonts you use tell readers you’re a serious online news magazine, a playful food blog or a vintage tea tins shop. Words
are important, but the style of the words is equally essential.

Scale (Size)
Playing with the scale and size of your objects, shapes, type and other elements add interest and emphasis. How boring
would a symmetrical website with all similarly sized ingredients be? Very. But the amount of variation will depend
heavily on the content within. Subtle differences suit professional content, while bold ones prefer creative enterprises.

Further Reading:

How to use size, scale, and proportion

Elements of Design: Scale

Dominance and Emphasis

While you can talk about emphasizing one thing or another, the element of emphasis has more to do with an object,
color or style dominating another for a heightened sense of contrast. Contrast is intriguing, and it creates a focal point.

Balance
There are two schools of balance: symmetry and asymmetry. While most designers, artists and creative folks much
prefer asymmetry for its eye-catching nature, symmetry does have its place. Sometimes.

Further Reading:

Elements of Design: Balance

Design Principles: Balance

Harmony
Harmony is “The main goal of graphic design,” according to Alex White, author of “The Elements of Graphic Design.” So,
you know it must be important. Harmony is what you get when all the pieces work together. Nothing should be
superfluous. Great design is just enough and never too much. Make sure all the details accord with one another before
you consider the project complete.

PRINCIPLE OF DESIGN
The principles of design describe the ways that artists use the elements of art in a work of art. Balance is the
distribution of the visual weight of objects, colors, texture, and space.

The principles of design suggest how a designer can best arrange the various elements of a page
layout in connection to the overall design and to each other.
 In landscape painting, principles of design might govern where the artist places the mountains or how
many clouds are in the sky. In page layout, the principles of design govern how many colors are
used, the sizes of fonts, how many columns of text there are, or whether pictures appear next to each
other or spread across the page — creating effective and pleasing arrangements of text and graphics.
 alignment
how elements on the page line up with each other and with margins
 balance
the distribution of elements on the page
 consistency
uniform use of design elements (see unity & harmony)
 contrast
differences between items on the page
 emphasis or dominance
creating a focal point
 proximity
how close together or far apart items are to each other (see grouping)
 repetition
use of the same colors, styles, shapes, or other elements and principles throughout a document
(see harmony)
 unity
how well parts of the document work together (see proximity & harmony)
 white space
the use of emptiness to give a layout breathing room
 grouping
visually arranging distinct components so that they appear as a single element (see proximity &
unity)
 harmony
establishing visual agreement among elements (see repetition, consistency, & unity)
 flow or rhythm or directional movement
arrangement of individual components so that they lead the eye of the reader (see hierarchy)
 scale or proportion
use of size to establish relationships or create a focal point (see contrast, white space, & emphasis)
 center of interest or focal point
arranging and/or sizing components to lead the eye to a specific area (see emphasis & balance)
 hierarchy
creates a pecking order or visual order-of-importance of all the components of a layout (see
emphasis & center of interest)