What's a design framework? What goes in the making of an iconic design? Learn the nuances behind the most popular designs in this interesting and detailed presentation.

1. THE PSYCHOLOGY
www.ethinos.com
DECONSTRUCTING
BEHIND DESIGN

2. The Design Framework
• Visualize
• Deliver
• Design
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
attention.
The different colours, shapes,
typefaces – all create an
interaction that is purely
individual.
As designers, we can deliver
our designs with the help of
The Design Framework that
enables us to connect our
design to the intended
individuals.
The Design Framework

3. • Visualize
• Organize
The Design Framework
• Deliver
We often forget that the visual
design and juxtaposition of the
elements on a page play a
crucial role.
Therefore, organization
plays the most vital role in
designing.
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
productively.
• Design
The Elements of Design
Framework

4. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
The Building Blocks of Design
SHAPES
www.ethinos.com

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

7. Industry Example
Anita Borg Institute

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

9. Industry Example
Willis Towers Watson

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

11. Industry Example
WNS Global Services

12. How to use lines in design

13. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGNWHITE SPACE
Less is More
www.ethinos.comWhite space and 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
more eye-pleasing.

16. Clean & To-the-point
Apple is always a good example of how white space can be used to increase the
perceived value of a product.

17. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
COLOUR
Colour has a huge impact on the mood of the design
www.ethinos.com

18. Shades of Black – Exclusive | Intelligent | Corporate
Significance
of color in
design

19. Shades of White – Pure | Innocent | Practical

20. Shades of Blue – Calm | Intellectual| Secure

21. Shades of Green – Refreshing | Compassionate | Natural

22. Shades of Orange – Radiant | Energetic | Cheerful

23. Shades of Red – Stimulating | Vibrant | Passionate

24. Shades of Purple – Royalty | Successful | Luxury

25. Why brands use certain colours?
Represents:
Exciting, Bold, Youthful, Powerful,
Confident, Ambitious, Love and
Passion
Represents:
Motivation, Optimism,
Warmth, Fun, Energy,
Spontaneous
Represents:
Happiness, Cheerful, Satisfaction,
Awareness, Enlightenment
Brands and colors

26. Why brands use certain colours?
Represents:
Growth, Safety, Positivity,
Balance, Earthy, Clarity
Represents:
Trust, Spirit, Peace, Loyalty,
Intelligence, Sincerity, Spirit
Represents:
Luxury, Sophistication, Powerful,
Authority, Elegance

27. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
IMAGERY
A picture is worth a thousand words
www.ethinos.com
Use of Imagery and Design

28. Visuals are processed
60000 times faster
by our brain than text

29. Awe (25%)
Laughter (17%)
Amusement (15%)
Joy (14%)
Emotions that are said to create an instant
connection with the audience include:

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.

32. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
FONTSKnow your type
www.ethinos.com

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.

34. Design Typography tips

35. Reliable + Traditional Clean + Universal
Bold + Funky Elegant + Friendly
TRENDING FONTS

36. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
PUTTING IT
TOGETHER
www.ethinos.com

37. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
THE WHOLE IS IDENTIFIED BEFORE THE PARTS
www.ethinos.com

38. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
THE WHOLE IS IDENTIFIED BEFORE THE PARTS
- Gestalt Theory
www.ethinos.com

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

41. Similarity
Things with the same characteristics (shape, colour, shading, quality, orientation)
will be seen as belonging together.
Application
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
more attention.

42. Figure-Ground
A series of rules that tell our eyes what to focus on first, what is the shape
and what is its background.
Application
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.
Application
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.

44. Closure
When parts of a whole picture are missing, our perception fills in the visual gap.
Application
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.

45. Symmetry
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.
Application
Our eyes are pleased by symmetry. A flow and consistency in design is easier to
understand and is also appealing to scroll through.

46. DECONSTRUCTING THE PSYCHOLOGY
BEHIND DESIGN
CREATIVE WITHOUT STRATEGY IS CALLED
―ART‖
CREATIVE WITH STRATEGY IS CALLED
“ADVERTISING”
www.ethinos.com

47. SOURCES
1. www.manifesto.co.uk/design-principles-gestalt-white-space-perception/
2. www.webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory-for-web-
designers--webdesign-1756
3. www.designshack.net/articles/layouts/the-sometimes-hidden-meaning-of-shapes/
4. www.slideshare.net/thecroaker/which-typeface-should-i-use
5. www.justcreative.com/2008/06/13/how-to-design-learn-the-basics/

48. CONNECT WITH US
www.ethinos.com
/EthinosDigital
/Ethinos