Brand Website

Bring the Zen into your website

Philipp Steinweber
Written by Philipp Steinweber

7 Zen principles for a better, more efficient website

We believe Simplicity will win the Internet. Yes! Noise and confusing call-to-actions are inferior to clarity. Not only in the subjective perception of the user, but also in efficiency: conversion rates.

Wait, so is this about design or about marketing?

Well, both. For us it’s impossible to separate. But let’s make one thing clear: we would never compromise the brand and its values only to increase a certain conversion rate. Flashy and ugly CLICK HERE NOW IT’S YOUR LAST CHANCE landing pages might be proven to work quite well in converting (some kind of) visitors into buyers, but they are a joke when it comes to building and sustaining the brand behind them. Nobody can take them seriously. Seriously.

That makes conversion rates some tricky bastards. On the one hand, they are a powerful tool which deliver quantified results. On the other hand, if taken too seriously, they tend to make things ugly. Over-optimized. So let’s try using them, but let’s have something more important as a basis: the brand and it’s core values. Let’s not sell our souls for 5% more clicks, ok?

This manual pulls out ancient wisdom to help us with exactly that: making websites more efficient without losing our dignity. But by applying wonderful principles of simplicity and naturalness. In the following we’ll be referring to the definitions and translations of Japanologist Professor Lennox Tierney.

Meet the principles of Zen (and a lot of pictures).

Fukinsei – Asymmetry

“The principle controlling the balance of a composition is always asymmetrical.Its division of space, in either the second or third dimensions of spatial organization uses an irregular division.”

Interesting that it’s starting with that one, isn’t it? While many might first think of a very centered and stable approach when thinking about Zen aesthetics, scriptures give us the first punch in our face: asymmetry rules! While more conventional and unconventional principles follow, let us start with the most dynamic of all of them.

Hello Fukinsei.

fukinsei

Cornerstone makes impressive use of Fukunsei. Their home page is as asymmetrical
as it could be. You can find Fukunsei even in their logo and corporate identity,
making them a very dynamic brand in what is usually quite a square niche. It
makes them appear people oriented, rather than focused on non-human aspects.

Kanso – Simplicity

“The second principle, Kanso, relates to basic simplicity and the elimination of the ornate. Things expressing simplicity are by their nature truthful and reserved. Kanso involves a sense of cleanliness, things which are fresh and neat, frank but never over-embellished. Things of Kanso nature are never florid in style.”

The  principle of Kanso meets the stereotypical expectations of Zen aesthetics more than principles like asymmetry do. The whole motivation is leaving decoration and basically any optional element behind. Here we are talking about the archetypes of Zen:reduction, minimalism, purity.

aiaiai
Kanso is perfect for e-commerce and AIAIAI demonstrates that beautifully. No bulk, simply showing the products in their essence. If you’re going down that road, of course the product presentation has to be flawless. You can imagine that quite some effort and money went into that perfect photography shown on AIAIAI’s website.

Koko – Austerity

The Koko principle involves a feeling of the austere but with a sense of maturity. It carries the qualities of age and venerability coupled with a weathered appearance. Visual elements are reduced to their basic bare bones, without sensuous aspects. Koko involves things which seem stern, ascetic and forbidding in appearance. It involves a sense of the harsh, the severe and the rigidly abstemious.

You might have noticed by now that the quotes did not initially apply to web design, and we have had to do some translation. The principals were originally put in the discourse of aesthetics for the Japanese Zen Gardens. Koko is very similar to Kanso at first sight. Applied to graphic design you could say that it adds an iconic layer to Kanso’s pure simplicity. It has that certain wisdom which strong brands carry with them.

leica

For an example of Koko design we can look at the Leica Camera website. While it uses more photography than other examples here (for obvious reasons – they’reselling cameras!), it is still as reduced as it gets. The product design itself underlines the layer of ascetic purity.

Shizen – Naturalness

Shizen involves a true naturalness as distinct from raw nature. It is involved with a sense of creativity and purpose distinct from the naive or accidental. Nothing involving Shizen should be forced or self-conscious. In fact true naturalness is a negation of the naive and the accidental. Shizen has about it a sense of artlessness and an absence of pretense or artificiality, but it involves full creative intent and should never be forced.

For us Shizen introduces the aspect of humbleness. The acceptance of something great. Therefore a certain surrendering in front of that greatness. Using naturalness as the communicator, without force, but with an intention. Translated into graphic design you could see it as letting photos do the talking, and being quiet with your design. Almost being absent (really being absent comes later, so:almost!).

adidas

Adidas Journeys, while being very modern and young, shows the tendency of humbleness (“nothing should be forced or self-conscious”) of the Shizen principle by stepping back. They don’t use any colors or other elements which would offend the greatness of the imagery. There still is a lot of intention, communicated via clean and perfect typography.

Yugen – Subtly Profound

Yugen avoids the obvious and relates to the subtleties of nature. It is the suggested rather than the totally revealed aspects of it.It involves partly hidden views of indistinct areas sometimes relative to shadows, partial reflections and darkly revealed forms. Yugen hints at extra layers of meaning which are not at first obvious to the casual viewer.

Yugen applied to web design means very much design for intellectuals. The deep things, nothing too obvious. That makes it very rare in the Internet, because obvious often wins. Especially if you have only a few seconds to explain things. But it exists, and it works. Yugen is helpful when you don’t have only one message, but many. And you want all of them heard. Therefore you can find it mainly after the large landing banners, when it comes to explaining the detailed features of the product/service. In a simple fashion. Then, at that point, when one image and headline is not enough anymore, when the user is already diving deep.

layervalut

As an example, the layervault pages design comes to mind. It has a bold headline explaining what everything is about, but still, the topic is complex. That complexity is being explained step by step, with a few sentences of text for each feature, accompanied by an animation. The nice and one of the Yugen things is the abstraction of the animation. You don’t see emotional characters popping out, you see concepts of communication put into the most basic shapes available.

Datsuzoku – Unworldliness

Surprise is the immediate effect of an expression involving Datsuzoku. It involves a transcendence of conventional ideas and traditional usage. One should be astonished in its presence and realize a freedom from restrictive laws or any kind of bondage in its use. It may be the seed-bed of ultimate creativity.

You thought we had it all? Nope. Datsuzoku adds another layer  of  simple  epicness.  The  ultimate  epicness.  A Revolution. A non-stoppable revolution with surprises. Unconventional. That’s why everyone wants to be a part of it. It’s revolutionary in every detail, but not in a loud way, in a magic, transcendental and spiritual way. Thereby it delivers one of the highest values: freedom.

apple

Of course we were tempted to use this earlier, but we kept it for here. Apple creates the most religious feeling of all brands. They are surprising, revolutionary and breathtaking. Their web design reflects the Datsuzokuness of their products perfectly.

Seijaku – Quiet

The calming influence one feels on entering a Japanese Garden is due to Seijaku, the principle that relates to quietness and stillness. Silence and tranquility prevail and all sense of disturbance is absent. Reflections on water often express this principle. Its opposite is noise and disturbance.

Here we are, finally arriving in the Void. The last principle concludes this small excursion into the world of Zen gardens, and how they affect us in building websites. Seijaku does not talk about reducing things anymore, it talks about stillness. Nothingness. Absence. Not reduction, absence! Can design be absent? Yes and no, as designers we tend to say no.

zenhabits

Let’s wrap this small excursion into the Zen design principles with the one earning it most. Zen Habits. In case you really don’t know it: it’s not just a simple paragraph of text as displayed on the left. It’s a very successful blog and even sells multiple information products. I guess we can agree on the fact that it does this in a quiet and calming way.

Wrapping it up

So, we hope you enjoyed our little journey through the principles of Zen. While it might be hard to split apart the nuances of “simple” between some examples, their general tone excites us and keeps inspiring us and our work. The Internet does not have to be a crowded, loud and busy space. We’re spending so much time there… it should feel more like being in retreat.

About the author

Philipp Steinweber

Philipp Steinweber

Philipp is the founder of Metamonks and Omooni, and passionate about personal growth. On Soulful Hustle he open-sources the strategies and insights learned from his projects.

x