5 Swiss Style Principles Applicable to Conversion-Oriented Web Design

When it comes to sleek, minimal web design and best practices in UX/UI, the general consensus is that they are typically characterized by simplicity, legibility, and objectivity. All of these principles make up the Swiss Style, a style movement that is founded upon the idea that form should follow function. No frills. Just clean, minimal, and straight to the point, and when you begin to think about what makes a good user experience that’s what you want your website or landing page to evoke. Users are coming to your website or landing page for a reason. Whether it is to purchase a product or service, contact your business, or to just learn more about you and your company, it is vital that your site is easy to use and pleasing to look at in order to keep your users and customers engaged.

Work of Armin Hoffman

Work of Josef Müller Brockman

 

The idea of keeping things functional while being aesthetically pleasing is rooted in the Swiss Style of the 1950s. In short, the Swiss Style (aka International Style) was a style movement that had its origins in Russia, the Netherlands, and Germany in the 1920s and 1930s, then was eventually catapulted to what we know Swiss design to be today in Switzerland throughout the 1950s. Some of the notable designers of this era included Josef Müller Brockman and Armin Hofmann, whose work epitomized the Swiss Style. Although a pretty straightforward concept, the Swiss Style consists of a few characteristics that act as the guidelines for its minimal and clean approach to design. Traditional Swiss concepts are defined by the following:

• “Form follows function.”
• Grid system
• Asymmetrical layouts
• Sans serif type
• Photography

 

 

“Form follows function.”

The Swiss Style is summed up by its mantra that “form follows function.” This means that the design aspect of a composition should be invisible, allowing the content to be the point of emphasis and that design should be used for easy content consumption. This idea is notably important when thinking about user experience and conversion rate optimization – the different paths you want your users to take on your website or landing page should be as easy and straightforward as possible for ease-of-use.

Source: Invision

 

A grid system as a foundational element.

The structural foundation for Swiss Style involves the utilization of a grid system in order to create visually-pleasing compositions. The grid acts as a means to provide order and proper structure for your design to confine elements on the page. By using the grid, you’re able to present text, images, videos, etc. in a way that creates visual hierarchy on page and emphasize key conversion points.

Source: Invision

 

Make no mistake that the grid system isn’t all that confining and limited for designers. It’s a tool that allows designers to be free while still maintaining a general structure in their design to create coherent and functional websites and landing pages.

Asymmetrical layouts.

Asymmetrical layouts are ones where the focal points, or areas of conversion, are off-centered with text that is aligned flush-left, ragged-right. The off-centered approach to the design of the layout is one of the characteristics that distinguishes Swiss design, as this creates visual intrigue in your compositions. Think of it as being similar to the Rule of Thirds in photography – subject matter that’s emphasized on the left or right side of a composition when it’s divided into three parts creates more visual appeal.

Source: Invision Studio

 

Use of sans serif typography.

Sans serif typography made its breakthrough in the Swiss Style, as its purpose was very objective in nature – the omission of serifs on the font allow for easier legibility when read. The clean design of sans serif typography makes it altogether useful in modern web design, as there are no frills in the design of the typefaces and allows the content to truly shine.

Source: Lunar Gravity

Use of photography over illustrations.

Illustrations have become more and more popular in web design in recent years, as they are a way to portray a company or brand in a lighter sense and show some personality. But when it comes to Swiss design, it is preferred that photography be used over illustration, because photography is an objective medium that portrays reality.

Photography is also a powerful element in conversion-oriented web design as well. Because it’s solely objective, what you see is essentially what you get when promoting a product or service on your website or landing page. The combination of stunning photography that can depict the key benefits of your product or service, along with the simple and straightforward use of sans serif typography is a staple in Swiss design and a mainstay in great web design.

Additionally, it is found that human faces used on your site can also help boost conversions. Research suggests that one of the key factors when making a purchase decision online is trust. Just like how television advertisements utilize client testimonials on how a particular product or service provided benefits to them, the same concept is applied to web design. Photos that include people in them subliminally lead to more conversions on a page.

Source: Invision

Closing Thoughts

Now that you know about these classic Swiss Style techniques and approaches to modern design, see how you can apply them to your next website or landing page project. There’s a lot to be said for movements like the Swiss Style that have stood the test of time, and when it comes to web design you can’t go wrong. At its core, Swiss design embraces the beauty in usability being put into the forefront of design where the aesthetics would take a backseat. So don’t be afraid to follow traditions when thinking about how you can optimize conversions and have an all-around better user experience.