The following might be considered as stereotyping, yet I believe it to have a core of truth:

A lot of programmers are good with code, but struggle with the creative task that is web and UI design. Programmers tend to prefer structure, patterns and rules over artistic creativity. The mind of an analyst and engineer is much different from that of an artist. In practice this typically leads to one of two scenarios:

• The design is outsourced to a professional web designer
• The programmer attempts to do the design himself

The latter scenario quite often leads to poorly designed web applications. In some cases, you can even see "the bones sticking out", where the design and user interaction is closely tied to the technical implementation path, such as the database model. Still, we live in the real world. It is quite common to not have a professional designer at your disposal. And yes, a truly good design will always require some level of creativity and insight in UI design.

Still, the world of web design is not only for the artistically talented. There are in fact quite a lot of programmer-like rules for web design. Rules that are structured, scientific, much like coding conventions. Rules that you as a programmer can apply universally, rules that make your design look good.In this article, I will point out a few of these rules. Welcome to the scientific approach of web design.

1. The golden ratio or divine proportion or phi

Let us start with the best tip. The golden ratio, also called divine proportion or phi, is a magical number. It is a universal design constant that can be seen in the solar system, nature, architecture, anatomy, everywhere. 

What is it? It is a constant of proportion. You get the number by dividing the larger object's length by the smaller object's length (or width, height, etc). The value of phi is 1.618033988749895. This constant is omnipresent, it is everywhere. You are programmed to find things in proportion when things are designed on this constant. An example? The total length of your arm divided by the length of your upper arm. It will approach phi. 

We can use this magical number to design a web layout too. Imagine you have a clean sheet and need to design the column layout. How will you know how wide the columns need to be? You use Phi!

An example. Let's use a page layout of 960 pixels width. This is currently the standard for web designers, but you can use another base number if you want. To determine the proper proportion of the columns, divide the base number with phi:

960 / 1.618 ~=  593

Your main column should be 593 pixels wide. Your sidebar should be 960 - 593 =367 pixels wide. No user will notice that you used phi, yet the design will feel right. Need an additional column? Just do the same calculation, this time using the column width as the base number. You can apply this to other elements too. Want to show images in a frame with the caption below it inside the frame? You now know how to calculate how high the caption row should be.

2. Proportioning type using a baseline grid.

Ok, so we have used a scientific constant to proportion layout elements. Another typical design choice concerns fonts ("type" is a better word). There are a few creative considerations for selecting the font type, however did you know that there is a mathematical approach to selecting the proper font size?

The approach is as follow. We want to layout our text on the page on a fictional set of rows of equal height. Have a look at this example page to see what I mean. The lines are of course markers for the example. Without the lines, nobody will notice the grid, yet the text in both columns feel "right", as they have the correct alignment. The key to applying this technique is to add vertical space (such as line-height, margin and padding) based on a base number that you set for the page. If that base number is for example 15 pixels, you can add a bottom margin of 15, 30, 45, but not 12, 32 or any number that is not based on the base number. 

For a full explanation of this technique, please check out the excellent A List Apart article.

3. Grid-based web design

Again grids. Grid systems are becoming increasingly popular in web design. Although not exactly scientific, it does have a mathematical element to it. In essence, these grids divide your page into a set of columns (typically 12 or 16). There is also spacing between these columns, called "gutters". When combined with tip #1 in this article, you can very quickly layout a web page with correct proportions and proper white space.

One of the most popular grid systems is  960, I encourage you to check out their website to learn more.

More rules

Ok, so we now have covered three mathematical methods to apply to web design. They're structured, easy, and universal. Just the way we programmers like it. Three is not much though, is it? Definitely not enough to finish a complete design. Luckily, there is a wealth of other rules of structure. They may not be based on hard science. They are based on convention. Here's an example:

Use a sans-serif type for body text, and a large serif type for headings.

If you don't know what this means: serif types are those fonts with curly endings. They are great for headings, but not very readible for small body text on a computer screen. A rule like this is well known by most designers. Still, there is no artistic element to it, it's just a rule you need to know about. There is no reason why you as a programmer cannot know about this rule and apply it. 

How will you know about all these "hidden" rules? There are a few things I can recommend specifically:

• Dive into the community. Take any subject, and you will find a subculture somewhere on the internet. If you want to know about fonts, icons, color schemes or anything else: find the experts, they most likely have a blog.
• Reverse engineer designs that you love. If you find a great web design, simply analyse their CSS file. Do not copy...learn!
• Read the "Prioritizing web usability" book by Jakob Nielsen, the leading usability expert. This gem contains hundreds of design conventions that you can apply to your design right away.
• Subscribe yourself to the best online web design magazines, here's a few:
  • Smashing Magazine
  • Smashing Apps
  • Six Revisions
  • Web Designer Depot
  • Web Design Ledger
  • Web Designer Wall
  • NetTuts

That should leave you plenty to chew on. If you make it a frequent habit to invest small fragments of time into the above resources, you will soon know about the most important design rules and conventions.

Conclusion

I hope I have convinced you that web and UI design is not for artists or pros only. There is a wealth of rules that are easy to apply (some mathematical, some by convention) that guide you in creating pleasant designs. None of these rules require an artist's eye. Sure, there will always be the need for true artistic talent (illustrations, color schemes, logo design, character design), but there is much that we can do ourselves.

Please take the time to rate/comment on this article!

RATE THIS CONTENT (OPTIONAL)

	Was this document useful to you?
	Rating:	Awesome  Good  Average  Poor  Useless

CREATE A NEW COMMENT

	Name:
	Email:
	Website:
	Content:	HTML is not allowed. Hyperlinks will automatically be converted.