Website Design Grid Layout

[Adamski]

Hi All,

I'm getting started with a new website which obviously needs a design to start with. The programming part won't be a problem for me, but I'm a newbie on the design part..

I want to create the design in Photoshop (i know some Photoshop basics) but don't really know how and where to start.

This are the questions I'm strugling with at the moment:
1) What size should the starting grid have in Photoshop if I'm desining for a 1024x768 screenresolution.

2) I want to devide the main section of the first page in to three collumns. Is there a guideline for optimal widths? Taking possible banners into account.

3) I want a news section on my page. What is the best position to put it in? The most left or right collumn?

As background I want my website to have some space left on both sides. So it will not fill the entire width. I think it looks very nice .

I hope somebody can help me to get started.

thanks....

 

[PixelPusher]

Check this place out 960 Grid, it might give you a bit of help.

 

[Adamski]

Thanks for your reply...

It does help to get some get some more insight.
But it doesn't tell in which situation to go for which collumn width.

E.g. News should be on .....
Banners are always.....

 

[PixelPusher]

Many of those elements would be based on your design sense, right? How tall/wide do you want the news section to be? A slender column or a wide panel, that kind of thing.
I would start putting a design together and then you can always adjust elements in the PSD file to fit a html structure.

1) If your sizing to a 1024 resolution, then you must understand that the "1024" width includes the browser frame, so the actual viewing screen section will be around 990px. I would make the psd design template with this width.

2) What made you decide to have three columns? Not saying this a bad idea, just what prompted this decision?

3) As far as positioning of a news section, or any supplementary information panel for that matter, that is really at your discretion (the designer). I don't believe there is a wrong place to put it, just needs to flow with your design.

 

[bluecollar01]

hi adamski,

not sure if you are planning to use any type of advertisements on the site but it's usually a good idea to take into account standard banner ad sizes. Allowing enough space for one of these sizes can save you time in the future.

Of course, if you aren't ever going to utilize any type of banner then take some screen caps of some three-column layouts you like - maybe from templatemonster.com and use their column widths. Hope this helps. Thanks.

 

[johnscott]

One thing to mention is that if you're using Photoshop to slice up your psd file, it will slice it up into a table...although it's a pretty simple solution, it's much cleanerto use <div> tags instead. Then you can use CSS to easily change the widths, background colors/images, etc so if you do have to do any tweaking to columns...it can be done fairly easily

CSS
#container {width:100%; text-align:middle; }
#1024Body {width:1024px; text-align:left; }
#banner { float:left; width:150px; }
#news { float:right; width: 150px; }
#content {width: 724px; }

HTML
<div id="container">
<div id="1024Body">
<div id="banner">
Banner code goes here
</div>
<div id="news">
News code goes here
</div>
<div id="content">Body goes here</div>
</div>
</div>

I hope this helps!