My Last Portfolio Sucked, Yours Might Too
Last evening I was browsing a few portfolios after having a discussion with a friend who was redoing his own. I have to say it was a frustrating experience just looking through a few. In fact it was so frustrating, this post came as a result. After browsing 200 portfolios and keeping track of certain criteria I know I never want a job in human resources.
At any rate, I hope this will be useful to those of you looking to create or reevaluate your portfolio. Yes I’m an opinionated bloke, but I think you’ll see my reasoning as relatively common sense items that people just overlook.
As a forward, I’d like to reinforce that this is hardly a scientific research project, but at 200 portfolios I’d say that things are fairly indicative of a more thorough census. As always, I’m not one to link specifically to the sites that I’m giving a negative opinion on, but there are screenshots to illustrate. The goals that I judged each portfolio on, and that each portfolio should strive for are relatively simple:
- Impress the viewer within the first 10 seconds visually
- Allow the viewer to succeed in their goals: viewing your work or contacting you
At any rate, let’s begin with the most grievous:
32% had navigation problems that frustrated me while trying to achieve my goals
Figure 1: Clicking one of these zooms in, a little, but there’s no way to go to the live site and actually see and inspect it.
Quite a few people decided that their portfolio was a great place to try out the newest navigation trick they could come up with, even though it impedes the whole reason a user would visit the site: to see the work quickly, note down some contact information, and move on. The less thinking I have to do to accomplish my goal is a good thing. Unless you’re an experimental navigation designer, I wouldn’t advise it. Some of the weirdest ones I’ve seen have been a play on a rubix cube and 3D movement.
Some of the other ideas were pretty neat to play with, but they still hindered me from actually evaluating any portfolio pieces.
72% used thumbnails that forced me to view a larger image to actually view the piece at a decent size
Figure 2: This is tetris, right?
This is probably the most often overlooked problem with portfolios, and apparently the research agreed. The criteria was relatively simple: if I couldn’t get an idea of whether what the design was by the thumbnail it got a nice checkmark. The problem with thumbnails is that it forces your portfolio design and initial impact to work harder to make me feel compelled to wade through clicking individual pieces of your work. Often I didn’t even have a clue what the thumbnail was of.
Zoomed in and cropped thumbnails seemed to be a rather large trend, and they’re a nasty bunch. Right up there with the 40 pixel square thumbnails that are more of spots of color on the page than previews of the piece of work. Put simply, if you show your work up front and don’t require action and effort on the part of the viewer, they’re more likely to look at more of your work and look a bit more in-depth on pieces that catch their interest. I can’t decide if something peaks my interest from a thumbnail.
11% decided to make their portfolio a game of peek-a-boo surprises
Figure 3: Here’s a fun game, try and find the photo you really liked and bookmark it for future reference.
Even worse than thumbnails are the dreaded mystery meat squares. A surprising number of sites took this approach or used plain text links. Neither of which lets me scan any amount of work at a reasonable rate, or view pieces that I found interesting at a glance.
32% did not include a phone number
23% did not include a physical email
1% had no discernible contact information
Make it easy to get in touch, that is your goal and purpose for the portfolio. Phone numbers are very handy, but I don’t see them as completely necessary. But having an email address that someone can copy into an address book or note down is far more useful than the usual contact form. Many people are simply evaluating you, and won’t be making contact with you immediately. Not having any contact information they can take down and have available in their notes doesn’t help matters.
4% had music that automatically began playing when I viewed the site
Figure 4: Here’s how I feel about background music, I’m pretty sure nearly everyone feels the same.
For your own sake, don’t have music set to begin playing when a visitor arrives at your site. While browsing portfolios I currently had 28 or so open in tabs at once, and it’s hardly unlikely that someone reviewing portfolios for a job opening may be doing the same thing. Suddenly, I had some odd atmospheric music interrupting my perfectly good Jack Johnson.
Rather than reviewing portfolios the first thing I did was quickly flick through each one and try to figure out where that blasted music was coming from. To make matters worse I couldn’t find it, in fact, as I write this it’s still playing and I had to turn off my music altogether. If I had found which one it was I’d have closed it immediately, maybe coming back for another look later. Right now I just want to send that person a nasty E-mail.
Conclusion
Hopefully some of this is useful to you, I know my last portfolio was guilty of the thumbnails issue, but the one that’s sitting in my ‘to-do’ folder will not. But I’m curious about how others feel and what readers have done. Why not share your experiences?
Looking for Some Further Reading?
Check out my follow up post: Portfolios That Accomplish Goals.
What Next?
Responses
I agree with most of your article, but I think that in you first point (about the navigation problems), when you say that “Quite a few people decided that their portfolio was a great place to try out the newest navigation trick they could come up with(…)”, I don’t think is that bad… I mean, if you don’t experiment in your own website, where will you?
Sometimes portfolios are only used to show what “I” am doing. They’re not allways comercial thinking. If “I” a fulltime job in an agency, where “my” criativity is often stoped, obviously “I” will use “my” portfolio to make stupid things. And when I say stupid I’m talking about pieces that nobody likes, except me.
Resuming, I think that a portfolio isn’t necessarily comercial. Sometimes it’s just a playground.
In the other issues I totally agree with you. Cheers.
@Hugo - I don’t really agree with you there; I think your personal site, rather than portfolio, should be your experimental ground. A portfolio, whether you are employed or not, is still designed to show other people your work in the most consumable / appealing manner. A fancy navigation doesn’t help your work; most often, it will detract from it, as users will either be admiring your navigation, or being frustrated by it.
@Kyle - Nice article, I agree with pretty much everything you’ve said here. My biggest pet hate is background music on sites—it’s terrible. I’ll (hopefully) be putting up my own portfolio soon, so it’s always nice to see another’s opinion on the matter (though my site could be classed as ‘experimental navigation’).
@ Guy - You’re right. I should had make the distinction between Personal Site and Portfolio.
I agree with the article, thought I was in the minority with the music thing. Any website with unnecessary background music gets blacklisted when I’m browsing.
@Michael: I think you’re not in the minority of people when it comes to that. ;)
Kyle, I agree with pretty much everything you mentioned here. IMO, most of the time I see websites and personal portfolio that were made just to fit in the “design” arena. Designers just designing for other designers, like if they were the “real” client. Pretty much a cult thing. But it really depends on what you are focusing on. For me, a commercial portfolio, very visual, easy to navigate and with little info about each project is better to showcase my work. There’s no need for me to have the approval of other designers, or at least, I appreciate and I care more about the clients opinion, which are the “real” public/target of my website/work.
Saludos from Argentina! > Antonio.
Thanks for the article Kyle. I suppose I should be buying you lunch or something for doing all the leg work for me. It isn’t until someone puts it into obvious numbers that you realize that you are a part of that horrible majority of bad portfolios.
I will agree that designers and developers alike should have a personal and a portfolio site. In our adulthood, our playgrounds have shifted from sandboxes and swings to syntax and search engines. What better way to express creativity than output experiments in a public manner for feedback.
Hopefully soon I will be able to consider myself a minority on the subject.
Cheers, Jason
Thanks for the tips. The thumbnails one is interesting. I guess a reason to have them is they can give a very quick overall impression of the work. I suppose they’d have to be really considered for this to be successful though.
The other reason to use them would be for file size issues - I want my portfolio to load as quickly as possible and having even cut down screenshots could add to file size. Maybe a way round it would be to just show 3 of 4 sites on the front page with bigger screen shots.
Thanks Matt
Matt brings up a good point: there is a reason for thumbnails. They’re great for scanability, but as Kyle mentions, it’s pretty worthless if when scanning you can’t tell what the hell you’re looking at.
Another possible explanation for thumbnails or very small screenshots is that designs can be made to look better at small sizes. Come on, admit it, you’ve saved a screenshot at 50% before and thought, “man, that looks good!” I know I have
Simile for the day: Looking at a small web site thumbnail is like putting on a pair of beer goggles. Everything (or person) looks much better.
I agree with almost all your points.. I am a young freelancer..and I have had about 3 portfolio sites that are guilty of this.. I have hope to figure them out by now. You are very correct with the music, I feel the same way… it is incredibly annoying, I think firefox needs to create an add-on that mutes the browser. Great post, I am a new Subscriber for sure.
Good read. For a long time I was wondering why the pint-sized thumbnail layout got so popular too. I’m in the process of redesigning my own site as well, so its a useful post to me.
You’re so right. Thumbnails, music and bad navigations are very often made mistakes.
I’m a bit proud I havent used these things from the beginning.
By the way, your site is simply amazing! I love it.
Cheers, Viktor
good study. thanks for the info
a great article! I’ve just lauched my portfolio a couple of days ago and I’m already considering of tuning it up a little bit.
I’m guilty on the fourth point, I never put my phone number on the internet. While it’s a good way for viewers to reach me but it’s also risky..
Oh man, I HATE music on websites. It’s slightly more tolerable when there’s an obvious way to shut it the hell up, and int one specific case where it was actually serving a purpose in the design, but overall, it drives me batty. I don’t want someone else mystery music playing over my Led Zeppelin, thankyouverymuch.
Great article. Any specific suggestions for a copywriter’s portfolios? Where content - not design - is on display.
I would think that the principles still remain. If you are writing copy, then often there will be the finished product image associated with it. Just be sure to minimize the effort to find such content, and make sure that you include the written copy separately from the finished piece, but still be careful not to create too much separation that it loses context. On your portfolio site, users are forced to visit a particular site to read the copy you wrote, and if you didn’t write all the copy they’re unable to tell. Why not pull out a few headlines or calls-to-action you’re particularly proud of? Unfortunately, copy isn’t my thing so there may be better advice out there. ;)
Absolutely wonderful exposure of some basic usability and sellability issues. Often I find designers websites to be the worst examples of their work. Mine for example! In the next go around, in this year, I’ve been thinking hard about what makes a portfolio great to me.
Considering much of my audience I am very attracted to large images showcasing the work easily. I often appreciate video that shows how a site works. I find Teehan-Lax to have a strong suit for their work.
This is a post worth revisiting.
Of note: you’ll find this interesting too: http://freelanceswitch.com/finding/build-a-killer-online-portfolio-in-9-easy-steps/
Good article, there is a definate issue with the use of thumbnails in portfolios but it is to an extent unavoidable i think. As you brough up, text links are as good as useless. I have recently re-done my portfolio website and spent a long time devising a method where viewers can see work immediatly yet still use thumbnails to navigate to other projects and i’ve had good feedback so far. I think the key is to have a good balance between all elements of the page: navigation thumbs, larger images, text. And most importantly as said, easy access to everything is vital, a user should need to click no more than once from the landing page of the site to see some work. As for contact details.. shouldnt they be on every page?
Just an FYI from someone with a scientific background: The x-axis and the y-axis on the music/pissed-ness graph need to be swapped. The current graph implies that the madder you are, the more music plays (the y-axis is the dependent variable, the one which changes in response to the x-axis, or independent variable). We all know what you mean though
Enough nerding, that’s a great post (even for someone who hasn’t built up a portfolio yet).
Good article.
Another thing I don’t like about some portfolio sites is the thumbnail or link to a site takes you to another page with a full screen dump, and only then can you find the direct URL to the site. Its an annoying middle step that can be cut out.
When I did my portfolio, It was foremost in my mind to make it as easy as possible to access the content without any hassle.
Good tips that I’ll have to apply to my own portfolio. It’s probably why I like WebCreme versus other sites of a similar nature. It actually has full width screenshots of sites versus cropped thumbnails that give you no indication of the site’s structure / layout (which means you have to click the thumbnail to actually see what the site looks like).
I disagree with seeing putting phone number as necessary. Just like you said, i do think that its just an option.
I do believe that those who likes to put their work in 100px thumbnails could just specify the type of work, or categorzied their thumbnails. People uses thumbnails usually because they have a lot to show.
Great article, I don’t think there are enough articles on this subject out there. I had just recently finished designing my online portfolio and I did a similar research study, but on a much smaller scale. I probably scanned only about under a 100 portfolios to see what other people did and noticed similar things you did. I then read all the articles I could find on the subject of creating online portfolios. One which has already been mentioned by Matthew Smith a few comments above. Two other great ones are: Creating the Perfect Portfolio, Portfolio Zen.
I would like to think that I managed to reach the goal of displaying my work and information in a way that is usable yet still beautiful, but I did get a comment recently that it was hard to navigate from the portfolio section to the contact section. I remedied this recently by adding a quick shortcut to it after each work. If you guys could, please take a look at my portfolio and tell me where I can improve further. Thanks.
Thanks for your insight. I’m in the process of designing my own portfolio right now and I found it useful. Showing off your own work is quite difficult especially for an interface/interaction designer, I guess people focused strictly on ‘web design’ (as in nifty graphics) have a much easier job showcasing their work.
Hi guys,
Everyone’s comments are very interesting, I agree a lot with you all. However I stumbled across 2 very good sources that have very valuable and valid contribution to making a great website, so check them out:
1. The Principles of Beautiful Web Design by Jason Beaird
2. http://www.usability.gov/pdfs/guidelines.html
Both of these are worth their weight in gold.
Hope you find them useful.
glad someone shares my 40px square thumbnail angst
great article.
Kyle, can you provide some links as to what great portfolio looks like? thanks.
Excellent article. Full agree!
Your quote “23% did not include a physical email” sounds funny, mainly because those 23% have enough sense to know there is no such thing as a ‘physical email’.
Which makes me wonder…did the other 77% included something that does not exist?
Otherwise a good article.
Thanks for the read.
@Mike B. Interesting thought, I’ll put some of the ones that I noted were good in a blog post in the next few days.
@Hector: I suppose physical email may not have been the best terminology, but what I meant was that they actually had an email that could be copied and pasted into an address book for future use, rather than a contact form that didn’t allow contact information to be gathered.
Hey your name’s Kyle too!
I am glad to have stumbled upon your post here. I am always critiquing my designs and especially my own personal website. Right now it sits as a bare one page minimal depiction of who I am and where I am on the web, with a link to my blog. I’m trying to take the navigation out of the picture on my website and let the person visiting see only one page with all that I have to offer. But I know there’s a better way to do it than how it is right now. I just haven’t found it.
Thanks again.
I seem to have found this post at just the right time. I recently just started making my first real ‘portfolio’ site and I thought it looked great. Until I looked at it a week later and realized how utterly wrong I was. These tips are dead on and I will surely take them to heart
Guilty…
Not guilty on all of those but am guilty of some!
Thanks for the article, inspires me to touch up the portfolio.
So thumbnails suck and mystery meat little blank squares don’t work. Agreed. So, let’s get constructive with that criticism, eh? What do you think DOES work?
I’m a photographer who has used every form of display possible and I agree with you about both of the above issues. Question is, what works best for displaying images that, quite honestly, need to be seen larger to “get”? I’ve tried simply displaying the images at full size and then letting the viewer scroll through them but at some point you need SOME sort of navigation/index/menu whatever that invites people to another section. What do you think?
@Mike B: As I said previously, here’s a new post on some solid portfolios: Portfolios That Accomplish Goals.
@Name (Required): Nice to have you here. Do you not like your real name?
Oh my God.. I laughed out loud at some of these must-avoid examples (esp. the music/level of frustration graph!) But I’m not sure that a phone number is that important….
On the topic of linking to live websites in a portfolio:
In many cases a client unleashed on a CMS will thoroughly destroy a site after many hours of hard copywriting work. Many clients have a distorted perception of what constitutes a good picture or copy, and many more don’t understand why you’d use a single font, for instance.
It’s my considered view that linking to a live website that is not 100% static is a terrible idea for this very reason. I imagine that’s why many designers employ screenshots - to display their work to best effect BEFORE clients potentially destroy it.
Dugg and Stumbled for the “Pissed-Off-Ness” Graph. Nice. Hehe. (Since I, too, despise automatic website music…) Almost as annoying as the “mystery navigation”. Especially when it’s done in Flash. Give your website users an interface they can frikking USE and not have to guess at.
All great points.
Ah, lovely, great points for sure. I’ve been looking to redesign my portfolio site for some time, I’ll definitely be re-reading this and other posts for reference. Thanks!
From my 10 years of professional experience in the field of web design it’s always the people that don’t have talent for visual that goes with similar “must/must not do” list (no offense here, it’s an observation). In fact it’s exactly people/studio that don’t care of similar rules in their portfolios that have big success. Juxt interactive and 2A will probably loose all their clients by following everything you said. How about FI? They didn’t had thumbnails at all until the last year, should they listen to you?
Now, what people digging into interaction design can’t ever understand is that the users are different. That means that they are motivated by different things, they are inspired by different things. For example I find this blog to be so visually boring so I will never hire you to be designer in my company for example. But someone did, so it’s NOT about being right/wrong/must do/must not do. I also find the portfolio of your company to be mediocre but obviously your clients are happy. So that’s a good point to see that similar rules JUST DON’T APPLY.
It’s really really frustrating to see all those “10 things that yo should do in web site” when anyone with more than 5 years of experience knows that it’s all bullsh*t
@ginger: Yes, users are different. But when it comes to a portfolio I don’t believe there is a lot of variance in such the manner you describe. If Juxt Interactive or 2Advanced adopted a user centric approach to their portfolios they wouldn’t lose clients, because their work would still speak for itself. If the work they do for clients cannot hold its own water than what good is it anyway? They’d be failing their clientele.
Also, this isn’t a list of must do/must not do, merely a statistical evaluation of what I feel constitutes poor information design. If you’re building a portfolio to present to people who you know feel differently, then prepare accordingly. That’s common sense.
Hi Kyle,
Found this article very useful, I am trying to decide how and what method to build my own site right now and how to lay it out. Right now I’m just using a free hosting site called Carbon made. I think there layout is simple and pretty good. They too use thumbnails initially however. Do you think Blogs are a good way to go to display your work? I hear that the trend is going more towards that, instead of custom dreamweaver or flash sites?
thanks again! shahmin
hm.. i agree almost completly with you. music on a website is one of the things that pisses me of the most, as i - not only sometimes but almost daily open several links in different tabs and suddenly you realize that not the mp3 you’re listening to is broken but some stupid flash site open in one of the 536 tabs is playing that anoying music…
though i think that - if kept in certain regulations - a portfolio is a nice place to try a different approach to navigation. but this always depends on what kind of portfolio it is and who you’re trying to reach with it. a portfolio that should attract local businesses without a website around your place - for those you maybe should take the most conservative navigation approach you can find ;)
Great information. We would like to reference this in our blog. Visit http://www.ardis-creative.com/blog
Hi. I agree with your points but I also know designers need to kick it up a notch to engage users. I’m using your first bad example on my site frshbook.com to recreate a bookstore-type experience. I will take your advice on the other points and we’ll see how it goes.
Thanks much, Mark
I just started my own blog within the last week and have been searching for other designers and photographers in Minneapolis to see what they were doing and really enjoyed your articles (when I should be sleeping!) about web designer vs. print designers and portfolios.
It is a constant struggle and as a designer for almost 20 years, mainly print and advertising industry - I have dabbled in web design and have teamed up with many a creative web person, but now as a Creative Director of my own studio, I regularly defer to the web gurus out there. The best ones are the ones who can program, do code and design sites to work the way a client wants. Those are the people who DESIGN web sites. I believe in people using their gifts, that’s why we all have different ones. We honor ourselves and our clients by giving them the best, even if we don’t provide every aspect of the service ourselves.
I’ll be checking back to read some of your articles. Great resource site and interesting commentary.
Thanks,
I specially like your graph about the background music, I believe its really unnecessary, it only annoys people
Creating a good portfolio is really difficult. You’re right.
Excellent article. I am currently designing my own portfolio site and now I will go back and make some changes. I now have some issues to resolve as far as site navigation is concerned. Thanks for showing me what I may have doing wrong.
2Advanced plays music and doesnt follow the rules because they do mostly Flash sites. Flash sites are a whole other ballgame. After reading this post, I am going to separate my experimental/personal stuff from my portfolio, I didnt realize i was putting them all together when they shouldnt be.
I agree with the person that said, sometimes you dont want to link to your site, because clients will crap up the site eventually with bad pictures or tons of HTML or other junk or javascript snippets or badges they “have to have” on their site. Even if you clean up a bunch of tags, they often like throwing crap on the site.
I’ve only had 1 client’s website stay clean.
So its hard to pick sites I like, because many were ruined :(
@Shahmin: I don’t consider blog posts as a good way to display your portfolio work, if that is what you mean. But I do think, in certain cases, that having a blog supplement your portfolio is a good thing. The reason being that it allows you to display your knowledge and mastery over a certain subject, as well as helping you to develop a better understanding of what you’re trying to explain.
Nice advice. but i read the reason you SHOULDN’T put your “physical email”, as you put it, on your site is because of “web-bots”, i believe the term was. it is a tool used by spammers to collect emails from sites and then bombard them with spam. so, according to the book, it’s better to keep you email in you php or other server-side scripts that you have. i cant remember the name of the book, ‘cause i have loads of php books and design books.
Nice advice though.
Am I the only one to comment on the fact that you listen to Jack Johnson?? He is THE man! Love his work. I have all his albums. However, I think his most recent (Sleep Through the Static) holds back a bit much. Perfect chill/relax/chillax music for me personally. Easy to drift away with images of laying on the beach with your special someone, waves hitting the shore, seagulls calling out, no one else in sight and not a care in the world.
Oh btw, great post! I’ve tried to review portfolios for outsourcing projects and its painful how certain mistakes are repeated. I find that if someone falls into some major no-no’s (make me hunt to see their work, poor nav, hard to contact, bg music - especially techno - thats SOOO 90s), i automatically find them unsuitable to be creative. These guys fall into the “follow the herd” crowd, because somehow, these consistent negatives have become the norm among some web designers.
Interesting article Kyle. The points about experimental navigation and extra clicks as an obstacle to viewing a good-sized screenshot or URL to the live project are definitely important.
I’ve got a view on this from the ‘other side’, as someone who has spent a lot of time searching for and evaluating designers’ portfolios in a previous job. I checked out portfolios with a view to commissioning the designer to either write about their web design or digital graphic techniques, or include their web design or illustration work in printed books.
The key factors for me were:
1) Be able to see several work examples at a decent size within as few clicks possible
2) Clear contact, including email address
3) Evidence of unique personality or character, irrespective of current trend.
4) Bookmarkable
The no-nos were difficult navigation, music, pointless Flash, and contact forms wih no email.
When it comes to Flash, animated content, music etc. my view is to either go all out or not at all. Companies such as 2Advanced and Fantasy Interactive are working at such a stunning, jaw-dropping high level that they can break the rules. It’s a different set of rules for the average middle weight.
Great article but all that was raised was showing websites with all these problems but we need solutions.
I did a quick search of the comments but no one has really suggested a possible solution to the small thumbnail issue of showing your photographs/graphic ads.
@noname: You can find examples of portfolios that do a great job at meeting user goals in the follow up post that I linked to at the bottom of the article.
Spot on. Creating a good portfolio is probably the biggest challenge a webdesigner may face!
I totally agree with you. It’s just that some designers doesn’t have the end user in mind it seems. When one always have the end user experience in mind it’s a bit more easy to understand this simple questions;
Q. Why is the user here?
A: To look at my stuff
Q: How can i reveal “my stuff” as fast as possible?
A: No cropped min-thumbnails, no strange navigation — as direct and intuitive as possible.
Q: What is intuitive?
A: Standards - use some sort of standard output that you know your possible viewers will find easy to understand.
Q: What about the cool fx then?
A: Keep it simple. Only include fx if it truly will enhance and help the user, never include anything just because it’s “cool”.
And that’s it. Why do some people find this so hard to understand … still?
@Tommie Hansen: The question and answer process you described is ideal! I’m actually working on a blog post about that, but you sum it up very well when applied to personal portfolios. One thing that I would add is ‘Who am I marketing myself to?’ Many designers forget that their primary audience is a much more complex thing than simply an employer. Many people create things that they deem cool but may not be impressive to those who are on the receiving end and evaluating the potential hire.