Wednesday, June 1, 2011

Crash Course in Web Design

As a computer programmer, I'm good at making things work. I'm a problem solver by nature. But, I don't always think about the design or aesthetics of what I am building. So, I recently solicited input from friends and associates on AvieTech's website. I received a lot of great advice, which I will share with you in just a moment.

First, let's understand the difference between web development and web design. Development is "making it work" from a functional perspective. Does the "Contact Us" page properly send email back to the correct address? Design is "making it work" from a motivational perspective. Does this site bring me more clients? Good design leads your audience to your desired goal (e.g. - Read this article!, Buy this product!). It is a hybrid of art, psychology and ergonomics that can be learned and applied. While I've only begun to scratch the surface, here are some of the tips and tricks I've picked up in the past few days:

Call to Action

Why do you have a website? What do you want the user of your website to do? How do you get the user to do what you want on your website? The answer to the last question is easier than you think. Just ask! Create a button or link that will prompt the user to do what you want on your site. Make it obvious.

The F Shape

In website usability tests, it has been shown in study after study that viewer's eyes follow an "F" shape when looking at a page. So, it makes sense to put the important elements of your page near the top or along the side. You want your page to be easy to navigate and, more importantly, your Call to Action should jump out.


Did you know that the colors you choose on a website have an emotional impact on the viewer? What message are you sending with the colors that you choose? Many people who gave me feedback about said that the original page was "too dark." As it turns out, most people prefer a lighter colored website and dark websites often suffer from readability issues.

Modern Look

Another comment that I received is that my site looked "dated." Achieving a modern looking site might be a bit subjective but, as far as I can tell, rounded edges and subtle gradients help. You can always get ideas by looking at the sites of companies that are known for their design aesthetic. In the case of, I rounded a few edges, reduced some clutter, and replaced the image behind my logo from this...

to this...

These are just a few of the things that I've recently learned about better website design. But, the field is ever-evolving and there will always be a new concept to digest. Hopefully, these few tips will help you critically re-examine your site and avoid design mistakes.


  1. Nice!! Great Info. Great People. Great Blog. Thank you for all the great sharing that is being done here related to SEO.
    web design

  2. Hi there. Very cool website!! Man .. Beautiful .. Wonderful .. I will bookmark your site and take the feeds also…I’m happy to locate a lot of useful information right here within the post. Thank you for sharing.