Design Two

design two (#design2code1)

In 2015 I’m doing what I like to call The Design 2 + Code 1 Project. Each month I will be designing two WordPress themes, then choosing one of them to code. I will be sharing updates about this project every Saturday.

My first January design is here

This is my second January design.


Today I’m just going to jump right into it. This week I’ve tried to design something entirely different than last week. It’s a less bright & less colourful design. It’s meant to be bold, clean + uncluttered with large and interesting font sizes. It’s optimized for large, beautiful, images.

This week I’ve designed only my minimum required pages (blog index, blog single, and page), but I’ve made the design a little less simple than last week.

Starting with the blog index page.

Here’s the top half:

Design 2 Index Top

I want to mention the huge statement at the very top of the page. This would be customizable to whoever was using the theme. Since I like to call myself a storyteller, being a designer and all, that’s what I wrote up there. But you could literally write anything.

The picture I’ve chosen in the header is one that was taken at my Grandparent’s house during the holidays. They have a beautiful forest of sorts right behind their house. As kids, my cousins and I spent endless hours playing back there. We probably attempted at least 5 different treehouse builds.

But that’s off topic.

In contrast to last weeks design, I wanted to have post excerpts in this one. I think it’s nice. Still simple, but not quite as simplistic.

And the bottom half:

Design 2 Index Bottom

Next, the single blog post page

Again, here’s the top half first:

Design 2 Single Top

As I share this with you, I realize I’ve made what could be considered a flaw. I haven’t included the date. Now, I could easily throw explanations at you for why there is no date (because the date was very prominent in the index and not needed here, because I thought it unnecessary, or some other justification). But I won’t. Because I forgot. We’re all human right. If I choose this theme to code, I will likely include the date in the design.

Here you can see how the image takes up the full width. It’s meant to be able to show off images – they really stand out in the midst of the simple dark grey and white.

And the bottom half:

Design 2 Single Bottom

I definitely still enjoy designing comments. That’s all I have to say :)

Finally, here’s the regular page:

Design 2 Page

As expected, it probably looks exactly how you’d imagine.

I heard from someone once that design should not get in the way of what you are meant to be doing. It shouldn’t surprise you. Its role is to show off the content, not take your attention away.

I believe I’ve succeeded. Let me know!

I haven’t shared with you a mini style sheet this time, so here are fonts I’ve used:

– Jaapokki Regular (the all caps thicker one)

– Nexa Light Regular

– Nexa Bold Regular

If you are interested in the sizes go ahead and ask, I’d be happy to share them with you :)


Now I’m up to the task of figuring out which of the designs I’ll be coding. I’d love to hear your preference!

For the next two Saturdays I will be sharing things related to development and code, because one thing I’m sure about is that I’ll be learning a ton.

Enjoy your weekend!