The Principles of Beautiful Web Design: Layout and Composition

Many months ago, my wife accidentally purchased the book, The Principles of Beautiful Web Design.  It has been on my "to read" list ever since then, but when I sat down to read it, we could not find the PDF!  I finally emailed Sitepoint (the publishers) and asked if they could resend me the link to download it - and they were so gracious as to send me the second edition of the book for free!  Now I'm making my way through and taking a few notes for reference.  Here is my "Cliff's Notes" version from Chapter 1.

Layout and Composition (Chapter 1)


Grid Theory (Golden Ratio)

 A simplification of this is to use a rule of thirds to divide up a website vertically and horizontally.  Using thirds is considered aesthetically pleasing to humans.  The 960 grid system can be used to work within this horizontally at least.


Two ways to achieve balance:

  • Symmetrical - formal, both same on two sides of an axis line, for example a two-column website design
  • Asymmetrical - using objects differing from each other to achieve an overall balance (like the homepage of a new website we are doing for Heritage Christian School - should be launched in Feb 2011)

To create an "object" for balance in an asymmetrical design, designers can use unity (grouping of similar objects), proximity (placement of items together to form a unified whole), and repetition.


Typically, websites are trying to draw attention to a specific area - especially on a "call to action" page.  This area is referred to as the focal point of the site.  There are a variety of techniques that can be used to create focal points:

  • Placement - choosing high-visibility locations like the center of the page or the top left area
  • Continuance (flow) - creating "lines" for eyes to follow, this can be just a column in a grid, or with a specific destination like an arrow pointing at the focal point
  • Isolation - by standing apart in space a focal point can be created
  • Contrast - taking Isolation one step further and intentionally making something difference in color, size, or otherwise
  • (Bonus Emphasis Idea) Proportion - we can not help notice if something just does not fit in


Notes on the second chapter coming soon!

About Us

Experienced Web Development from Des Moines, Iowa.

We do Drupal or Wordpress websites great and small – tailored to fit your needs. Reach out to us so we can begin. Our clients are in Des Moines, Iowa and across the world. If you have a large scale custom web project, we can be the reliable web partner to make those dreams a reality. But, if you need a simple brochure site or an e-commerce platform for your business, we can come alongside and make that happen too.