Skip to content

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.

Pages: 1 2 3 4 5 6 7 8 9 10

Published inProgramming

One Comment

  1. […] It happens about once a year. I get this urge to redesign one of my sites. And this one with its wavy lines just seemed due. So here is my new design. As you can probably tell I’m on a minimal design kick right now. […]

Leave a Reply

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