0
1
00:00:02,730 --> 00:00:07,050
Every blog needs a page where users can browse all the blog posts in one place.
1

2
00:00:07,050 --> 00:00:11,910
So, that's what we are going to do in this video, create wireframes for the blogs home page.
2

3
00:00:11,910 --> 00:00:17,190
My favorite design for the blog is a grid layout, something like in this example, but in our case we're
3

4
00:00:17,190 --> 00:00:19,010
going to do it a bit simpler.
4

5
00:00:19,050 --> 00:00:20,420
We don't need to look for inspiration.
5

6
00:00:20,420 --> 00:00:25,620
We actually have something in our mood board, that we can use. This sort of card layout would be perfect
6

7
00:00:25,620 --> 00:00:26,710
for our blog page.
7

8
00:00:26,730 --> 00:00:32,640
Each blog card would have a cover photo, a headline, a few lines from the post and author details.
8

9
00:00:32,640 --> 00:00:34,690
So first let's prepare the page.
9

10
00:00:34,800 --> 00:00:37,380
Let's duplicate the post page and work it from there.
10

11
00:00:40,540 --> 00:00:42,860
We can keep the navigation bar and the footer.
11

12
00:00:43,030 --> 00:00:44,230
The rest we can get rid of.
12

13
00:00:47,390 --> 00:00:51,670
And let's enable the grid.
13

14
00:00:51,860 --> 00:00:57,710
First, we can put a headline and a subhead. We can name it a blog or latest posts, or something like that.
14

15
00:01:27,990 --> 00:01:33,530
Now let's create a blog post card. 3 cards in one row should be the
15

16
00:01:33,540 --> 00:01:34,890
best layout, I think.
16

17
00:01:34,890 --> 00:01:41,260
Let's give it a color from our wireframe color palette.
17

18
00:01:41,270 --> 00:01:46,130
Next, we need a thumbnail image, which we can drag from the assets tab.
18

19
00:02:00,530 --> 00:02:04,210
Then a headline and few lines from the blog post itself.
19

20
00:02:06,490 --> 00:02:09,120
"Heading 3" style, should be good for the headlines.
20

21
00:02:29,770 --> 00:02:34,140
And for the text I'm going to go with caption, paragraph seems to be too big.
21

22
00:02:34,140 --> 00:02:38,550
One advice, keep with wireframe kit styles, you want to limit your design decisions
22

23
00:02:38,550 --> 00:02:43,990
at this stage, as much as possible. The goal is to concentrate on the structure and content.
23

24
00:02:54,720 --> 00:03:00,030
Inside the Advanced Type, there is this setting for resizing of the text block. "Grow Vertically" makes it
24

25
00:03:00,030 --> 00:03:05,130
behave like a paragraph, keeps the width fixed but it grows vertically on new lines.
25

26
00:03:05,130 --> 00:03:11,340
If you choose to "Grow Horizontally" then it's going to be exactly that, keep the height fixed and
26

27
00:03:11,340 --> 00:03:13,850
grow text infinitely on a single line.
27

28
00:03:13,890 --> 00:03:16,470
Make a mental note of these settings, they come in quite handy.
28

29
00:03:19,810 --> 00:03:25,340
That's looking decent enough, now let's add the author and date info, just like on the post page.
29

30
00:03:53,610 --> 00:03:54,010
All good.
30

31
00:03:54,010 --> 00:03:55,060
Just one last thing,
31

32
00:03:55,090 --> 00:03:58,150
let's round the corners, like we did with testimonial cards.
32

33
00:03:58,150 --> 00:04:02,740
Actually we shouldn't be worrying about rounding the corners, that should be left for the design phase,
33

34
00:04:02,990 --> 00:04:05,910
but what the hell, we've already done it on testimonial cards.
34

35
00:04:05,920 --> 00:04:07,550
So, might as well do it here.
35

36
00:04:07,600 --> 00:04:09,490
That's rounding the background rectangle.
36

37
00:04:09,490 --> 00:04:11,770
Now, how do we round the image placeholder?
37

38
00:04:11,890 --> 00:04:15,280
If we do it the regular way, then that's going to round all 4 corners.
38

39
00:04:15,310 --> 00:04:17,710
But we don't want the bottom corners to be rounded.
39

40
00:04:17,710 --> 00:04:19,270
It looks odd.
40

41
00:04:19,270 --> 00:04:22,210
We have an option here to round independent corners.
41

42
00:04:22,270 --> 00:04:27,850
But if we click on it, nothing happens, it's not working. Because we are trying to edit a component, and
42

43
00:04:27,850 --> 00:04:31,330
changing independent corners on the component is not possible.
43

44
00:04:31,330 --> 00:04:33,970
If we detach it, then we will be able to change it.
44

45
00:04:38,300 --> 00:04:50,150
8 on the top corners and 0 on the bottom ones.
45

46
00:04:50,170 --> 00:04:53,560
Now let's group the whole thing and then duplicated to create a grid.
46

47
00:05:07,550 --> 00:05:08,480
And there we go.
47

48
00:05:08,750 --> 00:05:11,550
I'm not putting individual content examples for each card.
48

49
00:05:11,550 --> 00:05:13,420
Not really necessary at this stage.
49

50
00:05:13,520 --> 00:05:18,800
However, in the designs, we will. Because when presenting designs it's important to make the work look
50

51
00:05:18,800 --> 00:05:25,640
impressive and as close to reality as possible. So that clients can envision the final result much better.
51

52
00:05:25,640 --> 00:05:32,180
One last thing we need to add is pagination, you know, those page numbers at the end of the grid, so
52

53
00:05:32,180 --> 00:05:34,780
users can go to the next page. With Webflow,
53

54
00:05:34,790 --> 00:05:38,800
the best way to create pagination is to have "Next" and "Previous" buttons.
54

55
00:05:38,810 --> 00:05:41,980
So, we're going to drag one of the buttons from the assets tab.
55

56
00:05:50,380 --> 00:05:52,300
Change the color to something more subtle.
56

57
00:05:52,300 --> 00:05:56,100
Keep in mind, changing the color on the entire component itself, is not going to work.
57

58
00:05:56,110 --> 00:05:59,830
You have to select the background rectangle and change the color there.
58

59
00:06:00,130 --> 00:06:02,470
Shrink the height of the button and that's it.
59

60
00:06:09,320 --> 00:06:19,790
Bring the footer up and cut the extra space of the frame.
60

61
00:06:19,900 --> 00:06:23,800
By the way, when shrinking the entire frame, sometimes it might resize the contents.
61

62
00:06:23,800 --> 00:06:27,400
That has to do with Constraint settings of each element on the frame.
62

63
00:06:27,400 --> 00:06:32,980
I won't go into details right now, but if that happens, just hold Control or Command, while resizing the
63

64
00:06:32,980 --> 00:06:35,510
frame and it won't do that.
64

65
00:06:35,520 --> 00:06:35,990
All right.
65

66
00:06:36,000 --> 00:06:37,380
All the wireframes are done.
66

67
00:06:37,440 --> 00:06:39,680
We can share this with our client in 2 ways.
67

68
00:06:39,690 --> 00:06:45,210
Either we can share it from a presentation mode, which will open each page individually and to go through
68

69
00:06:45,210 --> 00:06:48,240
pages we can just click the left and right arrow.
69

70
00:06:54,510 --> 00:06:58,480
Another way to share, is to share the file itself. With wireframes,
70

71
00:06:58,480 --> 00:07:04,230
I prefer sharing the file because there are wireframes, work in progress sketches, so feels more suitable
71

72
00:07:04,230 --> 00:07:04,870
like that.
72

73
00:07:04,920 --> 00:07:07,130
The designs, I like to share in a presentation mode.
73

74
00:07:07,140 --> 00:07:12,280
So it's closer to the final experience of a website. Okay.
74

75
00:07:12,290 --> 00:07:13,640
That's it for wireframes.
75

76
00:07:13,640 --> 00:07:16,100
Up next, we're going to get started with designs.
76

77
00:07:16,100 --> 00:07:16,690
Stick around.