What are the rules of thumb for margins in web design?
Asked by
Tintels (
123)
April 19th, 2011
My web designer tells me that in a web page, the empty margins or padding should always be multiples of a standard. For example 6 px, 12px, 18px. This should produce nicely balanced lay-outs. I would like to learn a little bit more about it:
Should one really not violate this at all?
Should the standard be the same horizontally and vertically?
Anybody know some online tutorials or examples of good/bad?
Thanks in advance for your input!
Observing members:
0
Composing members:
0
5 Answers
You will probably get good responses here, but if not you may also want to check out the user experience stack exchange site for specific UX questions. Good Question.
This is just me, but I like to create sites that are 992px wide, aligned center, with any gaps or margins being 5, 10, 20 or 2, 4, 8.
I would say it really depends on your site. Less barriers and space between related material, and more notable barriers and spaces between unrelated material.
E.G. look how fluther separates 1 answer from another, how its less separate than say the community feed,.
If you want to know more, I would recommend some hands on experience with experimenting how things look on different monitors and different resolutions.
I think it’s difficult to define a single arbitrary rule. I like 10 to 15px spacing left or right around objects floating in body text. For colum text with a vertical border around columns, 4px is generous. For column text where white-space alone separates columns, you want more; perhaps 13px or 20px.
Just use what looks good. Make it easy for the eyes to separate out one element from another. You could go to a beginners art class and hear all sorts of THOU SHALT rules about art. Go look at the work of the great masters, and every one of thse rules of thumb have been violated—but for good reason. Make it beautiful and usable and you can’t go wrong.
Rules like this are probably handy if you use a grid CSS templating system like Blueprint or 960. Otherwise design is often a matter of gut feeling.
It completely depends upon the software your using and whether your creating a page for the web, or for a letter type document, like a banner ad. There are dropdowns when you open a new document with pixels or inches. I think we use 800×600 pixels in Photoshop when creating a new document for a webpage. And using Illustrator I think I used the “letter” sized doc.
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.