Every blog needs a page where users can browse all the blog posts in one place. 1
So, that's what we are going to do in this video, create wireframes for the blogs home page. 2
My favorite design for the blog is a grid layout, something like in this example, but in our case we're 3
going to do it a bit simpler. 4
We don't need to look for inspiration. 5
We actually have something in our mood board, that we can use. This sort of card layout would be perfect 6
for our blog page. 7
Each blog card would have a cover photo, a headline, a few lines from the post and author details. 8
So first let's prepare the page. 9
Let's duplicate the post page and work it from there. 10
We can keep the navigation bar and the footer. 11
The rest we can get rid of. 12
And let's enable the grid. 13
First, we can put a headline and a subhead. We can name it a blog or latest posts, or something like that. 14
Now let's create a blog post card. 3 cards in one row should be the 15
best layout, I think. 16
Let's give it a color from our wireframe color palette. 17
Next, we need a thumbnail image, which we can drag from the assets tab. 18
Then a headline and few lines from the blog post itself. 19
"Heading 3" style, should be good for the headlines. 20
And for the text I'm going to go with caption, paragraph seems to be too big. 21
One advice, keep with wireframe kit styles, you want to limit your design decisions 22
at this stage, as much as possible. The goal is to concentrate on the structure and content. 23
Inside the Advanced Type, there is this setting for resizing of the text block. "Grow Vertically" makes it 24
behave like a paragraph, keeps the width fixed but it grows vertically on new lines. 25
If you choose to "Grow Horizontally" then it's going to be exactly that, keep the height fixed and 26
grow text infinitely on a single line. 27
Make a mental note of these settings, they come in quite handy. 28
That's looking decent enough, now let's add the author and date info, just like on the post page. 29
All good. 30
Just one last thing, 31
let's round the corners, like we did with testimonial cards. 32
Actually we shouldn't be worrying about rounding the corners, that should be left for the design phase, 33
but what the hell, we've already done it on testimonial cards. 34
So, might as well do it here. 35
That's rounding the background rectangle. 36
Now, how do we round the image placeholder? 37
If we do it the regular way, then that's going to round all 4 corners. 38
But we don't want the bottom corners to be rounded. 39
It looks odd. 40
We have an option here to round independent corners. 41
But if we click on it, nothing happens, it's not working. Because we are trying to edit a component, and 42
changing independent corners on the component is not possible. 43
If we detach it, then we will be able to change it. 44
8 on the top corners and 0 on the bottom ones. 45
Now let's group the whole thing and then duplicated to create a grid. 46
And there we go. 47
I'm not putting individual content examples for each card. 48
Not really necessary at this stage. 49
However, in the designs, we will. Because when presenting designs it's important to make the work look 50
impressive and as close to reality as possible. So that clients can envision the final result much better. 51
One last thing we need to add is pagination, you know, those page numbers at the end of the grid, so 52
users can go to the next page. With Webflow, 53
the best way to create pagination is to have "Next" and "Previous" buttons. 54
So, we're going to drag one of the buttons from the assets tab. 55
Change the color to something more subtle. 56
Keep in mind, changing the color on the entire component itself, is not going to work. 57
You have to select the background rectangle and change the color there. 58
Shrink the height of the button and that's it. 59
Bring the footer up and cut the extra space of the frame. 60
By the way, when shrinking the entire frame, sometimes it might resize the contents. 61
That has to do with Constraint settings of each element on the frame. 62
I won't go into details right now, but if that happens, just hold Control or Command, while resizing the 63
frame and it won't do that. 64
All right. 65
All the wireframes are done. 66
We can share this with our client in 2 ways. 67
Either we can share it from a presentation mode, which will open each page individually and to go through 68
pages we can just click the left and right arrow. 69
Another way to share, is to share the file itself. With wireframes, 70
I prefer sharing the file because there are wireframes, work in progress sketches, so feels more suitable 71
like that. 72
The designs, I like to share in a presentation mode. 73
So it's closer to the final experience of a website. Okay. 74
That's it for wireframes. 75
Up next, we're going to get started with designs. 76
Stick around.