Designing Personal, a WordPress blogging theme.

Having joined Obox in July of 2012 and working through the current roadmap, it was almost inevitable that at some point I’d be designing a WordPress blogging theme.

It’s not my first, I’d already designed a theme called Old Post back in 2010/11 for the guys. That was a blogging theme but it was very very niche. It was designed when tumblogging was a ‘thing’. That quickly passed as most things do in the blogging world.

Over the latter months of 2012 I spent a great deal of time looking at data at Obox and we prepared a product roadmap going forwards by looking at our existing theme library and areas where we wanted to focus on our expand into.

Blogging is still real

Yes, people still blog, if you could call it that. People write and articulate their thoughts on a daily basis. It might have evolved somewhat with things like svbtle, Medium and now Facebook/Quora adding to the blogging mix but in my opinion there’s nothing like a home of your own.

For most, writing your thoughts is still a very personal experience. Hence, where Personal’s name came from. I was also inspired by the Julie and Julia movie and taking a blogging theme back to basics.

Planning the theme

Our Principles blogging theme had previously done really well at Obox, so using it as a base for features was a good place to start. Releasing a theme which just gave the ability to blog would be far too restrictive so adding in a few extra features like Principles’ would make it more appealing.

Blogging Theme

I jumped in to my sketch book and began writing down the page templates which would make up the theme;

  • Blog – Full Width / Left Sidebar / Right Sidebar
  • Full Width Homepage
  • Portfolio
  • Portfolio 2 Column, 3 Column and 4 Column layouts
  • Archive

With the minimum amount of page templates defined it was then easy to start sketching out wireframes in my notebook – nothing can beat a pencil and paper for quick wireframes. I already had an idea in my mind of the basic layout for the homepage. I wanted to utilise a large featured image or video for each post and for it to still look great when it was a simple text title.

I’d sold myself on having the themes homepage full width only, however, after chatting with the guys we realised we couldn’t limit a customers choice that much so I had to swallow my pride and stop being over protective of the design (more on that later).

I went from the quick sketches I had in my notebook to greyscale wire-framing in Photoshop, I’ve shown a few examples of this on dribbble and it enables me to visualize content blocks (text/imagery) without defining the font and images themselves. I believe starting a with a particular font and chosen group of images can move the design in a direction it doesn’t necessarily need or want to go in.

Once I’d completed the homepage and was confident in the greyscale wire-frame, I moved on to doing the same with a single post template. The single post page with no sidebar would follow the full-width look of the homepage. By decreasing the width of the content block, I was able to make the content more readable by having around 11-13 words per line. These two templates would forge the basis of the other templates so it was as good a place as any to get those ‘signed off’.

Fonts and Imagery

Easy reading was the goal of the design with a whimsical lead font for the logo. I jumped over to Lost Type Co. who have an incredible range of unique fonts and saw Lavanderia which was pretty similar to what was in my head. Edmondsans also stood out and using them together was pretty solid. However… as with most things at Obox we have to constantly think about compatibility. Lavanderia and Edmondsands would be too restrictive for our international customers so I moved the fonts over to Rochester for the logo font and PT Serif for the paragraphs, mixing in PT Sans for the titles.

The imagery I can only describe by showing you below, once I’d found the type of imagery it was only a matter of searching more and finding good examples for videos on Vimeo.

Personal Blogging Theme

Portfolio and Portfolio Layouts

I had written down some information in my notebook of the things I’d personally want on my own portfolio including;

  • Image slider
  • Portolio item title
  • Portfolio category
  • Portfolio item description
  • The ability to link to a live piece of work

I gave more space to the portfolio imagery and less space to the portfolio description and a nice little way to cycle through the images in the slider.

WordPress Blogging Theme

The size of the space given to the portfolio imagery lends itself well to both portrait and landscape imagery.

A WordPress Blogging Theme

Working on something as personal as Personal was a great experience, especially when working directly with the team that we have at Obox. Releasing it in to the wild is quite nerve-wrecking. The success criteria of a theme design is sales, so the proof would be in the pudding. So far so good and it’s great to see what people have started doing with it. You can now get personal with your blogging again.

Published by

Gavin

Lead Interaction Designer at DigitalDWP. Organiser of Industry, The Practical Web Conference..

One thought on “Designing Personal, a WordPress blogging theme.”

Comments are closed.