Archive for the 'Web Design' Category

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.

No Comments »

Wei on September 26th 2007 in Business Development, Web Design

Pre-Production…

A one man start-up team is hard and it is one that usually fails; but sometimes there simply is no choice in the matter. While I am bouncing some ideas off a couple of my trusted friends, I really wanted to see if I can take this project on by myself without burning out or losing interest. Again, the end goal for me is to have something people will use and find helpful. It’s be great if a lot of people end up recommending it but that would really just be icing on the cake.

So in the last couple of weeks, things have been progressing forward nicely. I found a logo designer from guru.com as well as found someone in India who actually showed some great examples of xhtml/css work to do the layout. Unfortunately the last time I outsourced to India the project did not come back to scope nor did it ever get completed. A few thousands of dollars later, it became a really bad and costly lesson. However, I am hoping for a different outcome this time.

Since the last project, I’ve done some research on how to manage outsourced teams. The common theme I heard is outsourcing is great for small projects but not so great when it comes to large, complex projects.

I think the key point here and one that I’m about to confirm, is that the project must be split up into tiny chunks and numerous milestones so that the hired help will stay in scope. It’s not a matter of incompetency… but rather all contractors in any industry have their own on-the-job experiences and of course, pride. I think secretly everyone thinks they can do a better job than what was instructed by their client; myself included.

Therefore, if you are a stickler for doing something to your exact specifications even when you don’t know what that is, then don’t throw up a cloud of ideas and expect them to read your mind. If you throw them a large project w/o explicit details, then your dev. team will most likely definitely take a creative spin on their interpretation. To make sure you don’t burn your developers and yourself out, break the pieces up and set tiny milestones. Is the registration form correct? check, Is the error checking performing to spec? check, etc.

Also, instead of hiring a one stop shop that does everything from logo to back-end development, hire the best of who you can find for each piece of the puzzle and get the BEST out of the different contractors for each part. No one has ever said “hey that java expert is an AWESOME logos/brand expert!” and vice versa, no one ever said a designer is a great .net developer. I don’t even think they use the same part of the brain!

But anyway, the logo for the most part is done and I’m anxiously awaiting on the design comp for the layout. In the meantime, I need to find other developers to tie the back end to the layout as well as finding a java programmer to code a photo upload util or find me one. Photos… everybody loves em but they sure are annoying to code for sometimes.

No Comments »

Wei on September 1st 2007 in Programming, Startup Resources, Web Design