design five (#design2code1)

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

This is my first March design.


Today is not Saturday + I haven’t updated you on the project for 3 weeks. Sorry ‘bout that.

I’ll start off by mentioning that I did in fact code one of the February designs. It’s not perfect, but you can view the result of my coding here. I chose to code Design 3, then realized that I’d need a little more than html and css to make the menu work like I had imagined. So I’ve left it out for now.

On to design five :)

This week I wanted to design something a little more sophisticated, while still maintaining the simple and clean look that I hold dear. The blog index page acts as the home page, and I’ve also designed the single post page and the general page.

The home page / blog index

As usual, there is a lot of whitespace in the design. I love this. Social media plays a huge role these days, so I’ve given the social links a prominent location. Blog images are large and the text is simple.

design five index

I’ve used gold as a highlight colour. This is a fairly common trend I’ve been seeing around, so I’m giving my take on it. There is a suble gradient applied to the gold grid lines and any horizontal gold lines in the text to give the gold a very slight foil look + some dimension.

I imagine the navigation / menu text to slide along with you as you vertically scroll down the page. Of course, I can’t show you the effect with the images, but should I decide to code this design, you’ll see what I mean.

I’ve kept the footer very simple.

The single post

design five single

The only thing I’d like to mention here is the comments. In past designs, I’ve kept the text size of the comments the same as the text size of the posts. In this case, I’ve made it slightly smaller in an attempt to keep the emphasis on the post itself. I quite like it.

The page

Since this design doesn’t vary much from the others, all you have to do is look at the picture. No explanations required :)

design five page

The details

Images are from, my favourite source for free stock photos.

Site text, as usual, has come from Bonus points if you can name the classic novels represented.

Here is a simple style guide for fonts and colours:

design five style guide


I hope you like this first March design – I sure do :)

I’ll be sharing the next design next Saturday, so keep an eye you. And as usual, I welcome any feedback you might have.