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."
3. UI Design
That Converts Visitors to Buyers
Helaluzzaman Ayon
Business Development Manager
HashiMukh Dot Com
4.
5.
6.
7.
8.
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
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
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
18.
19.
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).
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
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
27.
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
29.
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
31.
32.
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
34.
35.
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
39.
40.
41.
42.
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
44.
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
47.
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
49.
50.
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
52.
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
54.
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
56.
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
58.
59.
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
61.
62.
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
64.
65.
66.
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
68.
69.
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
71.
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
73.
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
75.
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