Of course, I could make excuses and say that this visual clutter is the reason for my consistent lack of consistency in writing here. But I won’t.  Those are demons to exorcise another day. Suffice it to say, we need to eat our own dog food and stop putting our site last on our development list.

So, today I submitted my ideas for how the site should be organized to our designer. I must have changed these wireframes 20 times over the past few weeks, but I think I’ve finally settled on something that will remove the clutter, get us focused and make Steve and the rest of the team happy at the same time.

For those who want to play along, I thought I’d share parts of the process with you. The first step – wireframes. For those who are unfamiliar, a wireframe is “a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.” A designer (in this case, our designer, Kiran) uses this basic visual guide to direct her efforts when laying out her interpretation of the graphic elements. What she delivers back are three or four beautiful graphics that are based on this UI direction.

The graphics in this post represent the home page and one inside page structure and were created using Omnigraffle. I hope you enjoying taking a look into the process. I’ll be back when I’ve got some comps to share.