Five Popular Design Portfolio Website Styles

August 31st, 2009 by Tyler Denis | 57 Comments | Stumble It! Delicious

Having a web-based portfolio is crucial for displaying your online and/or offline work. The key to an effective portfolio design is how you to set up the content. In this article, we are going to cover various ways designers and artists set up their portfolio site. We’re also going to look at some well-designed examples from each style.

1. Portfolio as the main focus

These portfolio websites are usually pretty simple, having some basic information on the front page. All the focus is geared towards the design work.

Leonardo Maia

skillicorn

Juan Diego Velasco

Fred Maya

Ersel TANIR

Caitlin Hathaway

2. Featured Work/Navigation as the main focus

This variety of portfolios usually consists of the designer displaying their design projects in a "featured" section on the web page. In addition, the designer can use their design/art – in combination with visual design elements – to set their home page as the jumping point to get to the rest of the site’s content.

CamiloHolguin.com

theenergycell

84colors

Todd Stowell

Trevor Clark Photography

Bohoe

Loukotka Design

3. Services/"About us" as the main focus

This portfolio design style typically has a short paragraph/blurb about the site owner’s services and/or a description of who they are. These descriptions are built either into the header, or just below it. These websites may have a weblog or a showcase of their work below the header, but the main goal is to center on what the designer does.

mark mcgall

Havoc Inspired

gummisig

MadeToKill

Southern Media

Falcone Creative

55Eleven

RonnieSan

4. Blog as the main focus

This category of portfolio designs puts a weblog as the central attraction to the site, and is meant to show the personal side of the business owner or awards and accomplishment that they have received. New portfolio pieces and recently finished work are sometimes mixed into the blog as posts. It’s a great way to show potential clients their knowledge about the industry, as well as drawing in visitors by way of great content.

Tyler Gaw

Kim Ellefsen

Function

Jeffrey Sarmiento

blenDesign’Blog

5. The single page portfolio

This type of portfolio design utilizes various coding techniques such as accordion style menus and page scrolling to move the user to different parts of the page.

ftdesigner.net

Little Red

Andrea Cima Serniotti

Alexander Kaiser

fourtwo

Studio Skitz

What’s the best portfolio design style?

Do you have an opinion on which style is the best/most effective/most appealing? Are there other popular design portfolio styles that we didn’t mention? Share your thoughts in the comments.

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

57 Comments

Newick

August 31st, 2009

For me the best is the single page one as i did on mine : http://webnewick.info

David

August 31st, 2009

No offense but ALL these sites look like Wordpress themes to me. Never before in the history of the web have I seen so many similar designs. As varied as these examples are , they all look alike. Big typography, giant header graphics, over-the-top self-marketing vibe, too friendly, too many “Hi my name is…”too heavy on the social networking icons. etc, etc

What happened to originality?

The fact that you are able to break down ALL portfolio sites into 5 neat little categories says it all.

I like the social networking functionality of these sites but not the look.

David

August 31st, 2009

Was that post of mine too angry? Sorry folks. I got carried away. Peace out.

Mel

August 31st, 2009

Trojan Warning: When I clicked on Just.Dot the site tried to install a Trojan… my Avira antivirus picked up on it!

Jay

August 31st, 2009

Great post! I am currently reworking my freelance site and found some of these to be pretty helpful from an ia standpoint.

Mars

September 1st, 2009

very well laden portfolio website with categories…

Lillie

September 1st, 2009

I agree David, they are all very similar, but that seems to be the theme lately … I don’t know if the internet is assisting in inspiring us or is just a tool for creating more and more sheep …

Sergej Müller

September 1st, 2009

Fine list.
See also my effective portfolio design: http://ebiene.de

Erik

September 1st, 2009

I agree with David. I’m not really impressed by any of these except Alexander Kaiser, and have definitely seen much more original and compelling portfolio sites. None of these (with the exception I mentioned) stand out from each other in my memory as I write this.

That said, this is a good resource for seeing what other people are doing, and identifying what works and what doesn’t, so I’m glad it was posted.

theCount

September 1st, 2009

@David No your post wasn´t too angry! I share your opinion that these mostly look the same and they all feel the same.
It is a difficult job designing your own portfolio but sadly many “designers” nowadays tend to think that a command of photoshop and wordpress combined with excessive use of twitter qualify them to be a rockstar designer. In defense of the article: it doesn´t claim to be about creativity but rather about the all too common formulas used to create portfolios and in that respect it succeeds.

Shizzle

September 1st, 2009

I don’t think your comment was TOO much. You are absolutely right about your remark.

The problem is that people often don’t know how to make their own wordpress theme. So they google for “portfolio theme” and use one of the first ones they see.

CMS is growing more popular every day. But the development isn’t growing as hard.

kronos

September 1st, 2009

No no David, I think you’re right (even if I like the look).
Just scroll down a bit fast and it’s even more evident ^^.

They all do look alike. But once again I like it :)

Jordy

September 1st, 2009

Heheh i dumped my work on one page. It’s to much work for me hehehehehe

Dave Sparks

September 1st, 2009

I think having the blog as the main focus is a strange one for a portfolio, but I guess some people do want the blog as the focus.

As for them all looking like wordpress themes, I personally wouldn’t agree but given the massive usage of wordpress and the versatility most things could look like wordpress themes now a days.

Rob Loukotka

September 1st, 2009

Seems to be a lot of people pissed that these sites “look the same”. But, the article exists to specifically point out these five popular styles.

I was just reading another list of portfolios where everyone in the comments was complaining – “They’re trying to be too original.” or “This navigation isn’t user friendly because it’s too different.” or “They should make sites for the clients, not for themselves.” etc.

These sites look like this because they’re straightforward and they WORK. The whole idea is to showcase your work, and to not have distractions, so these portfolios have a similar feel. But it’s easy for clients to browse because it’s familiar, and that is the entire point.

Alexander Kaiser’s site is certainly the most original of the bunch, but it’s quite useless as a portfolio. Hell, he can only get away with it because his site isn’t for landing clients, he works full time. If his site had to act as a sales pitch and a showcase of his actual work, you better believe it’d be a gallery of websites just like the rest of them.

I don’t know what people are expecting, but I thought plenty of the sites on this list were great. Mark McGall’s site and Trevor Clark’s seem truly original to me.

David

September 1st, 2009

Wow, I thought I would get killed for my posting.

I would love to see a post like: 25 wordpress sites that look nothing like wordpress themes or trends”

I need a new portfolio site because mine is looking dated. I really wanted to do one based on a CMS, because I like how easy it is to update and I like the social networking aspect of a blog, but not if it’s gonna look like everyone else’s site! For me, originality is more important than anything else, maybe I’m a dying breed. Maybe web design is dead because content is really all that matters.

There really needs to be a CMS that will allow you to dramatically change the look of a site without diving into an ocean of code.

Flash needs to add a robust suite of blog-like features and be SEO friendly.

In any case. for me, web design has come to a grinding halt.

I’d love to hear some other opinions on this because I’m getting myself a little depressed here :)

Chris Morata

September 1st, 2009

I recently redesigned my portfolio site into a single page web design (I invite everyone to check it out and let me know what they think!). I feel like this is a great way to get your pieces out there with the portfolio as the main focus. In my opinion, this is the best way to showcase a personal portfolio.

I am most attracted to the “Services/About Us” for a company portfolio.

Jesse

September 1st, 2009

I think the focus should be on your Portfolio and Blog. This way it shows viewers about your skills, and tells them how you think.

Jacob Gube

September 1st, 2009

@David: Great response and a valid concern! I don’t think that it was ‘angry’ at all; to me, I took it to mean that you have a strong belief and passion for your opinion. We’re supposed to be creatives, and being able to categorize styles can be a cause for concern.

Here’s my two cents. You can take this post one of two ways: look at popular trends and styles and take inspiration from it in your own designs OR as a way to see what’s being overused so that you can, if you wish to be unique, steer clear from them.

Nicola D'Antrassi

September 1st, 2009

Congratulations to all! But i think my website is more original ;-)

Connie Myres

September 1st, 2009

I have a bookmark entitled “Inspiration,” this is where I keep links to sites that inspire me. I use them as idea generators. It doesn’t mean I’ll copy them, it means that pieces and parts may inspire me. Thanks for the article!

Roberto

September 1st, 2009

Nice comment David.

nachomaans

September 1st, 2009

I agree with David’s comment that many look quite similar (ours included http://www.id3.co.th/index.id3), but keep in mind that the shoemaker’s son always goes barefoot!

If you’re busy with your clients’ websites, you don’t have that much time to spend on your own. It has to be simple, easy to update and show what you can do.

We spend more time preparing case studies, than on the website’s bells and whistles. Content is king after all!

Vernon

September 1st, 2009

Nicola, your website is nice, but dang don’t resize my browser for me… grrrrr. ;) When you’re somebody like me that has 2 22″ widescreen monitors set up as one big horizontal desktop all of a sudden I’ve got 3,300+ pixels of website going on with you in the middle… lol. Nothing personal, I just HATE it when sites take control of my browser size.

Fubiz

September 1st, 2009

Excellent selection. Our corporate website coming soon :-)

yoyo

September 1st, 2009

Great article!

*I agree with Rob about portfolios being straight forward, showcasing your work without distractions.

David

September 1st, 2009

One more comment from me. Where are the Flash portfolios? Why have they been completely ignored?

Mark

September 1st, 2009

I considered making my site where the portfolio was the main focus considering that is what people look for first when they visit a web/graphic designers site. i opted to use a single page portfolio.

Yash

September 2nd, 2009

The designs are great, no doubt.
But have the designers taken size and performance on slow connections issue into consideration? Somebody please throw some light on it.
Thanks.

Jorge

September 2nd, 2009

Ohhh, Jeff Sarmiento’s blog is always around us, it’s a great job. We were hoping to find our website
Thanks for the showcase

Wcchyau

September 2nd, 2009

I think a website with featured projects, and a little introduction will help visitor well to know who are you and how is your work!

build the trust and also the impression…

WebDesign Expert

September 2nd, 2009

Good collection, I like the elegance of the Josh puckett portfolio collection.

Ryan Eade

September 2nd, 2009

I think one reason the “Hi, my name is” is becoming so popular (I use it also) is that many of us are trying to portray the personal touch. As a freelance developer, the personal connection to the client is often one of the biggest selling points for us.

I hate that I’ve managed to fall into the trend of embedding a twitter feed, but I’ve never been one for WordPress, my site is powered by Joomla!

Tyler

September 2nd, 2009

@david – Gotta throw in my 2 cents since my site is listed. No, not too angry, it’s an opinion and a valid one. I would say it’s an example of form following function. These all are portfolio sites of designers/developers and we all have similar content and need it to be displayed in an appropriate way. Now, having similar visual design elements…yeah maybe we are getting some inbred features going on there. Don’t really have a rebuttal for that one. All I know is what I wanted to do with mine. Since it was completely mine, finally no client input or opinions, I just did whatever the hell I wanted :)

Another thing, your site. For a Flash site it’s pretty plain jane and very similar to scores of other Flash portfolio sites (I’d take the Pepsi challenge with my first Flash portfolio site any day: http://tylergaw.com/archive/tylergaw-v1) So the pendulum swings both ways. Maybe it’s time for a redesign? Those tiny, barely readable font sizes are screaming 10 years ago. Also, you asked where all the Flash sites have gone, well there is nothing on your site that can’t be done using good ole’ HTML/CSS/Javascript and it would be lighter, more indexable, and would get way more cool points than taking the Flash route.

Again, good comments even though they are critical of myself. It’s better to have these discussions than to just go along with things.

Tyler

September 2nd, 2009

I appreciate all the comments.

David:
I see what you are saying; a lot of these websites do have the same kind of layout. You can look at this as a challenge to design something better or look at what these websites are doing right and take something from them.

At the same time you don’t want to make something that potential clients has to “figure out” before they can see your work. If it takes them 10 seconds (or less) to try to find what they are looking for they will most likely already be gone.

Also, with flash websites, I think they are attractive and all. When it comes down to it I feel that it is best to create a website that is as search engine friendly. And this may be a stretch but you don’t want to have a client with an old/slow computer or one without flash come to your site and find nothing. I think a combination of flash and HTML is ok though.

This post is meant to show the practical layouts of a portfolio design, and get people thinking, “what is the most important thing to me that I want to show clients”.

Nicole Foster

September 2nd, 2009

I believe putting your portfolio, or featured work first is better in getting clients. They can see your work first, and then get to know you as a person. Plus, if it’s right there infront of them, they don’t need to search for it.

I’ve been beginning to love single page portfolios. Easy-to-use is written all over them. With a great design, and great pieces on the page, you don’t need anymore pages. I currently have a basic, single-page portfolio, and it is easy to update. I’m going to redesign it to fit my style, but I’m keeping it a single page portfolio nonetheless.

David

September 2nd, 2009

Tyler, I know my site is totally outdated (read my posts). The fact remains that everyone is following trends like never before. Not only do all these sites look alike, they all sound alike in tone, so you can’t blame the software choices or whether or not sites are SE friendly.

I’m glad to have started this dialogue, it’s about time.

Tyler

September 2nd, 2009

David, I don’t think that “The fact remains that everyone is following trends like never before.” That’s ridiculous. People have always and will always follow trends in every single thing that there can be a trend. Sure people follow them en masse, but that’s always the way. Bell-bottoms, tie-dye, mohawks, leather jackets, crocks, aviators, trucker hats, hummers, scions, rounded corners, big headers, twitter, neon spandex, leg warmers, wood-grain backgrounds, whatever

I guess I’m just not enlightened. What we need is for you to redo your site to show us the “new” style and the “new” tone. (That sentence is meant to be both snarkey and not at the same time) I don’t doubt you can, and I want to see it when you do, just be careful; you might start a trend. As the saying goes, “put your money where your mouth is”

David

September 2nd, 2009

Sorry if I offended you, it was not my intention to offend anybody. you make some good points. Peace.

Mateus Souza

September 2nd, 2009

and the my? hehe
great article, have a Excellent selection

Ashely Adams

September 3rd, 2009

Your portfolio website can actually help you to market your skills. It proves your creativity and originality. These portfolio websites are good but I’ve seen better work out there……sorry no offense. Anyways, I liked Trevor Clark Photography.

Tyler

September 3rd, 2009

David,
Now with the popularity of inspirational website articles and even tutorials, people are going to look at those and say “wow that’s cool, I want my website to look like that”. And although the articles and tutorials are good to show what other people are doing in the design industry, there are all too many people that are taking these designs and creating trends.

The perfect example is the envato website. Since the psd.tutsplus.com and vector.tutsplus.com and all those sites came along and gained popularity people are trying to copy their corporate website, making it a trend with the boken background.

I think there are just so many designers around that are fairly new or want to be trendy that they don’t realize that they aren’t going to be successful until they learn to do their own thing and create their own style.

AlaskaW

September 4th, 2009

Personally, I like DaVinci looking down on his collection of work. Very cool. We typically put screen shots into an image rotator and hope for the best.

I think most people use the “WordPress” themes because they are easy to setup and don’t require “thought.” I believe prospective clients like to view them without too much clutter.

Jakir

September 4th, 2009

Recently i am thinking redesigned my portfolio site into a single page web design. I think this link is very help for me.

thnax
JakiR

JoshR

September 10th, 2009

I will stay out of the debate and just say nice post but I was hoping you or more people in the comments would have come out and said what they preferred.

Stef

September 16th, 2009

Thanks to choose me, this is a nice selection ! :)

Roland Glukhov

September 18th, 2009

The most effective in my opinion is to show a feature work + your intro text. Because if the person likes your works, then He/She will definitely check the about page and read more on your site.
And great collection btw…

Fahdos

September 18th, 2009

nice selection, i needed some inspiration to update my potfolio :D thanks

Jermaine

September 18th, 2009

Nice list! I’d also like to nominate and add http://www.agnarson.com :D

Alexander Osipov

October 6th, 2009

Great websites with beautiful design! Thanks.

Matt

October 8th, 2009

LAME.

Mark Carter

October 20th, 2009

Very interesting reading the debate about originality in design. One thing that strikes me, regardless of how original or conventional the designs are … the overall *standard* of design has really moved forward this last couple of years. There are so many well designed sites out there now … 5 years ago you had to work much harder to find good design on the web ….

Glenn

November 19th, 2009

I wonder if a portfolio with such robust graphics takes away from the experience of viewing the artists work objectively. Is too much stimuli a bad thing when trying to showcase other work that you’ve done. In other words, will the business of a site detract from the work itself?

neil pearce

December 11th, 2009

@tyler(September 2nd, 2009) It amazes me how any creative can slag off flash and even still believe it is un-indexable(if that is such a word?), it’s the same old chestnut!!

Nearly every forum and some blogs i am a member of seem to be doing the same and it just..well…not annoy’s me, but amazes me! It’s probably the reason why flash developers and Actionscripters are sort after these days?

Don’t get me wrong i ain’t slagging anyone off, but a designers portfolio is one that should show’s off the ability of that designer/developer and using flash or jquery or whatever isn’t or shouldn’t be such an issue. Just as long as you get the “WOW!” effect then what’s the difference???