0
1
00:00:00,210 --> 00:00:05,450
In this video, we're going to come up with wireframes for the blog post page. Actually after home page
1

2
00:00:05,450 --> 00:00:11,490
is done, now wireframes for the blog post is much simpler. Because the navigation bar is already done,
2

3
00:00:11,490 --> 00:00:13,860
the footer is done, we just need to come up with the middle.
3

4
00:00:13,860 --> 00:00:17,640
We haven't done any research for the inspiration for the blog and the blog posts.
4

5
00:00:17,640 --> 00:00:20,160
So, let's find some examples and see what we can do.
5

6
00:00:22,750 --> 00:00:24,850
We don't need to create a mood board for this.
6

7
00:00:24,850 --> 00:00:27,040
Let's quickly look through some examples.
7

8
00:00:27,070 --> 00:00:30,010
You'll see that most of it it's quite standard layout anyways.
8

9
00:00:44,240 --> 00:00:49,180
As you can see, most modern examples have a similar structure. Tha headline and post details
9

10
00:00:49,180 --> 00:00:52,310
on top, then the cover image and the body text.
10

11
00:00:52,390 --> 00:01:08,090
We can do the same layout as well.
11

12
00:01:08,200 --> 00:01:09,350
First, let's copy the navbar.
12

13
00:01:09,350 --> 00:01:13,690
Navbar, in most cases, you want to have the same across the entire site.
13

14
00:01:20,500 --> 00:01:24,840
Now the headline, it's a common practice to use narrow width for post content.
14

15
00:01:24,850 --> 00:01:27,360
We've touched this in the Good Design part.
15

16
00:01:27,370 --> 00:01:32,740
The thing is, paragraphs that are too wide are very hard to read because you start losing line breaks.
16

17
00:01:32,860 --> 00:01:37,790
A common maximum width is about 700 to 800 pixels for the body text.
17

18
00:01:37,810 --> 00:01:40,680
So let's make the content frame to be 700.
18

19
00:01:40,690 --> 00:01:46,270
This includes. Not that headline has an issue with readability, but since we're creating
19

20
00:01:46,270 --> 00:01:50,950
this content to keep things same, let's include the headline in it as well.
20

21
00:01:53,490 --> 00:01:58,470
Underneath the headline, let's put the author of the post and the date. Just like other examples.
21

22
00:02:54,890 --> 00:03:01,440
In many of these examples, I like how cover image goes beyond the content. So beyond this frame that
22

23
00:03:01,440 --> 00:03:07,350
we created. So we can do the same thing and create maybe 900 pixels for the cover image.
23

24
00:03:15,150 --> 00:03:17,430
And for the body, just insert some dummy text.
24

25
00:03:48,110 --> 00:03:51,430
It's nice to finish the post with the author and their details.
25

26
00:03:51,440 --> 00:03:56,750
We already have it in the top, but it's a common practice to put the author on the bottom as well and
26

27
00:03:56,750 --> 00:04:05,340
a bit bigger this time.
27

28
00:04:49,620 --> 00:04:52,970
After the post page, websites usually have a commenting feature at the end.
28

29
00:04:52,980 --> 00:04:59,010
Most of these websites they use third-party plugins to manage the commenting, like Facebook and Disqus.
29

30
00:04:59,370 --> 00:05:02,160
Using third party commenting plugins is a great idea.
30

31
00:05:02,160 --> 00:05:08,000
Most users already have either Facebook or Disqus and they can start commenting without signing up
31

32
00:05:08,010 --> 00:05:09,070
and all that stuff.
32

33
00:05:09,090 --> 00:05:10,850
That's what I do on websites too.
33

34
00:05:10,860 --> 00:05:15,570
I use Disqus plugin, which is a little better than Facebook, because it gives the site manager in more
34

35
00:05:15,570 --> 00:05:17,700
control over commenting and moderating.
35

36
00:05:17,700 --> 00:05:22,770
We'll also learn how to install this Disqus plugin, which is going to be inside the Advanced part
36

37
00:05:22,770 --> 00:05:23,540
of this course.
37

38
00:05:23,550 --> 00:05:28,050
But for now, we just need to put a wireframe that looks like a commenting feature. And that's enough for
38

39
00:05:28,050 --> 00:05:43,500
now.
39

40
00:05:58,470 --> 00:06:05,230
Finally, let's copy the footer.
40

41
00:06:05,960 --> 00:06:15,500
♫
41

42
00:06:30,350 --> 00:06:30,890
That's all.
42

43
00:06:30,920 --> 00:06:33,690
Let's have a look at the wireframe from the presentation mode.
43

44
00:06:33,710 --> 00:06:36,140
Just select a frame and click the play button.
44

45
00:06:41,790 --> 00:06:42,360
Looking great.
45

46
00:06:42,360 --> 00:06:44,920
Now we can share this with a client and that's it.
46

47
00:06:44,940 --> 00:06:49,920
They'll be able to enter the presentation mode themselves too, from the file link that you have shared
47

48
00:06:49,920 --> 00:06:50,530
with them.
48

49
00:06:50,610 --> 00:06:55,860
But as another option, you can also share the prototype directly. When you share Figma links with
49

50
00:06:55,860 --> 00:06:56,490
your clients,
50

51
00:06:56,490 --> 00:06:59,430
it's a good idea to explain how things work.
51

52
00:06:59,460 --> 00:07:04,620
How to see the comments you've included, how to add their own comments, how to enter the presentation
52

53
00:07:04,620 --> 00:07:07,770
mode, and so on. Whenever you share anything with a clients.
53

54
00:07:07,770 --> 00:07:10,230
Be it Figma links or Webflow or anything.
54

55
00:07:10,530 --> 00:07:15,060
Always guide them through the process and explain and tell them how to make things work.
55

56
00:07:15,060 --> 00:07:21,240
Don't expect them to figure everything out on their own, all these wireframes, and Figmas, and mood boards,
56

57
00:07:21,240 --> 00:07:25,630
and Webflows, and prototypes might be overwhelming for them.
57

58
00:07:25,740 --> 00:07:31,560
And if they haven't been dealing with such design process, then everything is going to be new, all
58

59
00:07:31,560 --> 00:07:36,780
these new tools. And they might have hard time figuring it out on their own. So guide them through every
59

60
00:07:36,780 --> 00:07:37,820
step of the process.
60

61
00:07:37,830 --> 00:07:43,350
Give them small explanations of how to do something, maybe screenshot, sometimes maybe little video tutorials
61

62
00:07:43,350 --> 00:07:46,530
you could do. And they're going to love you for this.