WordPress Codex: Designing Themes for Public Release



Make a Plan

As you consider your design possibilities, check out CSS Zen Garden for inspiration. The volunteer designers took one HTML page and created hundreds of various web page designs from it. The HTML doesn’t change, only the style sheet changes. The designs are incredibly varied and unique. This shows you not only the power of designing with CSS, but also the power of the imagination to create and manipulate the most simplest of information into works of art. It begins with a plan.

According to NuclearMoose, one of the popular WordPress proponents, start to make your plan with some basic tools that don’t involve the computer.

I have some tips…paper, pencil, sticky notes, and pencil crayons. “Whazzat for?” you ask? I’ll tell you.

I use the sticky notes to represent a piece, chunk, module, or section of the page. (Use your own appropriate term.) I write “Links” and “Navigation” etc. on them and set them on a blank piece of paper. That way, I can easily move around the elements as I like, finding something that looks balanced. I even cut some of them to size to more closely represent their actual proportion on a page.

After I get something I like, I will sketch it out with more detail. Often I will colour things to try out various colour combos. Actually, I just like colouring, but I don’t want my kids to think I’m colouring for fun…this is serious stuff!

I write down all of the things I want to include in the site on a piece of paper. Then I plan out each part of it, making notes about fonts, alignments, plugins that may be needed, background images, or other artwork/graphics that I may want.

At the end of all this process, I have a pretty good handle of how I want things to look, as well as how it should be structured. I can start gathering all of the assets for the site (images, plugins, etc.) and begin to think about coding.

In other words, there’s a fair bit of non-computer-related work up front. I’ve found that this helps me a lot when starting the actual “construction” of the site since I’m not sitting in front of my ‘puter with a blank screen in front of me, being taunted by that damn cursor blinking, blinking, blinking…

Oh yeah, it doesn’t hurt to have a CSS pocket reference or some other favourite CSS resource material handy so that you don’t do silly things like *cough* use deprecated attributes *cough* on some of your elements.

Once you get tired of all the work, you can invite your kids to come and help Dad colour the web site and spend some quality time together.

Couldn’t have explained it any better. Your plan should include:

  • Structural layout – Where do all the parts go?
  • Specific Elements – Will you have a calendar, comments, what parts will you include?
  • Template Modular Elements – Which templates will you use or add? Site map? Pages? A distinctly different single post page?
  • Graphics – What graphics should go where?
  • Colors – How many, how are they used, do they have a purpose or are just for show?
  • Fonts – How many and what sizes go where?
  • Space – Space is an important part of layout so how will you use space?
  • Itinerary – How and when are you going to do all this?
  • Advertisements
    %d bloggers like this: