0
1
00:00:00,150 --> 00:00:03,120
Do you know what's the easiest way to tell good design from bad one?
1

2
00:00:03,180 --> 00:00:04,660
It's through consistency.
2

3
00:00:04,710 --> 00:00:12,290
Looking at the website and noticing how consistent the layout, typography, colors and all of that is.
3

4
00:00:12,300 --> 00:00:14,500
Inconsistency is very easy to tell.
4

5
00:00:14,520 --> 00:00:21,180
We are wired to recognize patterns in everything we look at. And noticing breaks in those patterns is
5

6
00:00:21,180 --> 00:00:22,520
very easy for us to tell.
6

7
00:00:22,530 --> 00:00:27,270
Breaking the pattern is sort of like a glitch in the Matrix. And sometimes it's hard to tell exactly
7

8
00:00:27,300 --> 00:00:31,100
what's breaking the pattern, yet it's always easily noticeable.
8

9
00:00:31,110 --> 00:00:37,920
Often it's better to use poor design and be consistent with it, than have nice design and be not consistent.
9

10
00:00:37,920 --> 00:00:42,560
Consistency isn't really a trick but more like a design principle.
10

11
00:00:42,570 --> 00:00:47,940
So I'm cheating here a little bit by including this as one of the design tricks. Consistency applies to
11

12
00:00:47,940 --> 00:00:48,450
everything.
12

13
00:00:48,480 --> 00:00:52,290
But I've broken it down in several categories for easier understanding.
13

14
00:00:54,870 --> 00:00:57,710
First and most obvious one is layout consistency.
14

15
00:00:57,720 --> 00:01:03,120
This is exactly the purpose of the grid. The grid is a great way to create consistency in layout. When
15

16
00:01:03,120 --> 00:01:08,370
alignment repeats on the page users notice it and start expecting things to be laid out in a certain
16

17
00:01:08,370 --> 00:01:08,860
way.
17

18
00:01:08,970 --> 00:01:13,440
When this expectation is met, the users have a joyful experience of the site and they trust the site
18

19
00:01:13,450 --> 00:01:14,570
a bit more.
19

20
00:01:14,610 --> 00:01:19,710
One way I see web designers often break layout consistency is by mixing different text alignments together.
20

21
00:01:19,710 --> 00:01:24,180
All three elements on this frame are aligned in the center with each other. Or at least their containing
21

22
00:01:24,180 --> 00:01:24,860
boxes are.
22

23
00:01:25,020 --> 00:01:27,540
But paragraph text is left aligned.
23

24
00:01:27,540 --> 00:01:31,380
This is breaking the layout consistency and making the design look sloppy.
24

25
00:01:31,380 --> 00:01:34,170
We have to choose one style of alignment and stick with it.
25

26
00:01:34,500 --> 00:01:39,420
Either we center align everything. Or left-aligned them. Either of these options are fine, as long as we
26

27
00:01:39,420 --> 00:01:41,400
stick with one alignment.
27

28
00:01:41,400 --> 00:01:42,930
This is an evident example.
28

29
00:01:42,930 --> 00:01:44,310
More subtle and non-evident
29

30
00:01:44,310 --> 00:01:49,130
example is when we have inconsistency between different sections of the page.
30

31
00:01:49,140 --> 00:01:54,830
For instance, the middle section has the content left-aligned, but other sections have its center aligned.
31

32
00:01:54,900 --> 00:01:58,160
This would be completely fine if this was a different type of text
32

33
00:01:58,230 --> 00:02:02,820
A secondary headline, or other. But its the same headline, but with a different alignment.
33

34
00:02:02,820 --> 00:02:08,400
This is quite subtle, as it spread between different sections. As we scroll through a page we only see
34

35
00:02:08,610 --> 00:02:13,620
one section at a time, so such a subtle inconsistency isn't too big of a crime.
35

36
00:02:13,650 --> 00:02:18,390
But it's a good habit, to stick to one style across different sections and even across different pages
36

37
00:02:18,390 --> 00:02:19,050
of the website.
37

38
00:02:21,600 --> 00:02:24,690
Creating consistency in typography is quite simple.
38

39
00:02:24,690 --> 00:02:29,010
We just need to create specific font styles for each occasion and then stick with it.
39

40
00:02:29,010 --> 00:02:31,050
A website has several different types of text.
40

41
00:02:31,050 --> 00:02:32,640
There are main headlines.
41

42
00:02:32,640 --> 00:02:34,280
Those are usually the biggest size.
42

43
00:02:34,290 --> 00:02:38,020
Then you have smaller level headlines, like titles and subtitles.
43

44
00:02:38,070 --> 00:02:40,920
You have obviously the paragraph text and you have buttons.
44

45
00:02:40,920 --> 00:02:45,570
You can have more. For example, tiny captions and footnote text, menu links and so on.
45

46
00:02:45,570 --> 00:02:48,990
The key is to define a single style for each occasion and stick with it.
46

47
00:02:48,990 --> 00:02:54,150
For example, having one paragraph style and keep with it across sections, pages and everywhere on the
47

48
00:02:54,150 --> 00:02:56,150
site. In Figma and in Webflow
48

49
00:02:56,160 --> 00:03:01,560
this text styling is actually one of the features. So we will practice creating text styles in our real projects.
49

50
00:03:04,140 --> 00:03:07,290
Colour consistency almost doesn't need any explanation.
50

51
00:03:07,320 --> 00:03:12,630
It is the most evident and simplest to see. Most of the time we are working with the existing brand and
51

52
00:03:12,630 --> 00:03:13,500
a logo.
52

53
00:03:13,500 --> 00:03:18,540
This means colors have been defined for the company. And these colors have to be consistent not just within
53

54
00:03:18,540 --> 00:03:20,060
the website but across
54

55
00:03:20,070 --> 00:03:25,200
it's all a representation. Flyers, business cars, PDF's, front office and so on.
55

56
00:03:25,200 --> 00:03:29,580
In times where we don't have defined brand colours, then we do this ourselves.
56

57
00:03:29,580 --> 00:03:35,310
We usually choose one or two primary colors, like the blue and green in this example. And the rest of
57

58
00:03:35,310 --> 00:03:39,320
the colors are monotone blacks, greys and whites.
58

59
00:03:41,800 --> 00:03:47,170
One way we might break consistency is by mixing different shapes on the page. On a page like this that
59

60
00:03:47,170 --> 00:03:49,790
has this smooth, rounded wavy edge.
60

61
00:03:49,810 --> 00:03:55,300
Introducing an angled shape like this would break the consistency. Making it look very odd. But keeping
61

62
00:03:55,300 --> 00:03:59,770
with the same smooth shapes, would create the consistency across the page.
62

63
00:03:59,770 --> 00:04:04,510
It doesn't have to be same exact shape. As long as the shape has similar characteristics.
63

64
00:04:04,510 --> 00:04:08,730
This inconsistency with shapes can actually happen in very unexpected places.
64

65
00:04:08,740 --> 00:04:13,060
For example, when we use cutouts like this. They create smooth edges on the page.
65

66
00:04:13,060 --> 00:04:18,370
They are not evident, but they are there. And when we place a none-cutout, regular boxed photo on
66

67
00:04:18,370 --> 00:04:24,360
the next section. We are introducing a new conflicting shape. All of a sudden from smooth, natural edges, it went
67

68
00:04:24,360 --> 00:04:26,190
to very strict, straight, hard lines.
68

69
00:04:26,200 --> 00:04:29,100
And it even created this new shape that wasn't there before.
69

70
00:04:29,140 --> 00:04:34,420
Just like I mentioned in optical illusion lesson. Placing objects and shapes on a black canvas, will
70

71
00:04:34,420 --> 00:04:37,030
affect that canvas and create new shapes.
71

72
00:04:37,030 --> 00:04:43,120
This is especially true to straight lines and rectangles. But if we use cutout again, then those hard
72

73
00:04:43,120 --> 00:04:50,710
lines and foreign shapes disappear and the section becomes consistent with the above, hero section.
73

74
00:04:50,710 --> 00:04:51,550
When it comes to photos,
74

75
00:04:51,550 --> 00:04:55,090
we have to be consistent with the style of photos as well. By style
75

76
00:04:55,090 --> 00:05:00,580
I mean sort of a photographic style. Like colors, filters, the way models look and so on.
76

77
00:05:00,610 --> 00:05:05,610
In this example, for instance, I didn't do a good job at choosing same style photos.
77

78
00:05:05,620 --> 00:05:09,580
The left one has more polished look. Whereas the second is more natural.
78

79
00:05:09,640 --> 00:05:11,740
The camera works seems quite different too.
79

80
00:05:11,740 --> 00:05:17,650
I'm not a photographer, but I can notice that this is not taken in the same studio, nor by same photographer.
80

81
00:05:17,650 --> 00:05:22,270
Most of these photos will have very different style between them. Because they are taken by different
81

82
00:05:22,270 --> 00:05:24,940
photographers and in different scenarios.
82

83
00:05:24,970 --> 00:05:30,070
It can be quite tricky to maintain consistency, but there is a way. One way is to pick images from the
83

84
00:05:30,070 --> 00:05:31,390
same contributor.
84

85
00:05:31,390 --> 00:05:37,090
I've mentioned this before many stock sites will have this option - to see photos from the same contributor.
85

86
00:05:37,180 --> 00:05:44,020
Meaning from the same photo studio or photographer. And if we pick photos from the same contributor then
86

87
00:05:44,020 --> 00:05:50,890
we will more or less get the same results. Because the same photographer will have sort of same style,
87

88
00:05:50,890 --> 00:05:56,590
same camera and same habits of taking photos. Although not 100% stays the same because sometimes
88

89
00:05:56,590 --> 00:06:01,420
they will have just different shoots, and different ways of shooting in different scenarios. So, also
89

90
00:06:01,420 --> 00:06:03,730
their styles can change from year to year.
90

91
00:06:03,730 --> 00:06:08,140
This is a very simple and excellent way to make your design consistent and show that it's a high quality
91

92
00:06:08,140 --> 00:06:08,680
design.
92

93
00:06:08,680 --> 00:06:13,060
I know this sounds like an insane detail to pay attention to, but when it comes to design, devil is in
93

94
00:06:13,060 --> 00:06:18,670
details. Attention to these tiny details is what differentiates a mediocre designer from a top-notch one.
94

95
00:06:21,430 --> 00:06:26,880
One final place I want to discuss consistency is icons and illustrations. Web is full of icons and illustrations.
95

96
00:06:26,890 --> 00:06:31,750
They are an excellent way to show different actions, demonstrate some complicated concept or simply to
96

97
00:06:31,750 --> 00:06:36,530
give a design a unique look. Just like photography, combining icons with different styles would create
97

98
00:06:36,530 --> 00:06:39,510
a very inconsistent and unpolished look. Not fun!
98

99
00:06:39,550 --> 00:06:43,810
As a matter of fact, icons and illustrations are even more unforgiving than regular photos.
99

100
00:06:43,810 --> 00:06:47,310
In this example, the third icon is a different style than first two.
100

101
00:06:47,350 --> 00:06:51,250
It's the same color palette, similar rounded shapes, but it still looks out of place.
101

102
00:06:51,250 --> 00:06:54,080
The difference is only in one small detail in fact.
102

103
00:06:54,130 --> 00:06:56,290
First two icons have outline stroke on them.
103

104
00:06:56,410 --> 00:07:00,010
It's that black line that outlines each object in the drawing.
104

105
00:07:00,010 --> 00:07:01,510
But third one doesn't have it.
105

106
00:07:01,630 --> 00:07:04,370
And it creates a completely different look.
106

107
00:07:04,510 --> 00:07:09,850
In this example, all three icons are from the same pack and have the same exact style. Although the same
107

108
00:07:09,850 --> 00:07:14,830
size, the first two have thinner lines, when the last one is a little thicker.
108

109
00:07:14,830 --> 00:07:20,240
Third icon is poking my eyes. A non-designer client won't notice exactly what's wrong with it.
109

110
00:07:20,440 --> 00:07:25,630
They might not be able to put a finger on it, but they will pick up such inconsistencies and will not
110

111
00:07:25,630 --> 00:07:31,050
feel like the design is very good. To avoid such inconsistencies in icons and illustrations,
111

112
00:07:31,060 --> 00:07:32,460
just like with stock photos,
112

113
00:07:32,560 --> 00:07:34,420
pick them from the same source.
113

114
00:07:34,450 --> 00:07:36,400
My favorite place to get icons is Flaticon.com.
114

115
00:07:36,400 --> 00:07:42,070
Icons here and elsewhere are usually organized by packs. All icons within the same pack
115

116
00:07:42,100 --> 00:07:45,640
are going to have the same style, sizes, thickness of lines and all that.
116

117
00:07:45,700 --> 00:07:51,060
When picking icons for your projects look for packs rather than individual icons from different packs.
117

118
00:07:51,070 --> 00:07:55,900
This will give you a look that is consistent and polished. And will have you designing like a pro.