Design One (#design2code1)

design one (#design2code1)

I’ve finished the first design and I’m ready to share it with you :)

A few notes before I get into it:

– As part of my parameters for each design, I am required to design a blog index page, a single blog page with comments, and a regular page. If I want to design more, depending on the theme, that’s totally fine – but no less. I’ve only designed those 3 base templates for this particular design.

– The dummy (filler) text I’ve used for the paragraph content is from Fillerati. The text comes from some classic novels! Much more fun than Lorem ipsum in my opinion. You might enjoy guessing which novels I’ve chosen text from!

– The site title and nav bar options are completely random (well, other than my name which isn’t really random at all…)

Ok. Drum roll?

Here’s the page template. This could literally be used for anything.

Page Template

As you can see, there is a lot of white space. The content is the main focus and there is almost nothing to distract you from it as you read. This design is made primarily for those who want their words to be the centre of attention. It’s for that reason that I haven’t included any images in these design mock-ups.

I was going for bright + simple + clean, yet interesting to look at.

One of my favourite parts of this design is the footer. I love the idea of making a big + bold statement as the final thing people will see. It’s almost like having the final word in a conversation, and with this design, it’s impossible to miss.

Let’s move on the the blog index template.

Blog Index Template

Note: those article titles? Completely random.

Here I’ve opted for the most basic thing I could think of: only including the post/article titles + the post dates, as opposed to including an excerpt of the post, a feature image, and a bunch of other meta information such as categories, tags, and author.

As I mentioned before, this theme focuses on the words of the content, and this only enhances that. You can easily see all the article titles without scrolling through, which means it’s easy to pick out the one you want to read.

This isn’t necessarily better, in terms of convincing people to read the posts/articles. It’s more of a stylistic choice. However, I did include the post dates to make it easy for readers to know how often the blog is updated + which posts they haven’t read yet.

Finally, let me show you my favourite template – the single post template! I’ll show you this in two parts, because it’s much longer than the other two.

Blog Single Top

To keep the reading distraction free, I didn’t want to clutter it with meta info. Instead, I’ve moved the meta info over to the right side. As you scroll through the article, the meta info would move down with you, so it’s always visible should you be interested.

At the bottom of the article is a link back to the blog index page. I’ve chosen this instead of the usual ‘previous’ and ‘next’ links because of the simplicity of the blog index page.

Here are the comments:

Blog Single Comments

I always love designing the comments :)

In this case I’ve chosen to design only two levels of comments. If I choose to code this theme, I will likely add a third level.

I have nothing more to say about the comments other than they continue in the same distraction free style as the rest of the theme.

Lastly, I want to share with you the little style guide for this theme.

Style Guide

I’ve simply shown the heading sizes and fonts, as well as the colour palette I used.


That’s it! That’s design one! I was so excited to share this design with you today, and I hope you enjoy it. If you have any feedback, I’d be happy to hear it – I won’t be making any changes to this design (unless I decide it’s the one I’ll code), but I will definitely use your input for future designs. After all, the goal of this project is for me to grow as a designer, not stay stuck in my ways.

I can’t wait to get started on design two! I’ll be sharing it with you next Saturday :)