Web Design 101 - Wireframe in Practice

A couple of months ago, I talked about the importance of designing a website in wire frames. Now that we finally secured the design and the xhtml code, I can finally go into some details into the thought process behind the whole thing. By-the-Wei, if you haven't checked out our old post, you should check it out and the link that's associated with it. It will give you a much better idea of the information below.

Because our site isn't officially launched yet, I will only cover part one of the design process for now. We feel comfortable disclosing this part because it actually looks like nothing like the final product, but maybe this will give you some ideas for your site while we wrap up our stuff.

Before we officially began the project, I did a quick research to see what web 2.0 design was about. Whether you think "web 2.0" is a fad term or not, there is definitely something about the look of the new breed of websites that gave you a cleaner, more Zen like feel. Web 2.0 design is about balancing text with white space; it's not about cramming as much text and information as you can above the fold to get the most out of your real estate. If you get a chance to check out many of today's new start-ups, you'd get that feeling.

Some of the examples I've found... Oodle.com vs. Craigslist.org, Apple.com vs. MSN.com. When you go there, you see a distinct clear vs. busy.

Some other things I've noticed while doing research... web 2.0 sites are mostly about 960 pixels wide and most of them have a bold statement, text explaining the site. While our site will still be catering to people with 800x600 resolutions, future web logs will tell me if width expansion will be necessary.

The first mock-up our designer came back with was the above image. Like most of you are probably thinking, I too was wondering why certain elements are positioned the way they are. There just appeared to be so much wasted space around the logo; even if the goal was branding. Also, the bold line of text was new for me... new being uneasy.

I went back to the designer and insisted that we needed to do something about the prime real estate that was wasted up top. Even though I'm all for embracing web 2.0, some things as a biz dev guy, I just can't let go of. Unfortunately, real estate is one of them.

The second comp the designer came back with was the above. This one was heavily influenced by me jamming my ideas and requirements into the mix. Since I didn't understand the research section, we condensed the top to focus on just buyers and sellers. After all, we're thinking that someone who comes to our site has a need... and we're here to fill that need for speed (to buy and sell).

However, the second comp above presented a problem. Even though it crams more data together, we have two ad units placed right next to each other. Although this may be okay for some of our competitors... we felt that it would be unfair to our potential advertisers to be grouped that close to a potential competitor. So with that, we made a minor tweak to separate the two a tad bit.

This iteration of the design came out pretty well and it was something we stuck with for some time as we moved towards designing the internal pages. The next time we cover this topic, I will finish up with what we did for the home page and internal pages.