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.

• 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.

• 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.

Once I had a wireframe that I was happy with, I sat down with Photoshop to create the first of several mockups. I had left myself a good deal of flexibility within the wireframe to make lots of decisions later, so I spent a good deal of time trying different things out in Photoshop until they worked and looked the way I wanted.

I began by giving myself a canvas to work with. I design most Web pages to be readable, without scrolling, at an 800×600 screen resolution. Some people would say that this is overkill, and that 1024×768 is generally pretty standard. I can certainly see the case for 1024×768. But for this project there were a couple of reasons that I chose 800×600. The first is that when I’m old and can’t see, I’ll want people to consider my feelings when designing for the Web. The second (and probably more valid) is that the content I have to present is so limited anyway, I don’t really need the extra real estate that anything bigger than 800×600 provides. I want to limit the column width of my main content (that holds articles like this one) so it is easy to read, and don’t have enough other content to justify and/or fill up the extra horizontal space.

So I created a canvas with a width of 775 pixels, which should fit nicely in a maximized browser at an 800×600 resolution. I created some guides in photoshop to keep everything aligned properly, and set out the basic areas for the banner, navigation, and content. The other miscellaneous items – links, photos, and RSS Subcription Center would be placed in their respective places later. Because I really wanted to use some form of the guitar masthead that got such good feedback here, I decided to stick with the browns, tans, and oranges color scheme for the time being.

Click on the image to enlarge.

Now that the “base” had been painted on the canvas, I began to fill in the respective content areas. I won’t bore you with all the details of each decision that was made, but the final result is shown below.

Click on the image to enlarge.

A few words on some of the tools I used during the process:

• iStockPhoto.com – As I’ve mentioned, my artistic skills are negligible, so instead of frustrating myself trying to create my own icons, I bought some. The icons you see in this mockup (both in the navigation and in the post information box) came from iStockPhoto. Specifically, they came from the satin series, by Scott Dunlap. I’ve found iStockPhoto to be an excellent, reasonably priced resource for images when designing for the Web.

• FeedIcons.com – This web site freely provides the standard feed icon (shown to the right) in a wide variety of sizes and colors. I chose to stick with the standard orange icon.

• Lorem Ipsum Generator – This tool helped me generate dummy text for components like the blog post and link descriptions. It is more useful than you would think.

Next: Part 3 – Do I Really Like These Colors? (a.k.a, The Most Subjective Part of Web Design)

To the right is an attempted redesign of this site that I worked on back in the spring of 2007. It was unfocused and attempted to incorporate too many new and different design elements in a way that I found ultimately unsatisfying. Although a lot of work went into this design, I decided not to implement it until I could “fix” it. The necessary inspiration never hit me, so several weeks ago I began the process of designing a completely new template.

Since I was unhappy with my last redesign attempt, I also decided to refine my process. I’m not an artistic person, and any attempts at drawing generally lead to nothing but frustration. But I decided that it was important this time to start with something on paper. I went through several sheets (reams?) of paper, scratching and brainstorming until I finally came up with a wireframe that I liked.

Click on the image to enlarge.

About halfway through the process I switched to graph paper. It helped me more accurately represent the proportions of the space I was trying to fill, and created a grid on which I could lay out the different components of the page. I divided the page into thirds, and found convenient spots for the limited content that I need to present on my site. You can see the notes I jotted down here and there. I even included a stick figure or two just to firmly cement my sketching ineptitude. I was generally happy with the result. You’ll see that there are still elements that were up in the air, fairly major things like how to display posts and post-information (date, time, comments, etc.), but I had some ideas to work with when I began the mockups in photoshop.

You can see from the wireframe that I wanted to add two new pages to the site: an easy way to access the archives, and a page for my contact information. With the addition of these two new pages, I needed a way to provide primary navigation. The inspiration for the giant faux tabs came from the Feed Icons Website. I really liked the visibility these giant tabs (and icons) give to the simple navigation required on a small site. So I wanted to incorporate something similar here.

Next: Part 2 – The First Mockup