WordPress is amazing – you can customize it to run pretty much ANY site, from simple blogs to full-featured websites with e-commerce (I’ve done quite a few sites of different complexity, including large e-commerce ones). So congrats if you chose WordPress as your platform – it really is a great, mature, flexible piece of software.

As with any project, step number one is to figure out what the goal of your site is, what kind of content you will have, and what is the order of importance. The fancy word for it is “information architecture” and/or “user experience design”.

In my case, the goal of the site is mostly to support professional growth, and be a place for improving my writing.

Once you know your goals, it’s fairly easy to lay out your site navigation and structure.

So, the architecture is pretty simple:

• show my blog, including standard topics/categories and archives sidebar
• include an “about” page – usually a good idea, so visitors can get to know who you are
• showcase certain work I’ve done
• link out to GitHub, Twitter and LinkedIn profiles
• give visitors a way to contact me easily

Then, I usually sketch a quick wireframe of the site, just to get a quick visual picture before designing it.

In my case, it’s a simple two-column layout, with a header (and possibly a footer).

After this comes the fun part: being creative! I usually take some time to browse around and find inspiration on Pinterest, some awesome web folk whose work you admire, or even actual places and things.

I wrote down a few things that I wanted to include:

• simple color palette, mostly shades of grey (haha not intentionally and not 50)
• subtle background pattern, thank goodness there’s a site for that!
• pink and navy colors for headlines (kind of inspired by nautical themes from this Tumblr blog)
• PT Sans, Georgia and Merriweather serif fonts – just really liking them recently (and annoyed by overusage of the Lobster font)

Once you are inspired enough, open up Photoshop and mockup your design, paying attention to how each component will look like. You might come up with something like this:

It’s very simple but is exactly what I need.

When you are happy with your design, continue to step 2: coding your HTML/CSS template