THE BUILDING BLOCKS

OF VISUAL DESIGN
SIMPLE PERO
ROCK!!!!
THE BUILDING BLOCKS OF VISUAL DESIGN

• Visual design is about creating and making the general

aesthetics of a product consistent. To create the aesthetic style
of a website or app, we work with fundamental elements of
visual design, arranging them according to principles of design.
These elements and principles together form the building blocks
of visual design, and a firm understanding of them is crucial in
creating a visual design of any product.
ELEMENTS OF VISUAL DESIGN

• Line
Lines are strokes connecting two points, and the most basic element of visual design. We
can use them to create shapes, and when we repeat them, we can form patterns that create
textures.
ELEMENTS OF VISUAL DESIGN

• Although simple, lines can possess a large variety of properties that allow us to convey a
range of expressions. For example, lines can be thick or thin, straight or curved, have
uniform width or taper off, be geometric (i.e., look like they are drawn by a ruler or
compass) or organic (i.e., look like they are drawn by hand).
ELEMENTS OF VISUAL DESIGN

• Lines are simple, but can convey different emotions by using different properties.
A line can also be implied: that is, suggested by forming an invisible connection between
other elements. In the logo of the Interaction Design Foundation, for instance, the words
“Interaction Design Foundation” around the tree connect to create a semicircular implied
line.
ELEMENTS OF VISUAL DESIGN

Shape
Shapes are self-contained areas, usually formed by lines (although they may also be formed
by using a different colour, value or texture). A shape has two dimensions: length and
width.
 ELEMENTS OF VISUAL DESIGN

• Negative/White Space -Negative space (also known as

white space) is the empty area around a (positive) shape.
The relation between the shape and the space is
called figure/ground, where the shape is the figure and the
area around the shape is the ground. We should be aware
that when designing positive shapes, we are also designing
negative spaces at the same time. Negative space is just as
important as the positive shape itself — because it helps to
define the boundaries of the positive space and brings
balance to a composition.
 ELEMENTS OF VISUAL DESIGN

• Negative space, also called white space, is the empty

area around a positive shape. You can choose to see
this as a blue ball set against a light blue rectangle —
or, is it a light blue rectangle with a hole in it?
• Some designs make use of negative space to create
interesting visual effects. For example, the famous
World Wide Fund for Nature (WWF) logo makes use
of the confusion between positive shape and negative
space to create the image of a panda.
 ELEMENTS OF VISUAL DESIGN

• Volume -Volume applies to visuals that are three-dimensional and have length, width and depth. We
rarely use volume in visual design, because most digital products end up being viewed on a 2D screen,
although some apps and websites do use 3D models and graphics. (Technically, though, 3D images
viewed on a 2D screen are still 2D images.)
• Volume has 3 dimensions: length, width and depth. This image is a simulation of volume in 2D graphics.
 ELEMENTS OF VISUAL DESIGN

• Value -Value, quite simply, describes

light and dark.
A design with a high contrast of values
(i.e., one which makes use of light and
dark values) creates a sense of clarity,
while a design with similar values
creates a sense of subtlety. We can also
use value to simulate volume in 2D, for
instance, by using lighter values where
the light hits the object and darker
values for shadows.
 ELEMENTS OF VISUAL DESIGN

• Colour
• Colour is an element of light. Colour theory is a branch of design focused on the mixing and usage of different colours in
design and art. In colour theory, an important distinction exists between colours that mix subtractively and colours that
mix additively.
• In paint, colours mix subtractively because the pigments in paints absorb light. When different pigments are mixed
together, the mixture absorbs a wider range of light, resulting in a darker colour. A subtractive mix of cyan, magenta and
yellow will result in a black colour. A subtractive mix of colours in paint and print produces the CMYK
(i.e., Cyan, Magenta, Yellow and blacK) colour system.
• In digital design, where the product shows up on a screen, colours mix additively, since the screen emits light and colours
add to one another accordingly. When different colours are mixed together on a screen, the mixture emits a wider range of
light, resulting in a lighter colour. An additive mix of red, blue and green colours on screens will produce white light. An
additive mix of colours on digital screens produces the RGB (i.e., Red, Green, Blue) colour system.
ELEMENTS OF VISUAL DESIGN
 ELEMENTS OF VISUAL DESIGN

• Texture -Texture is the surface quality of an object.

• Texture can be created by a repeated pattern of lines, or by using tiled images of textures.
Above, the diagonal lines add a ‘grip’ effect to an otherwise ‘smooth’ rectangle.
• As a designer, you can work with two types of textures: tactile textures, where you can feel the
texture, and implied textures, where you can only see — i.e., not feel — the texture. Most visual
designers will work with implied textures, since screens (at least as far as the state of the art had
pushed them by the mid-2010s) are unable to produce tactile textures.
• The app icon designs in iOS 6 and earlier mimic the glossy texture of glass to incite users to tap
them. Later, Apple (in)famously introduced a linen fabric texture to much of its user interface.
ELEMENTS OF VISUAL DESIGN
 PRINCIPLES OF DESIGN

• The elements of visual design — line, shape, negative/white space, volume, value, colour and
texture — describe the building blocks of a product’s aesthetics. On the other hand, the principles
of design tell us how these elements can and should go together for the best results. Many of the
principles below are closely related and complement one another.
• Just how important are principles of design to a visual designer’s job? Partner and chief research
and development officer at the Applied Management Sciences Institute William Lidwell, in his
landmark and widely referenced book Universal Principles of Design, explains:
“The best designers sometimes disregard the principles of design. When they do so, however, there
is usually some compensating merit attained at the cost of the violation. Unless you are certain of
doing as well, it is best to abide by the principles.” – William Lidwell
 PRINCIPLES OF DESIGN

• Unity -Unity has to do with creating a sense of harmony between all elements in a page. A page
with elements that are visually or conceptually arranged together will likely create a sense of
unity.
 PRINCIPLES OF DESIGN

• Gestalt -Gestalt refers to our tendency to perceive the sum of all parts as opposed to the
individual elements. The human eye and brain perceive a unified shape in a different way to the
way they perceive the individual parts of such shapes. In particular, we tend to perceive the
overall shape of an object first, before perceiving the details (lines, textures, etc.) of the object.
 PRINCIPLES OF DESIGN

• Gestalt -Gestalt refers to our tendency to perceive the sum of all parts as opposed to the
individual elements. The human eye and brain perceive a unified shape in a different way to the
way they perceive the individual parts of such shapes. In particular, we tend to perceive the
overall shape of an object first, before perceiving the details (lines, textures, etc.) of the object.
 PRINCIPLES OF DESIGN

• The Gestalt Principles – a Background

The Gestalt Principles of grouping (“Gestalt” is German for “unified whole”) represent the
culmination of the work of early 20th-century German psychologists Max Wertheimer, Kurt
Koffka and Wolfgang Kohler, who sought to understand how humans typically gain meaningful
perceptions from chaotic stimuli around them. Wertheimer and company identified a set of laws
addressing this natural compulsion to seek order amid disorder, where the mind “informs” what
the eye sees by making sense of a series of elements as an image, or illusion.
 PRINCIPLES OF DESIGN

• Gestalt is important, for instance, in making separate sections of a website distinct by increasing
the white space between them. As designers, we should make sure that the parts of a website we
group together by using gestalt principles — i.e., if they are close to one another, have the same
shape, and/or are similarly sized — are indeed conceptually grouped together. “Accidentally”
grouping elements which are not conceptually similar will result in confused users.
 PRINCIPLES OF DESIGN

• Hierarchy -Hierarchy shows the difference in importance of the elements in a design. Colour
and size are the most common ways we can create hierarchy — for instance, by highlighting a
primary button, or using larger fonts for headings. Items that appear at the top of a page or app
also tend to be viewed as having a higher hierarchy than those appearing below.
 PRINCIPLES OF DESIGN

• Balance -Balance is the principle governing how we distribute the elements of a design evenly.
Balanced designs tend to appear calm, stable and natural, while imbalanced designs make us
feel uneasy.
 PRINCIPLES OF DESIGN

• Contrast -We use contrast to make an element stand

out by manipulating differences in colour, value, size
and other factors. For instance, as designers (be it in
logo design, UI design, etc.), we often use the colour
red to make certain elements stand out.
 PRINCIPLES OF DESIGN

• Scale -Scale describes the relative sizes of the elements in a design. By using scale to make an
element larger than others appearing with it, you can emphasise that element. Not only can you
make an element stand out this way—you can also use scale to create a sense of depth (since
nearer objects appear larger to the human eye). Exaggerated scales of images also add a certain
level of interest and drama to them.
 PRINCIPLES OF DESIGN

• Dominance -Dominance creates focus on a single element. We can use colour, shape, contrast,
scale, and/or positioning to achieve this. For instance, most websites have a main “hero”
image, which uses dominance to appeal to users, drawing them to it naturally.
 PRINCIPLES OF DESIGN

• Examples to highlight design elements and principles -With the elements of visual design
and design principles in mind, we will analyse a few websites to see how they come together,
and why the designs work.
 PRINCIPLES OF DESIGN

• Google’s homepage -
Google’s homepage is one
of the most visited
webpages in the world.
The raw simplicity of the
page is partly why it is so
well designed, but here
are other factors that make
this page work superbly:
IN SHORT, SIMPLE
PERO ROCK!!!!
 PRINCIPLES OF DESIGN

• Dominance: The large Google logo and search box gives it dominance,
making it the core (and to most, sole) focus of the entire page.
• Contrast (and colour): Google’s logo uses bright (mostly primary)
colours, and these mix well, forming a visually pleasing logo. The logo
also has sufficient contrast against a white background, making it stand
out on the page.
• Shape: The search box uses a rectangular shape to delineate the search
field, making it very usable.
• Negative space: Google’s homepage is predominantly made out of
negative space, which makes the search box (the main function of the
page) the centre of attention. The negative space also works well for the
page, as it acts like a blank sheet of paper before users type in their
search terms.
• Balance: The page is almost vertically symmetrical, resulting in a sense
of balance that is very pleasing and calm to look at.
 PRINCIPLES OF DESIGN

• Quartz’s homepage Quartz is

a digital-first and mobile-first
news agency with a global
audience, launched in 2012 by
Atlantic Media, which also
publishes The Atlantic. It has
a bold homepage that puts the
featured news stories front
and centre. Here’s how the
principles of design and
design elements come
together:
 PRINCIPLES OF DESIGN

• Dominance: The main news story immediately catches your eyes because its large, bold font makes it dominant on the homepage.
• Hierarchy: The homepage uses a clear hierarchy to establish the relative importance of various elements. The main story, with the largest text
and bolded weight, has the highest hierarchy. The next four stories, positioned below the main story, have smaller fonts to show their
subordinate hierarchy under the main story.
• Scale, value and colour: Quartz’s homepage features a large (full page height) “Q”, which is a mask of the hero image for the main story. The
large “Q” quickly establishes the identity of the website (since “Q” stands for “Quartz”) with the use of scale. However, the relative light value
and greyscale colour of the “Q” makes it fade into the background, thus bringing the overall focus to the headline of the main story instead.
• Negative space: Most of the homepage is negative space, which allows the content to shine through. When the mouse is brought over the main
story headline, the “Q” mask disappears, filling the negative space with the featured image. This is an example of how a unique play of
negative space can stimulate interest in a website’s design.
• Unity: Quartz uses a grid system in its website to create a sense of unity. For instance, the four stories have equal width and are uniformly
spaced, creating a sense of orderliness and structure.
SIMPLE PERO
ROCK!!!!