Since the beginning of the web, there are certain layout patterns that have emerged as “standards.” Examples include the main navigation at the top, left or right sidebar with additional information or navigation options, and body content taking up the remainder of the space.
While there are definite deviations from this basic layout (not top navigation, no sidebar, two sidebars, etc.), this is often a fairly safe bet when creating a new layout. Deviation from this basic pattern should only be done with a purpose, especially by new and inexperienced designer-developers.
Creating a design that is predictable—this usually means consistent—does a lot for the usability of a product. Deviating from what a user expects to see when using a product should only be done when the usability gains are greater than the losses.
It’s best not to use 72 pixel bold blue titles on one page and then 36 pixel red titles on another for the same type of content—as layout consistency is key. Similarly, spacing (padding) between title and body text that’s 36 pixels in one section and then 32 pixels in another will create visual inconsistency. While a person might not immediately understand why the difference is jarring, they will feel it.
Similar to the typographic scale mentioned above, spacing elements on a scale of 4, 8, 16, 24, 36, 48, 72, or 108 pixels will create a visually pleasing design. It’s a good idea to use enough space between elements, give them room to breathe; newer designers often avoid white space and can end up with designs that look cluttered and overwhelming.
Some may question why the scale is spaced the way it is. Why is there only a 4 pixel difference between the first two numbers, but a 36 pixel jump between the last two? The reason is simple: at small scales, a 4-pixel increase is easily identifiable (8 pixels is twice as large as 4, which can easily be discerned). But with larger numbers, the difference between 72 pixels and 76 pixels isn’t easily seen. Larger differences are easier to see as sizes increase.
Consistent spacing is one reason grid-based approaches to design have become so popular. Starting with a grid (generally 12-, 16-, or 24-columns) gives designers a framework in which to work that will keep everything consistent. Built-in gutters between columns also help to ensure that different design elements and the content within them have some breathing room.