Our home page design is done. 1
Now let's do the blog post page. 2
This is what we have from the wireframes. 3
Let's copy this frame into the design page, so we can follow it easily. 4
Our home page has an offwhite background, but on the blog I prefer to have it white. 5
It's better for a text readability, which is very important when it comes to blog posts. 6
So, let's copy-paste a navbar directly from the home page design. 7
All we have to do is just change the colors. 8
For the links, 9
dark blue is good. And for the button we can keep the same style as is, but instead of white colors for 10
the text and background, we can use our primary blue color. 11
Changing the headline style. 12
Note here, you'll see two heading 1s. But one is from the wireframe kit and the one is from the local styles. 13
We need the one from the local styles. Because that's the headline style we created on our home page 14
design. 15
Same goes for the colors of the headline. 16
We need that dark blue from the local styles. 17
For the author blog, 18
We don't yet have the special style like Caption. We can just apply the paragraph style first and detach 19
it and then edit. 20
15 pixels look good. 21
And don't forget the color. Grey would be fine here. 22
The one from the local styles. We should create a text style out of this. 23
I should have created this already on the home page. 24
There were some small text elements like this. 25
And if I had done it there, we would have less design decision to make here, and all of them would be 26
linked and easily editable and manageable in the future. 27
Imagine, if the client comes back and says they don't like the font style. 28
Then you'll see the true benefit of using styles. 29
There we have the caption style now and let's apply that to the date as well. 30
For the image, let's grab some photo from Unsplash or Pexels. 31
There is this circle inside. 32
So what we can do, is set that image as a fill of that circle. 33
Just remove that icon from his face. 34
♫ 35
For the cover photo, let's find something and then just like the author image, edit as an image fill. 36
♫ 37
Excellent for the body, we're going to select the paragraph style and give it a dark blue color. 38
I'm not going for the grey color like the home page, because grey wouldn't be as good in readability. 39
On the home page, it was okay, because that was, the text was not as much. But here, it's a blog post and 40
people have to have a very good enjoyable experience when reading it. And if they are squinting, or if 41
the screen is flickering, or if they're not seeing the text font properly then they're just not going 42
to read such a big amount of text. And for this author blog, 43
the same thing - replace the image, then changed the font styles and colors. 44
The comment box, 45
leave it as is. 46
No need to style this, because we'll be using a plugin, which has its own style. 47
Also no point in recreating that style here. But sometimes I'll take a screenshot of a plugin and insert 48
that instead. 49
If it's important for my client to know how it looks already. And footer is easy peasy, we can copy and 50
paste. But there is a better option. 51
We can create a component out of it. Because we're going to have this footer on three different pages 52
and this way if we decide to, that we need to change some designs, we'll be easily able to change one 53
instance and then all the 3 will update at the same time. 54
That's it, our blog post page is done. 55
We have one more page left, which is the block grid and we're gonna do it in the next video. 56
Stick around.