1. COMPUTER SCIENCE AND INFORMATION TECHNOLOGY DEPARTMENT
GRAPHICS AND
VISUAL COMPUTING
Kenneth A. Palomar, LPT
CSIT FACULTY
LESSON 4
2. LESSON IV
Design Basics: Points, Lines,
and Planes; Gestalt, Shape,
Balance, Rhythm, Unity; Color
i
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
3. CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
1
LESSON IV
OBJECTIVES
Students will…
• Develop an awareness of the formal role points, lines, and planes play in art and design
through the use of visual aids and class discussion;
• Develop an awareness of the formal role of Gestalt theory in the making of art an design
through the use of visual aids and class discussion;
• Develop an awareness of the physical properties of color and color‘s expressive role in visual
culture through the use of visual aids and class discussion;
• Demonstrate an awareness of the formal role points, lines, and planes play in art and design by
making photographs and/or drawings that focus on these formal elements;
• Make images—photographs and/or drawings— identifying points, lines, and planes in their
everyday environment;
• Make drawings, photographs, or sculptures/ installations using points, lines, and planes to
express an emotion, sensation, or action word;
• Constructively critique their peers on their use of points, lines, and planes to communicate
visually, respond to critique from their peers and the teacher by editing their work, and write
reflections on their work, the work of their peers, and how that work has changed based on
critique.
4. 2
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
OBJECTIVES
• Demonstrate an awareness of the formal role of Gestalt theory in the making of art and design;
• Make images—drawings and cut paper compositions—demonstrating the different elements of
Gestalt theory;
• Make images—drawings and cut paper compositions— utilizing Gestalt theory and visual principles to
visually express complex linguistic concepts/ideas;
• Critically analyze the use of Gestalt theory and visual principles in use in design they encounter in their
daily lives;
• Make drawings identifying the use of Gestalt theory and visual principles in this found design; Use their
images and critical analysis of found design to create through drawing new Gestalt compositions that
reflect their understanding of the application of Gestalt theory and visual principles;
• Demonstrate an understanding of the different color models and relationships between colors;
• Develop an awareness of color‘s expressive role in visual culture;
• Critically analyze the use of color in media to create thematic and narrative expressions;
• Make color compositions exploring the expressive and communicative qualities of the different color
relationships;
• Constructively critique their peers on their use of color to communicate visually, respond to critique
from their peers and the teacher by editing their work, and write reflections on their work, the work of
their peers, and how work has changed based on critique.
LESSON IV
5. 3
LESSON IV
INTRODUCTION
Basic two-dimensional design forms the foundation of graphic design
or visual communication. By applying basic mark-making or drawing concepts
such as lines and shapes to an understanding of how to define and make use
of the picture plane and apply compositional strategies such as figure-ground
relationships, scale, proportion, and space, as well as visual elements such as
pattern, texture, and color, graphic designers and artists are able to visually
communicate ideas and emotions to a viewer.
While artists use these foundational principles for self-expression and
awareness, graphic designers apply them to the challenge of visual
communication. As such, graphic designers frequently focus on using these two
dimensional basics with great efficiency; making the most of a few visual elements
at any given time—as opposed to layering many on top of one another—to
communicate as clearly as possible. For graphic designers, a firm grasp of the
basics is essential to all that they do.
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
6. 4
While there are many different ways to
approach the topic of two dimensional design, for
the purposes of this unit it is helpful to think of
them as drawing (Points, Lines, and Planes),
composition (Gestalt— Shape, Balance, Rhythm,
Unity), and Color.
INTRODUCTION
LESSON IV
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
8. 6
As the goal of graphic design is to efficiently connect a viewer
with a message, when drawing or making symbols or images, refined
renderings (drawings) are seldom the goal. Instead, graphic
designers rely on the same tools artists use to render the natural
world—points (or dots), lines, and planes (shapes) to distill a complex
image or concept into a concise, direct, or evocative symbol or
design.
To graphic designers, points, lines, and planes are essential tools
to plan, visualize, evaluate and ultimately communicate ideas to a
broad audience.
Design Basics: Points, Lines and Planes
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
9. 7
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Points, lines, and planes are the basic building blocks of design. From these
elements, designers create images, icons, textures, patterns, diagrams, animations,
and typographic systems. In this lesson, students will learn to identify these basic design
elements in art an design, apply them to expressive compositions, and critically
evaluate one another‘s use of points, lines, and planes to communicate visually.
• Points, lines, and planes are fundamental elements for creating complex design
systems, and are frequently combined to create texture, volume, shape, and a
sense of space.
• By first identifying points, lines, and planes in the environment around them, and then
using them to create expressive compositions, students will develop the skills in
observation and image-making to make more complex visual communication
design, as well as being prepared to identify and discuss their use in design and art
making.
10. 8
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Composition VIII, 1923, Wassily Kandinsky. Wassily Kandinsky used
points, lines, and planes to create a pictorial space
11. 9
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Squirrel, 1890, John Muir. In this
drawing, the artist uses points, lines,
and planes to realistically render a
squirrel holding a pine cone.
Photo by Carla Gates, used under
license (CC BY 2.0).
Ecureuil, Caisse d’Epargne, 1974,
Roger Excoffon. In this graphic
symbol of the same animal,
designer Roger Excoffon uses points,
lines, and planes to not only
express the idea of a ―squirrel‖ to the
viewer, but to also convey the sense
of speed and dexterity commonly
associated with the animal.
12. 10
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
What do graphic designers
mean when they refer to
points, lines, and planes, and
how are they used? To explore
this effectively, it is best to work
from common concepts and
definitions.
13. 11
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
POINTS
Points are those most fundamental marks that artists and designers make; a
simple dot or tiny drop of ink or paint that calls the viewer‘s attention to a position on
the page or canvas. Much as they can be visible, artists often use points as invisible
tools in the work they create, in the form of a vanishing point in a perspective drawing,
for example. Points can be powerful attention-getting tools when used alone, or can be
layered to create textures, a sense of depth, motion, and more.
A point. Points can most commonly be thought of as a dot or the most fundamental
of marks that combine to form a larger image.
14. 12
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Points in use. Together, individual points can be used much like lines to create a sense
of motion, density, or texture
15. 13
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Positive Space
Positive space is the area or part of a composition that the subject occupies.
For instance, the positive space could be a vase of flowers in a still life painting, a
person‘s face in a portrait, the trees and hills of a landscape painting. The area around
the positive space is called the negative space.
16. 14
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Locus
A particular position, point, or place; the effective or perceived
location of something abstract.
Negative Space
Negative space is the space between objects or the parts of an
object, for example the area between a cup and its handle. Also the
space between an object and the edges of the composition, i.e. the
space around an object or between lines. The opposite of negative
space is positive space.
17. 15
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LINES
• One of the most basic visual elements of design is the ‗line‘, and it
should not be underrated.
• As simple as lines are they can be used as crucial elements of
design.
• Lines can be used to add structure to a composition, to frame
information and to divide information. Lines can be used to add
hierarchy and emphasis, to decorate and to draw the eye to a
specific point.
• They can also be used to build and represent information in info
graphics
• Lines can be straight, curved, thick, thin, solid, and dashed.
18. 16
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
19. 17
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Line is an infinite series of points. Graphically, a line is the connection between two
points, or it is the path of a moving point. A line can be a positive mark or the space between
two or more positive shapes. Lines appear at the edges of objects and where two planes meet.
Lines can exist in many weights; the thickness and texture as well as the path of the mark
determine its visual presence. Lines can be straight or curved, continuous or broken. When a line
reaches a certain thickness, it becomes a plane. Many lines used together can create
volumes, planes, and textures.
Visually, a line (in red, above) can be thought of as marking the path of a point as it moves
through space, or linking the space between two points (in gray, above). Lines are used in
perspective drawing, for example, to imply a sense of depth or distance.
20. 18
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Lines in use. Individual lines placed together in orderly or random patterns can be used to create a
sense of texture (e.g., a basket weave) or a sense of volume or depth (e.g. crosshatch shading) in an
image.
21. 19
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
PLANES
Planes—or shapes—are defined by the lines at their edges. Artists use planes to
realistically render places, objects and people, or to abstractly define space and forms.
Graphic designers use planes to much the same effect, though planes are often used or
combined to represent complex objects (such as a building) in a more simplified or abstract
and symbolic way
Planes. As lines (in gray) intersect with one another, the interior space they create is known as a
plane (in red). All planes and shapes are ultimately defined by the lines at their perimeter.
22. 20
LESSON IV – Design Basics: Points, Lines and Planes
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Artists often combine all of these techniques to create
realistic renderings and abstract expressions of emotion and
thought. Likewise, designers combine all three to create
symbols or to add direction or energy to graphics and type.
Additionally, graphic designers use these tools to render
complex objects or scenes into symbols the viewer can quickly
grasp the meaning of—a logo, for example—or respond to—a
directional sign. Likewise, graphic designers can use points,
lines, and planes to expressively or dynamically define a page
to create compelling or interesting compositions.
24. 21
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
What is Gestalt?
With roots in the 1890s, Gestalt theory as a branch of psychology originated in
Germany in the 1920s. While psychologists now debate its utility in understanding (as
opposed to describing) how our minds work; it has great appeal for artists and
designers because it provides a concise description of how the audience perceives a
work, which can help with the effective production of a work.
Skull, 1991, Octavio Ocampo
(detail). Octavio Ocampo uses
Gestalt theory to inform his use of
shape and rhythm to create
hidden images (in this case, skulls)
out of seemingly unrelated
images and shapes.
25. 22
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Though it originates as a branch of psychology concerned with
the ―pattern seeking‖ inherent in human thought, graphic designers and
artists apply Gestalt theories as a way to create a reliable foundation for
the spatial organization of graphic information. For artists and graphic
designers, there are two broad components that are considered when
applying Gestalt principles to a composition:
1. The individual parts of a composition (points, lines, planes, etc.) that
can be analyzed and evaluated as distinct components, and
2. The whole of the composition, which is different from—and ultimately
greater than—the sum of its individual parts.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
26. 23
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Gestalt in image. As the viewer processes a seemingly random arrangement of black shapes on a
white page (left), the human tendency to find and recognize patterns allows the image of a
Dalmatian (right) underneath a leafy tree to emerge.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
27. 24
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Likewise, when graphic designers are laying out a poster, not only are they
carefully considering the typography, images, and illustrations they are going to use,
but also how all of those distinct elements will exist in logical spaces to relate to one
another on the poster itself. The organization of the whole poster—determining where
and how all of the elements will relate to and reinforce one another—is what makes the
design work to communicate its message to the viewer.
A thorough knowledge of Gestalt is invaluable for a graphic designer. By
taking advantage of natural human tendencies to see and respond to patterns,
graphic designers can decrease the time it takes for a viewer to understand and
respond to a message. While Gestalt imagery can be symbolic, typographic, illustrative,
or photographic, it is often strongest when it is employed to organize all of the elements
in a composition. This is especially effective when a design relies on quick exposure to
the viewer, designs such as posters, magazine covers, record jackets, etc.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
28. 25
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Gestalt principles
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
29. 25
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Closure
The mind supplies the missing pieces in a composition if there are
enough of the significant features visible. Simple shapes require few clues
while more complex ones may seem incomplete and forces the viewer
to work harder to fill in the gap.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
30. 26
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Symmetry
The quality of being made up of exactly similar parts facing each
other or around an axis. Symmetrical designs are balanced and easily
understood by a viewer, but can be visually uninteresting. While
asymmetrical designs can be awkward, they can also draw attention
to themselves.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
31. 27
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Figure-ground
A fundamental concept in design, it refers to the contrast
between black and white, foreground and background, dark and
light and equilibrium. Adjusting the equilibrium can throw the figure-
ground relationship off balance so the viewer is uncertain what they are
viewing.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
32. 28
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Continuation
Humans will find lines or contours and continue them
beyond their ending points if the elements of the pattern establish an
implied direction. In photography, a winding road that extends beyond
the image is one example.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
33. 29
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Similarity
Humans group objects together that look similar. In design, this
can be applied to typefaces, colors, text, and headline styles.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
34. 30
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
The most common—and most commonly understood—principle is
that of figure-ground. Figure-ground is one of the most fundamental
Gestalt principles and one that is key to a viewer being able to
understand imagery. Relying on contrast, it breaks a composition down
into two components:
1. Figure: The positive space(s) that are defined by a spatial relationship
which occurs between all of the other parts on a field or ground.
2. Ground: The background, field, white space or negative space with
carries the figure or positive elements
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
35. 31
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Figure-ground can be used to describe a wide variety of complex
images and compositions, but many people are most familiar with its
application in the design of corporate symbols as seen in the figure
below.
(Left to right) Shell, California Conservation Center (defunct), and Woolmark marks. Gestalt
and figure-ground relationships can be used to describe many different objects and
ideas, from the literal to the abstract and in between.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
36. 32
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
The design and arrangement of the figure on the ground is vital to creating a
successful symbol. Image below demonstrates the figure and ground as distinct
elements, and how they combine to make not only a recognizable image—a sea
shell—but a corporate symbol as well. While each element is relatively successful on its
own, the combination of the figure with the ground creates the most successful image.
Figure-ground in use. While the figure (left) and the ground (middle) are both relatively
recognizable, they are most successful in creating a clear—and therefore memorable—
symbol in combination.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
37. 33
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Elements/Principles of Design: visual tools to use to communicate a message.
Elements of Design: are the building blocks of graphics
Lines
The distance between two points. Look closely at the great variety of lines, straight,
curved, thick, thin, solid and not-solid.
Shapes
Squares (and rectangles), triangles, and circles are the three basic shapes.
Size
How big or small is it? Look at mass or visual weight of graphic and text elements.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
38. 34
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Texture
In addition to the actual texture of the paper we print on, look at the
textures we create through techniques such as embossing and the visual
texture created with certain graphics techniques.
Color
Ask questions such as what is the meaning of red? What colors go well
together? This concept builds on the conversation of the color wheel
and determining what colors go well together.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
39. 35
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
The Principles of Design: The principles of design describe the ways that artists use the elements of
art in a work of art.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Balance
• This refers to the ways one can achieve visual balance in a design using ways such as
symmetrical, radial, formal, and informal methods. There is also the rule of ―thirds‖ on a
visual platform that one can use to achieve balance.
• It is the distribution of the visual weight of objects, colors, texture, and space. If the
design was a scale, these elements should be balanced to make a design feel stable
• Balance is expressed as a sense of equilibrium
• Well balanced designs are visually stable, formal, and conservative
• Balance is the equal 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, and negative space.
Three Main Types of Balance
• Symmetrical (Formal) , Asymmetrical (Informal), Radial
40. 36
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
FORMAL BALANCE INFORMAL BALANCE
41. 37
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Symmetrical Balance Asymmetrical Balance
42. 38
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Radial Balance
43. 39
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
44. 40
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Pattern
• Is the repeating of an object or symbol all over the work of art.
• It is visual elements that repeat in a predictable manner. These can be made out of points,
lines, or planes. Patterns can be applied to shapes (e.g. a plaid shirt), or exist on their own
(e.g. wallpaper).
Movement
• Is the path the viewer‘s eye takes through the work of art, often to focal areas. Such
movement can be directed along lines, edges, shape, and color within the work of art.
• Is the use of lines, color, and repetition to create the illusion of motion.
• Movement could be a Curved forms or lines, repetition of geometric forms, and fuzzy lines
or outlines
45. 41
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Emphasis
• Is the part of the design that catches the viewer‘s attention. Usually the artist will
make one area stand out by contrasting it with other areas. The area could be
different in size, color, texture, shape, etc.
• To express with particular stress or force
46. 42
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Repetition
• Works with pattern to make the work of art seem active. The repetition of
elements of design creates unity within the work of art.
• Repetition is a reminder that every project should have a consistent look and feel.
This means finding ways to reinforce your design by repeating or echoing certain
elements.
47. 43
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
• Styles and visual elements should be repeated across a page and across a web site
• Leads to cohesive and consistent web site
• Repetition can be achieve with
-Text (font) properties: Use the same way throughout
-Color: Consistent use of color throughout site/documents
-Background: Background image/color
-Page and Section Layout: Similar elements should be layout the same way
-Image: Graphics can be repeated and/or styled similarly
-Alignment: Consistent use of alignment
• Repetition lets user know that they are still on the same website
• It allows a visitor to learn the page (or section) layout only once
Another form of repetition: Web design patterns
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
48. 44
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
For instance, if you have a specific color palette, look for ways to carry it through. If you've
chosen a special header style, use it every time.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
It's not just for aesthetic reasons—being consistent can also make your work easier to read. When
viewers know what to expect, they can relax and focus on the content.
49. 45
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Proportion
• It is the feeling of unity created when all parts (sizes, amounts, or number) relate
well with each other. When drawing the human figure, proportion can refer to
the size of the head compared to the rest of the body.
• Proportion is a principle that describes the size, location or amount of one
element to another (or to the whole).
50. 46
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Rhythm
• Is created when one or more elements of design are used repeatedly to create a
feeling of organized movement. Rhythm creates a mood like music or dancing.
To keep rhythm exciting and active, variety is essential.
• Rhythm is how the eye moves across a graphic design
• Good rhythm helps maintain the reader‘s Interest
• The moving force connecting the elements within a composition, creating a
visual beat or tempo. The regular repetition of elements can create the look and
feel of movement. It is often achieved through the careful placement of
repeated components which encourage the viewer to jump rapidly or glide
smoothly from one to the next. To be effective, continuation must establish a
solid rhythm.
Achieved in two ways:
• Repetition of shape, value or color
• Through the use of a rhythm of lines.
51. 47
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Variety
• Variety is the use of several elements of design to hold the viewer‘s attention and
to guide the viewer‘s eye through and around the work of art.
Unity
• Unity is the feeling of harmony between all parts of the work of art, which creates
a sense of completeness.
• The correct balance of composition or color that produces a harmonious effect.
• Unity is the relationship among the elements in a compositional space that
enables them to work together as a whole. The Gestalt principles are all about
the effective manipulation of different visual elements to create a unified whole
greater than the sum of its parts.
52. 48
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Contrast
• Contrast simply means that one item is different from another. In layout and
composition, contrast can help you do many things, like catch the reader's eye, create
emphasis, or call attention to something important.
• To create contrast in the example below, we've used color, more than one style of text, and
objects of differing sizes. This makes the design more dynamic and, therefore, more effective
at communicating its message.
• Contrast occurs when two or more visual elements in a composition are different.
• An abrupt shift in the appearance of the composition. Asymmetry relies on contrast, as can
continuation and proximity.
• When two elements are not exactly the same, they should be very different
• With text, contrast can be achieved through
Font size : small, medium, Large
Font Family: serif, San serif, Cursive, Moonscape and special character
Font Weight: light , normal , bold
Font style: oblique, normal, italic
Font Decoration: none, underline, shadow
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
53. 49
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
54. 50
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Proximity
• Proximity is all about using visual space to show relationships in your content. In
practice, it's pretty simple—all you have to do is make sure related items are grouped
together (for instance, blocks of text or elements in a graphic, as in the example
below).
• It is the closeness and distance that can be used to group related items and
separate unrelated items, respectively
• It is closeness of an object that can be used to group related items together
-Section headings close to section text
-Figure Caption close to figure
Distance can be used to visually separate unrelated items
-Extra space before section headings separates it from previous sections
-Extra Space before and after a figure separate them from text and other
figures
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
55. 51
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Example we have three individual shapes
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
If placed together in just the right proximity, negative space is made to suggest a new
visual shape entirely. This gives new meaning to the individual shapes that make this
composition.
If we move them apart ever so slightly, this visual, this message is lost.
56. 52
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Adequate
relationships are
established
in this layout.
Elements are in
close proximity in a
comprehensive
order.
Clear relationships
are established in
this layout.
Elements are in
close proximity in a
clear order.
57. 53
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Hierarchy
Contrast is also closely tied to hierarchy, which is a visual technique that can
help the viewer navigate your work. In other words, it shows them where to begin and
where to go next using different levels of emphasis. Establishing hierarchy is simple: Just
decide which elements you want the reader to notice first, then make them stand out.
High-level or important items are usually larger, bolder, or more eye-catching in
some way.
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
58. 54
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
Alignment
• Alignment is something you deal with all the time, even if you don't realize it.
Whenever you type an email or create a document, the text is aligned automatically
• Our minds like to imagine straight line grids when look at things
• We like to see things line up
• We cant understand to see things that almost - but don‘t quite- line up
• We also like to see equal distance
-This is a technique called symmetric spacing
• Things that are not aligned get treated differently
-Navigation bar text vs. body text
• It is a critical for good looking web pages
• Small alignment problems can make the whole page look bad
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
59. 55
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
60. 56
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
61. 11
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
62. 58
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Alignment to a Grid
63. 59
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
LESSON IV – Gestalt: Shape, Balance, Rhythm, Unity
Approaches of alignment in design
64. 139
LESSON I – INTRODUCTION CREATIVE DESIGN
THANK
YOU!
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
65. 140
LESSON I – INTRODUCTION CREATIVE DESIGN
QUESTIONS???
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
66. 141
LESSON I – INTRODUCTION CREATIVE DESIGN
References:
• Albers, J. (2013). Interaction of Color, 50th Anniversary Edition. New Haven, CT: Yale University Press.
• Arntson, A. (2012). Graphic Design Basics, 6th Edition. Boston, MA: Wadsworth, Cengage Learning.
• Berryman, G. (1990). Notes on Graphic Design and Visual Communications, Revised Edition. Menlo Park, CA:
Crisp Publications, Inc.
• Bowers, J. (2011). Introduction to Graphic Design Methodologies and Processes: Understanding Theory and
Application. Hoboken, NJ: John Wiley & Sons, Inc.
• Itten, J. (1993). The Art of Color. New York, NY: John Wiley & Sons, Inc.
• Itten, J. and Birren, F. (1970). The Elements of Color: A Treatise on the Color System of Johannes Itten Based on His
Book the Art of Color. New York, NY: Van Nostrand Reinhold Company.
• Kandinsky, W. (2013). Point and Line to Plane. Eastford, CT: Martino Fine Books.
• Klee, P. and Moholy-Nagy, S. (1968). Pedagogical Sketchbook. London: Faber & Faber.
• Landa, R. (2014). Graphic Design Solutions, 5th Edition. Boston, MA: Wadsworth Cengage Learning.
• Lupton, E. and Cole Phillips, J. (2015). Graphic Design: The New Basics, Second Edition, Revised and Expanded.
New York, NY: Princeton Architectural Press.
• Meggs, P. (1992). Type and Image: The Language of Graphic Design. New York, NY: John Wiley & Sons, Inc.
• Meggs, P., & Purvis, A. (2006). Meggs' History of Graphic Design, 4th Edition. Hoboken, NJ: John Wiley & Sons, Inc.
• Munari, B. (2008). Design as Art. London: Penguin.
• Santoro, S. (2014). Guide to Graphic Design, 1st Edition. Upper Saddle River, NJ: Pearson Education, Inc, Prentice
Hall.
• Wheeler, A. (2006). Designing Brand Identity, 2nd Edition. Hoboken, NJ: John Wiley & Sons, Inc.
• Wong, W. (1972). Principles of Two-Dimensional Design. New York, NY: John Wiley & Sons, Inc.
• National Core Arts Standards. nationalartsstandards.org
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
67. 142
LESSON I – INTRODUCTION CREATIVE DESIGN
• Principles of Two-Dimensional Design, by Wucius Wong
• Notes on Graphic Design and Visual Communication, by Gregg Berryman Graphic Design: The
New Basics: Second Edition, Revised and Expanded, by Ellen Lupton and Jennifer Cole Phillips
• Type and Image: The Language of Graphic Design, by Philip B. Meggs
• Point and Line to Plane, by Wassily Kandinsky
• Pedagogical Sketchbook, by Paul Klee
• Design as Art, by Bruno Munari
• Interaction of Color, by Josef Albers
• The Art of Color, by Johannes Itten
• The Visual Language Of Herbert Matter a documentary film by Reto Caduff
• Multiconsult
• Principles of Two-Dimensional Design, by Wucius Wong
• Notes on Graphic Design and Visual Communication, by Gregg Berryman Graphic Design: The
New Basics: Second Edition, Revised and Expanded, by Ellen Lupton and Jennifer Cole Phillips
• Type and Image: The Language of Graphic Design, by Philip B. Meggs
• Point and Line to Plane, by Wassily Kandinsky
• Pedagogical Sketchbook, by Paul Klee
• Design as Art, by Bruno Munari
• Interaction of Color, by Josef Albers
• The Art of Color, by Johannes Itten
• The Visual Language Of Herbert Matter a documentary film by Reto Caduff
• Multiconsult
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City
68. 143
LESSON I – INTRODUCTION CREATIVE DESIGN
• Untitled, 1952–3, Mark Rothko (detail)
• Rock Roll, 1958, Bradbury Thompson (from
• Westvaco‘s Inspiration for Printers)
• Additive and subtractive color models
• Hues, tints, and shades
• Homage to the Square, c. 1965, Josef Albers
• Saturation
• The Meeting, 1919, Johannes Itten
• Warm and cool colors
• Sample color relationships
• Farbkreis, 1961, Johannes Itten
• Creating a color palette from a photograph
• Color in cinema
• Color in culture
• Color in culture and branding
• Color and mood in graphic design
• Color and theme in graphic design
• Paul Getty (2011)Getty education
• https://edu.gcfglobal.org/en/beginning-graphic-design/color/1/
• CFC GLOBAL (2020)
• Lindsay W. MacDonald, University of Derby, UK ( Using Color Effectively in Computer Graphics)
CSIT Department | Negros Oriental State University | Main Campus I Dumaguete City