Justin Tadlock

Project Community Theme: Design

Designing the community theme

It’s time for round 2 of the Project Community Theme — the theme where you create the design and I code it. And this time, we’ll discuss design.

Put your designer-thinking caps on and get ready to discuss how you want this thing to look.

Thus far, I’ve gotten a lot of interesting ideas about functionality (which we’ll cover in another post) but not a lot of feedback on how this thing should look. The goal of this post is to get some ideas about layout and color schemes.

Layout or structure

Layout is always a tricky thing when developing a WordPress theme. Not only do you have to get the thing to look like you want but to play nice with the super-duper things you want to add.

Lately, I’ve been trying to imagine layouts on a three-column grid — one column for the sidebar and two for the main content area.

Another thing to keep in mind is the layout for each part of the site, not just the front page. Should the layout look different for the home, single post, and archive pages? Should you have different sidebars for these pages? Where should the header go, below the main navigation or above? There are a lot of questions you should ask yourself when it comes to the layout of a theme.

I’m partial to fixed-width designs, but some people prefer fluid-width. The reason I’m not a fan of fluid-width layouts is because something’s almost certainly going to break the layout on some screen sizes.

Just keep in mind what functions or cool scripts you want when discussing layout options.

Color schemes

I think we’ve decided that there will be three or four different color schemes for the site instead of a long, complicated options page where users input colors.

Coming up with a decent color scheme is my weakest area in design. Fortunately, there are a lot of great sites that help out with this:

  • Kuler This is definitely my favorite place to find and create great color templates.
  • Colour Lovers This a great site with lots of great color samples to choose from. It’s a bit slow on the loading side though.
  • Color Schemer Color Schemer is a cool online color-scheme generator.

Go pick out some colors. If you have any other color sites you want to add, feel free to share them with the community.

Start designing

I’m ready to read your ideas on how to best put the pieces of the design puzzle together. Once we get enough layout ideas, I’ll put together some sample images for you to vote on.

So, go ahead and put this design together. Let nothing limit your imagination.