The Anatomy of a Portfolio Site

The Anatomy of a Portfolio Site

This is part two of the week long series “Website Anatomy Class“.

This is an article for the web designers that want their portfolios to reflect the quality of work they are doing.

After doing a fair share of research into this brand of sites I’ve walked away having noticed some recurring themes that result in a rather effective presentation.

Let’s take a minute, break apart the average portfolio site, and see what we can learn to help improve our own.

The Front Page – Make Me Say “Wow!”

The front page of your portfolio site is literally the first impression visitors have, think about how many sites you’ve clicked away from because they have sub-par presentation, it doesn’t always matter how good the content is. Whether its an impressive flash opening, catchy slogan, or a large breathtaking graphic, if you amaze them with a killer opening page, the rest is easy.

Rather than speculate as to what constitutes as a “Wow” page, I’m going to just link to a couple and you can be the judge.

Sites that do this

Services – How Are You Useful to Me?


While you may know all the wonderful things you can do to improve the online presence of potential client, they might not. An effective services page not only showcases the talents of the company, but also how those talents can apply to the client. In other words, you’re telling the client how you can be useful to them.

A client may have a grasp on the term “Social Media” in the general sense, but it often falls on the web developer to translate it into a meaningful plan for their business. In the same sense a client may not be familiar with what “Valid XHTML/CSS” means or why it matters, although some will , it’s the nature of an industry that works with people from diverse professional backgrounds.

So how do you cater to the masses without losing either end of the spectrum? Try using concrete language rather than an abundance of tech jargon and buzzwords. Let’s make this a little more digestible with an example, which of the following appeals to the broadest range of people?

Abstract Example

Services: We do valid XHTML/CSS, Object Oriented PHP, Javascript. We also work with a variety of frameworks, including CakePHP and jQuery All of our sites go through rigorous SEO and we take special care to use social media whenever possible.

Concrete Example

We don’t just design websites. We build communication tools. Probably not what you would expect from a web agency based in Nashville, but our strategic approach to content development, design, programming and promotions help us build tools that not only make your audience stand up and take notice, but help them find the information you want them to see. (excerpt from Cabedge)

The abstract example pitches the tools needed to do the job, while the concrete example pitches the result.

Site that do this

Work – Show Me What You’ve Got

When it comes to showcasing your work – you’ve got options. The two most common methods throughout the research I did seemed to be gallery and case study based showcases. There are strategic reasons for both, let’s see which one works for you.


If you have a portfolio that you are proud of, with no “I wish I had done this better” projects, there is no reason not to show all of them off. A healthy page full of website thumbnails does quite a bit towards demonstrating your experience and talent.

If you only want to show your latest and greatest, it might be a good idea to mix and match – make a thumbnail gallery of the projects you are proud of and mention the rest in a client list. A nice sized list of clients paired with some select portfolio work can be the one two sales punch.

Sites that do this

Case Study

Case studies can be used the same way you would featured projects – to show off some of your finest work. They serve to draw attention to not just the project as a whole, but also the process involved, which allows for an insider peek at how you handle projects. Case studies can be a good way to show visitors the amount of effort and thought that goes into your work.

Sites that do this

Contact – Let’s Talk

Contact forms make for rapid fire conversations. By having a form ready and waiting to be filled out, you have saved the visitor the time it would have taken to open up their email client and address it. As minor as this may sound, those simple steps may be the reason they opt to just “contact you later”, which may very well never happen.

Additionally by including a form, you can format everything that gets sent to you through it. This means much better organization, less of a headache, and no missing information they otherwise might have forgotten to include.

Some Typical Layouts

While it is difficult (if not impossible) to come up with categories to definitively places all portfolio sites into, there are a few popular styles that make their way across the internet.


Seems to be most popular in sites that have a pretty impressive client list and/or work. It’s not uncommon for one large graphic to be the centerpiece of these designs. It almost sends the message – “I’m busy enough making beautiful websites for top notch clients, look at those instead”. If you have a strong portfolio, start using that white space, this might be the one for you.

Sites that do this

Animation/Image Intensive

On the opposite end of the minimalist spectrum, there are the sites that take pride is showing off their stuff via their portfolio by loading it up with Flash and Javascript animations. This type of setup is ideal for those that have the talent, yet may not have the big name clients to match.

Sites that do this


Of course we have to include the happy medium between both of the above categories, the well-rounded site. These sites tend to be a solid display of graphics and content, while not going overboard with either. This is the “Swiss Army Knife” design option, as it can suit any number of companies. The key to a functional well-rounded site seems to be strong and consistent branding throughout all the pages.

Sites that do this

There are a number of other approaches to layouts and ultimately it really comes down to personal preference. The other increasingly more popular option is one that I would like to discuss in the next section…blogs.

The Blog and Portfolio Combo

Using a blog as your portfolio site is a trend that seems to be typical of small, often one-man-show operations. The benefit here is the ability to attach a face/personality to the company – kind of like a website mascot, but the type the client actually gets to deal with.

If you’ve been consistently reading articles about the “best practices of logo design” from a specific blog, when it comes time to actually have one designed for yourself, who do you think you’ll go to? By establishing yourself as an expert on a topic, you also become the most sensible person to approach when related jobs come up.

For the many of us that haven’t had the luxury of a big name client, it’s not uncommon for clients to question exactly what you can do to benefit them. Let’s examine for a moment how having a blog can make these common questions much easier to respond to –

What can you do with Twitter?
I use Twitter on my blog to reach a few thousand people instantaneously and it is responsible for X% of my traffic.

How are you with search engine optimization?
Everyday I get XXXX hits from Google and am on the front page for the following terms (logo design, blogging advice, etc). My articles are consistently well ranked and I can apply the same techniques to your websites.

I’ve found that using specific examples/successes leaves the client much more confident in your skills than an abstract “We optimize your website for SEO”.

Sites that do this

Further Reading

Posted Tuesday, August 18th, 2009 · Back to Top


Add Comment

33 Comments 10 Mentions

  1. David Author Editor

    Great article Sam, very useful information.


  2. Dave Sparks Author Editor

    Nice article Sam, portfolios seem to be a very hot topic at the moment and a good round up.


  3. Sean Author Editor

    Really great post!
    .-= Sean´s last blog ..How to brand a corporate Twitter account =-.


  4. David Airey Author Editor

    Hey Sam, you’re spot on about creating a professional-looking homepage, and I’ll add not to neglect the others. Even tough my homepage is the single most visited out of them all, the majority of visitors arrive through specific blog posts. That’s one reason why I don’t like it when people fill internal pages with Adsense and banners, but leave their homepages “cleaner”.
    .-= David Airey´s last blog ..The design pricing formula =-.


  5. Jacob Cass Author Editor

    A great round up Sam, just shows how many different ways you can go about branding yourself. I also like the Carrot Creative home page (and that’s not just because I will be working there soon) – it’s very to the point without going overboard.

    A bit off topic: I was going to tweet this article using your “T” button but when I did so, it doesn’t shorten your URL. Maybe want to fix that up? Thanks again.
    .-= Jacob Cass´s last blog ..Your Favourite Favourited Tweets =-.


  6. Stefan Author Editor

    I recommend everyone to use case studies since it not only shows the client how much work you put into their projects but also make great link baits.

    Do you have any suggestions on great plugins to WordPress to show off your portfolio?
    .-= Stefan´s last blog ..How to Install WordPress on Hostgator =-.


  7. Jacob Cass Author Editor

    I personally use NextGen Gallery and works a treat. Can see it in action by clicking on my name (links to portfolio).
    .-= Jacob Cass´s last blog ..Your Favourite Favourited Tweets =-.


  8. Zach Dunn Author Editor


    I second Jacob’s recommendation. We use NetGen Gallery over on Officeal, and it keeps maintaining galleries extremely simple. My only complaint is a lack of keyboard navigation, but that’s probably just a matter of time until updated.


    Thanks for the heads up, I’ll take a look at it.


  9. Chris Morata Author Editor

    Great article, lots of great info. I recently redid my portfolio site and always looking for improvements, I think I may have found a few after reading your article!


  10. Sudarshan Gurung Author Editor

    I’m re-designing my Portfolio and it’s a coincidence and a treat that I bumped into this superb article. Thanks a lot Sam.
    .-= Sudarshan Gurung´s last blog ..Landscape Art =-.


  11. Stefan Author Editor

    Thank you @Jacob and @Zach. Seems to be just what I was looking for.
    .-= Stefan´s last blog ..How to Choose a Theme For Your WordPress Site =-.


  12. Chris Author Editor

    Excellent post here. I love the examples especially. What you pointed out that I think am lacking in is instead of putting in an abstract list of skills and qualities, but making it so that it is directed to the client. I think I am going to relook at that now.


  13. Lukas Author Editor

    A perfect introduction into the design of a portfolio site. I got photoshop lately so I need tips like these when starting to be creative on my website.
    I also like the links you put under the article, they expanded my view even more.


  14. nail care Author Editor

    Thanks very much ,not only for this post but also for his all previous efforts. I will be coming back here.


  15. Connor Author Editor

    Excellent Post! As always, a great read!


  16. Loshd Author Editor

    Sorry that I found too late … :(


  17. JannachG Author Editor

    Yeah, I aggre to this. Very good post. Go on…


  18. hncv Author Editor


  19. manau Author Editor

    Nice and very interesting post. Tanks.


  20. mogila Author Editor


  21. mobile numbers Author Editor

    Wow.. Its nice.


  22. biobritesunrisealarmclock Author Editor

    Indeed! Very Nice Article


  23. Author Editor | The Hub For Hip Hop – JUST LAUNCHED!


  24. Adam Mason Author Editor

    Awesome post! I’m definitly going to share this on my Twitter :)


  25. Anna Tosken Author Editor

    Great Job, I like tutorials online from megavideo


  26. Paula Dalesio Author Editor

    I love your writing style and I feel like you would fit in perfectly with the other writers.!!!!


  27. tom Author Editor

    Grate Post, interesting…


  28. Wallis Author Editor

    The post is good, definitely, but i don’t understand all. It’s quite pity.


  29. Donny Blaeser Author Editor

    I must convey my love for your kindness in support of individuals that require help with that area of interest. Your real commitment to getting the message all-around appeared to be rather powerful and has truly enabled many people just like me to arrive at their ambitions. Your amazing important help implies a lot to me and even more to my mates. Many thanks; from everyone of us.


  30. cheap coach bags Author Editor

    But the advent of internet has made the coach diaper bag hiremuch easier than before.


  31. aussi bien. Author Editor

    I discovered your blog site on google and check a few of your early posts. Continue to keep up the very good operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading more from you later on!…


  32. Donald Segouia Author Editor

    Good respond in return of this matter with genuine arguments and describing all about that.


  33. Nashville website design Author Editor

    Nice collection of portfolio designs



Build Internet by One Mighty Roar. Since 2008.