Elements of Design Composition

All elements of design – from typography to iconography – relate to the overall composition. Each full webpage offers an intimate feeling to visitors before they even notice smaller details. In this way, compositional design techniques are some of the most important things to learn regarding web design.

To internalize composition, you’ll need to practice. A lot. But you can still learn by reading and studying live examples to see these ideas on the web. I’ll cover the most important ideas about web composition, and explain how you can get started practicing in your own projects.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Finding a Balance

Print design follows the same compositional principles as you’ll find on the web. One such principle is balance in relation to content placement.

When designing content, you need to find a natural rhythm. This is typically a repeated pattern of white space and font size that gives visitors a certain expectation. After reading a few paragraphs, they begin to internalize the relationships and expect content to display in a certain way.

But this doesn’t mean you need to follow one single pattern for the whole website.

The Munchery homepage is naturally rhythmic but not mundane at all. Content is organized into columns with floating icons and varying photographs. You’ll also notice that grid structure is used for content organization.

Balance is usually created on the smaller scale first. Divide up your content into individual areas, and figure out how these areas could best be represented. With practice, this will get easier and feel much more natural – plus your end results will get a lot better too.

For a content-focused example, check out Polygon. This online gaming magazine has a lot of content which needs to be easily accessible. Featured posts are organized into a top section with large thumbnails and given a certain level of prominence.

While scrolling, you’ll notice that different posts are organized by subject and publication date. Some posts are floated side-by-side while others stream down the page vertically. These same patterns repeat throughout the page to give sequential order to a seemingly chaotic mess of content.

At first, you may be confused and surprised, but with time, you’ll pick up on this content structure and learn to expect the pattern.

Placement and Relationships

Large-scale composition is all about relationships. Relationships in color, space, symmetry and asymmetry. This isn’t something that can be preached without studying examples. But every great website is designed with relationships in mind.

When crafting your own layouts from scratch, you need to consider how content relates to each area. Think about headers, paragraphs, list items, images, or even big elements like the navigation.

Januar is an interesting layout centered around white space and large typography. You’ll also find plenty of great images, and the individual relationships help these stand out.

It takes a certain level of skill to feel comfortable branching out into more detailed compositions. But you can only gain this skill through practice, and unfortunately that practice will include lots of failure.

Push through it, and learn from the best. It may even help to copy some of these layouts for practice to learn how/why designers choose certain values of white space.

Here’s another site with alternating bits of content and imagery. The Learning Labs header is especially interesting because of its content density. You’ll find a lot more white space than content, and the nav links definitely stand out against the plain white background.

Then scrolling down you may be surprised to see that other bits of content are much larger. The actual page content is meant to draw your focus so it’s given more attention. If you look closely, you’ll realize the font sizes aren’t that large, but in comparison to other fonts, they really are.

Relationships are not built in a vacuum. First, you need to define some elements in order to build relationships.

Contrasted Significance

One way to create a divide is through contrast. Differences in colors, textures, white space, and typography all produce the idea of different content areas.

Since everything is about relationships, you should use contrast to your advantage when necessary. Learn when to use certain colors to stand out against other colors. Learn when to make text larger than other areas so it quickly stands out.

One great example can be found on the CreateJS homepage.

Obviously the whole page is full of varying page elements with different background colors and levels of white space. I particularly enjoy the navigation style which combines bold and regular font styles together.

Contrast is found in text colors that jump off the page against their backgrounds. Overall I just really love this design because it’s easy to use and content is easy to consume. Those two goals are the best ways to reach compositional greatness.

Grid Design for the Web

Print design has grown to place heavy focus on compositional grids. Naturally these ideas have found their way onto the web and are now used for structuring layouts.

Web grids are slightly different than print because websites can be dynamic. Responsive design allows grids to adapt based on the screen size. In this way, you really need to think about content and how it should fit into a layout.

Take for example Huge Inc which is a large digital agency. They have an odd layout style with different content sections based on varying grid techniques. For example, their contact page is rather intriguing.

The Duotones homepage also uses varying grid techniques. Although some areas have large fullscreen backgrounds while others are just solid colors, the content truly defines the grid.

All grids are meant to define content. They should be used to convey ideas and relationships based on space, hierarchy, and position. There is no single master grid, but there are general guidelines to follow.

If you want to read more about grids, then check out these three books, all highly regarded by professional designers.

Learning to See

When talking about composition, it’s easy to get bogged down in the details of techniques and trends. But this often leads to missing the bigger picture which is a huge part of design.

The more websites you create, the more you’ll realize that every design choice interrelates with everything else. Learning to see is going beyond just the foundation of a layout. You need to train your eye to recognize good and bad design choices while also recognizing why they’re good or bad.

Study lots of different websites, and connect the dots for yourself. Try to understand how minute design choices make up the overall composition.

You really need to build a library of ideas that can be pulled at will. At first, it’ll be easier to copy ideas, but over time, you’ll learn how to manipulate those ideas to be your own. Whenever you see a design feature that you like, just bookmark the site or take a screenshot.

Over time, you’ll amass a collection of great ideas that help to define your own style. A visual library is crucial for truly understanding how to create something worthwhile.

Learning how to see from a designer’s perspective takes time – often years. Have patience with yourself, and if at first you don’t succeed, try, try again.

More Great Articles on Design Principles