Five Popular Design Portfolio Website Styles

Aug 31 2009 by Tyler Denis | 73 Comments

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

Leonardo Maia

skillicorn

skillicorn

Juan Diego Velasco

Juan Diego Velasco

Fred Maya

Fred Maya

Ersel TANIR

Ersel TANIR

Caitlin Hathaway

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

CamiloHolguin.com

theenergycell

theenergycell

84colors

84colors

Todd Stowell

Todd Stowell

Trevor Clark Photography

Trevor Clark Photography

Bohoe

Bohoe

Loukotka Design

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

mark mcgall

Havoc Inspired

Havoc Inspired

gummisig

gummisig

MadeToKill

MadeToKill

Southern Media

Southern Media

Falcone Creative

Falcone Creative

55Eleven

55Eleven

RonnieSan

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

Tyler Gaw

Kim Ellefsen

Kim Ellefsen

Function

Function

Jeffrey Sarmiento

Jeffrey Sarmiento

blenDesign’Blog

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

ftdesigner.net

Little Red

Little Red

Andrea Cima Serniotti

Andrea Cima Serniotti

Alexander Kaiser

Alexander Kaiser

fourtwo

fourtwo

Studio Skitz

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.

Related Content

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.

73 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.

Or

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???

Jose creative

December 16th, 2009

Great sites!
I’m working on my portfolio, I would like to criticize to improve.

http://www.joseacreative.com/

Ben Stokes

December 30th, 2009

Nice selection, very good for the inspiration

nick

January 18th, 2010

I agree with David.

neel

April 2nd, 2010

Excellent collection. i will definitely try this when i will update my website design.

webdezz

May 6th, 2010

very good collection it will help for us

david

May 15th, 2010

I never noticed that many people use the same “My name is…” introduction and at first I felt a need to change my website so that I’m not following a trend. But I decided to keep it because I do think that there are certain solutions to a problem that always work and you can depend on.

Think about it… in a group setting where you have to introduce yourself, how do most people start? “Hi My name is…”

Ron Superior

July 6th, 2010

I am the best designer in the world. I criticise everyone and everything visual. There is no originality anywhere apart from in my work. Anything you produce I have seen a million times before and I yawn at your efforts.
Then I wake up and go to work.

Love from Ron

Meegan

July 23rd, 2010

I agree with David… sort of. They are showcasing the works correctly and some people aren’t UI/ web designers so can’t fault them for not doing something more dramatic. I applaud them for a nice display of their work which is what a portfolio is for. Yes, we want to see something next gen, and that is always happening. One year it was about content, the next year about how many links can we place on one page (yahoo), the next year about white space, the next then was social and community driven websites without a lot of graphics. Next year? Maybe we’ll be purely user experience driven … the web 3.0 trends… not as much pizazz. websites are flash happy and flash is clogging up my download experience. I had to install flash blockers to avoid unwanted flash content when all I wanted was to read an article. … flash is becoming a nuisance. My web pages are loading slower because of all the client side processing now with Ajax. We’re kinda going backwards. Companies are taking way too much advantage over the larger download speeds. We’ll see what happens.

James

July 31st, 2010

@David

Yeah, I agree with all your sentiments about the lack of originality in a lot of those designs. I believe that the originality of a few years ago has become the norm of today. People follow a format that works. And of course people just want to get their name out there.

Travis Morrison

August 25th, 2010

I have a one page portfolio myself. I like the minimalistic approach. Nice article!

Sean Coleman

November 11th, 2010

I’m a graphic design student and just started using this new portfolio service called OrangeSlyce.com. It’s sort of a cross between Carbonmade and Behance, but I think it’s just for students. It has most of the features of carbonmade and some social elements that they don’t have. So far it’s been awesome, and since it’s entirely free, I’d say its worth a look.

brian adams

December 22nd, 2010

what a fantastic popular designs i really like it

Ana Accioli

January 12th, 2011

And I am the owner of the site littlered.com.br. I would like to thank the reference and warn that the layout has changed. Tks

Elliot Ross

January 15th, 2011

great post – I think there’s no right or wrong answer as far as which option is best – especially as different designers have different needs from their portfolios. Some may aim their folios directly at clients, whilst some may be aimed at recruiters and some at creative directors at agencies.

Re: the originality issue – I think it’s a double edged sword, you have to show some originality but at the same time remain competitive and easy to follow. There’s a consensus that’s been reached by many designers that works well, and it’s hard to justify doing something more ‘out there’ when you could risk alienating clients..

Simen

March 7th, 2011

I share the view of David, but in defence of the article what you describe has been the trend for 2010 and will probably be continued in 2011. Worspress and other blog formats now make it easy to make your own website, but I think that webdesign has taken the road of modern design with sosical media integration.

Alex Allan

March 24th, 2011

Wow what great sites! I’m 14 years old and I just designed my first portfolio site…check it out at: http://www.auxilium.comoj.com

Sorry for such a weird URL…I don’t have a

Dominic

June 12th, 2011

Nice Inspiration for Beginners.

Loma

July 8th, 2011

Alex – looked at your site, I’m quite impressed with it in some ways but the multicoloured things have got to go! Or at least be toned way, way down. Also, the logo is not very readable, maybe look at that. Love the main layout though, with the Hello, we are.. part. That is lovely.

My website is http://www.dripdrydesign.com but it is still in development, I have loaded a rough layout to see what needs tweaking etc (a lot!!)

Adham Dannaway

December 12th, 2011

Don’t forget portfolio sites that include the designer themselves as the main focus e.g. http://www.awwwards.com/25-faces-in-websites.html

Leave a Comment

Subscribe to the comments on this article.