Web Design 101 - The Wire Frame

In my ten years of building websites and web businesses, I've come across many different methods to get a site from concept to online deployment. Depending on your personal skills and who you team up with; you may all reach the end by choosing different paths.

When I first started my web development business, I launched my company site and then proceeded to redesign it 7 times in 3 months. For whatever reason I was just not happy with the corporate look of the site and for those three months, I wasted time, effort and money and worst of all, no one paid me to design my own site.

So what are the different ways to build a website?

Designers who love complex layouts will start by composing (comp'ing) beautiful intertwined designs only to have to dumb it down when it's finally time to transfer it to code. Smart designers will design web friendly layouts; but I think deep down, all designers want to publish the most amazing, complex design that the world has ever seen.

Developers on the other hand will begin coding aimlessly tacking on piles and piles of tacky functions only to have to re-do all of them once a designer comes in to reposition every element. Don't get me wrong; functions are cool GREAT! But is it really that hard to ask for a developer who is also an expert in UI design? Seriously, more than half of the admin sites I've seen have search or checkbox forms without any kind of explanation text; how are we (the users) supposed to know what they're for or how they're used?

Business people will begin by drawing wire frames; not because of they're smarter or better; but because they want to make sure that if a site is to monetize through ads, the content will fit around the ads and not the other way around. (Check out this wire frame I did in 30 seconds for a brand new social network awhile back)


Which is the best route for product development? Well, regardless of which three categories you belong to up top, you should always, ALWAYS design things in wire frames. Putting too much effort into a design only to have to re-do everything when functionality is questioned is a waste of time. Putting too much time into code only to have to re-write the components to fit a new design is also a waste of time.

When you start a new website business, you do not have time (or money) to waste nor do you want to fully commit to a design or idea w/o talking to your audience. Who knows? Maybe 2 weeks into the idea, you suddenly will want to change your business model and how the site functions. If this is the case, then wire frames are your best friends because they are easy, fast and more importantly, cheap to fix.

My most recent hire from Guru.com was the one who pointed this out to me. While in recent times I've set a goal to do design before function; I think just prior to this project, I was still taking too much playing with all the pixels to make sure the final layout is perfect and pretty. (Again, totally missing the business goal of just launching the G** D*** site!)

If you want to learn how to do wire frame templates and shortening your design process, check out this link on building wire frames my new designer gave me. It really sums up the process really well.

Above all else, make sure you are creating a solution to a problem. Pixel perfect layouts or the most efficient code in itself are all worthless if they're not solving a problem.