Website Redesign - Part 2: The First Mockup


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 800x600 screen resolution. Some people would say that this is overkill, and that 1024x768 is generally pretty standard. I can certainly see the case for 1024x768. But for this project there were a couple of reasons that I chose 800x600. 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 800x600 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 800x600 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.


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.


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)

Labels: design (web)

Links to this post:

Create a Link

- Archives - April 2005 May 2005 June 2005 July 2005 August 2005 September 2005 October 2005 November 2005 December 2005 January 2006 February 2006 March 2006 April 2006 May 2006 June 2006 July 2006 August 2006 September 2006 October 2006 November 2006 December 2006 January 2007 February 2007 March 2007 April 2007 May 2007 June 2007 July 2007 August 2007 September 2007 October 2007 November 2007 December 2007 January 2008