Website Redesign – Part 3: Do I Really Like These Colors?

Part 3 of the Music-Slave.com 2007/2008 Redesign Series

After stepping away from the first design for a few days, I came back to the project and took a look at what I’d put together. I liked it, but it was just too. . . dark. I was tired of the browns and tans. As much as I like the guitar masthead, I think it’s time to move on. It may return one day in another form, but for now it’s scrapped.

I looked around for a bit through my photo archives and found a shot that I liked. I ended up going with a shot I took of the Basilica of the National Shrine of the Immaculate Conception (longest name of a church ever?). I’m not a photographer, so it’s not quite the quality I would like. But I think it is a nice shot. I want to occasionally swap out the photo that is displayed in this section of the site, so this isn’t permanent. I used a few select colors from that photo to create the theme for this mockup.

Some of the other items that stood out to me as “needs fixing” were:

  • What’s in a name? Music-Slave.com has gotten me more than a few eyebrow raises over the years, and the hyphen in the domain name is annoying as well. I think the time has come to move on. Solution: When this design goes live, it will relaunch as the more mundane, if somewhat more vain, PatCampbell.net.
  • A bit more whitespace was needed around the photos and RSS subscription center. That area was cramped. Solution: Add more white space. Painfully obvious. Except in this case the whitespace is blue.

View Mockup With These Fixes

  • Also relating to whitespace, the faux page appearance of the main content area (where posts would appear) wasn’t giving me warm fuzzies, and I thought it would look awkward for users who had resolutions greater than 800×600. Solution: I eliminated that visual effect and went for a simpler (and I think more effective) white area for both the content and the sidebar information. I also added a small gradient to the blue top to ease the transition to the main content portion of the page.
  • I really wanted the information in the post information box to be prominent and easily accessible. Floating it to the right of the post text struck me as being problematic in two ways. First, it was a bit TOO visually prominent. The text jumped out and took away from the post once you started reading. Secondly, I occassionally include an interest image with my posts, and having both the information box and the image off to the right seemed to be a bit too busy to me. Solution: I decided to take the box and span it across the width of the post text. Since the title of the post is really “post information”, I threw it into the box as well. I’m pretty happy with the results. In order to mug for comments on longer articles, I added some “please comment on this” text to the bottom of the post.

View Mockup With These Fixes

  • Finally, I wanted to tighten up the sidebar a bit and make those clearly delineated from the rest of the content on the page. Solution: I added a sort of “bracket” to link the descriptive titles “Links” and “Friends” to the content they apply to. I wasn’t sure about using the vertical text at first, but I think this small element ties the titles to the content and sets off the sidebar nicely. The drawback here is that it may be a bit tricky to implement in HTML/CSS.

View the FINAL Mockup
.
Next: Part 4 – Archives and Contact Pages

3 thoughts on “Website Redesign – Part 3: Do I Really Like These Colors?

  1. Blue. I like blue — very friendly, soothing even.

    Looks like you’re really putting design thought into this … occupational hazard I suppose?

    Regarding the relaunch with the new domain name … do you actually pay for your own domain name, or is this some clever masking done by another service?

    As far as “In order to mug for comments on longer articles …”, doesn’t it help if one reciprocates? 😉

    Nice work, though.

  2. My hosting used to be through myhosting.com. They recently raised their prices, so I’m jumping ship on them. I’m giving Dreamhost a try.

    And you’re right, I need to be more active commenting on the other blogs I read. I think that part of it is that I do most of my online reading through Google reader, and I sometimes forget that the option to comment is even there! 🙂

Leave a Reply

Your email address will not be published.