These slides elaborate the philosophy " Design is not just something designers do. Design is marketing." and tends to solve the most common problem site owner's face; "We are having plenty of Traffic but very few are buying."

1. Problem
We are
having plenty
of Traffic but
very few are
buying.

3. UI Design
That Converts Visitors to Buyers
Helaluzzaman Ayon
Business Development Manager
HashiMukh Dot Com

9. Design is not just
something designers do.
Design is marketing.

10. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

11. Visual Hierarchy

12.  Size
 Important Objects
Visual Hierarchy  Color
 Business Objective

13. Size
Without knowing ANYTHING
about these circles, you were
easily able to rank them. That’s
visual hierarchy.
13

14. Certain parts of your website
are more important than
others.
Forms
Calls to action
Value proposition
Important Objects
If you website menu has 10
items, are all of them equally
important? Where do you
want the user to click?
Make important links more
prominent.
14

15. Hierarchy does not only
come from size.
Amazon makes the ‘Add
to cart’ button more
prominent by using color.
Color
15

16. Business Objective
16

17. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

20. Golden ratio is a magical number
Divine Proportions 1.618 that makes all things
proportioned to it aesthetically
pleasing (or so it is believed).

23. Divine Proportions

24. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

25. Typography

26. As font sizes increase, line heights must also
increase in order to maintain the geometric
proportions of a paragraph. In other words:
Font size and line height are proportionally
related.
As the line width gets longer, it becomes more
Size & Height difficult to perform a return sweep (the
movement of the eyes from the end of one line
to the beginning of the next) unless the line
height is also increased to account for this
effect.
For any font size, the line height must increase
as the line width increases.
26

28. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

30. Every additional choice
increases the time required to
Hick’s Law take a decision.
If you sell a huge amount of
products, add better filters for
easier decision making.
30

33. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

36. The bigger an object and the closer
it is to us, the easier it is to use it.
The size of a button should be
Fitt’s Law proportional to its expected
frequency of use. You can check
your stats for which buttons people
use the most, and make popular
buttons bigger (easier to hit).
36

37. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

38. An image should be imagined as
divided into nine equal parts by
two equally-spaced horizontal
lines and two equally-spaced
Rules of Third vertical lines, and that important
compositional elements should
be placed along these lines or
their intersections.
38

43. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

45. People always see the whole of
your website first, before they
distinguish the header, menu,
footer and so on.
45

46.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
46

48.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
48

51.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
51

53.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
53

55.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
55

57.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
57

60.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
60

63.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
63

67.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
67

70.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
70

72.  Law of Focal Point (Visual attributes that control focus)
 Law of Proximity
 Law of Similarity
 Law of Common Region (Law of "Prägnanz ('Good
Form')")
 Law of Connectedness ("Law of Unity/Harmony")
 Law of Balance/Symmetry
 Law of Continuation
 Law of Closure
 Law of Figure-Ground
 Law of Isomorphic Correspondence
 Law of Simplicity
72

74. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

76. Web Design Principles
1. Visual Hierarchy
2. Divine Proportions
3. Typography
4. Hick’s Law
5. Fitt’s Law
6. Rule of Thirds
7. Gestalt Design Laws
8. White space and clean design
9. Occam’s Razor

81. helpdesk@hashimukh.com