4 Pillars of Minimal Web Design
February 10, 2017
Minimalism is a style that is found not just in designs, but also in art, architecture and music among other things. It refers to simplicity by choosing to stay with bare necessary elements in design or art. By focusing on what is necessary, all those elements that serve no purpose are eliminated.
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”
– Antoine de Saint-Exupéry
The purpose of creating a minimal design website is to create an interface where user can focus on the primary task in hand, like downloading an ebook or read a blog post. To create such an interface they first need to understand the principles that define a minimal web design.
Flattening the Design
There was a time when gradient colors and glossy buttons on websites were common. At that time, designers tried to give elements on a website a realistic feel by mimicking real world objects. This style of design is called Skeuomorphism. But it didn’t last very long because all those details caused cluttering in design. Apple used to be the biggest supporter of this style of design, but they also moved away from it.
The solution to cluttering in design was flat design, which rose to prominence when Microsoft introduced their Modern Design (formerly Metro UI) with Windows 8. Microsoft created a flat design by using sharp edges, flat buttons, vivid colors, clean typography and grid like layout. Design Museum described it as “…It is a nice, clean, pure color, interface”.
By reducing visual details in a design, flat design puts user’s focus on the content or primary actions and makes website load faster. It made it easier for designers to create a design that is adaptable to different screen sizes.
Less in More
A minimal design has less elements, which means more space of emptiness. A white space (or sometimes negative space) is an empty space between individual elements. The more empty space around an element, the more it will stand out. Just like Ludwig Mies van der Rohe once said “Less is More”.
White space is the backbone of a minimal design. As a designer, you need to decide which elements need more white space around them and which need less. This depends on the purpose of individual elements and whether it looks good to the eye or not.
Small design elements tend to have lesser space between them. This is usually to connect two or more elements. For example, space between an image and its caption is usually only a few pixels. This is called micro space. Major design elements tend to have bigger space between them, so they look like a separate element. For example, a signup form usually has large amount of white space around them. This is called macro space.
In Zen of White Space in Web UI Design, it is explained that white space makes it easy for users to scan the page and improves legibility because of sufficient space between text and lines. In Reading Online Text: A Comparison of Four White Space Layouts, a study conducted at Wichita State University, it was concluded that white space improves reading comprehension, but decreases reading speed.
Limited Color Scheme
One of the many reasons I love Wes Anderson’s films is the use of limited color palette and attention to detail. The colors used are really comfortable for an eye to look at and goes well with the theme of the story. As a result, it affects the mood of the audience.
“The use of color in his set design and his costuming is masterfully engineered to engrain itself into the minds of an audience and establish a certain mood for a film”
– Color Theory and Social Structure in the Films of Wes Anderson (Vreeland, 2015)
The Grand Budapest Hotel, 2014. Colour Palette by Wes Anderson Palettes.
In this regard, web designing is not so different from filmmaking. The choice of color palette used on a website has significant impact on the mood and decisions of its audience. For example, red and violet colors are great for using on a womens fashion website. Using too many colors can be distracting for users. As a result, they may decide to exit the page, instead of browsing further and converting.
Minimal use of color puts focus on important elements and helps diverting user’s attention to such elements. When it comes to deciding which colors to use, some designers go with monochromatic or bold colors as an accent. The color palette of a website includes the colors used in navigation, background, logo, typography and icons. It does not include the colors of an image.
Focus on Typography
Typography is one of the main aspects of a website because without any use typography it can be difficult to convey a clear message. The choice of typeface, its size and weight is as important as choosing a color palette. It is known to significantly impact the legibility and readability of text. According to Oliver Reichenstein: “Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance”.
Typography also plays a BIG part in a minimal web design. Using big and bold typography compensates for the absence of unnecessary elements, like images and other graphics. Such use of typography enhances the visual presentation of a website and makes the website more engaging and beautiful.
Creating a minimal web design can be challenging if you don’t know the philosophy behind it. Minimalism is all about staying with bare essential elements. Using the principles discussed above, even a beginner designer can create a decent minimal web design, though it still won’t be that easy. Focus on creating a design for users, not for the sake of looking good.