APPL115 Empowerment Technologies

Learning Material for Week 11(October 25 – 29, 2021)

1st Semester, SY 2021 – 2022

TOPIC: PRINCIPLES OF DESIGN

Introduction
The implementation of multimedia capabilities in computers is just the latest episode in the
long series of improving human communications. The advances in this area reflect the innate desire
of man to create outlets for creative expression, to use technology and imagination to gain
empowerment and freedom for ideas.

Multimedia refers to information that are represented through the use of different content
forms such as text, graphics, audio, video and animation and are stored, transmitted and processed
digitally. Multimedia is said to be a means for communications, a tool for expression and a venue for
narratives. As the definition implies, it is necessary that we should be able to train ourselves to see
our environment – its form and content in order for us to effectively tell our stories or effectively create
the contents needed to tell a story.

With this, it is necessary to understand visual media and information. Visual media and
information includes materials, applications or programs that we can use to formulate new information
through the use, analysis, evaluation and production of visual images. Furthermore, visual media
includes photography, video, screenshots, infographics, data visualization (charts and graphs),
comic strips/cartoons, memes, visual note-taking, paintings, and graphics. These visual media may
be formally (e.g. government, schools and established media/publishing outfits) and informally (e.g.
hobbyist/individuals who create visuals as personal activity) produced.

The primary purpose of visual information is to gain attention, create meaning and facilitate
retention. For example, the delivery of instructions by teachers are generally visual. They make use
of presentations / images to illustrate lessons. Thus it is important to note that right combination of
design elements used according to design principles can effectively communicate one’s visual
instructional message. Learning about design elements and principles will help us create and
evaluate visual images.

Remember that images or visual information create meaning. To understand more about the
meaning an image or visual information entails is to reduce it to its visual elements. Understanding
these visual elements and its combinations will make your work more creative and effective.


Visual Elements
Visual design elements are the basic things that can be seen. It serves as the building blocks
or basic units in the construction of visual image. The design elements include:

a. Line – describes a shape or outline. It is the foundation of all drawing. It is the first and most
versatile of the visual elements of art. Line in an artwork can be used in many different ways.
It can be used to suggest shape, pattern, form, structure, growth, depth, distance, rhythm,
movement and a range of emotions.

The way we draw a line can convey different expressive qualities:

- Freehand lines can express the personal energy and mood of the artist
- Mechanical lines can express a rigid control

Page 1 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

- Continuous lines can lead the eye in certain directions

- Broken lines can express the ephemeral or the insubstantial
- Horizontal lines can express calmness and stability
- Vertical lines can express power and stature
- Diagonal lines can express movement and tension
- Thick lines can express strength
- Thin lines can express delicacy
b. Shape – are the result of closed lines. It can be natural or man-made, regular or irregular, flat
(2-dimensional) or solid (3-dimensional), representational or abstract, geometric or organic,
transparent or opaque, positive or negative, decorative or symbolic, colored, patterned or
textured.

Shapes can be used to control your feelings in the composition:

- Squares and Rectangles can portray strength and stability
- Circles and Ellipses can represent continuous movement
- Triangles can lead the eye in an upward movement
- Inverted Triangles can create a sense of imbalance and tension
c. Color – is a function of light determined by its hue (color name), intensity (purity of the hue)
and value (lightness or darkness of the hue). Color and color combination plays a large role
in design. It can be used to elicit emotions or give emphasis.
d. Texture – the way the surface feels or actually feels to the touch. The visual texture is the
illusion of the surfaces resulting in a feeling of smoothness or roughness in objects.
e. Space - refers to the distance between or the area around and within shapes, forms, colors
and lines. There are two types of space that exist within a composition — positive space and
negative space. Positive space is the actual objects or shapes within an artwork and negative
space is the space around and between those objects. A good way to demonstrate positive
and negative space is by utilizing Rubin’s vase (Figure 2). As you can see the vase occupies
what would be referred to as positive space and the space surrounding the vase is negative
space. Notice how the negative space is forming silhouettes of two faces in profile.

Figure 2: Rubin’s Vase

Source http://teresabernardart.com/wp-content/uploads/2016/02/rubins-vase-positive-negative-space-300x162.jpg

Visual Design and Principles

The principles of visual design deals with how the visual elements are applied and arranged
better, thus, it concerns how these elements are placed in a composition. Composition is sometimes
defined as applying design principles.

The design principles are concepts that are used to organize or arrange the visual elements.
Again, the way in which these principles are applied affects the expressive content and/or the
message of the work. Thus, how one applies these principles determines how successful/effective
the design may be. Remember that design differs from art in that it has to have a purpose. Visually,

Page 2 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

this functionality is interpreted by making sure an image or an element has a center of attention, a
point of focus. The principles of design are the rules we follow to create an effective composition that
clearly delivers a message to our audience.

There are six (6) fundamental principles of design, and these are:
a) Unity and Harmony
b) Balance
c) Hierarchy
d) Scale and Proportion
e) Dominance and Emphasis
f) Similarity and Contrast

Unity and Harmony

It is the principle of combining elements that are similar or related to achieve a visually
satisfying feel of the composition. The arrangement of elements creates a sense of completeness.

Unity and Harmony can be achieved through:

● Proximity- a sense of distance between elements
● Similarity- likeness or seemingly repeatable form or pattern with other elements
● Continuation- the sense of having a line or pattern extend in distance or space
● Repetition- elements being copied or mimicked numerous times
● Rhythm- achieved when recurring position, size, color, and use of a graphic element have
a focal point interruption.

The given example (Figure 3) below shows harmony and unity through proximity (as seen in
the distance of the elements in the art form), similarity (the seemingly repeatable patterns),
continuation (the patterns give the illusion of extension), repetition (elements are repeated)
and rhythm (the recurring position, size and colors of the elements provide a focal point
interruption)

Figure 3: Quilt Design

(Showing the Principle of Unity and Harmony achieved through Proximity, Repetition, Similarity, Continuation and Rhythm)
Source: https://thequiltshow.com/images/2017/design_to_quilt2/MOdernDrunkMaritzaSoto.png

Balance
It is the aesthetic feel of equal weight, attraction or attention of the various visual elements
to achieve unity. It refers to the overall distribution of visual weight in a given composition.

Page 3 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

There are different forms of Balance:

● Formal/Symmetrical – a form of balance where it uses equal distribution of elements –
meaning the visual weights are equal or the same in both part of the vertical axis of the
work form. An example is shown below (Figure 4).

Figure 4: Tree of Life

(Showing the Principle of Balance - Symmetrical)
Source: https://www.pinterest.ph/pin/259801472233744425

● Informal/Asymmetrical – a form of balance where the visual weights are not equal in both
parts of the vertical axis.

Figure 5: The Starry Night by Vincent van Gogh

(Showing the Principle of Balance - Asymmetrical)
Source: https://en.wikipedia.org/wiki/File:Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg

Vincent van Gogh’s The Starry Night (Figure 5), for instance, uses a notable visual,
the sun, in the top right, and balances it out with a dark cypress tree in the bottom left. It
would not be a successfully asymmetrical balance if Van Gogh put both the sun and tree
on the right side of the page.

Asymmetrical balance is when you have two dissimilar sides of a design and have
positioned visual weight unequally, and yet you’ve still achieved a sense of balance. It

Page 4 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

evokes a sense of modernism and movement. It allows for more variety in a composition
than symmetrically balanced designs (Hurst, Hurst, 29, & 28, 2019).

● Radial – when elements are led towards a focal point. Radial balance is symmetry in
various directions where the visual elements are arrange around a central point in the
composition (Hurst, Hurst, 29, & 28, 2019). Often, when used in a composition, radial
balance designs are circular. Such example is given in Figure 6.

Figure 6: A Photograph Showing Radial Balance

Source: https://rockirdolloplive.com/wp-content/uploads/2019/11/c8dbb0cfdd7441cc7f55694dbc6e99ca-1.jpg

Hierarchy
It is the principle of arranging elements to imply importance. Hierarchy is the control of visual
information in an arrangement or presentation to imply importance. Hierarchy influences the
order in which the human eye perceives what it sees.

There are different forms of Hierarchy in visual design:

● Trees – elements are arranged like a tree with a trunk, branches, and sub-branches

Figure 7: Visual Hierarchy in Layouting

Source: https://alvalyn.com/wp-content/uploads/2019/08/visual-hierarchy.jpg

● Weight – elements of the same weight belong to the same class of hierarchical
position. A good example is shown below (Figure 8).

Page 5 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

Figure 8: A Sample Newspaper

Source: https://miro.medium.com/max/1400/0*iaF44B9lemzgFcdy.png

● Nest – elements are arranged as parents and child. Elements are nested visually to
show what’s part of what. For example a web page (see Figure 9). When accessing
a website, we look at the header of the web page that usually contains the app name
or organization name and the navigation bar. The header usually appears above the
article or the contents of the web page/s, visually encompassing the whole area of the
page, as you click on the links in the navigation bar, the contents below it changes.
Thus, the elements in webpages are nested visually to show what is part of what
elements.

Figure 9: Sample Webpage / User Interface

Source: https://public-media.interaction-design.org/images/uploads/user-content/1445/bKCivzWpfQS80CFh5SwLfhw7GZAjuhQA9uudQ89w.jpeg

Scale and Proportion

It is the principle of design that deals with distribution of the forms or elements in the space.
It creates relationships of scale between elements.

Scale is the size of one object in relation to the other objects in a design or work form.

Proportion refers to the size of the parts of an object in relationship to other parts of the same
object.

Scale and Proportion can be achieved through:

● Size – elements of the same sizes in relationship with each other
● Ratio – elements related to each other in a ratio appear together in visual harmony
● Divisions – create focal points that give a sense of relationship

Page 6 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

Figure 10: Size impacts visibility

Source: https://visme.co/blog/wp-content/uploads/2017/08/Scale-organizes-content-by-size.png

Dominance and Emphasis

It is the principle of design that creates hierarchy in the arrangement of elements where a
degree of emphasis will catch the viewer’s attention.

One main element will dominate the other elements to give more importance to it or an
isolation will be made to give the subject an emphasis (see Figure 11).

Dominance and Emphasis can be achieved through:

● Highlight – breaking the visual hierarchy to create form for emphasis
● Color – distinguishes elements in a series of similar forms
● Size – elements of different sizes focus viewer's attention accordingly

Figure 11: Color and contrast draw attention

Source: https://visme.co/blog/wp-content/uploads/2017/08/Color-and-contrast-draw-attention-and-create-harmony.png

Similarity and Contrast

Contrast refers to the arrangement of opposite elements (light vs. dark colors, rough vs.
smooth textures, large vs. small shapes, etc.) in a piece so as to create visual interest,
excitement and drama. While the similarity design principle states that elements of a design that
share common characteristics will have an appearance of belonging to each other

Page 7 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020

APPL115 Empowerment Technologies
Learning Material for Week 11(October 25 – 29, 2021)
1st Semester, SY 2021 – 2022

Contrast creates space and difference between elements in your design (see Figure 12). Your
background needs to be significantly different from the color of your elements so they work
harmoniously together and are readable.

Figure 12: A Photo showing High Contrast

Source: https://www.pinterest.ph/pin/154670568440070935

Similarity and contrast can be achieved through:

● Light & Dark – clear foreground and background lend contrast between elements
● Line – line elements of varying textures and form bring about a contrasting effect

The right combination of design elements used according to design principles can effectively
communicate your visual instructional message. Learning about design elements and principles will
help you create and evaluate visual images effectively.

REFERENCES

Hurst, A., Hurst, A., 29, I., & 28, U. (2019, June 27). Retrieved November 16, 2020, from
https://thevirtualinstructor.com/blog/balance-a-principle-of-art

VIdallo, C. (2016). | E – Tech | Empowerment Technologies (pp. 174 - 197).

Page 8 of 8 Imperial, M.Z. and Montealegre, E.H. | ADNU STEM © 2020