Module 1 for Graphics Design-Fundamentals of Design.pdf

Fundamentals of Design

1. MARIA FE NOVERE E. AMOR
Associate Professor IV
VISUAL
GRAPHIC DESIGN

2. Course Outline
Module 1: Introduction to Visual
Communication & Design
Theory
▪Fundamentals of Design
-The basis of art, design, and
modern digital work
Module 2: Color Theory & Typography
▪Color Wheel
▪Harmonies
▪Psychology of Color
▪Typography Anatomy
▪Pairing & Readability
Module 3: Layout & Composition
▪Proximity
▪Space
▪Alignment
▪Contrast
▪Repetition
Midterm Exam
October 6-11, 2025

3. Module 4: Graphics Software Basics
▪Tools & Workflow (Xara Xtreme Pro,
Canva)
Module 5: Branding & Logo Design
▪Concept
▪Identity
▪Iconography
Module 6: Digital Media Graphics
▪Banners/ Posters
▪Social Media
▪Web Ads
▪Advanced Layout
–Brochures
–Flyers
Module 7: Portfolio Preparation & Future
Trends
▪Applying style
▪Consistency
▪Presentation
Final Project
Project: A mini-branding package for a fictional
company or organization including:
▪Logo + color palette + typography guide
▪One print material (poster or flyer)
▪One digital media material (social media ad
or banner)
▪Compiled in a simple portfolio (digital or
printed)
December 9-12,15, 2025

4. Module 1
Introduction to Visual Communication &
Design Theory
Fundamentals of Design:
The basis of art, design, and modern digital work

5. Intended Learning Outcomes (ILO):
By the end of the lesson, the students should be able to:
1.Define visual communication and explain its relevance to IT
and media.
2.Identify and describe the elements of design (line, shape,
color, texture, space, form, value).
3.Explain the principles of design (balance, contrast, emphasis,
movement, proportion, rhythm, unity).

6. Definition of Visual Communication
•Visualcommunicationisthepracticeofconveyingideasand
informationthroughvisualelementssuchasimages,graphics,
colors,layouts,andsymbols.
•Itisconsideredthemostimmediateandpowerfulformof
communicationbecausevisualscanbeprocessedfasterthan
text.

7. Importance of Visual
Communication in IT
1. UI Design (User-Interface)
-UI design makes sure software, apps, and
systems are not just working, but also easy
and enjoyable to use. Visual communication
here involves buttons, icons, menus, and
color schemes that guide users naturally.
Examples:
•A banking app that uses intuitive icons –
wallet icons for balance, money icons for
payments
•Mobile apps like Spotify use clean
navigation bars and recognizable – simple
play/pause icons, clear navigation bar
Good UI = less user confusion + better experience

8. 2. Web Design
Websites rely on visuals to structure content,
improve readability, and keep users from
feeling overwhelmed. Good use of space,
typography, and hierarchy ensures users find
what they need quickly
Examples:
▪Google’s homepage– clean, minimalist, focus
only on search
▪E-commerce sites (e.g., Shopee, Lazada) use
visual hierarchy (large product images,
highlighted discounts, color-coded categories)
to make navigation easy. – big product images,
highlighted discounts, color-coded categories
A well-designed website = easy navigation + more users stay longer

9. 3. Digital Marketing
➢In online ads and campaigns, visuals grab
attention faster than text. Creative
posters, social media graphics, and
motion ads engage audiences and can
influence buying decisions.
Examples:
•Coca-Cola social media ads– bold red
branding with short, catchy text
•Facebook/Instagram ads for gadgets
often use bold colors and lifestyle photos
to attract younger markets.
•Infographics that simplify data for
campaigns (e.g., “5 Tips to Save Energy”
posters shared online).
Strong visuals = higher chance people will notice
and click ads

10. 4. Multimedia
Multimedia combines text, images, sound,
animation, and interactivity. Visuals help tie these
elements together for learning, entertainment, or
business.
Examples:
•E-learning platforms (e.g., Coursera, Moodle) use
video lectures with supporting slides, icons, and
graphics for better understanding.
– videos + slides + icons = better understanding
•Video games: Visual design guides gameplay
(health bars, maps, icons).
– maps, icons, and visual signals guide the player
•Corporate presentations: Animated infographics
and video explainers used in business meetings.Visuals make learning fun, gaming intuitive,
and presentations engaging

11. In IT, visuals are not just decoration.
They guide users (UI, Web Design),
persuade audiences (Digital Marketing),
and make experiences engaging
(Multimedia).

12. Role of Visuals in Communication
1. Attract Attention Quickly
Human brains process images much faster than text. A strong
visual can make people stop, look, and pay attention.
Examples:
•A YouTube thumbnail with bold colors and expressive faces
makes you want to click the video.
•A poster for a school event that uses bright colors and large
fonts grabs attention faster than a plain text announcement.

13. 2. Simplify Complex Data
Charts, infographics, and dashboards make numbers and data
easier to understand. Instead of reading long reports, visuals
show the “big picture.”
Examples:
•Infographics on COVID-19 cases showed daily trends in simple
graphs.
•Dashboards in apps (like Google Analytics or school grading
systems) show performance through graphs instead of long
tables.

14. 3. Enhance Memory Retention
People remember information better when it is paired with
visuals. Images stick in the brain longer than plain text.
Examples:
•Flashcards with pictures help students memorize faster.
•Educational slides with icons and diagrams are easier to recall
during exams.

15. 4. Influence Emotions and Decision-Making
Visuals can trigger feelings that influence how people think or
act. Colors, imagery, and design style can make an audience feel
excited, safe, or even hungry.
Examples:
•Food ads showing juicy burgers or cold drinks make you crave
them.
•Charity campaigns use images of affected communities to
encourage donations.

16. 5. Strengthen Branding and Corporate Identity
Logos, colors, and design styles make a brand instantly
recognizable. Visual consistency builds trust and brand recall.
Examples:
•McDonald’s golden arches (yellow M) are recognizable
worldwide.
•Tech brands like Facebook and Twitter use shades of blue to
symbolize trust and connection.

17. Fundamentals of Design
•Foundation of every visual medium, from fine art
to modern web design. They're even present in
seemingly unimportant details, like the fonts that
make up most compositions.
•Basic elements, includes: line, shape, form,
texture, and balance.
•The fundamentals can be intimidating at first,
especially if you don't consider yourself an artist.
But keep an open mind—there's a lot they can
teach you about working with different assets and
creating simple visuals from scratch.

18. LINE
•A line is a shape thatconnects two
or more points.
•Serves as foundation of a structure
•It can be fat, thin, wavy, or jagged—
the list goes on.
•Every possibility gives the line a
slightly different feel.
•Directs the eye, creates movement
(Ex: website navigation)

19. Lines can be used in
morehumble compositions for
organization, emphasis, or just
decoration.
In the example, lines have been
used to create a flow chart that
guides the reader's eye from one
element to the next.

20. •When working with lines,
pay attention to things
likeweight,color,texture,
andstyle.
•These qualities can have a
big impact on the way
your design is perceived.

21. •Look for places where lines
are hiding in plain sight; for
example, intext.
•Experimenting with different
line qualities can give you
very different results.

22. Shape
•A shape isany two-
dimensional areawith a
recognizable boundary.
•This includes circles,
squares, triangles, and so
on.

23. 2 Distinct Categories of Shapes
1.geometric(or regular)
2.organic(where the
shapes are more free
form)
Ex: app buttons

24. •Shapes are a vital part of
communicating
ideasvisually. They give
images weight and make
them recognizable.
•We understand street signs,
symbols, and even abstract
art largely because of shapes.

25. •Shapes have a surprising
number of uses
ineveryday design.
–organize or separate
content
–create simple illustrations
–add interest to your work

26. •Shapes are important because they're thefoundationof so
many things. Learn to look for them in other designs, and soon
you'll start seeing them everywhere.

27. FORM
•When a shapebecomes 3D,
we call it a form.
•Forms make up a variety of
things in the real world,
including sculptures,
architecture, and other
three-dimensional objects.
•3D appearance via shading,
gradients Ex: icons

28. •However, forms don't have to
be three-dimensional shapes.
They can also be implied
throughillustration, using
techniques like light, shadow,
and perspective to create the
illusion ofdepth.

29. •In two-dimensional design, form
makesrealismpossible. Without it,
renderings like the image—a ball
with highlights and shading—simply
wouldn't be the same.

30. •Even images that areless
realisticuse similar
techniques to create
dimension.
•In the example, the
lighting and shading are
stylized, but still hint at
form and depth.

31. •In everyday composition,
the purpose of form is the
same, but on a smaller
scale.
•For example, a
simpleshadowcan create
the illusion of layers or give
an object asense of place.
•Basic forms can bring a
touch of realism to your
work, which is a powerful
tool when used in
moderation.

32. TEXTURE
•Texture is thephysical quality
of a surface. Like form, it can
be part of athree-
dimensional object
•surface quality, adds depth
(Ex: website backgrounds)
a small prickly cactus in a
shiny ceramic pot

33. •Or it can beimpliedthrough
illustration, suggesting that
itwouldhave texture if it
existed in real life.

34. •In design, texture addsdepth and tactilityto otherwise flat
images. Objects can appear smooth, rough, hard, or soft,
depending on the elements at play.

35. •For beginners,
textures make
greatbackground
imagesand can
add a lot of
interest to your
work.

36. •Just be careful not to go overboard—too much texture in a
single design can quickly become overwhelming.

37. BALANCE
•Balance is theequal
distribution of visual
weight(more specifically,
how much any one element
attracts the viewer's eye).
Balance can be affected by
many things, including color,
size,number, andnegative
space.

38. •Mastering balance
can be tricky for
beginners because
it does take some
intuition.

39. Kinds of Balance
1. Symmetricaldesigns are the same or similar on both sides of
an axis. They feel balanced because each side is effectivelythe
same(if not identical).

40. 2. Asymmetricaldesigns are different, but the weight is stillevenly
distributed. The composition is balanced because itcalls
attentionto the right things (in this example, the person's name
and company logo).

42. The rule of thirds
•Many people, including
designers and photographers,
use a strategy called therule of
thirds. This imagines your work
area divided into a3x3 grid.
The focal point of the image is
placed on or near one of
thegrid lines, creatingvisual
balance with the rest of the
space.

44. Putting it all together
•The fundamentals of
design are all about
thebigger picture—in
other words, learning
to appreciate the
many small details
that make up every
composition.

46. Learning Task
•Choose one poster, print ad, or digital ad (online/social
media).
•Identify all the 5 basic elements (line, shape, form, texture,
balance) used in the design.
•Answer briefly:
–What makes this design effective/ineffective?
–How could it be improved?
•Present analysis with image of the chosen to the class next
meeting.