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)