0
1
00:00:02,700 --> 00:00:04,350
Our home page design is done.
1

2
00:00:04,380 --> 00:00:07,470
Now let's do the blog post page.
2

3
00:00:07,470 --> 00:00:09,350
This is what we have from the wireframes.
3

4
00:00:09,360 --> 00:00:12,890
Let's copy this frame into the design page, so we can follow it easily.
4

5
00:00:14,740 --> 00:00:19,620
Our home page has an offwhite background, but on the blog I prefer to have it white.
5

6
00:00:19,840 --> 00:00:24,490
It's better for a text readability, which is very important when it comes to blog posts.
6

7
00:00:27,180 --> 00:00:40,920
So, let's copy-paste a navbar directly from the home page design.
7

8
00:00:41,220 --> 00:00:43,470
All we have to do is just change the colors.
8

9
00:00:56,030 --> 00:00:56,970
For the links,
9

10
00:00:56,970 --> 00:01:02,730
dark blue is good. And for the button we can keep the same style as is, but instead of white colors for
10

11
00:01:02,730 --> 00:01:05,880
the text and background, we can use our primary blue color.
11

12
00:01:23,220 --> 00:01:24,480
Changing the headline style.
12

13
00:01:24,480 --> 00:01:30,750
Note here, you'll see two heading 1s. But one is from the wireframe kit and the one is from the local styles.
13

14
00:01:30,780 --> 00:01:34,890
We need the one from the local styles. Because that's the headline style we created on our home page
14

15
00:01:34,890 --> 00:01:35,580
design.
15

16
00:01:35,580 --> 00:01:37,710
Same goes for the colors of the headline.
16

17
00:01:37,770 --> 00:01:39,920
We need that dark blue from the local styles.
17

18
00:01:43,350 --> 00:01:44,310
For the author blog,
18

19
00:01:44,310 --> 00:01:49,650
We don't yet have the special style like Caption. We can just apply the paragraph style first and detach
19

20
00:01:49,650 --> 00:01:51,390
it and then edit.
20

21
00:01:56,780 --> 00:01:58,380
15 pixels look good.
21

22
00:01:58,430 --> 00:02:01,210
And don't forget the color. Grey would be fine here.
22

23
00:02:01,220 --> 00:02:04,630
The one from the local styles. We should create a text style out of this.
23

24
00:02:04,700 --> 00:02:06,850
I should have created this already on the home page.
24

25
00:02:06,860 --> 00:02:09,220
There were some small text elements like this.
25

26
00:02:09,260 --> 00:02:14,330
And if I had done it there, we would have less design decision to make here, and all of them would be
26

27
00:02:14,330 --> 00:02:17,540
linked and easily editable and manageable in the future.
27

28
00:02:17,540 --> 00:02:20,630
Imagine, if the client comes back and says they don't like the font style.
28

29
00:02:20,660 --> 00:02:23,890
Then you'll see the true benefit of using styles.
29

30
00:02:23,930 --> 00:02:27,920
There we have the caption style now and let's apply that to the date as well.
30

31
00:02:58,490 --> 00:03:02,160
For the image, let's grab some photo from Unsplash or Pexels.
31

32
00:03:02,210 --> 00:03:03,410
There is this circle inside.
32

33
00:03:03,440 --> 00:03:09,500
So what we can do, is set that image as a fill of that circle.
33

34
00:03:12,670 --> 00:03:15,970
Just remove that icon from his face.
34

35
00:03:19,050 --> 00:03:25,390
♫
35

36
00:03:30,270 --> 00:03:35,860
For the cover photo, let's find something and then just like the author image, edit as an image fill.
36

37
00:03:39,050 --> 00:03:51,950
♫
37

38
00:03:53,310 --> 00:03:58,150
Excellent for the body, we're going to select the paragraph style and give it a dark blue color.
38

39
00:03:59,500 --> 00:04:05,860
I'm not going for the grey color like the home page, because grey wouldn't be as good in readability.
39

40
00:04:05,860 --> 00:04:13,060
On the home page, it was okay, because that was, the text was not as much. But here, it's a blog post and
40

41
00:04:13,060 --> 00:04:18,670
people have to have a very good enjoyable experience when reading it. And if they are squinting, or if
41

42
00:04:18,670 --> 00:04:23,650
the screen is flickering, or if they're not seeing the text font properly then they're just not going
42

43
00:04:23,650 --> 00:04:28,110
to read such a big amount of text. And for this author blog,
43

44
00:04:28,120 --> 00:04:31,940
the same thing - replace the image, then changed the font styles and colors.
44

45
00:05:21,170 --> 00:05:21,960
The comment box,
45

46
00:05:21,960 --> 00:05:22,680
leave it as is.
46

47
00:05:22,680 --> 00:05:27,120
No need to style this, because we'll be using a plugin, which has its own style.
47

48
00:05:27,120 --> 00:05:32,250
Also no point in recreating that style here. But sometimes I'll take a screenshot of a plugin and insert
48

49
00:05:32,250 --> 00:05:33,200
that instead.
49

50
00:05:33,210 --> 00:05:38,640
If it's important for my client to know how it looks already. And footer is easy peasy, we can copy and
50

51
00:05:38,640 --> 00:05:40,740
paste. But there is a better option.
51

52
00:05:40,740 --> 00:05:45,300
We can create a component out of it. Because we're going to have this footer on three different pages
52

53
00:05:45,300 --> 00:05:50,490
and this way if we decide to, that we need to change some designs, we'll be easily able to change one
53

54
00:05:50,490 --> 00:06:07,330
instance and then all the 3 will update at the same time.
54

55
00:06:12,100 --> 00:06:14,380
That's it, our blog post page is done.
55

56
00:06:14,380 --> 00:06:19,050
We have one more page left, which is the block grid and we're gonna do it in the next video.
56

57
00:06:19,060 --> 00:06:19,660
Stick around.