As we discussed in our last post, the minimalist design movement has a lot of important lessons to teach web designers. This is especially true when it comes to the use of negative space, which can make other visual elements (such as colour, image, and contrast) that much stronger.

However negative space is used, minimalist web designs would be nothing if not for well-planned layouts, grids, and colour schemes. As Colin Wright of Exile Lifestyle explains:

It’s important to understand that the reduction of physical possessions is often a RESULT of Minimalism, not Minimalism itself. […] What Minimalism is really all about is reassessment of your priorities so that you can strip away the excess stuff [that doesn’t] bring value.

If the way a minimalist utilises negative space is about manipulating a user’s visual flow with a page towards the most important elements, then how they use element form and structure is about ensuring the maximum possible impact on your users. Let’s take a look at a couple of ways a minimalist web design approaches these elements using something called visual balance.

(Unconventional) compositional balance and symmetry

If you’re an experienced web designer, you’ll undoubtedly have come across the concept of visual balance. Simply put, visual balance is about how you balance different page elements against one another. This page gives a good summary:

We generally think about balancing two or more items on a scale using weight – picture the stereotypical “legal” scale. Physical weight and design weight are very similar, a physical object can be very small and yet very heavy regardless of mass just as a visual design element can be very small but still demand the eye’s attention.

The gravity of a physical object is the same as the visual interest of a design element and each element pushes and pulls other design elements the same an object’s gravity pushes and pulls other physical objects.

There are a range of different ways of organising these elements’ visual ‘gravity’, and minimalists like to play with these conventions in different ways. By adhering to certain types of visual balance, or by deploying them unconventionally, you can really make a minimalist design stand out.

Let’s take the example of this site, thru-you-too.com, a promo site for a YouTube-based music album:

Thru you too site

This homepage is a great example of vertical balance, or when page elements are figuratively balanced on top of one another on a central axis. Here, the designer has deployed vertical balance in the extreme, with the central element (the text: THRU YOU TOO) balanced very heavily on top of the product description. It’s also a great example of how minimalist designs often exaggerate conventional design principles for extra effect.

Aided by dramatic, messy-style typography which contrasts heavily with the clean look of the rest of the page, the user is immediately drawn to this element and is given no choice but to click it. This immediately starts playing the album on a separate page.

Now, obviously vertical integration is well-suited to a lot of blogs or text-based sites that utilise vertical scrolling for content navigation. However, some minimalist designers have also made great use of horizontal design. A good example is Ryan Todd, whose site acts as a portfolio and webstore for his design work.

Horizontal design

Here he has used a combination of horizontal and vertical balance, along with a horizontal scrolling system, in order to make his portfolio eye-catching and easy to navigate. While all the elements are balanced on the top half of the page with negative space below, the portfolio items are used to create an asymmetrical horizontal balance – which makes the user want to scroll through and see more.

This is a good example of how you can play with conventions of symmetry in order to make your designs interesting. While symmetrical, horizontally-balanced designs often look excellent, taking that convention and moulding it into something different and unique is what makes this portfolio special – whereas a symmetrical design might have little in the way of a visual hierarchy, asymmetry can be utilised to create a powerful visual hierarchy which draws the user to certain objects more quickly than others.

In this way, symmetry or asymmetry can be combined with other types of visual balance to create a powerful web design. Minimalist design is not just about stripping things back according to bare, strict rules – it is also about breaking those rules to create something new.

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *