0
1
00:00:00,590 --> 00:00:07,250
Now a lot of things that we've talked about in this module is all to do with how do you direct a user's
1

2
00:00:07,340 --> 00:00:08,230
attention.
2

3
00:00:08,420 --> 00:00:13,900
And we've always come full circle to the first point that we made about user interface design.
3

4
00:00:13,970 --> 00:00:20,830
It's about tailoring the experience for your users by guiding their attention towards different things.
4

5
00:00:20,860 --> 00:00:26,090
I really wish that instead of calling user interface designers designers that they could be called attention
5

6
00:00:26,100 --> 00:00:28,580
wizards because that's essentially your job.
6

7
00:00:28,610 --> 00:00:35,780
You're using various tools at your disposal to manipulate-- to manipulate and guide a user's attention.
7

8
00:00:35,810 --> 00:00:40,370
You're essentially playing around with this currency that is user attention. And we know that when we
8

9
00:00:40,370 --> 00:00:46,010
comes to typefaces there's quite a few ways how you can direct that attention.
9

10
00:00:46,010 --> 00:00:52,520
For example you can make the text larger or smaller, you can make it bolder brighter in color or you
10

11
00:00:52,520 --> 00:00:54,180
can make it more muted.
11

12
00:00:54,230 --> 00:01:01,400
You can use a typeface with a heavy weighting versus something that is thin or light or you can capitalize
12

13
00:01:01,520 --> 00:01:07,820
and lowercase some of the words as well as making something italic or increasing the distance between
13

14
00:01:07,850 --> 00:01:13,150
each of the letters to make the overall size of the words take up more space.
14

15
00:01:13,160 --> 00:01:18,580
So when you have a project such as designing the user interface of a app or website essentially you're
15

16
00:01:18,600 --> 00:01:21,050
using those techniques to direct attention.
16

17
00:01:21,050 --> 00:01:26,060
So for example, if the first thing that I want people to look at when they land on my web page is the
17

18
00:01:26,060 --> 00:01:28,040
word material design
18

19
00:01:28,220 --> 00:01:33,710
then I will make that super bold, super black, use a really heavyweight typeface and use a font that's
19

20
00:01:33,710 --> 00:01:39,770
really blocky, all the ways in which I can make sure that the first thing that their eyes will be drawn
20

21
00:01:39,770 --> 00:01:42,420
to is the words material design.
21

22
00:01:42,440 --> 00:01:46,850
Now depending on the use case, maybe the first thing that you want your user to see will be different.
22

23
00:01:46,850 --> 00:01:49,490
Maybe it's you know how good your product is
23

24
00:01:49,520 --> 00:01:54,370
or maybe it's, you know, how many places your product has been featured et cetera et cetera.
24

25
00:01:54,380 --> 00:02:00,980
But you can use these six ways to manipulate your typeface and direct attention very easily.
25

26
00:02:00,980 --> 00:02:03,510
Now the footer is not about attention grabbing.
26

27
00:02:03,650 --> 00:02:09,420
You know when you look AirBnB and it says, you know, "Made with love in San Francisco" or something like
27

28
00:02:09,420 --> 00:02:11,190
where "Make something you love."
28

29
00:02:11,240 --> 00:02:16,640
You know these are meant to be subtle whispers like when you're watching a movie and you pick up on
29

30
00:02:16,640 --> 00:02:17,670
a subtle hint.
30

31
00:02:17,720 --> 00:02:23,150
And similarly you can use these techniques to reduce the amount of attention they command to weave in
31

32
00:02:23,150 --> 00:02:24,810
subtlety and delight.
32

33
00:02:24,860 --> 00:02:31,210
And this is a really good example to look at. Sometimes you know these techniques can be used unintuitively.
33

34
00:02:31,400 --> 00:02:38,240
For example the title here that these people bluhomes.com wanted to convey is that they can provide a
34

35
00:02:38,450 --> 00:02:44,030
better client experience and they obviously want to highlight the word better to differentiate themselves
35

36
00:02:44,030 --> 00:02:45,830
from you know other companies.
36

37
00:02:45,830 --> 00:02:51,470
But because the title is already the first thing that they want users to look at, they've made it blocky
37

38
00:02:51,470 --> 00:02:52,960
they've made it capitalized,
38

39
00:02:53,090 --> 00:02:55,640
they made the font size really big.
39

40
00:02:55,970 --> 00:03:03,090
If they made that word even bolder even heavier even blacker, it still wouldn't stand out all that much.
40

41
00:03:03,230 --> 00:03:10,610
But actually in fact, by downgrading the amount of attention and commands, by making it italic, by making
41

42
00:03:10,610 --> 00:03:18,290
it lower case, by making the overall size of that word slightly smaller, it actually provides contrast
42

43
00:03:18,350 --> 00:03:23,500
from the rest of the sentence and instead becomes the focus of the attention.
43

44
00:03:23,540 --> 00:03:29,390
So the message really is just play around with some of these techniques that you've learned and see
44

45
00:03:29,390 --> 00:03:37,280
how you can architect a user journey using various ways of commanding attention. And I have included
45

46
00:03:37,350 --> 00:03:43,490
and I've included a link to a super hilarious infographic from the guys that play to web design who
46

47
00:03:43,490 --> 00:03:50,210
have translated some of the crazy stuff that they hear from clients for their design works such as "Make
47

48
00:03:50,210 --> 00:03:54,110
it look more luxurious..." into what they actually mean
48

49
00:03:54,110 --> 00:03:58,240
for example wider thinner fonts in caps. And
49

50
00:03:58,430 --> 00:04:03,380
I think it's really funny how they've managed to capture some of these common things you hear from
50

51
00:04:03,380 --> 00:04:08,840
clients into actual things that you can do with your designs in terms of commanding attention
51

52
00:04:08,870 --> 00:04:12,800
and in terms of some of the things that we've mentioned and in terms of some of the techniques that
52

53
00:04:12,800 --> 00:04:18,320
we've mentioned. So have a look at that for a good laugh as well as an understanding of how difficult
53

54
00:04:19,070 --> 00:04:25,760
a job designers and developers have in translating something that is locked within a client's head into
54

55
00:04:25,820 --> 00:04:28,300
real life and into their hands.
55

56
00:04:28,310 --> 00:04:34,280
And so this is another case for why you want to learn at least a little bit about design and development
56

57
00:04:34,460 --> 00:04:40,130
in order to understand the work of designers and developers, in order to better express what you want
57

58
00:04:40,550 --> 00:04:44,980
and for the end result to better mimic what you had in mind.