Web Page Layout in Photoshop and ImageReady

Dimensions
The first task was to decide on dimensions for each page element. I wanted the design to scale down to 800×600 and still be workable since Google Analytics tells me that about 20% of my site visitors come with an 800×600 resolution.

The header just needed to be big enough to hold a logo that I hadn’t designed yet. 200 pixels seemed to be a good height. On an 800×600 screen, it would only take up the top third.

My left border needed to be a little wider since it will hold several text menus. 225 pixels looked like a good fit. The actual usable width will be a little less than 225px since the edge will be curved.

Once we take margins into account, since text butting up directly against each graphic section is not a look I was after, we’re left with a content section about 500px wide with around 200px vertically above the fold. While not ideal, this is a good amount of space which of course increases with a larger resolution that 80% of my visitors have.

This entry was posted in Programming. Bookmark the permalink.

One Response to Web Page Layout in Photoshop and ImageReady

  1. Pingback: Upgrades and Spam » Nutt.net

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>