1
00:00:00,000 --> 00:00:04,650
[MUSIC]

2
00:00:04,650 --> 00:00:08,410
All right, you made it this far,
good work.

3
00:00:08,410 --> 00:00:13,256
If all this talk about type hasn't gotten
you excited already, then just you wait.

4
00:00:13,256 --> 00:00:18,377
In this stage, we'll look at the different
ways you can lay out type in a design.

5
00:00:18,377 --> 00:00:20,646
First up is typographic hierarchy.

6
00:00:20,646 --> 00:00:26,240
This concept is crucial to seamlessly
guide readers through our page's content.

7
00:00:26,240 --> 00:00:30,940
Hierarchy helps users to understand
what information is most important

8
00:00:30,940 --> 00:00:34,995
to what's secondary,
tertiary, and so forth.

9
00:00:34,995 --> 00:00:39,330
In this video, we'll look at how to
do this with weight, style, size, and

10
00:00:39,330 --> 00:00:39,960
position.

11
00:00:40,960 --> 00:00:44,840
In the next, we'll continue on
the theme of hierarchy with color and

12
00:00:44,840 --> 00:00:46,770
pairing typefaces.

13
00:00:46,770 --> 00:00:48,310
Before we jump in,

14
00:00:48,310 --> 00:00:53,560
let's check out all of these concepts
in action at creativemornings.com.

15
00:00:53,560 --> 00:00:58,220
Let's say I wanted to watch this talk
that Meg Lewis did in Minneapolis.

16
00:00:58,220 --> 00:01:02,440
Immediately, I'm presented with an array
of information that's been arranged with

17
00:01:02,440 --> 00:01:03,520
hierarchy in mind.

18
00:01:04,570 --> 00:01:09,410
First, my eyes gravitate towards what's
biggest, boldest, and darkest on the page,

19
00:01:09,410 --> 00:01:11,300
the speaker's name.

20
00:01:11,300 --> 00:01:14,680
This is the most important
piece of information here, and

21
00:01:14,680 --> 00:01:16,780
Creative Morning lets you easily know it.

22
00:01:18,100 --> 00:01:21,440
Next, my eyes naturally
continue reading and

23
00:01:21,440 --> 00:01:23,420
move downward to the title of the talk.

24
00:01:24,630 --> 00:01:27,970
This is of next importance
after the speaker name.

25
00:01:27,970 --> 00:01:29,840
It's smaller, but still prominent.

26
00:01:31,070 --> 00:01:35,710
My eyes are then drawn to the bright
block of color holding the white text of

27
00:01:35,710 --> 00:01:37,100
the city code.

28
00:01:37,100 --> 00:01:37,930
It's a nice touch.

29
00:01:39,030 --> 00:01:43,470
After I've taken all that in and
considered if I'm still interested,

30
00:01:43,470 --> 00:01:47,620
then I can make my way down to
the smaller secondary information and

31
00:01:47,620 --> 00:01:52,150
read more about this speaker and
where exactly the talk was, and

32
00:01:52,150 --> 00:01:54,110
some more information about
what the talk was about.

33
00:01:55,230 --> 00:02:00,440
We see bold type, multiple sizes,
different colors, different positions,

34
00:02:00,440 --> 00:02:05,180
and different typefaces utilized to convey
the hierarchy of information on the page.

35
00:02:07,050 --> 00:02:12,650
The combination is not only useful to the
user, it's also downright good-looking.

36
00:02:12,650 --> 00:02:17,960
These concepts can be incredibly powerful
to create useful, beautiful websites.

37
00:02:17,960 --> 00:02:22,510
But they can also get out of hand pretty
fast if we don't know what we're doing.

38
00:02:23,650 --> 00:02:27,950
Before you begin selling anything,
it's smart to familiarize yourself with

39
00:02:27,950 --> 00:02:32,820
the site's content to get an overall
big picture of everything involved.

40
00:02:33,950 --> 00:02:38,060
It's often helpful to sketch out
a wireframe and then go about numbering

41
00:02:38,060 --> 00:02:43,545
content elements, starting with, one,
what's of most importance, two, what's

42
00:02:43,545 --> 00:02:49,090
of next importance, and so forth until
every piece of content has been labeled.

43
00:02:49,090 --> 00:02:53,416
This system will inform us on how we can
utilize typography to accentuate our

44
00:02:53,416 --> 00:02:55,180
different pieces of content.

45
00:02:56,450 --> 00:03:01,200
We can create hierarchies simply by
weighting certain blocks of text.

46
00:03:01,200 --> 00:03:04,570
A reader's eyes will be drawn to
the boulder elements on the page.

47
00:03:05,610 --> 00:03:09,700
This hierarchy helps readers make
connections between the content and

48
00:03:09,700 --> 00:03:10,980
relate certain sections.

49
00:03:12,640 --> 00:03:17,670
Speaking of sections, typography is as
much about the treatment of the text

50
00:03:17,670 --> 00:03:20,790
as it is with the space
surrounding the text.

51
00:03:20,790 --> 00:03:22,700
Thus, the importance of white space.

52
00:03:23,940 --> 00:03:27,330
White space is empty space
without content, and

53
00:03:27,330 --> 00:03:30,900
it plays a key role in
the readability of a design.

54
00:03:30,900 --> 00:03:33,370
It gives the reader space
to rest their eyes,

55
00:03:33,370 --> 00:03:36,480
which reduces the feeling
of information overload.

56
00:03:37,590 --> 00:03:41,470
Let's look at the white space of
the left and right of our type.

57
00:03:41,470 --> 00:03:45,540
Margins or padding should be used
to give your type room to breathe.

58
00:03:45,540 --> 00:03:48,410
If a sentence comes too
close to another element,

59
00:03:48,410 --> 00:03:51,260
then it can disrupt the flow of reading.

60
00:03:51,260 --> 00:03:56,210
White space is often underutilized in
web design, which results in cramped and

61
00:03:56,210 --> 00:03:57,950
cluttered layouts.

62
00:03:57,950 --> 00:04:02,730
Also, it should be noted that white
space doesn't have to be white.

63
00:04:03,780 --> 00:04:07,090
If you have a dark background
with lighter text,

64
00:04:07,090 --> 00:04:10,030
we would still call that area
around the text white space.

65
00:04:11,300 --> 00:04:13,490
Let's check out a good
example of white space.

66
00:04:14,540 --> 00:04:19,636
Here's an article on itsnicethat.com,
a creative inspiration blog.

67
00:04:19,636 --> 00:04:23,720
It's about Paula Scher,
a renowned graphic designer.

68
00:04:24,820 --> 00:04:28,710
Notice how there are ample amounts
of white space around the type,

69
00:04:28,710 --> 00:04:33,500
the words are not closing in on borders,
they're giving room to live and breathe.

70
00:04:34,650 --> 00:04:38,759
As you can see, white space can clean
up a design and give it an elegant,

71
00:04:38,759 --> 00:04:40,001
professional feel.

72
00:04:40,001 --> 00:04:44,240
You can also emphasize content by
framing it with an empty space.

73
00:04:45,328 --> 00:04:49,399
Now, watch as the white space changes
as I resize the browser window.

74
00:04:52,478 --> 00:04:56,329
The content shifts into one column and
the white space is maintained,

75
00:04:56,329 --> 00:04:59,993
although in different proportions
to fit comfortably on mobile.

76
00:05:03,182 --> 00:05:07,519
All right, now that certainly
got me excited about hierarchy.

77
00:05:07,519 --> 00:05:11,795
In the next video, let's explore
what we can do with style, weight,

78
00:05:11,795 --> 00:05:13,180
size, and position.