Ok, so if you have read the about page you know I run a small web development firm called Visionary Online. Basically it is what I do all of my freelancing through right now, but I have bigger goals for it in the future.

I founded this company when the tech bubble exploded in 2002 - 2003 and I got laid off from the software development firm I was working for (Enron didn’t help either since the company was in Houston). The goal was to see if I could do the “freelance thing” full time.

Since everything tech-related was about as popular as leprosy, this probably wasn’t the best idea I have ever had. However, I did work on some great projects and got some invaluable experience before I was forced to “get a real job” and move to Florida.

Over the years the site has gone through several interations…some good….some bad. Thanks to the Wayback Machine you can see some of the iterations (2003-2004). The last iteration was done quickly when I was changing jobs…I was never really proud of it, but it was better than nothing (the wayback machine doesn’t have that version for some reason, but it basically looked like this).

So being 2007…it was time to do a redesign. Simple right? Well, as anyone who has their own portfolio site knows…it always ends up taking a lot more time than you think it will…

Version 1
So I started out the way I always do…search around the web for a little inspiration. After several hours of poking my head around I came up with the theme “air force”…not specifically their site…but rather the concept (”aim high” and all that).

So version 1 came out something like this:

Strike 1
So what is wrong with this? Its a bit hard to quantify and breakdown. At first I really liked it. I even got so far as to slice it up and make it actually work as a site. However, once it was built it just seemed tooooo…blah.

First, it is very generic…everything kinda blends together. The picture is nice, but because the text is so subtle, it doesn’t really grab you. If there is one goal of a portfolio site, its to grab the audience. So after spending several hours on it, I decided to ditch this version and try something completely different.

Version 2
Ok…so version one was too washed out…lets add some color and make it a bit brighter. So I went back into the trough for some inspiration and came up with the concept of “quality and purity”. I should have known right there I was barking up the wrong tree. I mean purity is not really the first thing that comes to mind when you think of web development, but I have never admitted to being all that bright.

So here is what version 2 came up like:

Strike 2
Like the graphic? Yeah…so do about 3 million other websites. I realized this only AFTER I had implemented it. Ugh. So overall, I still like the look and the cleanliness of this design. The problem is, it is (once again) too generic. However, unlike the first version, the water drop really has nothing to do with my company. Rule #2 of a portfolio site…make it relevant. Heck, that should just be rule #2 about design in general. If you are making a site for a fencing company and you design a site that’s main focus is a fire engine, you may be wandering down the wrong path.

The other glaring issue is that the site looks more like a template rather than a portfolio site. I mean, you change the name and the headers and this could be a site for a water treatment plant in about 5 minutes. Not exactly what I am going for…”choose visionary online! we make the purest sites on the internet!”…*sigh*

Version 3
At this point I am completely exasperated and ready to sit in a corner and cry. So what do I do? I go take a nap (it was Saturday and my son was asleep so why not?)…that is when it hit me.

FISH!

Huh? Fish? Seriously…I went from “aim high” to “water treatment plant” to “fish”? At this rate I am gonna be making a site with algea as my inspiration. But I hadn’t gone off my rocker…I am not just talking about fish…I am talking about goldfish!

So how do you tie web development to fish? Simple…be different. Goldfish all look alike, swim alike, etc. etc. A website (when done poorly) is very similar…it just fades into the background and is forgotten about. However a good website will set you apart.

With this inspiration in my head, I created this:

Now you can tell right away that this screenshot looks a lot more polished. The reason is simple…this site is live. Now the static picture doesn’t really do the site justice because there are some simple, but cool javascript effects, but that is separate from the design.

Why does this site work? The simple answer is it catches your eye. Tomorrow I will finish the breakdown and explain why I think this site works. Until then, go check it out and see what you think. Do you think it works? Did you like one of the previous versions better? Why?

If you guys do like the first versions enough I could be persuaded to put up the PSDs for y’all to download and play with. Who knows…maybe you are building a site for a water treatment plant!