administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Article: A scientific approach to web design »

FERDY CHRISTANT - FEB 3, 2009 (07:51:04 PM)

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:

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!

Share |

Comments: 12
Reviews: 5
Average rating: rating
Highest rating: 5
Lowest rating: 1

COMMENT: WAYNE emailrating

FEB 3, 2009 - 10:44:47 PM

comment » Excellent article. It's those "hidden" gems that are missing in otherwise perfectly good data screen which the users still want to fiddle with because "it doesn't feel right".

Thanks for this. «

COMMENT: DAVE ARMSTRONG email

FEB 4, 2009 - 03:19:34 AM

comment » As Dr. Science likes to say, "Check your data."

In truth, MANY coders that I know are also excellent artists. The lack of comfort with web design is not due to a lack of creativity. Good programmers use the creative process every day.

What they are uncomfortable with is medium, not the creative process. The rules of design that you have laid out are a good foundation. But if you tell people that visual design and programming are just different beasts, I think you are on the wrong track.

Programming uses the creative process in a structured environment to produce specific actions.

Design uses the creative process, with optional structures that often work, to produce specific visual content. When specific to web design, these structures become less optional, and you then fall very close to programming.

The two are not in different worlds... «

COMMENT: PATRICK KWINTEN homepage

FEB 4, 2009 - 08:47:27

comment » Thanks for remembering that Golden Ratio. I use it in my Notes appz all the time (NOT).

A website I can recommend is http://woork.blogspot.com which has a nice presentation / layout for reading. «

COMMENT: DILEEP K SHARMA emailhomepage

FEB 4, 2009 - 04:23:28 PM

comment » Reverse Engineering always pays. The first impression is the last impression applies to creative web designs as well. Keeping in mind these scientific tips I am sure it would add great value to the best design trends. «

COMMENT: JIGISH emailhomepage

FEB 8, 2009 - 01:03:28 PM

comment » amazing stuff

thanks alot «

COMMENT: ROB emailhomepage

FEB 9, 2009 - 10:40:11 PM

comment » You mentioned seven on-line magazines about web design. I find that I'm already subscribed to the first five ... but I never read them. Why you might ask? Well, every time I look at the headlines in my RSS reader then have titles like "10 Web Sites to Help You Master GIMP" or "40 Useful Photoshop Web Layout Tutorials" or "99 Chat Room Widgets".

I'm busy so the thought of trying to look at and evaluate 99 chat room widgets just overwhelms me. So I don't even open the thing. I want articles that reduce my workload, not add to it. The article I want to read is, "If you need a chat room widget here are the three best".

A quick look at the last two sites you mentioned did not reveal titles with large numbers in them, so I'm going to give them a try.

Peace,

Rob:-] «

COMMENT: FERDY

FEB 17, 2009 - 08:31:57 AM

comment » Rob, could not agree more. I often too am overwhelmed by the amount of content, although I surely do not ignore it alltogether. Typically I open all entries and then do a very quick scan. If there is anything that attracts my attention, I bookmark the specific entry and read about it later.

Once you've seen a few hundred of these lists, the entries in the list you will recognize from earlier/other lists. At that point you will be quite familiar with the most important sites in the design scene. «

COMMENT: DAVID

NOV 24, 2009 - 06:13:38 AM

comment » Your presupposition that these are mutaully exclusive endevors is false. «

COMMENT: WEBSITE DESIGN APPROACH emailhomepagerating

JUN 30, 2010 - 01:22:47 PM

comment » Good Read!!! I especailly like the programmer doing the design.... we practically experienced this and recruited creative resources... sometimes we found it pretty tough convincing programmers since they dont like too much work :-) however thats the way it successfully works....

i already bookmarked your article and will keep looking for more posts «

COMMENT: NITIN emailrating

FEB 11, 2013 - 11:01:29 AM

comment » Awesome article. Good info for beginners as well as experts!! «

COMMENT: SMITHC846 emailhomepagerating

SEP 30, 2014 - 02:14:29 AM

comment » Would you be taken with exchanging links? kgcdceeddfdfekbc «

COMMENT: SMITHC971 emailhomepagerating

SEP 30, 2014 - 02:15:07 AM

comment » I was looking through some of your blog posts on this internet site and I conceive this web site is rattling informative ! Keep on posting . dbddcdgedbddfdkg «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.