Yet again I have redesigned the “company” website. This time, in part due to the words of giants like Lorelle and in part due to ideas rubbing off from great designers like David Airey, I realized it was time to turn this dead website (or as Lorelle calls them, billboard sites, into something much more powerful: a blog. At least, primarily a blog.

Blogging is a much more comfortable way to display a portfolio, anyway. We’sre going to start this off by punching through the process I went through when (re)designing this site. I hope it’s insightful.

Always Start with a Pencil (or pen)

Ever since I found myself a moleskine, it’s been much easier to stick to this principle. No matter what I work on, I try to pen it first. It seems to help me get the initial idea down, faster, and improve it before I even grab a mouse. This is not only time saving, but creates some cool things to look back on later—especially when it comes to seeing your designs progress over time.

Reasons for Change

This wasn’t about changing the design for the sake of its change. I don’t like that reasoning (probably because it isn’t very good reasoning). No, I wanted to change the design for a purpose, that is, to move this site toward being more of an authority blog on design. I want to turn it into a huge portfolio of work and experience on display, and of course a blog is the perfect way to do this.

I would highly recommend Basecamp for any team, whether or not you work remotely.

There were also some other reasons for the change. In fact, I started a project in the Aspiring Indie Basecamp so we could toss around some ideas and so I could get feedback on design concepts from the team. (For more on our company’s use of Basecamp, see this post).

Some of the things I wanted to improve on were:

• improve the readability as a blog, so as to encourage the rest of the Indie team to participate in writing on it,
• tighten up the blog from around 1000 pixels wide to around 800 or so,
• work more color into the site as a whole.

Hopefully the final product (what you’re looking at) accomplishes these things.

Initial Designs

The design as I first imagined it and drew up.

A screenshot of the image as it sits in Photoshop, all ready to be turned into a working website.

Feedback from the team was good, so I moved ahead. In only a little more than a day I put the site together. Granted, most of that speed is credited to my experience with the excellent Sandbox theming framework (I build all of my themes on it), and of course WordPress.

Some of the Better Features

I can’t claim credit for everything here, not at all. Let me try to list some of my favorite parts of this new site, and where I nabbed them from.

Top and Bottom Navigation

I liked this idea since I saw Airey using it and said so at Theme Playground. I like the idea of offering site navigation at both the top and the bottom to save the reader from having to scroll a bunch if they don’t want to. I tried mixing it up a bit, providing navigation with blue highlights at the top:

And gray/almost black highlights with a bit more subtlety at the bottom:

You get the idea.

Image Drop Shadows with Pure CSS

I’m pretty proud of this one. If you notice the images in posts throughout the site, they now have a cool framed photograph effect. I achieved this by giving each image a padding and a slight border, and then aligning the drop shadow to the right of the (now created) background. As long as the image is long enough it can fit just about any size of photo.

There were some images, however, which I didn’t want the border on. I added a class of structure to those images, and subsequently removed their styling by targeting img.structure.

Credit for this one probably goes to Eric Meyer (of course), who I probably read doing it at some point or another.

Using Gravatars in Comments

This is something I will be methodically implementing at each of the blogs I run. Gravatar is a company which was recently purchased by Automattic, the company behind WordPress. A small avatar (an image representing your digital self) is then put next to any supporting blog on which you use the same email. I always appreciated how Matt pulled it off, and thought I would do it myself.

The comment section of this blog, as I sketched it…

…and the final product, on the web.

Like the way the comments turned out? Want to see them in action? Then how about leaving a comment?

Better or Worse?

Before the redesign.

After the redesign.

What do you think? Direct your thoughts to the comments.