Josiah Sprague's Blog

Looking around on the internet, I’m finding some trends as far as what makes a website successful. This is my no means a definitive list, but rather a quick summary of some things that I am drawn to on the web and why I think these things are essential for a successful website. While many of my observations apply to websites in general, my specific focus will be on portfolio websites.

Some Rules of Successful Design

What makes a website successful is, first and foremost, it’s purpose. The purpose of a website is to communicate a message. The message needs to be clearly defined, and every aspect of the website should do it’s part to communicate that message. All of the aspects of a website are secondary to the message of the site.

The message of a portfolio website is, most likely, “Hire me!”. This message should be made clear, and supported by the content of the site. A successful portfolio site will include examples of work to communicate the author’s skill, as well as a call to action encouraging visitors to consider hiring.

Some supporting factors that make any website effective in communicating a message include; consistent navigation, usable search, standards compliance, up to date information and effective monetization.

Some Things to Avoid

In light of a website’s message, anything that does not contribute to or enhance the message should be avoided. A feature may be a powerful communication tool on one website and completely out of place on another. For example, a discussion board may be a very useful tool on a social media website, but on a professional portfolio it may be out of place.

Other things to avoid are unnecessary Flash animations, sounds that play automatically, and features that use large amounts of resources. These things can be used occasionally in the right places but to use them all the time is sort of like putting salt on everything you eat. Not everything needs it, and sometimes it’s better without.

Good Examples

There is no shortage of good examples of portfolio websites.  DesignM.ag has a list of 101 Awesome Portfolio Sites. The number one thing that I like about most of these portfolio sites is that they are standards compliant. It might not seem like a big deal, but standards compliance is the backbone of a successful site. Everything is built out of code, so if the code is healthy, it lends itself to a healthy site.

The first site on DesignM.ag’s list is Spoon Graphics. Not only does the site look great, but it achieves its purpose effectively. The first thing a visitor to the site sees is the banner across the middle of the page explaining what the site is and offering links to find out more, view the portfolio or hire Chris, the owner of the site.

Another portfolio that stands out to me from the list is Design Disease. The thing that draws me to this site is the creative design. The site incorporates an ocean theme while still maintaining a site that is easy to navigate. Design Disease also includes several other features that make it a successful portfolio including consistent navigation, usable search, standards compliance, up to date information and effective monetization.

I especially like Design Disease’s natural approach to monetization. First by simply offering services for hire, but also by offering the services of other companies such as HostGator for web hosting. Many websites try to increase revenue by placing banner ads chosen by key word, but Design Disease simply makes a natural recommendation. Just as a side-note, this is where I see the future of advertising headed.

Bad Examples

Poorly designed portfolio sites are naturally harder to find, as they don’t get as much attention, but some of the worst of the worst can be found by doing a Google search for “worst website ever”. There are some websites, which I generally dislike. These aren’t necessarily bad websites, but sites that I feel could do a much better job at communicating their message.

Have a look at the introduction page on Scott Rockers’ Portfolio. While I can appreciate the intent to make sure that visitors are aware that the site is Flash-based, the introduction page is an unnecessary step for most visitors that gets in the way of the message of the site. The best solution would be to avoid Flash unless it is absolutely necessary (most multimedia and animations can be handled with HTML, CSS and JavaScript these days). However, even when Flash is necessary the question of whether or not the visitor has Flash player installed can be addressed by the computer. Don’t make visitors do the work that your website should do for them. Include a script to skip the intro page if Flash is installed.

One last example is Eyes Go Dark. Eyes Go Dark is an example of a great message that is poorly communicated. When the site first loads, there is an introduction page with several external links. While external links are fine, it doesn’t make sense for them to be the first thing a visitor sees. That’s like visiting a house and being shown the way out as you enter. Skip the intro page and show visitors what they came for. Your message and your content should be right up front welcoming the visitors to your site.