Layout and Composition

A brief look at the established patterns designers have used to compose effective site layouts.

Scroll down...





As we stated in the previous lesson, we want to make sure our user consumes the right content in the right order and can safely ignore the things that aren't important. We'll get deeper into the specific tactics you can use in future lessons but, for now, it makes sense to pay homage to some of the broader patterns that designers have implemented over the years to compose their pages. They've done the hard work so you don't have to.

Now that you've started opening up your eyes to design around the web, you should be able to identify these patterns in use across many of the sites you frequent.

Read An Introduction to Composition by Rachel Shillcock at Tutsplus for a more formal introduction to composition.

Using Whitespace

An important realization in design is that whitespace matters just as much as content... in fact, probably more. Whitespace isn't just emptiness, it frames everything on the page and directs the user's eye towards the content. Without enough whitespace, your user will be overwhelmed with the amount of content on the page and quickly lose interest. Thus whitespace is a very important factor in the composition of your pages.

Whitespace on the larger scale is the spacing between sections of the page or images or paragraphs. On a micro level, it is the amount of space between individual lines or words or letters. Each of these things is important to "let your design breathe". I'm sure you can remember an example of a website that gave you anxiety just because it was too cramped up. We'll cover micro whitespace a bit more in the lesson on typography.

Read Adding Space to Your Designs by Rachel Shillcock at Tutsplus for a more formal introduction to whitespace in your designs.

Building Consistency

As we learned in the section on UX, it's also important that you don't surprise your user from one page to the next by being inconsistent. That same philosophy applies on a more basic level with design. You should strive to produce a consistent tone throughout your user's experience on each page.

Read Building Consistency and Relationships Into Your Designs by Rachel Shillcock at Tutsplus for a more formal introduction to building consistency.


  • You will need to compose the arrangement of your websites in a way that is sensible for the user and doesn't crowd it with content.
  • Designers have established certain patterns for composing the page that have withstood the test of time and it probably makes sense for you to start with those.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

  • Reducing the Bloat by Rachel Shillcock walks you through paring down your designs to a calmer and more reasonable density.
  • Composition as defined by Wikipedia

Sorry, comments aren't active just yet!

Next Lesson: Building Visual Hierarchy