Site redesign, step 1: Structure, look and feel

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:

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

Advertisements

One thought on “Site redesign, step 1: Structure, look and feel

  1. Pingback: Tanya Nam » Blog Archive » Simplifying the site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s