ELEMENTS AND PRINCIPLES

OF DESIGN
ITST 306
UI/UX and Cross Platform Application

Charles Alfred Alunan Cruz

WHAT IS DESIGN?
/ˈdəˈzīn,dēˈzīn/
 WHAT IS DESIGN?
● Generally speaking, it is the process of envisioning and planning the creation of objects, interactive systems, buildings, vehicles, etc. It
user-centered, i.e.
● users are at the heart of the design thinking approach. It is about creating solutions for people, physical items or more abstract systems to
address a need or a problem.

● It is a very broad concept and its meaning can greatly vary from one field to another. It and permeates many aspects of our lives and
branches out into many different subgenres, from product design, sound , virtual reality , interaction , to designing cars, video games,
software interfaces, the home and offices interior etc. Schools adapted to the market's evolution accordingly by creating graduate and
postgraduate programs in Design.

A COMMON MISCONCEPTION ABOUT DESIGN

Design is not about making things pretty just for the sake of it

● Nowadays, it can be categorized as a fancy sounding word, and there seems to be a certain amount of misconceptions surrounding it. But
what is it really at its core? Is it simply a process to make pretty looking things? Far from it. It doesn’t focus purely on aesthetics, nor is it
about adding ornaments to an item. First and foremost is it about making the user’s interaction with the environment more natural and
complete.
ALL THE PICTURES BELOW ARE EXAMPLES OF DESIGN
 Design Fundamental
01 Questions
WHAT DOES A GRAPHIC
DESIGNER DO?
When he gets a graphic design job, be it a poster design,
book design, web design, advertising, he has to start
with asking himself the following fundamental
questions:

○ What is the objective of the communication

○ What needs to be said first and then next

and then after that? (levels of hierarchy)

○ How do you want the eye to flow through

the page?

○ What is the tone of voice?

○ Who are you speaking to?

Fundamental Question 1: Objectives of the Communication
What is the information that needs to be passed on? When the audience reads your book/webpage/ad what’s he supposed to get
out of it?

An advertisement and a newspaper have different objectives of communication.

Fundamental Question 2: What needs to be said first and then next and then after
that? (hierarchy)
Once you have figured out what the objective of your communication is you’ll want to think about what needs to
be said first and foremost and what it should be followed by.
Fundamental Question 3: How do you want the users eye to move around the
page?
The hierarchy mentioned above, along with elements like color, contrast, size etc, will automatically make your
viewers eyes go through the page in a certain way. This can be manipulated as per your intention.
Fundamental Question 4: Who are you speaking to?
You have to be very sure about this as different people need to be spoken to differently, just the way it is in real
life.
Fundamental Question 5: What is the tone of voice?
Only once you have got the above figured out can you think about the more external elements of your piece of
work.
02 Visual Design Elements
VISUAL DESIGN ELEMENTS
● There’s always a lot to learn, a lot to do, and a lot to consider when you’re a beginner – not to mention the fact that
technology is constantly evolving, new software is being released, and new trends are coming at you rapid-fire.
Truth be told, it can get a little overwhelming.

● The solutions to these questions are tackled using the graphic designer’s tool kit.
VISUAL DESIGN ELEMENTS: THE DESIGNERS TOOLKIT

01 02 03
LINE COLOR SHAPES

04 05 06
TEXTURE TYPOGRAPHY FRAMING

07 08 09
CONTRAST BALANCE COMPOSITION
1. Line
Lines can channel certain ideas . Straight ones can
evoke order and neatness, Wavy lines can create
movement, and Zig-zagged lines can imply tension or
excitement.
A technique applied a lot in photography is the use of ‘leading lines’ which do just what they claim – they
lead the eye. Finding and emphasizing strong leading lines in your piece can allow you to direct the eye
through the entire piece or to certain focal points.

VERTICAL HORIZONTAL

Represents dignity, formality, Represents calm, peace and

stability and strength. relaxation.

DIAGONAL CURVED

Represents action, activity, Represents freedom, the natural,

excitement and movement. having the appearance of softness
and creates a soothing feeling or
mood.
1. Line
A strong use of line is a great way to stylize your illustrations.

Lines are versatile, simple and effective graphic elements that you certainly should not take for granted!
Experiment with them today, and see what cool things they can add to your design!
1. Line
2. Color
● Color has an immediate and profound effect on a design.
● Color can make or break your design.
● Color is PARAMOUNT
● Color creates specific moods, atmospheres, channels emotions and
each shade has certain specific connotations associated with it.
● In short, color can make or break your design.
Design by Smack Bang Designs for women’s skin rejuvenation
service ‘Lite Luxe’. This design has opted for light, soft and pastel
colours. Whites, light greys, soft blush tones and a copper/gold
foiling, these chosen colours complement each other gently to
create a calm, elegant and feminine design.

On the other hand, we have this branding for juice brand Frooti by
Sagmeister & Walsh. Unlike the previous example which chose a
palette that gently complemented itself, this branding has chosen a
colour palette that sharply contrasts, creating a much more vibrant,
energetic and playful design.
Color Theory
In traditional color theory, these are the 3 pigment colors that can not be mixed or formed by any combination of other colors.

Red, Yellow and Blue are called Primary Colors.

All other colors are derived from these 3 hues.
Color Theory
Secondary Colors are colors formed by mixing the primary colors.

Green, Purple and Orange are formed by the mixing of the primary colors.
Color Theory
Tertiary Colors are colors formed by a primary and a secondary color .

That's why the hue is a two word name, such as blue-green, red-violet, and yellow-orange. 
WHY DO WE NEED TO KNOW THE COLOUR THEORY?
Knowledge of Color harmonies and complimentary colors aid us in composition.

HARMONIOUS COLORS are colors that sit next

to each other on the color wheel.

COMPLEMENTARY COLORS are colors

opposite each other on the color wheel.
USE OF COLOR
HARMONIES

USE OF
COMPLIMENTARY
COLORS
COLOR AGAINST DIFFERENT COLORS
One color may look different against different colors.

Red appears more brilliant against a black background and somewhat duller
against the white background. In contrast with orange, the red appears lifeless; in
contrast with blue-green, it exhibits brilliance. Notice that the red square appears
larger on black than on other background colors.

Here the smaller rectangle on the left appears to have a redder tint
COLOR SYMBOLISM
The communicative properties of a color can be defined by two categories:
Natural Associations and Psychological (Or Cultural) Associations.

The color green can stand for both nature and Islam.
COLOR AND CORPORATE ID
The psychological aspect of color is the main rationale behind its use in corporate ID.

The other reason is that color is the first thing we perceive in any graphic element.
3. SHAPES
● A shape is defined as a two or more dimensional 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.
● All objects are composed of shapes and all other 'Elements of Design' are shapes in some way.
SHAPES
SHAPES
SHAPES
SHAPES
SHAPES
SHAPES
4. SCALE (SIZE)
Scale is the size of something compared to the world in general - an
artwork might be termed miniature, small scale, full scale or life-size,
large scale or larger than life, or monumental.
4. TEXTURE

Texture is defined as the surface

characteristics of a material that can be
experienced through the sense of touch or
the illusion of touch.

https://www.webfx.com/blog/web-design/web-designs-textures/
5. TYPOGRAPHY
THE STYLE AND APPEARANCE OF PRINTED
MATTER.

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.
TYPOGRAPHY

Next, we have body copy. Now, there’s an ongoing debate amongst the world of body copy between those who favour serif and
those who favour sans-serif in terms of readability and legibility.

So what is the answer? Well, it’s down to preference and each situation, but generally speaking, serif is best for print, and sans-
serif is best for web.
6. FRAMING
Just like you do with your photographs and pieces of art, framing your designs
correctly is an important aspect. We usually think of framing in terms of
photography – what you include, what you don’t, etc. But, framing is equally as
important in design.

Physical frames such as box outlines or graphic elements can enhance or draw
attention to specific elements of your design.
6. FRAMING
● Frames don’t have to be graphic either. If you’re
working with photographic elements, why not consider
using them to frame your designs? Check out this poster
that uses random objects to create a frame for the
superimposed type.

● This way, you draw attention to the piece by the frame,

and direct the eye to the really important bits.
FRAMING
FRAMING
7. CONTRAST
Contrast is often the magical key ingredient to making your designs ‘pop’, which is
a (sometimes frustrating) demand from many design clients.

In a very basic definition, contrast is the degree of difference between two elements
of your design.

Some common forms of contrast are dark vs. light, thick vs. thin, large vs. small,
etc.

Contrast has a great effect on readability and legibility as well, it’s a big reason why
you see novels and many other publications printing in black text on a white
background.
CONTRAST
8. BALANCE
Balance is a pretty important thing in most of life, and it’s equally as
important in the world of design.

One way to master balance is to think of each of your elements as

having a ‘weight’ behind it. From text boxes, to images, to blocks of
colour, consider each of their sizes, shapes, and what ‘weight’ they
have in relation to other elements on the page.

A good technique is to imagine if your design were to be printed out

as a 3D model. Would it stand, or would it tip to one side?
BALANCE
One type of balance is ‘asymmetrical balance’, which is less about mirroring left and right/top and bottom, and more about distributing,
sizing and aligning elements so that their ‘weights’ are even.
9. COMPOSITION

Composition is a nice point to end on as it is the bringing together of every other

principle we’ve discussed.

‘Composition’ refers to the overall arrangement of elements in your design.

COMPOSITION
 Principles of Design
03 Classic and digital designers alike harness the principles of design to shape their
work, building on top of the elements of design to give cohesion to their pieces.
When used successfully, these principles have the ability to transform designs,
both aesthetically and in terms of performance.
PRINCIPLES OF DESIGN

01 02 03
UNITIY BALANCE HIERARCHY

04 05 06
CONTRAST EMPHASIS SCALE

07
REPETITION
 1. UNITY
Unity is a force operating within a design that gives it
the appearance of oneness or resolution. This ensures
no single part is more important than the other.

Author of The Elements of Graphic Design Alex White

explains,

“To achieve visual unity is the main goal of

graphic design. When all elements are in
agreement, a design is considered unified.”

Using design elements to apply unity to your work is a

strong way to bring a brand concept to life. Let’s say a
sports brand like Nike or Reebok has an intense “in
your face” campaign. They might use big bold fonts,
bright colors, and highly stylized imagery to exude
intense training emotions. On the flip side, a company
like Casper might use a more subdued palette with
bright white tones and light, airy fonts to emulate a
restful night sleep.
 2. BALANCE
Objects in design carry weight just like in the physical
world, but it’s called visual weight. The visual weight
of a design needs to have balance. It’s like putting two
objects on a seesaw: If one side is too heavy, the
viewer’s eye goes directly to the heavy part. If it’s
weighted with all things equal, the seesaw is perfectly
suspended without either side touching the ground.

Balance can be implied by size, shape, or even contrast.

While it can utilize symmetry or equality, balance can
also be achieved through asymmetry. Think of
asymmetry as the opposite of mirroring: Instead of
seeing the reflection, you see something that evenly
distributes the elements. For example, three small
objects can offset the visual weight of one large object.
Or a small, dark, and shaded object can offset the visual
weight of a large, lighter element.

RADIAL BALANCE: a kind of balance where the

elements branch or radiate out from a central point.
What kind of balance is illustrated in this painting Oriental
Poppies, by Georgia O’Keefe?

                                   
If you said symmetrical balance, you are correct!

If you could visually divide the paper in half. There would be a poppy on both sides. No one side dominates the pictures.
Neither poppy appears to be more important than the other.
What type of balance is shown in this painting, Arrangement in Grey and
Black: Portrait of the Painter's Mother (commonly known as Whistler’s
Mother), by James Whistler?
If you said, asymmetrical balance, you were right! The large form of the woman is "visually equal"
to the black curtain and white painting on the wall. This makes the painting appear balanced.
What type of balance is shown in this stained glass artwork, Rose
Window?

                                                                                                     
Radial Balance! Look at the spiral or spinning effect of the pattern. The axis is the center point
and the design or pattern appears to "radiate" from that point.
 What type of balance is shown here?

GeorgeSeurat,
George Seurat,(French)
(French)1859-1891,
1859-1891, Sunday
Sunday Afternoon
Afternoonon
onthe
theIsland
IslandofofLaLaGrand
GrandJatte
Jatte

Here the larger figures to the right are balanced by the

many smaller figures to the left. Also, Seurat added
additional "light" to the left. How does this add balance to
the painting?
 What type of balance is shown here?

The monkey and the the

cat balance each other
out on either side of the
woman.

Freda Khalo, Autorretarto con Collre de Espinas y Colibri,

 3. HIERARCHY

One of the most important principles in design,

hierarchy is a way to visually rank your design
elements.

Hierarchy is not based on a design styles, but rather

the order of importance.

A good rule of thumb for hierarchy is that your most

important elements should be the most prominent.
 4. CONTRAST
Contrast is most commonly associated with
readability, legibility, and accessibility. Like
hierarchy, the most important element in a design
should have the most contrast. A bright blue button
on a stark white background with a lot of white
space is considered high contrast. If the button was
almost the same color as the background or was a
1px stroke versus a fill, it would have less contrast.

A text-based design could be high contrast by using

black text on a white background. To dial down the
contrast, you’d use gray text on a white background.
An easy reminder is to think of a black-and-white
photo. If the photo has a full range of white, gray,
and black, it has high contrast. If the photo only goes
from a dull white to dark gray, it’s a low-contrast
image.
 5. EMPHASIS
Emphasis can be created by size, weight, position,
color, shape, and style. Sometimes referred to as
dominance, emphasis might seem similar to contrast,
but it’s not quite the same. Contrast deals with the
difference between two objects, and emphasis deals
with the impact of an object. To make it a little more
confusing, you can use contrast to support the emphasis
of an object—like placing a solid black sphere on a
white background. This is high contrast with emphasis:
The viewer’s eye is drawn directly to the heavy shape.

Adding emphasis to an object creates a focal point,

which grabs an audience’s attention. It’s where you
want the viewer to look first, but doesn’t overpower the
rest of the design (or it would be out of balance). A
simple example is a long hallway or corridor, where
your eye is drawn to the end of the hallway. Imagine
painting a bright wall at the end: That’s your focal
point.
6. REPETITION
Repetition is the recurrence of a design
element, commonly utilized in patterns or
textures. Repetitive elements can be used in
conjunction with other principles to create a
design that leads a user’s eye to a focal point,
has continuity, or flow. A repetitive element
could be repeated lines, shapes, forms, color, or
even design elements.
FIN. MERCI BEAUCOUP.

Thank you for listening!