A few years ago I had the opportunity to sit down with a designer possessed of a rare talent. We were both part of the same team and he was creating some UI elements that I was to wire up. As I sat there (in awe) watching him work I realized that much of his considerable skill was rooted in fundamentals not unlike the art of programming. Of course, there are design skills that are intuitive that can't be "learned." But, that can also be said of the logical clarity found in a really elegant data model or a brilliant inheritance tree. I am certainly no designer, but I have observed the more creative among us for several years and have gained some insight into their world. In this article I'll share some basic principles that can help raise your design acumen and improve the experience of your users.

Layout
I'd like to attack my goal of imparting design wisdom by breaking the topic into four buckets. The first is layout. By layout I simply mean the composition of smaller elements inside of a container or canvas. Everything in life has a layout even if it's not apparent. Billboards have a layout, as do magazines, book covers, keyboards, clothing, food packaging, and the list goes on. In software development this means how things are composed in a window; whether a browser or a WinForms application everything has layout.

There are principles to layout, simple maxims that can turn a mediocre misshapen ASP.NET page into an orderly one with pleasing lines.

The Rule of Thirds
The rule of thirds is a very old guideline, appearing as early as the middle 16th century in instructional writings on scenic painting. It states that elements on a canvas are most pleasing to the eye when they are broken into thirds. In a traditional column layout on the Web, this translates to a left-hand column containing navigation and small bits of content that is one-third of the total page width and half the size of the content area to its right.

You can implement this heuristic in all sorts of ways in a layout. For example, your header section might be divided into three sections: a search bar, a header image, and a navigation bar. Your header image could be a full two-thirds of the total height with the search and navigation bars each one-sixth of the total. This makes the size of the image in relation to other content seem right to the eye.

Even smaller minutia can benefit from this rule. Everything from calendar widgets to footer elements can be sized using the rule of thirds. Just keep in mind that it's a guideline and you don't have to go crazy doing the math.

Whitespace Is Your Friend
Whitespace often seems like magic. You really don't know why it works but it somehow does and adding a little more of it is rarely a bad thing. A few years ago, there was a craze in Web design to get every bit of content on a page above the fold (a term held over from newspaper design). Because this often leads to cramped designs I'm glad this fad has fallen away. You will have a natural tendency to skimp on the margins and padding around things but take liberties here and more often than not you'll be happy with the change.