Theory of Design

1. Negative space has long been a staple of good design. Leaving white space
around elements of a design is the first thing that usually comes to mind. But then
there are designs that use that white space to infer an element that isn’t actually
there

3. Law of proximity
The law of proximity states that when an individual perceives an assortment of objects, they perceive objects that are
close to each other as forming a group. For example, in the figure illustrating the law of proximity, there are 72
circles, but we perceive the collection of circles in groups. Specifically, we perceive that there is a group of 36
circles on the left side of the image and three groups of 12 circles on the right side of the image. This law is often
used in advertising logos to emphasize which aspects of events are associated

4. Law of similarity
The law of similarity states that elements within an assortment of objects are perceptually grouped
together if they are similar to each other. This similarity can occur in the form of shape, colour,
shading or other qualities. For example, the figure illustrating the law of similarity portrays 36
circles all equal distance apart from one another forming a square. In this depiction, 18 of the
circles are shaded dark, and 18 of the circles are shaded light. We perceive the dark circles as
grouped together and the light circles as grouped together, forming six horizontal lines within the
square of circles. This perception of lines is due to the law of similarity

5. Law of closure
Gestalt psychologists believed that humans tend to perceive objects as complete rather
than focusing on the gaps that the object might . For example, a circle has good
Gestalt in terms of completeness. However, we will also perceive an incomplete circle
as a complete circle.That tendency to complete shapes and figures is called
closure.The law of closure states that individuals perceive objects such as shapes,
letters, pictures, etc., as being whole when they are not complete. Specifically, when
parts of a whole picture are missing, our perception fills in the visual gap. Research
shows that the reason the mind completes a regular figure that is not perceived through
sensation is to increase the regularity of surrounding stimuli. For example, the figure
that depicts the law of closure portrays what we perceive as a circle on the left side of
the image and a rectangle on the right side of the image. However, gaps are present in
the shapes. If the law of closure did not exist, the image would depict an assortment
of different lines with different lengths, rotations, and curvatures—but with the law of
closure, we perceptually combine the lines into whole shapes

6. Law of symmetry
The law of symmetry states that the mind perceives objects as being symmetrical
and forming around a center point. It is perceptually pleasing to divide objects into
an even number of symmetrical parts. Therefore, when two symmetrical elements
are unconnected the mind perceptually connects them to form a coherent shape.
Similarities between symmetrical objects increase the likelihood that objects are
grouped to form a combined symmetrical object. For example, the figure depicting
the law of symmetry shows a configuration of square and curled brackets. When the
image is perceived, we tend to observe three pairs of symmetrical brackets rather
than six individual brackets

7. Law of common fate
The law of common fate states that objects are perceived as lines that move along the smoothest path. Experiments
using the visual sensory modality found that the movement of elements of an object produces paths that individuals
perceive that the objects are on. We perceive elements of objects to have trends of motion, which indicate the path
that the object is on. The law of continuity implies the grouping together of objects that have the same trend of
motion and are therefore on the same path. For example, if there are an array of dots and half the dots are moving
upward while the other half are moving downward, we would perceive the upward moving dots and the downward
moving dots as two distinct units

8. A flock of birds is viewed as a single unit when flying in the same direction and thereby
sharing a common fate.

9. Law of continuity
The law of continuity (also known as the law of good continuation) states that
elements of objects tend to be grouped together, and therefore integrated into
perceptual wholes if they are aligned within an object. In cases where there is an
intersection between objects, individuals tend to perceive the two objects as two
single uninterrupted entities. Stimuli remain distinct even with overlap. We are less
likely to group elements with sharp abrupt directional changes as being one object.
For example, the figure depicting the law of continuity shows a configuration of
two crossed keys. When the image is perceived, we tend to perceive the key in the
background as a single uninterrupted key instead of two separate halves of a key.

10. Law of past experience
The law of past experience implies that under some circumstances visual stimuli are categorized according to past
experience. If two objects tend to be observed within close proximity, or small temporal intervals, the objects are
more likely to be perceived together. For example, the English language contains 26 letters that are grouped to form
words using a set of rules. If an individual reads an English word they have never seen, they use the law of past
experience to interpret the letters "L" and "I" as two letters beside each other, rather than using the law of closure to
combine the letters and interpret the object as an uppercase

11. Example of the figure/ground gestalt principle

12. Harmony is the visually satisfying
effect of combining similar or
related elements. Harmony in a
painting or design helps bring about
unity. All harmony and no contrast,
however, can become monotonous. A
balance must be struck between areas
of harmony and areas of contrast.

13. Variety means adding a
change to disrupt the
monotony of a composition. It
creates visual interest in design.
Variety can be achieved through
a number of different factors,
listed as
Repetition and rhythm –
unpredictable patterns on design
Line – different lengths and
weights
Shape and scale – changing up
the look of some elements
Color/Hue – using diversity in
the color tones and hues
Textures – rough or smooth
planes

14. Factors of Coherence
Designs constructed with regard for the esthetic principles of balance, proportion, rhythm,
tonality and harmony were judged good (unified or coherent) while designs lacking these
characteristics were judged poor. Degree of coherence in a design did not correlate
positively with perceptual loss of separateness of parts. Natural parts of both good and
poor designs were found to have the characteristics of regularity, good form, symmetry,
high degree of isolation, and familiarity, while unnatural parts lacked these. Natural parts
of good designs were instrumental in affecting the balance of the designs, while the
unnatural parts were not. Neither natural nor unnatural parts affected balance in the poor
designs. It is concluded that principles of natural sensory organization as well as
experience or meaning factors must be considered as determinants of visual perceptions.

15. Order in disorder
In the progression from problem to idea to solution, the designer may describe what
she does in commercial terms (business requirements, technological limitations) or
artistic terms (aesthetics, usability, human factors). Regardless, the most successful
designs can be reduced to an essential intention: to create order out of disorder.

16. GRADATION
Gradation of size and direction produce linear perspective. Gradation of of colour from
warm to cool and tone from dark to light produce aerial perspective. Gradation can add
interest and movement to a shape. A gradation from dark to light will cause the eye to
move along a shape.

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

19. • It is a line established by two points about which forms and spaces can be arranged in a regular or irregular
manner.
• Imaginary and not visible except to the mind’s eye.
• An axis is essentially a linear condition.
• It has qualities of length and direction.
Induces movement and promotes views along its path
An axis must be terminated at both of its ends by a significant form and space.
The notion of an axis can be reinforced by defining edges along its length.
An axis can also be established simply by a symmetrical arrangement of forms and spaces.
Points in space established by vertical, linear elements or centralized building forms.

21. Axis
A line established by two points in space,
about which forms and spaces can be
arranged in a symmetrical or balanced
manner.
A great example of this ordering principle is
found in La Jolla, California at the Salk
Institute. Designed by architect Louis Kahn
this is a building used for research facilities
and office space. As you can see there is a
balance of the buildings on either side of the
axis of the waterway cutting through the
courtyard.

22. DATUM
A line, plane, or volume that, by its continuity
and regularity, serves to gather, measure, and
organize a pattern of forms and spaces.
Steven Holl designed the Chapel of St.
Ignatious in Seattle, WA that uses the datum
principle in its design. The pond in front of the
building acts as an introduction, or a datum
point of reference, to the colorful building.
Being from the NW I know it is often cloudy
and rainy so I’m happy that he was able to
showcase many colors in the building’s design
that normally wouldn’t be found in such a
grey environment.

23. 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 design leads the eye through each area in
priority order. A good example is a homepage: There’s usually a
navigation bar and a logo, some sort of large header image, or
text with a call to action. In order of importance, the logo tells
the user where they are; the site navigation shows the user how
to get around the site; and the call to action compels the user to
do something. More often than not, the CTA is the biggest or
boldest element on the page, followed by the logo and
navigation. It’s designed to help the user complete an action or
absorb information.
Another example is this article. The headline is the most important thing on the page so you can identify what
you’re reading; the intro gives you a summary of the article; and the content gives you the meat of the design
principles. If we read the article from bottom to top, it wouldn’t make much sense.
A good rule of thumb for hierarchy is that your most important elements should be the most prominent.

24. Contrast
The difference between two or more objects in a design is referred
to as contrast. The difference in objects could be light and dark, thin
and thick, small and large, bright and dull, etc.
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.

25. Scale
Scale is the sizing of elements or a standard of
measurement. It can be used in combination with
other principles like emphasis to draw the viewer
into a focal point, and helps us make sense of
designs or imagery. If something is drawn to scale,
it shows an object with accurate sizing (though it
could be reduced or enlarged from its actual size).
This creates a way to depict objects as larger than
life, or bring a large object down to fit on a piece of
paper.
In digital design, scale can also refer to the pixel dimensions for the device you’re designing for.
Sometimes two to three times as dense as their non-retina counterparts, retina devices need a
scaled canvas. Depending on the device, this could be 2x or 3x the amount of the display. For
example: A 400px-wide box is still rendered as 400px on a retina device, but it’s twice as dense.
So you would design on a 800px-wide canvas because it’s 2x the density of a non-retina or 1x
device.

26. Complexity & contradiction

29. Scale and proportion are both design elements that have to do with size. Scale is the size of one object in
relation to the other objects in a design or artwork. Proportion refers to the size of the parts of an object in
relationship to other parts of the same object. Throughout the centuries, designers have used scale and
proportion to depict or distract from the ideal. As with elements such as unity and balance, artists use scale
and proportion to convey their unique insights to the viewer.
Scale
Humans judge the scale of something according to body size. Some of the most common adjectives that
apply to scale include:
• Life-sized
• Miniature
• Oversized
• Enormous

30. Proportion
Proportion is an element of design that pertains to the relative size of the components that compose an object.
Again, the human body is the standard by which people judge proportion. An eye should be smaller than a
face, for instance, and a male’s shoulders should be wider than his hips.
The golden ratio is a mathematical method for determining proportion. Based on the number pi, this ratio has
been the standard for artists and designers since the ancient Egyptians used it in designing the pyramids.
Also, the golden ratio is applicable to the natural proportions of the body. The more closely a person’s
proportions conform to this ratio, the more classically beautiful they are likely to appear.
When you see a disproportionate object, it catches
your attention. Cartoons with large-headed people,
for example, catch your eye. Obvious
exaggeration may even tickle your funny bone.
“The Head” by Eric Fogel is a good example:

31. Ergonomics is the process of designing or arranging workplaces, products and systems so that they fit the
people who use them.
Most people have heard of ergonomics and think it is something to do with seating or with the design of car
controls and instruments – and it is… but it is so much more. Ergonomics applies to the design of anything
that involves people – workspaces, sports and leisure, health and safety.
Ergonomics (or ‘human factors’ as it is referred to in North America) is a branch of science that aims to learn
about human abilities and limitations, and then apply this learning to improve people’s interaction with
products, systems and environments.
Ergonomics aims to improve workspaces and environments to minimise risk of injury or harm. So as
technologies change, so too does the need to ensure that the tools we access for work, rest and play are
designed for our body’s requirements.

32. Ergonomics is a relatively new branch of science which celebrated its 50th anniversary in 1999, but relies
on research carried out in many other older, established scientific areas, such as engineering, physiology
and psychology.
To achieve best practice design, Ergonomists use the data and techniques of several disciplines:
Anthropometry: body sizes, shapes; populations and variations
Biomechanics: muscles, levers, forces, strength
Environmental physics: noise, light, heat, cold, radiation, vibration body systems: hearing, vision,
sensations
Applied psychology: skill, learning, errors, differences
Social psychology: groups, communication, learning, behaviours.

33. Proxemics is the study of human use of space and the effects that population density has on behaviour,
communication, and social interaction.
Proxemics is one among several subcategories in the study of nonverbal communication, including haptics
(touch), kinesics (body movement), vocalics (paralanguage), and chronemics (structure of time).
Hall described the interpersonal distances of humans (the relative distances between people) in four
distinct zones:
Intimate space
Personal space
Social space
Public space.

34. Intimate distance for embracing, touching or whispering
Close phase – less than one inch (one to two cm)
Far phase – 6 to 18 inches (15 to 46 cm)
Personal distance for interactions among good friends or family
Close phase – 1.5 to 2.5 feet (46 to 76 cm)
Far phase – 2.5 to 4 feet (76 to 122 cm)
Social distance for interactions among acquaintances
Close phase – 4 to 7 feet (1.2 to 2.1 m)
Far phase – 7 to 12 feet (2.1 to 3.7 m)
Public distance used for public speaking
Close phase – 12 to 25 feet (3.7 to 7.6 m)
Far phase – 25 feet (7.6 m) or more.

35. The distance surrounding a person forms a space. The space within intimate distance and personal distance
is called personal space. The space within social distance and out of personal distance is called social space,
and the space within public distance is called public space.
A Bubble Diagram is a very simple (hand) drawing that consists of roughly drawn bubbles (representing
spaces) connected by solid lines, broken lines or wavy lines etc. to specify the type of relationship between
the spaces.
The bubbles can be used to represent different kinds of spaces in a plan, varying in shape to represent
features of
greater or lesser importance and size. The bubble diagram can create a rough sense of flow which is used
to develop a more refined plan. A bubble diagram floor plan, for example, can represent the flow of a
space and provide information about the sizes of rooms relative to each other.