Archive for October, 2011

A long time ago I was introduced to something called “eyetracking”. It’s a process where a viewer is show images and then their eyes are tracked to see where they looked at the photo/image. We did this way back in art school decades ago but it’s recently been getting some hype on the internet. What a lot of new school web designers don’t know is some of the fundamental stuff about observation and pattern recognition. While this site is not any sterling example of wicked design I figured it was ok to post this article anyway.

I get asked by a lot of clients to do something “outside the box”. Typically this is exactly what an artist wants to hear but lets think about this… If you make some “out of the box” web design and it looks cool as hell but nobody clicks around or calls then your client just lost out..  and if your client loses you lose. You’re not going to get many call backs from clients who aren’t getting any business.

The reason that a lot of web designers today don’t understand how to layout a website for optimal user expereince is because they’ve learned software not business and not art. While many of these people have more talent than they know what to do with they lack the fundamental science behind “visual communication”. But that’s fine because I’m going to give you a small tidbit right here and if you feel like searching Google for “visual communication” I’m sure you’ll find some excelent books on it or some exclente articles on the web.

I used to call this the “F-map” because it looked like an F to me but now they are calling it the Google Golden Triangle because most people are searching with Google. So most of the research behind this is actually directed at SEO rather than the design of your own site. But lets face it people have grown accustomed to looking at layouts just like they have reading left to right. So we’ll use the Google Golden Triangle Heatmap as an example for how you should look at designing your own website. First though take a look at this: Google SEO Heatmap (it’ll open in a new tab or window.. come back

Ok so now that you’ve seen the heatmap which basically is a triangle in the upper left hand corner of your screen that extends about a quarter of the way down and across your screen. This is the most valuable real estate on your web pages. Usually you’ll see a logo and a link to the home page here along with a tagline. This is the “first impression” of your website. If you’ve done it properly you should be able to invert that triangle and black out the rest of the page and still know what the site is about. If you’ve done than you’re on your way to being a good visual communicator in the age of web.

As for the rest of it like rules of thirds, grid theory, color theory, etc.. you’re on your own for now. Perhaps I’ll write more articles on it but I’m thinking about re-doing my main website and incorporating all my various blogs into it. I have 64 domains.. of course they aren’t all developed but it’s a bit much to keep up on Anyway, I wanted to put this here for some buddies.. hope this has been informative. ttys!