2. The Design Framework
As human beings, we are truly
amazing in finding patterns.
When we are on a web page,
we read the visual elements
and establish what‘s worth our
The different colours, shapes,
typefaces – all create an
interaction that is purely
As designers, we can deliver
our designs with the help of
The Design Framework that
enables us to connect our
design to the intended
The Design Framework
3. • Visualize
The Design Framework
We often forget that the visual
design and juxtaposition of the
elements on a page play a
plays the most vital role in
By organizing our thoughts and
concepts, we can be at a much
better position to strike the
chord with the target audience.
So, here‘s a presentation for
understanding the various
aspects and ingredients of
design and then eventually
putting them together
The Elements of Design
5. Abstract shapes are those that have a recognizable form but are not "real" in the same
way that natural shapes are. For instance, a stick-figure drawing of a dog is an abstract
dog shape, but another dog in a photo is a natural shape. Abstract shapes in websites
are usually added through images.
Some examples of abstract shapes are:
• Icons | Symbols | Alphabet Glyphs
Organic shapes are shapes that are found in nature, but they are also shapes of
man-made items. Most natural shapes in websites are created with images.
Some examples of natural shapes are:
• Leaves | Puddles | Clouds
Geometric shapes are what most people think of when they think of shapes. Most
geometric shapes on web pages are created through layout and CSS.
Some common geometric shapes you see on websites are:
• Circles | Squares | Rectangles | Triangles
TYPES OF SHAPES
6. Circles particularly suggest partnership, love, compassion, community and
infiniteness. With no beginning or end, they represent life and the lifecycle.
It is also the most natural shape with the shape of the sun, moon and earth,
fruits and flowers.
In design, the movement of circles may represent harmony and energy.
The Olympic rings are a classic example of circles representing harmony, spirit
and a community feeling.
Importance of usage of circles in design
8. Squares and Rectangles are solid, reliable shapes and carry the balanced
reliability of both vertical lines and horizontal lines. They create a sense of
equality, stability and conformity.
Use of squares and rectangles in graphic design creates a perception of
power and strength. Combine that with rounded contours and you have a
sense of balance and reliability.
National Geographic has created strong brand recognition by simply using a
yellow rectangle which represents a photo frame.
Importance of usage of Squares and circles in design
10. Triangles can give a feeling of action, tension or even aggression. They are
often used in logos for science, religion (Holy Trinity), and law to promote a
sense of power.
When used in artworks they show dynamism, strength and direction. You can
set your design apart and make it trendy and interesting with triangles.
One of the most recognizable sportswear brands in the world, Adidas utilised
thick horizontal lines in the shape of a triangle to form a mountain, which
represents the challenges athletes face.
Importance of usage of triangles in design
14. White space is not wasted space.
In web design, some space not only makes our content more appealing, clean and
elegant but also helps readability.
If used cleverly, it helps prioritise and break up the content as well as guides users easily
from A to B with elements that are more recognizable and easier to find.
15. Clutter Vs Clean
These two ads are for the same product with the same text, image and colour code but
still they look so different. The ad on the right conveys the message effectively and is
30. Visions of a wide open landscape or
picturesque seashore evoke an instant
sense of well being and contentment.
Psychologists suggest that this response
stems back to our ancient days of
roaming in the wilderness.
31. Celebrity faces are easily recognized by people
and create a greater interest.
A Brand Ambassador can be known as a
positive spokesperson, an opinion leader or
a community influencer for your brand.
33. Your fonts can speak louder than your words.
When it comes to fonts, there seem to be endless choices — from normal,
conventional-looking fonts to interesting curly fonts.
Selecting the right typeface requires a combination of understanding and
intuition, and like any other skill, it also demands practice.
39. Gestalt Theory
The Gestalt (from the German ―shape, form‖) is a concept first introduced
in philosophy and psychology in Germany, in 1890.
The main principle is that “The whole is identified before the parts.”
meaning that when we look at a ―whole‖ we are unconscious of the
characteristics of its parts, we perceive the whole object and we can
understand it, thanks to the relationship between the elements.
From the design perspective, once we‘ve got our individual elements all
set, we need to focus on putting them all together in a way that each
element complements the other. The Gestalt Theory gives us the
understanding to do the same by making our whole layout appealing
along with all its parts.
40. 1. Proximity
Things closer together will be seen as belonging together.
Web forms with elements grouped together are perceived as belonging together.
Grouping label and field together, helps the user to understand the form quickly and
complete it correctly.
Things with the same characteristics (shape, colour, shading, quality, orientation)
will be seen as belonging together.
Playing with ‗difference‘ and ‗similarity‘ is a good way to establish what is more
important, where to focus on, and what action to expect. From the above example,
we can tell that the similar white buttons perform a similar action while the difference
in colour suggests that the pink tab would probably lead to a form and demands
A series of rules that tell our eyes what to focus on first, what is the shape
and what is its background.
We don‘t want users to wonder where to click. So we have to give them obvious
signifiers. A button that pops out from its background is just one of them and a
simple example of Figure-Ground relationship.
43. Common Fate
Objects are perceived as lines that move along the smoothest path. Elements moving in
the same direction seem more related than elements that are stationary or that move
in different directions.
An example of objects moving in the same direction could be a simple
slide-out menu. When we associate elements by the movement they generate we are
acknowledging that those elements are related by the Common Fate principle.
When parts of a whole picture are missing, our perception fills in the visual gap.
Sometimes a little hint is enough for the user to know what is coming next. In the
above example, 4 images are hidden but there are enough visual elements for the
user to understand that the next image is just one click away.
Our mind tends to perceive objects as developing around a centre point and
it is pleased when it can divide those objects evenly and find balance.
Our eyes are pleased by symmetry. A flow and consistency in design is easier to
understand and is also appealing to scroll through.