AEN UI

I recently tried out a new web development environment named Coda form Panic Inc., fell in love and decided to move away from Dreamweaver. It is new to me but by no means a new product. It has been around for more than a year and has won the 2007 Apple Design Award for Best User Experience. The latest version 1.5, the one I am using was launched on the 26^th, a few days ago.

One of the nice features is subversion integration. Unlike on Windows which is my previous platform, there isn’t many choices when it comes to subversion clients. On Windows I used TortoiseSVN which had excellent Explorer integration. On the Mac I used something called svnX which didn’t have Finder integration and the user interface isn’t as intuitive as on TortoiseSVN, although it is nice after you get used to it. Dreamweaver has no subversion integration.

Another feature is “Clips” which lets you store frequently-used code snippets in an intuitive “HUD”. The clips can also be imported/exported for sharing. I am currently using the clips feature to store snippets such as the structure for a basic XHTML layout, CSS browser resets, Lorem lipsum and other snippets like WordPress template tags. Really cool.

Like Dreamweaver, Coda also has FTP. Coda’s has Panic’s “Transmit” engine built-in and supports FTP, SFTP, FTP+SSL, and WebDAV. I still have not really gotten used to it but it feel snappier than Dreamweaver which tends to lock up for me when toggling between passive and non-passive modes in FTP.

Like Dreamweaver, Coda allows you to define “sites” and each of them can have their own configurations for FTP, testing servers, etc. The difference is that instead of displaying the list of sites in a dropdown lie in Dreamweaver, Coda shows them as almost-live updated thumbnails of the actual homepage of a site, in a grid. This features allows me to have a very clear overview of the active projects I am working on.

When developing in Dreamweaver, I don’t rely on WYSIWYG and I do testing on a real browser. This means that I had to switch back and forth between IDE and browser to edit code and view changes. With Coda, I don’t have to switch anymore as it has a preview pane. You can also select which browser to use, apart from the default Safari. I am using Firefox as the default.

Although I still have to rely on WYSIWYG in Dreamweaver for some client projects which have old and deprecated code, I will definitely see more of my time spent in Coda.

By the way since I have been using Dreamweaver since version 4, I am very much used to the syntax-coloring schemes of Dreamweaver so I spent some time configuring Coda to color syntax like Dreamweaver. I exported a “.seestyle” file which you can download and import into Coda to get syntax colors similar to Dreamweaver’s. It is not perfect but it works for me so you can probably refine it more. if you ever do refine the colors, why not post it here to share it with others?

Download Coda syntax color schemes for HTML, PHP-HTML and Javascript (zipped, small).

You get Coda at the official website for 99 USD. Try the trial and see if it’s worth paying for.

I ride mountain bikes and occasionally I ride with a heavy backpack because I need to carry my laptop and books to places. When using an average backpack, the entire load is on the shoulders and is uncomfortable on long walks and rides, especially on rough ground when the backpack bounces around.

While exploring ChainReactionCycles today I came across a interesting backpack made by a German bike components maker ERGON, the BD2.

According to ERGON, the backpack features a revolutionary carrying system which makes it unusually comfortable on the shoulders. Where the strap joins the back is a feature called the Flink ® ball joint, which the bag and body can rotate on independently of one another. This way the weight of the bag is distributed evenly on both shoulders and protects the back.

In 2007 MountainBIKE Magazine reviewed the backpack and went as far as saying if one goes back to a traditional rucksack after using the BD2, one will feel something is not right. On steep descents (on a bike) it does not slide forward and did not jump around when maneuvering.

The backpack comes in S and L, gender specific sizes. That means men and women will have a different fit which makes sense since men and woman are anatomically different. With 15 liters of capacity, you can fit many things inside. For me I usually bring my laptop—a 17 inch MacBook Pro, thick computer books, notebooks and miscellaneous stuff like a power adapter for my laptop, mouse, and iPod. This bag will swallow them all. The main fabric is 1000 D Nylon, like I know what that is. I suppose it’s some grade of quality and durable nylon.

ERGON apparently places much emphasis on product design. The backpack has won a 2007 Red Dot Design Award along with their also award-winning bicycle handlebar grips.

ChainReactionCycles retails them for around £85 which converts to around 230 Singapore dollars. Not a bad deal for something well-designed. I think It’s definitely worth the price because I would rather not have shoulder pain and backaches.

Photo of ADA aquarium tank from ADA.

This is the chapter of Kanso 簡素 (simplicity).

By definition Kanso is simplicity and keeping things basic and plain, free of decoration and gimmicks. There are two obvious schools of thought which designers belong to. One sees design as a means of decoration and the other sees it as craft. Decoration serves the purpose of amusement and craft serves the purpose of function, the function that form follows. A fancy dish garnished with top quality ingredients amuses our taste buds while plain rice serves only to ease our hunger. Kanso is rice, not pasta. You will get tired of eating fancy food but not basic food like rice. Kanso is plain white paper and black ink on paper, not oil on canvas. You only use what you need and nothing more. Kanso is the bare essential.

As a design consultant, my work schedule is very often hectic and stressful. I tend to find solace in things that are peaceful and natural. I like simplicity in the things I use so it is not surprising I am a devoted follower of MUJI, whose guiding principle is flexibility, providing the savvy customer with products that are simple and essential “objects for good living”. MUJI is distinguished by its design minimalism, emphasis on recycling, avoidance of waste in production and packaging, and no-logo policy. MUJI “無印良品” simply means quality products with no mark.

One of my favorite MUJI product which I buy and use very often are the B5 paperback notebooks which I buy for slightly more than three Singapore dollars at their two stores in town. They are made from recycled paper and look very simple. Because they are relatively cheap and cheap-looking, I can doodle on them and not have the worry of wasting expensive paper in the back of my mind. I have a Moleskin notebook which I bought out of novelty. It is expensive and elegant. In fact it is so expensive that I find it mind-restricting. I prefer cheap things I can waste.

The MUJI notebooks sold in Singapore are very light grey, unlike the yellow version in the image which I took from MUJI’s website. I actually have at least a dozen of the notebooks because I love them so much I worry they will go out of stock. My bed sheet, coffee table, book stands, storage boxes, kitchen broom and many other things are all MUJI!

So you can see I love simplicity. I designed my meishi (name cards) in a simple way too. My company name is “AEN” which is my name too, so there is no need to list both names. It also gives the message that my client deals with me personally. I used only one color—white, silkscreen printed over translucent plastic cards. The result is a card that blends itself into any background you hold it up against. I only put essential information on the card, which are my email address (which contains my website url/domain), what I do and my contact number, which is as minimal one can safely get.

While we are at name cards or if you prefer to call them business cards, let’s have a look at designs which oppose the Kanso principle.

Designers come up with crazy ideas all the time. Some end up “too creative” and stray too much from the original purpose. I found this business card design on Flickr. It is certainly cool and fun-looking but now imagine trying to stuff that sheep into your wallet or card case. Wool fabric instead of actual wool could be used instead so the card remains relatively flat and store-able.

Other than simplicity in design, a product can be simple in functionality too. The problem with today’s advances in technology is that it is often too easy to get carried away with features. Phones now support web browsing and email, can play music and video and have built-in mega-pixel cameras. Cars have GPS navigation systems, anti-theft systems, traction control systems, this system that system… Things are so choked full of features that product designers are now going back to the bare essentials, so we can catch our breath and escape from this feature choke.

This wall-hung CD player from MUJI is designed by Naoto Fukasawa in 1999. Quoted from iconeye.com: A tug on its pull string causes the exposed CD to turn and music plays through its integrated speaker. Fukasawa purposefully based it on a kitchen fan to give it an identity that people naturally recognize. “It’s totally synchronised with your image of the kitchen fan turning round,” he says. “You already have some memory of the fan, so it overlaps the two images and your body already knows how to turn on the fan by pulling on the switch.”

This is simplicity in functionality. This CD player does not come with surround sound, a fancy LED display nor a remote, it is a simple CD player that is a joy to use.

Keeps things simple when they should be. Use only what you need. One saying goes “Perfection is not when there is nothing more to add, but when there is nothing left to take away”. But there is no perfection. What is true then? There is no truth, only perception. Perception is clear when the mind is not clouded or burdened. Keep things simple as they should be and the mind will not be burdened.

Photo by tanakawho

This is a continuation of my original post on Wabi Sabi—Zen Aesthetic Principles. If you have not read that article, I recommend you read it before this one.

This article is the first of the seven principles I will be discussing, with my thoughts on them along with real examples of these principles manifest themselves in our everyday life. I will also show real life applications of the principles and how it can help make your design or artwork more effective and meaningful, or meaningless (in the Zen sense). I’ve already started to sound profound, read on and you will be able to understand.

Fukinsei 不均斉: Asymmetry, odd numbers, irregularity, unevenness and imbalance as a denial of perfection. Perfection and symmetry does not occur in nature.

If you look around you, you will seldom or in fact never observe perfect symmetry in nature. Water is never completely clear, Clouds are never perfectly white, your left hand is always a different size than your right hand, the moon is never a perfect circle, everything is random and even the most regular of events like day and night have slight differences in time. Exact measurement is human science which does not occur in nature.

Because nature is imperfect, we are comfortable and familiar with a world that is not perfect. Nothing has been perfect since the beginning of time. We cannot even give ourselves a perfect explanation of how it all began. Even the Big Bang is just a theory. Einstein tried to come up with a unified theory of the universe but he failed. We live in a much less than perfect world. Although humans have made attempts to strive towards perfection, we can only come close but we will never reach it. This familiarity with imperfection is what makes designs and art created with this principle in mind so pleasing to the mind.

In Industrial Design

Take a look at these bookcase designs by Naoto Fukasawa (more info). He introduced imbalance and asymmetry into the design of the bookcase simple by slanting one or more of its panels. The design is aesthetically pleasing and very functional too, with angles providing excellent support for books. People usually place their books slanted if without the help of an extra book stand, so it is just books and shelf, all that you need. If you can make something work better just by changing or adjusting existing elements without the need of additional elements, that is good design.

In Architecture

Who else to mention when it comes to asymmetrical and organic building designs than Toyo Ito? Toyo Ito happened to be the architect for VivoCity, a mega shopping mall in Singapore, where I live. The main exterior of the building as you can see from the photograph, is covered in panels resembling gentle waves on water, perfectly suited for its location at the harbor front. 49Black has a good flickr set of VivoCity and its construction.
Photo by Food Trails

In Logo Design

Asymetry and imbalance is common in the design of logos. The current Adidas logo was introduced in 1997, designed by Peter Moore, the then Creative Director for Adidas. It is inspired by the 3-Stripes as they appear on footwear. The shape formed by the bars also represents a mountain, indicating the challenge to be faced and the goals to be achieved.

The new logo is a dramatic move from the legacy Trefoil logo designed in 1971, which is symmetrical in appearance.

Thank you for reading this article on Fukinsei. Next I will be writing on Kanso (simple, basic).

Photo by isyamuddin

This series of articles on Wabi Sabi (in Kanji: 侘寂) were transferred from my old blog and rewritten for AEN UI.

Wabi Sabi (quoted from Wikipedia) represents a comprehensive Japanese world view or aesthetic centred on the acceptance of transience. The phrase comes from the two words wabi and sabi. The aesthetic is sometimes described as one of beauty that is “imperfect, impermanent, and incomplete” (according to Leonard Koren in his book Wabi-Sabi: for Artists, Designers, Poets and Philosophers). It is a concept derived from the Buddhist assertion of the Three marks of existence — Anicca, or in Japanese, 無常 (mujyou), impermanence.

Back in 2003, I used to design aquariums for myself and friends with aquatic plants. The Japanese calls it Nature Aquarium and the westerners call it aquascaping. In Japan, these artistically crafted aquascapes are usually designed based on Zen principles. I am deeply influenced by these principles and philosophy and I apply them to my design work and also everyday life. This explains my tendency to create simple, white, sparse, minimal and typographical layouts. Enough of myself let’s move on to the principles.

There are seven main principles of aesthetics in Zen philosophy for achieving Wabi Sabi.

FUKINSEI
imbalanced, uneven

Kanso is asymetry, odd numbers, irregularity, unevenness and imbalance as a denial of perfection. Perfection and symetry does not occur in nature.

Much like the uniqueness of wood grain, different sizes of rocks in the riverbed, fluctuation of tide levels, intensity of rainfall at different times of the year.

KANSO
simple, basic

Kanso is the elimination of ornate. Things of simplicity by their nature express truthfulness. Neat, frank and uncomplicated.

Truthful and frank expression need no decoration. Just like a piece of plain paper, giving the message that it is ready to be drawn or written on.

KOKOU
austere, aged

Basic, weathered bare essentials that are aged and unsensuous. Evoking sternness, forbidence and maturity.

Things that can remind us of Kokou are the worn bark of old trees, rocks and boulders, harshness of the desert and the natural cycle of growth, decay and death. Despite uninviting appearances, they represent lessons learned and wisdom gained over the infinite passage of time.

SHIZEN
natural

Raw, natural and unforced creativity without pretense. True naturalness is to negate the naive and accidental.

Being natural is to let the natural grain pattern of wood show instead of painting over it, speaking naturally without a fake accent or not pretending to be of a race you are not and illuminating a building with natural daylight.

YUGEN
subtly profound

Suggest and not reveal layers of meaning hidden within. Invisible to the casual eye and avoiding the obvious.

Real beauty exists when, through its suggestiveness, only a few words, or few brush strokes, can suggest what has not been said or shown, and hence awaken many inner thoughts and feelings.

DATSUZOKU
unworldly

Transcendence of conventional and traditional. Free from the bondage of laws and restrictions. True creativity.

Standards, guidelines, golden rules, popular methods… they are good for getting things done but if you seek true creativity, you should free yourself away from these rules. Trust your imagination and let your mind and feelings go free.

SEIJAKU
calm

Silence and tranquility, blissful solitude. Absence of disturbance and noise from one’s mind, body and surroundings.

The silent solitude of the moon, a lone person in the middle of a salt lake in Uyuni, a weather satellite in Earth’s orbit.