Composition is the one element that you absolutely cannot avoid. It will take your layouts from a clump of text and images to a seamless design that flows clearly. Composition is everything, if you ignore it you will have nothing but text and blotches on a screen.

Note that this article is a revision of the 2011 article here: http://www.blog.baweaver.com/post/8811141650/practical-web-design-composition

Composition Methods

There are several methods of composition, each one bringing a distinct element and flow to your page, mastering them will prove the be invaluable and will set you leagues apart from the average hobbyist web designer.

Whitespace

The most crucial of all composition is white space. Never try and cram loads of content into a crowded area, use margins and padding to keep space between your elements, and be especially liberal about it. It is not uncommon for me to use 50 to 100px whitespace from the edge of a container.

The Rule of Thirds

The father of all rules of composition, the rule of thirds. This rule states that a page is divided into thirds. At the intersection of these dividing lines are points that are the focus of your image. Avoid using dead center images at all costs.

The Golden Ratio

The Golden Ratio is a rectangle divided into thirds, one section made of 2, the other of 1. This is a ratio calculated by the greeks as the ideal ratio of beauty and harmony. Often times this is used to divide content sections.

Pattern

Pattern can be used to add subtle detail to a page and add focus to elements above it, but the key here is subtlety. If it is immediately noticeable then it’s too much. The purpose of repeated patterns in composition is to add unity to a page while staying in the background.

This by no means justifies you to break out your microsoft office patterns or cheap patterns you find on the internet. The key is subtlety and these are no where near subtle in the least.

Look at the background of this blog, does the pattern immediately stand out? It stays in the background and accents the foreground, effectively accomplishing its goal.

Background

The thing to remember is that it is called a background for a reason. I purposely avoided showing methods of displaying background images to keep newer users from using overly powerful images and ruining their early sites. It is safe at this point to read the W3’s specification of the background element

The purpose of the background is to bring focus to the foreground, it is transparent. This means no powerful images, no noticeable gradients, no badly-tiled or overly bold tiled backgrounds, and most certainly no bright and noticeable colors.

Conclusion

Remember in composition that content is king, your goal is to highlight your content. Good design is transparent, bad design sticks out like a sore thumb.

The next tutorial will wrap up Web Design, Practical Web Design: The Mortal Sins.