Archive for 2007

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

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.

Design 1a
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.

Design 1b
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)

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

A Rejected DesignTo 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.

The Final Wireframe
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

I had this in my voice mail at work the other day, and it is REALLY cute. Well, I’m biased, so I’ll let you be the judge. I realize that unless you live with him, listening to a 2 year old speak is like trying to translate Egyptian, so a transcript is below. You can see that we’re successfully brainwashing him in all of life’s most important aspects.

Click here to listen to Simon’s cuteness.

Transcript:

Hi Daddy.
I miss you.
Go Redskins!
Go Os.
Hail to the Redskins.
Bye bye.
Bye bye. (whispered)
BYYYYYYYE BYYYYYYYEEEEE!

Simon had a good time on Halloween. Just give him a listen.

I’m not in the market for a car, but when I am, this guy seems to have a fair amount of good advice.

iPod NanoIn a medium of self-indulgence, this post takes the cake. I got this idea from someone on the radio who did this. They put their iPod on shuffle, and just listed the first 5 songs that popped up. The theory here is that random songs from your iPod (or similar MP3 player – I don’t want to be a total Apple shill) say something about who you are. I’m convinced that all it does is expose the “dirty little secret” songs that everybody has in their library. You know the one. Or two. Or twenty. Kate will attest to the fact that there are several of these with which she is occasionally tortured.

So at the risk of totally alienating my readership (all 2 of you), the “Songs from My iPod” might become a recurring feature, you know, the type that I fall back on when totally uninspired to blog. The key to this exercise, of course, is complete and total honesty when listing the songs your iPod chooses for you. The shuffle feature is a cruel mistress, as I found out in my first draw. I admit that I was tempted to fiddle with the results, as one of my DLS songs appears in the list below. But I am committed to this course of action. What kind of man would I be if I didn’t admit to my love of. . . well, check it out (items marked with an asterisk were not available on iTunes):

Song Artist Purchase
Donkey Riding Great Big Sea Great Big Sea - Road Rage - Donkey Riding
Balad of San Francisco Caedmon’s Call Caedmon's Call - Long Line of Leavers - Ballad of San Francisco
Soldier of Love Donny Osmond *
In My Life The Beatles *
Don’t Ask Me OK Go Ok Go - Ok Go - Don't Ask Me

Kate has pointed out that I have many songs on my iPod that I should be ashamed of, but I have forbidden her from outing my love of. . . well, you’re just going to have to wait for the next entry in “Songs from My iPod.”

Simon’s 2nd birthday was a couple of weeks ago, and excepting the bloody lip, a good time was had by all. It took me a while before I actually sat down to take the pictures off the camera, but we had a couple turn out really nicely. The photoset is up on Flickr, but you have to be a friend/family to view it. If you’re not my friend, but would like to be, let me know. How condescending does that sound?

Blowing Bubbles with MeeMa and BeeBa

As you can see, Mee-ma and Bee-ba (Simon-speak for Grandma and Grandpa) made it down from New York for the festivities. Simon was fortunate to have gotten over his cold a few days before his birthday, and then wait until a couple days after to catch another bug and ear infection. Hopefully he wasn’t infectious around all the other kids. All in all, it was a good day.

I have had “Hot Potato” stuck in my head all day. And now you can too:

Enjoy!