In this video, we're going to come up with wireframes for the blog post page. Actually after home page 1
is done, now wireframes for the blog post is much simpler. Because the navigation bar is already done, 2
the footer is done, we just need to come up with the middle. 3
We haven't done any research for the inspiration for the blog and the blog posts. 4
So, let's find some examples and see what we can do. 5
We don't need to create a mood board for this. 6
Let's quickly look through some examples. 7
You'll see that most of it it's quite standard layout anyways. 8
As you can see, most modern examples have a similar structure. Tha headline and post details 9
on top, then the cover image and the body text. 10
We can do the same layout as well. 11
First, let's copy the navbar. 12
Navbar, in most cases, you want to have the same across the entire site. 13
Now the headline, it's a common practice to use narrow width for post content. 14
We've touched this in the Good Design part. 15
The thing is, paragraphs that are too wide are very hard to read because you start losing line breaks. 16
A common maximum width is about 700 to 800 pixels for the body text. 17
So let's make the content frame to be 700. 18
This includes. Not that headline has an issue with readability, but since we're creating 19
this content to keep things same, let's include the headline in it as well. 20
Underneath the headline, let's put the author of the post and the date. Just like other examples. 21
In many of these examples, I like how cover image goes beyond the content. So beyond this frame that 22
we created. So we can do the same thing and create maybe 900 pixels for the cover image. 23
And for the body, just insert some dummy text. 24
It's nice to finish the post with the author and their details. 25
We already have it in the top, but it's a common practice to put the author on the bottom as well and 26
a bit bigger this time. 27
After the post page, websites usually have a commenting feature at the end. 28
Most of these websites they use third-party plugins to manage the commenting, like Facebook and Disqus. 29
Using third party commenting plugins is a great idea. 30
Most users already have either Facebook or Disqus and they can start commenting without signing up 31
and all that stuff. 32
That's what I do on websites too. 33
I use Disqus plugin, which is a little better than Facebook, because it gives the site manager in more 34
control over commenting and moderating. 35
We'll also learn how to install this Disqus plugin, which is going to be inside the Advanced part 36
of this course. 37
But for now, we just need to put a wireframe that looks like a commenting feature. And that's enough for 38
now. 39
Finally, let's copy the footer. 40
♫ 41
That's all. 42
Let's have a look at the wireframe from the presentation mode. 43
Just select a frame and click the play button. 44
Looking great. 45
Now we can share this with a client and that's it. 46
They'll be able to enter the presentation mode themselves too, from the file link that you have shared 47
with them. 48
But as another option, you can also share the prototype directly. When you share Figma links with 49
your clients, 50
it's a good idea to explain how things work. 51
How to see the comments you've included, how to add their own comments, how to enter the presentation 52
mode, and so on. Whenever you share anything with a clients. 53
Be it Figma links or Webflow or anything. 54
Always guide them through the process and explain and tell them how to make things work. 55
Don't expect them to figure everything out on their own, all these wireframes, and Figmas, and mood boards, 56
and Webflows, and prototypes might be overwhelming for them. 57
And if they haven't been dealing with such design process, then everything is going to be new, all 58
these new tools. And they might have hard time figuring it out on their own. So guide them through every 59
step of the process. 60
Give them small explanations of how to do something, maybe screenshot, sometimes maybe little video tutorials 61
you could do. And they're going to love you for this.