What are the best web design compositions

An introduction to composition

Composition is about putting all your ideas and design elements together into a whole. Compose your design. We're going to combine all of the previous lessons we've covered, and this is why composition is one of the really difficult parts of designing.

Creating a good composition will improve the user experience while navigating your website and create a better overall picture. We strive for alignment, consistency and strong unity. Composition also helps us add visual relevance to our layouts so we can help our users learn more about their journey on a website that they should go to next.

Composition is arguably the most important part of your design process - period.

As we learned at the beginning of this series, designing is "deciding on the look and function (of a building, a piece of clothing or other object), typically by making a detailed drawing" - and composition means "writing or creating" ā€. So when we put these two elements together, in our composing phase we are composing the look and function of our design - essentially we are putting it all together now.


Common compositions and layouts

In traditional print design, there are many print compositions and layouts that have proven themselves over time. Many of them are now finding their way online - and for good reason. While these layouts can be difficult to translate into absolute web design terms, we can at least do a little bit of studying the layouts we might want to try while creating.

There are many composition types or popular layouts - but I'll only talk about a few here. There are so many resources online to look at these further, and while these traditional layouts are important, I want to go into more detail on other aspects of the composition as well.

Single visual

First and foremost is the individual visual layout.

A great example of the single visual layout as seen on the Creative People website.

It's really very simple - there is an important aspect of a design that acts as a single visual focus. For example, you can create a design with a large photo in the background that has lots of spaces and simple typography.

Z layout

The Z-layout is pretty self-explanatory and relates a lot to the layout you choose for your design elements.

The Z-layout from the BBC News.

Put simply, the Z-layout follows the natural pattern our eyes could normally see when scanning a website. If you can't already imagine this, research sometimes shows this in the pattern of the letter ā€œZā€ - it flows from top left to right, diagonally down, and then back over again.

This can be very useful when considering where to place your articles so that they are relevant to the user. It can help you add weight to important elements.

Rule of thirds

As a construction principle for photography and film (and much more), the third rule is a good compositional layout for web design.


The third rule seen in action on the Shopify website.

The third rule is a guideline that suggests dividing an image into nine equal parts (three across, three below), with elements of that image or design lined up around the edges of each of those parts. This is especially useful for web design as it can help us create proportions and layouts in our designs.

The rule of thirds is a great compositional tool and layout. While this shouldn't be strictly followed, it can be of great help when it comes to achieving greater balance. It can also be used in conjunction with other visual or compositional layouts, such as B. the individual visual element or even when creating grid systems.

Golden ratio (section)

The golden ratio (or golden ratio, if you'd prefer to call it that) is heavily linked to math and is one of the most well known (at least in name) composition layouts or tools in any form of design.


The golden ratio, as seen on Twitter. Screenshot by Ryan Schroeder.

The golden ratio is often thought to have been created by the ancient Greeks (clever people as they were) and describes the relationship between two ratios. The golden ratio is 1.618 (03398875 ...) and it seems that there are many elements in it nature are often found that match this ratio. It is therefore always something that is calming and pleasant to our human eye.

Since it's such a familiar pattern to us, it makes sense to use the golden ratio in our designs. To create a harmonious balance that just feels right and makes sense.

An easy way to implement this in our designs is to use the golden ratio number (1.618) and do a little math. In our design, we may have an area where we would like to add some content and a small page or sidebar, for example. Splitting up in our designs without thinking about it may be easy - especially if you have a simple grid system - but if we think about the golden ratio we can end up with a better result.

So we have this area that we want to divide into two parts with our Golden Ratio number. To do this, measure the width of the available area (let's go 950px for this article) and divide it by 1,618.

If our available width is 950px, it means our first calculation (for our main content) should be: 950 / 1.618 = 587.144622991 (which is rounded down to 587px) ..

Next, we'll just subtract that number from our originally available width to get our second width for the sidebar or on the page: 950-587 = 363px.

Since our main content is more relevant and we want the focus to be in that part of the design, we can use the larger of the two final numbers for the width of this content. We can then use the smaller number for our side or sidebar. And there we have it - our perfectly golden design!

Note: Extrapolating this relationship is part of creating a modular scale for your design.


place

Composition is also about space. This does not mean leaving large, empty areas in your designs, rather it is about being smart with the space you have available. Using whitespace is just as much about focusing your content as leaving empty spaces.

However, use padding and whitespace to your advantage - no one will find it easy to navigate a cluttered website that is not very hierarchical and where elements are cramped and have no room to breathe. Instead, add space in places where you can to give your designers a better overall experience.

Next up ...

Now that we are familiar with the concept of composition, in the next section we will examine the space in our designs in more detail. See you there!