Watch Me Design a WordPress Theme: Concept and Initial Sketches

Add a Comment

Sketch Preview

After yesterday’s video blog announcing I will be entering Design Vitality’s theme design competition that I mentioned a couple of weeks back, it’s about time to get some specifics laid out. There are a number of prizes involved, but the best part: the winner is chosen by a vote. So, ideally, by making Theme Playground’s entry a sort of community project, I might have a good chance to grab it!

About This Project

For those who didn’t tune in yesterday (or who didn’t want to watch the video) I will be entering the competition and designing the theme, for the next ten days, in full view of you, the readers of Theme Playground. This will include video blogs, screencasts, the posting of images, and a period of live interaction with portions of the site in order to allow for some great feedback.

Some Competition Specifics

I didn’t go into this in too much detail yesterday, so I wanted to cover it today.

  • The competition is being hosted by Design Vitality and the competition info is here.
  • The competition deadline has been moved to November 30.
  • The theme must be brand new, not posted anywhere else on the web.
  • The most popular theme will win $1,000, the second place an iPhone, and third place some hosting.

Some Competition Worries

After looking a little more closely at the competition details a few days ago, I was worried that I might break the rules by having you see the theme as it is being made. So, I checked in with Mustafa, big dog at Design Vitality. Here’s what he had to say:

The site can also be up from beginning to mid creation, but the final stages or the finished theme cannot be up.

So I can have you involved in the creation of the theme, I just have to be sure you never see the whole thing. No problem.

My Theme Concept

First sketch of “Watch Me” series

First sketch I did for this concept.

I will be attempting a newspaper theme. Notice that my recent series has been on magazine themes – I have carefully named the style newspaper because this will be a lot like a newspaper and not a magazine. If you can imagine a newspaper on the web, truly on the web and using it to its potential, that is what this theme will be like.

While I was sketching these up I spent some time looking into newspaper designs in my area and others. I used to be the editor for my high school’s paper, as well as the designer of the style guide. I’m pretty familiar with print design, although I don’t get to do it quite so much anymore. In this case, I think that background will really help me out.

There are a couple of things I know to a near certainty with this theme. I know…

  • It will be a two column theme (I find three columns cluttered) with at best an option for three columns
  • It will have feature positions based on categories
  • Certain elements such as photo credits and captions will have a distinct feel
  • Authors will be displayed appropriately
  • The masthead will be used in the way that newspapers use them

Hopefully these ideas get you as excited as it gets me. And hopefully you have some ideas to add? After all, that’s the point of all of this!

Second sketch

The top left has some ideas for a different project.

I will be attempting to synthesize some of the elements of great magazine themes that (I think) were the reason they were so excellent. Of course there is always room for improvement, and hopefully we can take care of those things. As I use techniques from these other designers or have inspiration from their direction, I will be sure to let you know. I will also be explaining each step in the process, from design (color palettes and icon choices) to implementation (code techniques and best practices) with screencasting and videos, along with the usual tutorials.

I have been playing with some names, and I’m pretty sure I know what I want to call it. I will wait to show it off until later today, probably tonight, when I publish a screencast on the topic and the initial graphic design of the theme. After that I will let you know what address you can watch the live progress on (as the theme is developed on a test server).


Three cheers for moleskin notebooks anyone? I love the things, especially now as I see that I can scan the pages without seeing through to the other ones.

All thoughts, comments, and encouragement is welcome. This is fairly new ground, as far as I know, so I’m getting really excited. Tell your friends!