In this video, we're going to design the blogs home page. It's going to be quite easy since a lot of it 1
is done. 2
We already have wireframes and blog post page. 3
We can reuse elements from these two pages. 4
Let's start by duplicating the blog post page. 5
Delete everything on it. 6
Besides the headline. And let's enable the grid. 7
Now just arrange the headline and the subhead. 8
Now for the cards. 9
I'm going to copy one from the wireframes and take it from there. 10
If you remember, in our inspiration, cards are white on a grey background. 11
That way card is visible. 12
That's what I want to do here too, so we're going to paint the background grey, just like our home page. 13
Now we can change the card color to white. 14
Next. 15
Let's put our post image as a thumbnail. 16
All we need to do is put image as a fill of a rectangle. 17
When a rectangle fill is linked to a style, to change it 18
you need to detach it from the style first. 19
Then you can update the fill with an image. 20
The icon from the image place holder, we can simply hide or delete. 21
We're not going to need it again. 22
We need another level of headline style that we can use in this card. 23
Right now it's heading 3, from the wireframes. 24
Let's detach it and change it to our main font, which is Cabin. 25
22 in size and SemiBold, 26
I think it looks good. 27
Also, we can enable the capitalization of the text. 28
This will make the headline more title like. Let's have this as headline 3 style, in case we need to tweak 29
it in the future. 30
Now for the paragraph text. The text style 31
here is caption, but this is from the wireframe kit as usual. 32
We already have the similar style from our designs, which is again named Caption. 33
You might sometimes mistaken wireframe style with local styles of this file. 34
We are using the same naming, but if you look in the dropdown, they are grouped. And this way you can tell 35
if you have the correct one selected. 36
In this case, we want to change it to the other caption. 37
The same goes from the color styles, they are grouped, so you can tell the difference. 38
Now for the author and date block. 39
I'd like it to be smaller than what it is right now. 40
It's a secondary information and shouldn't have same importance as the paragraph. 41
So I'm going to detach the text style and change it to 12 pixels. 42
For that little separator, I'm going to use a light grey from the wireframe kit. 43
Such dividers, 44
I always prefer to be lighter than the text 45
next to it. 46
Let's detach avatar of the author from the competent. 47
And let's make it 10 pixel smaller. 48
We can tidy up these elements using Figma's alignment feature. Just select them all and 49
then center horizontally. Or as Figma calls it align vertical centers. 50
Just make sure, you don't have the layers grouped or it's not gonna work. 51
We can also use this "tidy up" or distribute feature, to distribute them evenly. 52
And once you do that the new field will open up. 53
That's a distance between the objects we can change it to something like 10. 54
And Figma will distribute the objects with 10 pixels apart. 55
It's very handy. Once you're done styling the block, 56
now you can group it again. 57
I'm leaving this empty space between the paragraph and the author blog, for a reason. 58
I'm taking into account the occasions when a headline stretches over three lines. 59
That way we'll make sure the card doesn't need to stretch and they are all the same height. 60
Great. 61
The block card is ready. 62
Now we can duplicate them to create the grid. 63
We should put individual dummy content in these cards. Presenting it like this to the client, 64
isn't cool. What we can do, to save ourselves time. Is to go on some blog and grab content from there. 65
With images, paragraphs and all that. 66
For example, we can go to medium.com. And find content there. To download images, you can either screenshot 67
them. Or use this chrome extension called gallery Gallerify. 68
It scans the page for images and lets you download them easily. 69
OK. Let's do similar with authors. 70
With their names, I'm going to use the Content Real plugin. Link in the resources. I can select all 71
name layers and by clicking the names option it will automatically fill in with random names. 72
Let's just make sure, the gender of names is correctly matching the photos. 73
We don't want a girl named Arthur. 74
There. 75
The whole thing is so much better now. Looks real and way more impressive than just repeated content. 76
But we need to fix the spacing on author blogs. Now names have created different gaps. 77
Very last step, the next button. Which we can just duplicate from wireframes. 78
Then change the color. 79
Just like we do with secondary buttons, we can take the grey color and decrease opacity. 80
That's a simple trick to create colors from the same palette. 81
We didn't do this in wireframes, but it would be nice to add arrow to this button. To represent the next 82
action. 83
I'm going to drag the icon right from the wireframe kit. 84
There. That looks nice. Move the footer up and all done with a blog page. 85
All the designs for 3 pages are now ready. 86
We would share these with the client and get their feedback and make any necessary revisions. 87
Designs, I like to share from the presentation mode. Click "Share prototype" and send that link to the client. 88
It will open right in the presentation mode. 89
Just explain them how to navigate between the pages. 90
Something that might be evident to us, often isn't and very evident to the clients. And this concludes 91
the section. 92
We've done a lot. 93
We've learned the very crucial skill, which is the design process. We went from project brief, then to mood 94
boarding, and then wireframing. And then finally we did the designs, which wasn't very difficult, because 95
of all the baby steps that we took before it. Without those steps, 96
designing would have been way more difficult. 97
Your clients are not gonna know how the web design process works. And they might expect, and often 98
they do, that you just sit down and start building the website right away. 99
And often they even prefer that, because they will, you know, they will save time and money and they'll have 100
a website up and running as soon as possible. 101
But building websites without designs, it's going to bring terrible results. 102
And usually, it's going to cost more time and money because revisions on live website are just, they 103
take way more time than you would do revisions on the designs, or even revisions compared to wireframes. 104
Which is just so easy to do, right? 105
Just move things around, you don't think about anything. 106
Now imagine everything that we do inside Webflow, build everything, all the structures and then all of a 107
sudden we need to completely redesign something and create a new interaction, or new layout. And the same 108
thing applies to the design phase itself. 109
Because when you're designing, obviously you can design without wireframe and without content, but when 110
you have wireframes, when you have that skeleton and when you have content that you are designing, things 111
are just much simpler. And any iteration that you have to make during the phase of structuring your page 112
and structuring the website, so much easier on the wireframes. 113
Why do that on the design phase... So make sure to educate your clients on your design process. 114
They will love you for your professionalism and for your confidence in your process. Even if they resist 115
it in the beginning. 116
All right, next section is all about building this whole thing in Webflow. 117
Stick around.