Designing My SteemPress Blog - Part 2: The Mockup

---

Read the 1st post of this series: The Wireframe & Style Guide

---

From the previous session, I already did a wireframe and a style guide. It was a very simple one since I will only use it for a personal WordPress blog, nothing fancy.

Here is the wireframe that I have:

From this wireframe, I need to develop it into a mockup. So let's use that skeleton and implement all the style guide.

I use Adobe XD for this project. We can use any design tools, but Adobe XD is one of the best to date. It has this ability to store all the assets, styles, plenty of awesome plugins, and it comes with auto animate features. That feature will help us a lot in creating a working prototype.

The Mockup

To create a mockup, first, we need to pick which artboard to use. I already know that I will use bootstrap for this template development. If I don't use bootstrap, perhaps I'll choose various artboard sizes to accommodate mobile and desktop screen sizes. So, for this design, I choose a web artboard (1920 x 1080) and put a nice 12 grids layout.

Now we already have basic ground to work. Let's start implementing that skeleton concept into the actual design. I won't polish the design at this phase. I just want to mix and match the layout and colors.

Let's remove that grid to see how's the design goin'

So far so good. Let's continue to the second part just bellow the 'above the fold' section. This part will be a container for my CSS snippets and footer to display my name.

This is what I have for the wireframe.

With the same method as the previous one, I start with a 12 grids layout, then put all the elements to the container.

The basic idea of this 'snippets section' is similar to the 'latest post' section. It will have a bootstrap-y cards style to display the information. But I will have many posts of these snippets, much more than my blog posts. That's why I need to reduce the card width so in a row, it will contain 3 cards. I'm planning to have 6 cards of CSS snippets on my front page.

Ok. I kinda liked the layout already. But it still needs some polishing. Maybe add some texture, curves, or add some characters into it. I'm not an illustrator but these days we can easily find free to use resources for our UI design. Some of these resources are free to use even for commercial purposes. What a great time to be alive.

---

Some of my favorite resources for illustration are:

• absurd.design
• undraw
• open doodles

---

For my blog design, I'll go with free illustration from absurd design. Their illustrations are weird, and I like that.

Let's add some curves and illustrations then.

Definitely Not the best web design of the year. LOL. But I like it. I think I'm gonna save this work for now.

---

I guess that's it for today. For the next part of this series, I will try to code this template into an actual WordPress theme. It won't be too complicated since we will use a popular WordPress starter theme. All we have to do is just styling the CSS. All the WordPress hack, hook, or whatever to make our theme function well, it's already handled by that starter theme :)

All rite.

See ya!

---

cover image by William Iven from Pixabay, edited with Canva.