Ok, so yesterday I detailed the slog I went through to reach the final design of my development firm’s website.

Today the goal is to perform the breakdown of why I believe the site works as a portfolio site.

Now, I know what you are thinking. “Dave, you are completely biased because this is your own site!” And, of course, if you are thinking this, then be completely and utterly correct. The goal of this is not to say how great I am (if that was the point, then this would be a really short article), but rather to go a little deeper into the design than I would normally be able to because I happen to know the designer. Also as we meander through the site, I will break down the essentials of the portfolio site and give a few pointers I have picked up along the way on how to do it right.

So with that…lets dig in.

First, here is a snapshot of the site.

Again, the actual site has some animation and stuff, so a screenshot doesn’t capture the fancy stuff, but it does work to give us the essence of the design (click here to see it in action).

The Goal
Web design and development is a very popular profession right now. Some companies are cheap and others are expensive, some are amazing at what they do and others are just out to make a quick buck.

When I started, my goal was simple…build a site that sets my company apart from the others and show potential clients that I am in this business because I love the work, not just to make a few dollars (although that is good too). It took me 3 tries, but eventually I realized that the whole point of building a website is to separate your business from your competition. So this became my inspiration and my mantra: “Stand Out”.

So how did I go about putting forth this message? Fish. Yup fish.

As I mentioned yesterday, I was trying to take a nap and right before I drifted off I get an image of koi for some random reason. When it first came to me I didn’t know what I wanted to do with the fish, but I knew that I wanted them to be the stars of the show. In the end, every major decision revolved around those fish and the idea they represented.

Colors
No breakdown is complete if we don’t go over the colors, so here we go.

Doesn’t get much simpler than that eh? Now of course there are some gradients and such so there are other colors on the site, but these are the biggies.

The fish are colorful so I wanted them to stand out in a big way. The easiest way to do this was simply to put them on a dark background. Once that was done, they instantly go from pretty fish to attention grabber. One funny thing I have noticed is that every female I have shown this site to says “Awww…I like the fish!”, every guy notices the animations and says “Dude…nice” (or something to that effect). I am sure there is a deep discussion somewhere in there about the differences in men and women, but that is for another blog.

Back to the issue at hand…the bright colors of the photograph immediately draw your eye because they stand out against the dark background. The other two colors come from…you guessed it…the fish. As part of the “Stand Out” motif, I made one fish blue. Why blue? Basically blue and yellow of one shade or another have always been the colors of Visionary Online, so it made sense to keep that tradition going (at least to me). So once the fish was blue, I used my eye dropper to grab the primaries of both the yellows and the blues.

One thing to note…when using photographs it is important to make sure they all blend together. This is especially important if you are using multiple photos from different sources. Photoshop has some tools that will help you get them all on the same color palette. If you don’t do this, then your pictures will look like what they are…different photos from different sources. Better to go with a cohesive “yeah I took all these myself” look.

Logo

The logo couldn’t be any simpler…its text. However there are a few things that make it work. First, its in italics. Italics is commonly used in typography to imply motion and forward thinking. The result is a subtle way of letting the visitors know that Visionary Online is a nimble company that is used to using the latest technologies.

The other piece is the two colors. This is a very common technique used just about everywhere. By using two different colors you make the viewer notice each word separately rather than both as a single phrase. So in this case you see “Visionary” which implies, again, forward thinking, and then “Online” which states the obvious…we make things that go online.

Header
The header is typically the first thing a viewer notices. For that reason it has the important job of capturing their attention long enough to answer the following questions:

1. Where am I?
2. What is this site about?
3. Is it interesting enough to keep reading?

Where am I is answered by the logo. “I am on the site of Visionary Online”
What is this site about is answered again by the logo and the slogan. “This site has something to do with the web, and they want me to stand out from…something.”
The third question is answered by the fish…”Ooh pretty fish!” Being interesting enough doesn’t have to be earth shattering. Just something to make the viewer take notice. A graphic, a catchy slogan, or a just a good use of color can meet this goal.

Flow
This site exists to answer the question “should I hire this company”. One problem with some portfolios sites (and a major issue with “version 2″) is that they get too wordy. In any portfolio site, you should get to the point quickly…at least on the front page.

“Here is who we are”, “This is what sets us apart”, and maybe a little eye candy like a testimonial or some recent projects. Boom. Done.

That isn’t to say that you can’t be wordy anywhere on a portfolio site…just not the home page. The wordiness on this site is on the services page. An “about” page is also typically pretty lengthy which is cool. I figure if they are interested enough in your site to check out the about page, then they will stay and read a bit of text.

Arguably the most important thingto any portfolio site is the actual portfolio. Here is how mine looks:

How you show your work can be simple or fancy…what matters is that you show it. A lot of sites out there simply show a graphic for each project and thats it. While this shows off the design itself (which is good), I think it is only showing half the picture. The other half is why you built the site in the first place. Explaining a bit about the site shows that you cared about the project and lets future customers know that that same passion will be used on their site as well. An image may speak 1,000 words, but an extra 100 could seal the deal.

Also, be selective as to which pieces of work you show. You are trying to woo new clients so put your best foot forward. Under the Visionary Online banner I have developed well over a dozen sites. Some are old and follow old design standards. Heck a few written back in the early days don’t follow any standards at all. Let the dinosaurs lie…the key here is quality not quantity.

Finally…no portfolio is complete unless it gives potential clients a way to contact you. Now this may seem obvious, but a lot of sites make it difficult to get in touch. Make it as easy as possible, and give your clients as many different ways to get ahold of you as possible. Some people like to call you (I love those people!), others like a simple email address, and still others like carrier pigeons. Whatever they like, try to accomodate.

Conclusion
So there you have it…the portfolio.

To sum up:

1. Make it eye catching
2. Keep the front page simple and sexy
3. Do more with your work examples than just provide a picture and a link
4. Make it REALLY easy for potential clients to get in touch

As a designer/developer the hardest site you will ever make is your own. Why? Because you want it to be perfect and show all the mad skillz you have built up over the years. Just keep these few key traits in mind and you will already stand out from a lot of companies out there.