Visual Grammar
and
Elements of Design
Siddharth Kshetrapal
@siddharthkp
Slide 3
Slide 3 text
: to define its basic
elements, describe its
patterns and
processes, and to
understand the
relationship between
the individual
elements in the
system.
Slide 4
Slide 4 text
Point
Line
Shape
Texture
Color
Value
Space
Design
Elements
*
*
Slide 5
Slide 5 text
POINT
The point serves
as the focus of a
visual,
highlighting or
drawing attention
to important
information.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Several
points in
combination
may
represent a
different
object or
idea.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
A line is just a
collection of
closely placed
points
LINE
Slide 11
Slide 11 text
Vertical Lines are usually related to power and strength.
Slide 12
Slide 12 text
Horizontal lines symbolize rest and relaxation.
Slide 13
Slide 13 text
Diagonal lines are dynamic and action-oriented.
Slide 14
Slide 14 text
Deep, acute curves, on the other hand,
confusion
turbulence
frenzy
Soft, shallow curves suggest
comfort
relaxation
safety
familiarity
Slide 15
Slide 15 text
Soft, Comfortable Acute, Turbulent
Slide 16
Slide 16 text
A shape is defined as an
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.
SHAPE
Slide 17
Slide 17 text
Mechanical shapes Organic shapes
Slide 18
Slide 18 text
Texture can be
defined as the
appearance and
feel of a
surface. An
objects function
will also
determine the
texture and
type of
materials used
in design
TEXTURE
Slide 19
Slide 19 text
Color is one of
the most
powerful of
elements. It has
tremendous
expressive
qualities.
COLOR
Slide 20
Slide 20 text
V a l u e
Value is the relative
degree of lightness
and darkness in a
design element.
COLOR
Photography
Slide 21
Slide 21 text
Gloom/mystery Happiness/Warmth
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Hue
Web Design
Slide 24
Slide 24 text
Monochromatic
Slide 25
Slide 25 text
Complementary
Slide 26
Slide 26 text
Because a
website's
content is
primarily there
to be read.
CONTRAST
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
BRO TIP #243
Slide 30
Slide 30 text
Good Contrast Bad Contrast
Slide 31
Slide 31 text
Psychological
Implications of
Color
Fashion design
Slide 32
Slide 32 text
Peaceful, Calm
Blue is a color
that can be
both peaceful
and calming
as well as
cold and
standoffish.
Slide 33
Slide 33 text
Joyous
Sunny
shades of
yellow are
the
perfect
thing to
cheer you
up on a
bad day.
Slide 34
Slide 34 text
The color Red
empowers
and draws
attention
toward the
wearer. It’s
also strongly
associated
with romance
and passion.
Slide 35
Slide 35 text
Space is defined
and determined
by shapes and
forms.
Ground/-ve space
SPACE
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
?
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
Negative Space =
Positive Space
=> Good Design
Slide 44
Slide 44 text
Negative space
does not
always have to
be
complimentary