0
1
00:00:00,330 --> 00:00:01,480
This is Andy Warhol's work.
1

2
00:00:01,480 --> 00:00:07,120
He not really a web designer, but he's a very influential pop artist. In this work
2

3
00:00:07,120 --> 00:00:10,080
he uses a popular design trick called repetition.
3

4
00:00:10,140 --> 00:00:15,840
It's when you take one item that might not be interesting on its own, but repeat it several times and
4

5
00:00:15,840 --> 00:00:18,780
now we have something that's more interesting.
5

6
00:00:18,780 --> 00:00:21,210
This is a page from Zendesk's website.
6

7
00:00:21,210 --> 00:00:27,240
You can see here how repetition of square profiles in the same style has created a very interesting
7

8
00:00:27,240 --> 00:00:28,130
layout.
8

9
00:00:28,170 --> 00:00:32,090
The repetition trick doesn't just apply to identical items.
9

10
00:00:32,160 --> 00:00:39,810
It can be applied to nearly everything like color, style, spacing, layout. Repetition of color is one that
10

11
00:00:39,810 --> 00:00:43,150
is used quite often and can really tie the design together.
11

12
00:00:43,350 --> 00:00:48,680
You see how the colors from the headline, repeat as background colors from profile pictures?
12

13
00:00:48,990 --> 00:00:54,090
If we move below the pictures, you'll see those colors being repeated in the paragraph as well.
13

14
00:00:54,090 --> 00:00:58,890
This page would look much less appealing and interesting if those colors were not repeated anywhere
14

15
00:00:58,890 --> 00:01:03,750
else. Do you notice one more repetition that is happening on this page?
15

16
00:01:03,900 --> 00:01:09,660
It's in the layout of profile shots. The position of a person, how they're edging towards the right and
16

17
00:01:09,660 --> 00:01:12,920
their names placed on the top left corner.
17

18
00:01:13,050 --> 00:01:15,090
That's a repetition of layout.
18

19
00:01:15,090 --> 00:01:21,690
I'm actually a little disappointed that Astha and Dipesh aren't cropped on the right side, like the rest.
19

20
00:01:21,810 --> 00:01:24,920
They are glitching the repetition a little, because of that detail.
20

21
00:01:25,740 --> 00:01:27,920
Let's have a look at another layout repetition.
21

22
00:01:27,930 --> 00:01:31,170
This is very common in web and you'll see it on so many websites.
22

23
00:01:31,350 --> 00:01:33,230
You see how the layout is being repeated.
23

24
00:01:33,240 --> 00:01:38,780
An illustration on one side, headline and paragraph align on the other side, in a zigzag layout.
24

25
00:01:38,880 --> 00:01:40,920
That's zigzag is the repetition.
25

26
00:01:40,920 --> 00:01:43,020
Let's apply repetition into practice.
26

27
00:01:43,050 --> 00:01:45,290
Say we've got this content from our client.
27

28
00:01:45,300 --> 00:01:50,910
It's the benefits of their services. Because each paragraph with their headlines are part of the same
28

29
00:01:50,910 --> 00:01:51,870
context,
29

30
00:01:51,930 --> 00:01:54,840
we can create a repetition in their layout.
30

31
00:01:54,840 --> 00:02:01,290
We can use a split screen layout. Splitting the screen in exact halves. On one half placing the copy and
31

32
00:02:01,290 --> 00:02:06,720
on the other placing a full image. Add some images and repeating colors and it can look quite handsome.
32

33
00:02:06,720 --> 00:02:07,670
Like this.
33

34
00:02:07,710 --> 00:02:09,650
I've repeated several items here.
34

35
00:02:09,720 --> 00:02:16,200
The layout obviously. The repetition of colors. I'm sampling colors from the photos and repeating them
35

36
00:02:16,200 --> 00:02:20,160
on the headlines. And final, the repetition of the photography style.
36

37
00:02:20,160 --> 00:02:22,480
All photos are in the same style.
37

38
00:02:22,680 --> 00:02:27,870
The shot from the top of some item, that is laying flat on a colored background.
38

39
00:02:27,870 --> 00:02:29,610
How about other design concepts?
39

40
00:02:29,610 --> 00:02:31,200
Can you notice them?
40

41
00:02:31,200 --> 00:02:33,800
The contrast, did I apply any contrast here?
41

42
00:02:33,930 --> 00:02:40,580
Definitely, you'll see the contrast between the headline, and the paragraph. In their size, weight and colour.
42

43
00:02:40,620 --> 00:02:45,450
Obviously, a huge contrast between left and right splits. One being white and another being bright
43

44
00:02:45,450 --> 00:02:46,280
colour.
44

45
00:02:46,290 --> 00:02:47,600
How about white space?
45

46
00:02:47,630 --> 00:02:48,920
There is white space everywhere.
46

47
00:02:48,930 --> 00:02:54,140
Each white block, where the copy sits, has a healthy amount of white space around it to bring the atension
47

48
00:02:54,140 --> 00:02:56,030
to the content.
48

49
00:02:56,030 --> 00:03:00,920
There's even white space within those photos. Whoever took those photos they did a great job.
49

50
00:03:00,930 --> 00:03:07,260
They are from icons8. Good source, link in the resources. The reason why repetition is so powerful,
50

51
00:03:07,260 --> 00:03:12,960
in design is because of the way we look at the world as humans. We try to recognize patterns in everything
51

52
00:03:12,960 --> 00:03:17,940
that we look at. And when we recognize a pattern our brain goes a little excited.
52

53
00:03:18,210 --> 00:03:21,570
Look, look it's the same blue that I saw earlier.
53

54
00:03:21,600 --> 00:03:22,650
Yay I'm smart.
54

55
00:03:22,660 --> 00:03:25,260
Design is strongly linked to human psychology.
55

56
00:03:25,320 --> 00:03:30,390
It's not that there are some laws of physics that govern design, it's completely human centric.
56

57
00:03:30,390 --> 00:03:32,180
In reality, all of us are designers.
57

58
00:03:32,190 --> 00:03:38,670
We are the ones who demand this repetition, and whitespace, and contrast and all those design approaches.
58

59
00:03:38,700 --> 00:03:42,870
Because we already like them. You already know what looks good and what looks bad. It's sort of like
59

60
00:03:42,870 --> 00:03:47,580
food, you already know what tastes good and what taste bad. You don't have to go to a culinary school
60

61
00:03:47,580 --> 00:03:50,820
to learn what's a what tastes good and what not.
61

62
00:03:50,820 --> 00:03:55,410
And if you learn few recipes and practice them. When you cook something good you're going to notice it.
62

63
00:03:55,620 --> 00:03:56,690
And so will everyone else.