Slide 1

GRAPHIC DESIGN
FUNDAMENTALS
Module 10.1
Slide 2

What is Graphic Design?

a process in which we use
typography, images, colors, icons and
other illustrations to communicate
visually.
 This term was first coined by William
Addison Dwiggins on 1992 as he
called himself a “graphic designer”.
Slide 3

Main goals of graphic design

for the Web:
 Adding aesthetic appeal
 Helping to express the theme of the
website
 Helping to show the logical
relationships among all elements that
appear on the page, both core content
elements and elements of the
interface
Slide 4

This Lesson will provide you with a quick

education in graphic design, especially as it
pertains to the Web.
 Aesthetic appeal on the Web
 Uses of line, shape, and color
 Designing screen text
 Expressing theme with style and
mood
 Principles of composition
 Strategies for page layout
Slide 5

Aesthetic Appeal on the Web

 The word "aesthetic" refers to the
human response we associate with
beauty
 Aesthetic appeal is a key goal of
graphic design on the Web because it
engages users.
 Aesthetics is especially important on
the home page, where users make a
split-second decision whether to stay
or leave.
Slide 6

The basic elements of graphic design

 Lines
 Shapes
 Form
 Texture
 Balance
Slide 7

Is Line Considered as
shape?
Slide 8

Line
A line is a kind of shape
which connects two or more
points. It is also considered
as one of the essential
element of graphic design.
Lines can be thick, thin,
curved, or jagged.
Slide 9

Different styles of a line

 Thick Line
 Thin Line
 Curved Line
 Jagged Line
Slide 10

Lines attributes
 Weight
 Color
 Texture
 Style
Slide 11

Shape
 A shape is a two-dimensional external
boundary of an object. Any object outline that
has height and width can be considered as a
shape. Together with lines, they form the
foundation of your design.
 Shapes are formed by lines. Shapes can also
be implied by lines that do not fully complete a
shape. When lines are sufficiently thick, we
perceive them as shapes. Shapes are a
fundamental component of almost any
possible Web page. Shapes define objects
and suggest planes. As we show later, shapes
are the basis of page layout.
Slide 12

There are two (2) major categories of

shapes in design:
 Geometric – these are regular and
mathematical shapes.
 Organic – these are freeform shapes
Slide 13

Organic and Freeform Shapes

Slide 14

Shapes can be used in organizing or

dividing contents, create illustrations,
and in adding interest to one’s
work/design.
Slide 15

Shapes as Objects in a Design

 Shapes and lines make up the
objects that appear as core
content elements. Extremely
complex, often irregular shapes,
combinations of shapes, and lines
(with or without color) make up
drawings of people, buildings,
products, and so forth.
Slide 16

Shapes as Objects in a Design

 When the artist is skillful, we don't even think
of these representations as shapes: We don't
notice that the shoulders and chest of
Napoleon Bonaparte approximate a blue
trapezoid (wider at the shoulders, narrower at
the waist) and that the head is a complex oval.
In addition, regular geometric shapes-circles,
octagons, stars, diamonds, and so forth-serve
many roles in our designs.
Slide 17

Shapes as Planes
 Perspective drawing, shadowing, and other
techniques have been used for centuries to
create the illusion of 3-D space. But simple
juxtapositions and modifications of shapes can
subtly suggest multiple planes and give extra
interest to an image.
 One prevalent technique is to allow shapes to
overlap so that one seems to be sitting on top
of another. Another prevalent technique is a
"reverse-out": The designer visually cuts out
pieces of a shape to suggest an underlying
plane showing through
Slide 18

Form
 A form is a three-dimensional shape.
Shadows, perspective, depth, and sometimes
texture creates a form. Without these
attributes, a form is just a shape or series of
shapes. Plain images/objects and flat designs
can be enhanced by adding shadows or
lightings to create an illusion of a form. It also
gives the object a sense of place.
Slide 19

What is the difference of Form and

Shape?

A B
Slide 20

Texture
 Texture refers to the physical
quality of the surface of an object
in an artwork or design. It also
refers to how an object look or
feels like. An object might be
smooth, rough, shiny, hard, or soft.
It can be in 3D (real texture) or 2D
(visual texture). Texture adds
depth and visual interest to the flat
images or objects.
Slide 21

Texture can be used for:

 Establishing visual value or a focal
point in an artwork.
 Having contrast within a design
 Making an artwork visually
balanced.
Slide 22

Visual balance is the creation of

visual equilibrium by relating
elements such as line, shape, color,
space or form in terms of their visual
weight.
Slide 23

Which is Symmetrical and asymmetrical?

B
Slide 24

Two kinds of visual balance

1. Symmetrical balance- From the name itself,
symmetrical balance, which includes radial
symmetry is when both two sides of a piece are
equal. If you fold your artwork or piece into two or
if you put an imaginary line between your
artwork, each half is identical or visually similar to
the other half
Slide 25

Two kinds of visual balance

2. Asymmetrical balance. Both sides of your
composition does not contain the same
elements but contain almost the same visual
weight
Slide 26
 Module 10.2
BRANDING AND
IDENTITY
Slide 28

BRANDING

Branding is simply what

people thinks about you,
your company, your
product or your service.
 Is the visual representation
of a brand. It can be in a
form of image, choice of
color or typography, and
Identity or
many more. For example, we
visual identity
quickly recognize the
company and its service but
just looking at its logo,
typeface, or color
combinations.
 Branding and identity are not
just for products and
Identity or services, we can even apply
visual identity it to how we work or what
type of output we produce
Slide 31

Six steps to creating a brand

identity design
1. Establish clear purpose and positioning.
2. Conduct thorough market research
3. Get a personality
4. Create a polished logo
5. Create an attractive color pallete
6. Select professional typography
a.Do not make it fancy
b. Don’t mix fonts/typefaces
c. Mix contrasting fonts/typefaces
Slide 32

Brand identity

The consistency of this brand identity is

formed by its features like culture,
vision, personality, positioning,
presentations, relationships and other
meaning beliefs followed by the entity.
Brand
Identity
Slide 34

Brand personality
Brands, without a doubt, have personality.
From our perspective, we like to connect the
emotion dimension of the purchasing process
to the brand personality impact. The
emotional characteristic of the brand is
represented by the brand's personality. It is
influenced by positioning as well as the top
management's core values and culture.
Slide 35

Brand equity
There are six well-established conceptual models of brand equity:
1. Brand equity dimensions entail brand awareness and brand image.
2. Brand associations are the best dimensions for measuring brand
equity. Such as the ones that will be discussed shortly.
3. Brand equity is created by brand attitude and brand name familiarity.
4. Brand equity is defined as the perceived quality of a brand, as well as
brand awareness, brand associations, and advertising awareness.
5. Brand loyalty, perceived quality, brand awareness, and brand
associations are the most important dimensions of brand equity.
6. Customers' perceptions are dominated by brand awareness and
brand meaning.
Slide 36

Example of Nescafe’s brand

profile
The transparency concept is taken seriously by Nescafe;
therefore it was easy to identify the following
characteristics of Nescafe’s brand profile.
Mission – Nescafe is dedicated to making great tasting
coffees for you to enjoy every day.
Mantra – Bringing people together, Great tasting coffee,
Well-being.
CEO – Paul Bulcke.
Slide 37

Example of Nescafe’s brand

profile
Target Market – Nescafe’s primary target market constitute
by those that drink coffee, especially those that are looking for
a fast solution to good coffee.
Products – Coffee products (Nescafe Original, 3 in 1, Alta
Rica, Cap Colombie, Espresso, Gold Blend, Green Blend,
Cappuccino, Original Decaff, Gold Blend Decaff) and Coffee
Machines ( Dolce Gusto ).
Price – average serving price is 0.20 $. Place – from
convenient stores to supermarkets and rarely in restaurants,
café’s a similar location.
Slide 38

Nescafe’s brand identity

Nescafe is a well-known brand that was founded in Singapore
around 70 years ago. The parent company Nestle and the
international profile owned by their very diverse range of
coffee products are the main associations for the Nescafe
brand. Fortunately, Nescafe makes use of all of the elements of
brand identity that discussed earlier. The overall brand
structure is as follows: easy to pronounce brand, brand
consistency, Nestle's high reputation, and media mixes such
as television commercials, radio, cinema, packaging, event
sponsorship, and sales promotion.
Slide 39

How to develop a strong brand

identity
Before you can decide what tangible elements will comprise your brand
identity, you must first determine who you are as a brand.
Who you are as a brand is made up of a few key elements:
• Your mission (what’s your “why?”)
• Your values (what beliefs drive your company or you as an indivual?)
• Your brand personality (if your brand was a person, what kind of personality
would they have?)
• Your unique positioning (how do you differentiate yourself from the
competition?)
• Your brand voice (if your brand was a person, how would it communicate?)
Slide 40

Evaluation/Projects
Slide 41

D B

2021
Slide 42

Logo Example
Slide 43
Slide 44
Slide 45