Astheria.com is now an archive and is no longer updated, you can find new writings at kylemeyer.com →


02 12 2008

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.

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 which each portfolio should strive for are relatively simple:

At any rate, let’s begin with the most grievous of errors:

32% had navigation problems

Poor 3d Nav
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

So many thumbnails!
Figure 2: This is tetris, right?

This is probably the most often overlooked problem with portfolios, and the research agrees. The criteria is relatively simple: if a user can not interpret what the design is by the thumbnail it fails. The problem with thumbnails is that it forces your portfolio’s design and initial impact 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 piques my interest from a thumbnail.

11% decided to make their portfolio a game of peek-a-boo surprises

Mystery Meat Squares
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 review 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—not that I see them as a complete necessity—but having an email address to copy into an address book or note down is far more useful than a 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 make things any easier for them.

4% had music that automatically began playing when I viewed the site

The Effect of Background Music
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 I currently had 28 or so portfolios open in tabs at once—something I’d expect from someone in HR. Suddenly, I had some odd atmospheric music clashing with my own.

Rather than reviewing portfolios the first thing I did was begin closing tabs until the music stopped. Your chance of getting a job in this situation? Zilch.

Conclusion

Hopefully some of this is information proves useful in your endeavors. I know my last portfolio was guilty of the thumbnails issue, but I’ve taken a wholly different approach this time around. But I’m curious about how others feel and what readers have done. Why not share your experiences?

One Hundred Forty-six

Responses

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

  2. @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’).

  3. @ Guy - You’re right. I should had make the distinction between Personal Site and Portfolio.

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

  5. @Michael: I think you’re not in the minority of people when it comes to that. ;)

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

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

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

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

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

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

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

  13. good study. thanks for the info

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

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

  16. Great article. Any specific suggestions for a copywriter’s portfolios? Where content - not design - is on display.

  17. 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. ;)

  18. 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/

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

  20. 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).

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

  22. 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).

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

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

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

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

  27. glad someone shares my 40px square thumbnail angst

  28. great article.

    Kyle, can you provide some links as to what great portfolio looks like?

    thanks.

  29. Excellent article. Full agree!

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

  31. @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.

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

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

  34. Guilty…

    Not guilty on all of those but am guilty of some!
    Thanks for the article, inspires me to touch up the portfolio.

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

  36. @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?

  37. 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….

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

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

  40. 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!

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

  42. @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.

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

  44. 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 ;)

  45. Great information. We would like to reference this in our blog. Visit http://www.ardis-creative.com/blog

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

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

  48. Thanks, :)

    I specially like your graph about the background music, I believe its really unnecessary, it only annoys people

  49. Creating a good portfolio is really difficult. You’re right.

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

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

  52. 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 :(

  53. @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.

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

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

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

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

  58. @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.

  59. Spot on. Creating a good portfolio is probably the biggest challenge a webdesigner may face!

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

  61. @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.

  62. The first thought that pops into my mind when viewing most portfolio websites is, “well, they certainly are creative and have a good eye, but they haven’t got the faintest idea about designing a website.”

    A portfolio reflects on its author in more ways than one. An aesthetic but unusable mess says, “I’m an artist—I compromise my art for no man”; an aesthetic and eminently accessible portfolio says, “I’m a professional—I want to work with you.”

  63. Nice one.

    I really hate thumbnails! I rather just post reduced sized images to balance usability and load time.

  64. I have to agree with you on many levels. Poor navigation turns be away from any site right away. If I get lost browsing a site there is a problem. Those bloody thumbs nails actually do annoy me for many reasons like:
    1. They tend to get overwhelming when your trying to look at there work.
    2. They aren’t usually in category which never helps.
    3. Like you sad, they don’t give you much of a preview of the work.
    Background music is very annoying when you’re playing your own music. I have left my speakers on high once after cleaning the house and when I clicked on this one site, I got a lovely blast of sound throwing me from my chair.
    But as a teenager I tend to be interested in the sites that have a warm feeling to it.
    But none the less thank you for the info :) Helps a lot when your trying to set up your own portfolio.

    Peace,
     Randy

  65. Yes, yes, yes. I agree with everything you said. You even made me laugh out loud.

  66. I dont mind thumbnails if you have a large number of items to display, however agree with all of your points, some portfolios out there are very frustrating to view.

  67. I like this post but on the thumbnails point - yes they are annoying when used inappropriately without categorisation or size consideration (especially the blank squares) however not all sites are scrolling HTML-based. Fixed-size sites with a lot of examples to show, especially photography portfolios, use thumbnails as a good solution to cut down loading times of larger images. What is your solution for a fixed-size site with many examples? I actually don’t like sites where I have to click on arrows etc for ‘next’ image or example without knowing what I’m looking at or how many examples there are. Considerations for this list need to be given from a web development/implementation point of view also - not all sites are laid out like a blog. However I agree with the rest of the points and the user comments about clients ruining websites and making the links to them actually detrimental rather than useful.

  68. As I get started on retooling my ancient (circa 2002) site, it’s nice to see so many others had made some of the same mistakes that I did. What can be frustrating, however, is when a client (I have some other artists as clients) insists on a certain mode of navigation, pointing to favorite sites of theirs (other artists, usually more well-known) that employ some of the nav tricks you post about. Since it works for Artist X, and they have major representation in NYC, then of course their site’s navigation must be the gold standard, right? That’s the arguement, anyhow, and it’s one that is hard to educate against; but this post gives me more ammo to do just that. Thanks!

  69. Wonderful ideas. The last two sites I designed for my portfolio violate almost every single one of these golden rules (except for nonexistent contact info and background music, ick). I’ve been meaning to redesign and do a one page portfolio with about 15 decent sized crops that give an accurate impression of the full size work. Right now I’ve got a bad case of thumbnail mishmash, and because the site is in Flash it can’t be indexed for crap. A quick, one page portfolio with an attractive design and easily accessible contact information is the way to go for me. I’d put in the URL for my web site in this comment form if it didn’t embarrass me right now…

    Best,
     -j

  70. I totaly agree with your article ^^

  71. I dont really agree with your article… I completely understand your point of view, but it sounds like if a website has thumbnails, text links, or an experimental navigation is not going to work.
    I feel the navigation we commonly use today is probably not the best one posible, by experimenting we can reach a better way.
    Most of them will be bad options, but there is allways exceptions to the rule.
    And thumnails, sometimes its the only way to present a portfolio, if a photographer has different collections of pictures, each collection can be presented in thumbnails, that way you dont give priority to one over the rest. (if you dont use thumbnails, the pictures will be loaded at full size in a determined order, and does that order serve a purpose? why is picture A before picture B?)

  72. I agree with all of those points. I think in general music auto-playing on websites is a bad move. I also think designers should try and stick to html and leave flash out of it the first few times around, flash seems to make people create bad UI choices in the design industry.

    In my latest version of my portfolio I tried to keep a lot of these annoyances in mind, but the thumbnail issue might have escaped me.

  73. I think Kyle makes very good and valid points here. An idea however I’d like to mention here is the content of the portfolio itself.

    Employers in general want to see what you have done but most of them give no thought to the particulars. They judge you based on what you present on your portfolio, not really having a clue of what you are capable of doing.

    While making the mistakes mentioned in Kyle’s article are valid, they should not be the determining factor in your decision. The cure for such design mistakes is instantaneous. Just tell them not to do it while working for you. What happened to compassion, kindness and patience?

    So, if you think a work you have done for a client is not the absolute best work you can do, don’t include it in your portfolio. In fact, to me personally, it’s worth more to see the projects you have done for yourself just for the fun of it. It shows your style and personality.

    When I look to team up with or hire people for a particular job, their portfolio will only weigh about 10% of my decision regardless of how fancy it is or how many usability mistakes they have made. I usually ask them if they would be willing to create a small artwork according to my instructions which would be relevant to the job at hand. Then I know it is a fair game to decide if they work is compatible with the job at hand.

    If it is a development job, I do the same. It has always worked for me and gives me a 90% plus accuracy as to the outcome. It also tells them that I’m mature in my decisions.

    We must realize that not every talent out there has the same opportunity, so judging them based on the work they have done for clients shows a complete lack of common sense (the largest and most prevailing epidemic in America today).

  74. hmmm this article could’ve been great for those people making portfolios to sell themselves as a freelance
    but if you do not plan to get employed on a long term basis where you could just show your portfolio when you need it then why not try those flashy cool looking valid markup on the navigation?

  75. Congrats on your Eye Opening articles on Usability Principles explained in simple english, easy for persons like me to grasp ,whose native language isn’t english..
    I would like to hear comments from you on the portfolio site…http://www.kaiserinteractive.com

    Any normal designer like me will get carried away by the usage of flash and colorful graphical elements in a suitable dark back drop. I couldnt apply any design principles over it as you have made use of some design principles to some of the websites discussed in your articles…thaz because i feel , its because of the extreme and mindblowing..grapihcs that suits only for portfolio kinda websites as per my openion..

    I like to hear from you and anaylse the + and - of this portfolio as you have narrated in the above article and in the “the-elements-of-design-applied-tothew”….

  76. Another thing I hate is window re-sizing. You arrive at a portfolio website and suddenly your window is resized to the designer’s preference. They maximize your window, I presume, because they don’t want you to be distracted by anything else. They make it smaller, so that it fits the content precisely.

    Dammit, it may be your content, but it’s MY window. Don’t mess with it. As soon as my window is re-sized, I swear I always close the window immediately. No exceptions.

  77. What a great article. I haven’t been on this site, but if this is some of the things you write, you certainly will be getting more views from me in the future.

    Mark

  78. I’m in the process of putting together an advertising portfolio and I keep going back and forth with one issue: Should the work be organized by client or by medium?

    Any preference?

  79. @John: Most potential employers or reviewers will be more interested in what you’re capable of (skillset) than what clientele you did work for.

  80. I see a lot of comments here about the contact information… I’m wondering if I’m the only one who gets annoyed by “mailto” links that are unclear.

    Let’s say you’re browsing a portfolio. I’m sometimes interested in seeing how the designer designed the contact page. I click “contact”…. and BOOM, Apple Mail launches! I really didn’t want to get Mail to launch!

    There are soo many site with this flaw!

    I guess i feel better now ;-)

  81. Hello there,

    Thanks for interesting info. Could you tell me please what is the best way to present web designer’s portfolio. I am doing a research at the moment.. Thanks, Vitalia

    My web site: http://www.webdesignhome.co.uk

  82. ahahahahahahha the music thing… hate that

  83. yea true … thats why i try to avoid flash based websites … its just too annoying to figure out the navi etc

    a portfolio is NOT a personal playground!

    well …. interface design is where they all screw up

  84. Funny I should stumble upon your article because I’m looking to redesign my Web site, as it’s currently stuck in an inappropriate blog template, and viewing the portfolios of designers annoys me for the same reasons you list above. I mean, am I supposed to click through all those tiny icons to get a feel for their work? If it’s not going to be easy for me, I’m going to move on and find a designer that understands a user/reader. After all, aren’t I hiring someone who understands me and my users/readers?

  85. You must hate more on Flash too. Designers who use Flash for navigational purposes, or ANYONE that uses Flash for navigational purposes needs to die.

    I am sure you can understand why.

  86. Yeah I do agree with most of this, but the music thing is just spot on, jezz I just cant imagine why, why oh why do you have to play music on your site?! The first thing is to find the ‘turn off sound’ button and if it’s hard to find well good by site…

  87. Thank you for the amusing yet valuable information, I will try to avoid portfolio blunders when I design my own!

  88. thanks. a lot, i have been trying to get my portfolio done.

  89. Almost wish I had come here before redoing mine lol Thanx for the lovely post!

  90. I have been looking at some portfolio websites of various artist, designers, illustrators, photographers, painters (ect).

    1) Please leave your personal website separate from a portfolio.

    2) DO NOT link using pictures ( iconography).
    stick to the basic text links or image text links

  91. Wow, this is a really handy article :) I really get annoyed from all the things mentioned above, especially the music, but in some ways if you really have amazing works, some of the things can be ignored.

    Right now I’m working on my portfolio and will take all that in mind. Thanks!

  92. Portfolios are good example for Van Gogh quote: “How difficult is to be simple”. I love it.

    I set up my portfolio http://gwozdzcreativity.pl/portfolio2/ 3 weeks ago. It is in polish, but maybe you like idea i came up with. I think it is easy and effective. Thanks for this review.

  93. thanks for the info

    looks like i have more work to do on my site :|

  94. Wow! This was the most awesome awesome article i have ever come across. Itsightful , witty and a brilliant slap in the face forcing me to go rethink and relook my portfolio. Thanks

  95. Very interesting article. It will help me re-create mine….

  96. Very interesting article. It will help me re-create mine….

  97. Such a great article thank you.
    I’ve browsed a lot of portfolios in the past few years when we were hiring for different positions and I agree very much with the navigation problems that often arise. As I am about to embark on a new online portfolio for myself this article really does make me re-think about all of those things.

  98. Great article - maybe the best one on the subject - so easy to see the points!

  99. Very good points. I’m trying to figure out how best not to annoy the onlooker while still maintaining a sense of innovativeness… It’s really hard to find that perfect balance, I guess you will teeter to one side at some point.

    Thanks!

  100. Great post, now i figured out what i need to take care about in my portfolio.

  101. I have just revamped my site (Lauren Wolff Design) and have stuck to all of the above but included a thumbnail type gallery. But I have made the thumbs at a decent size so that you can see something of the design even though just a snippet. If you have a fixed non scrolling site it seems the logical route if you have lots to showcase and it can look attractive IMO.

    The music complaint is spot on. I can’t get to the ‘OFF’ button quick enough!

  102. Lovely article. One gripe: it should be “piqued my interest,” and not “peaked my interest.”

  103. @Leo: Thanks for catching that, it’s updated. :)

  104. I agreed with 95% of the blog with the exception to the greatest point of all… The point of a portfolio, especially if you are a designer or a developer, is to show off! Therefore, SOME extravagances should be made. I’m all for the K.I.S.S. method of design… Make your website interactive, make it interesting, show off your best skills, and don’t have useless crapola. I’d like to know your opinion on my own site.

  105. Hey,

    Your graph is wrong. Booleans (Yes/No) are discrete, there should be no value between them. 2 dots instead of a line. Unless you’re into fuzzy logic.

    ^ joke. Nice post. hehe

  106. Thanks, some great tips. I’ll implement them on my website.

    thankfully I don’t do 90% of the above but this has still helped me.

    cheers

  107. Excellent post, must keep all this in mind. Glad i discovered this site.

  108. Very interesting….I’m glad i came across this! I’m currently in the process of putting starting some sketches of my portfolio and coming up with different ideas/layouts.

    I do agree with most of the things you said…In fact i was looking at another site that should the top 100 design portfolio sites and many of them had easy navigation. The thumbnails aren’t ideal and now i know why! And yes, music playing on the page is very distracting and it takes away from your work.

  109. Wow, excellent post.
    So now I should start again…
    Next step: New portfolio! :-)

  110. I agree with many of your points but I was hoping you would enlighten all of us and show us a new direction that isn’t plain and boring.

    My next issue is with sound. I would beg to differ that if we sell sound design services then we would like the opportunity to showcase it on our site. If we do a Flash based portfolio with animation sound helps engage and communicates your personality through another sense. With that said what we do instead is after a user clicks the portfolio link we provide a popup before advancing to the page that asks the user if they want to browse with the sound on or with the sound off. We word it in our own way of course. Providing a choice up front is the best solution I think.

  111. I read through your article. You have a lot of great points, but I don’t see a lot of solutions. What would you suggest instead of thumbnails? Too many large images can complicate things and clutter up the website.

  112. Hi! I just read your article and I agree with you!
    Finally someone say something about the freaking background music, I thought it was just me!.
    I`m currently in creative process of my own portfolio and your tips are very helpful, I also read some of the comments about the thumbnail issue and I want to show everyone this site: (www.jamiegregory.co.uk/) with no thumbnails but a selection of big pictures that make it more attractive.

    Cheers!!

  113. Great post! I totally agree. After searching to fill a web designer position at my full time gig, the portfolio site that stood out most was http://skeenery.com/. I used Chris’ site as inspiration for my own—http://www.ljsickmann.com/

    Let me know what you think!
     @ljsickmann

  114. the portfolio can include your own personal experiments

  115. I gotta respectfully disagree about the thumbnail thing. I used to use a CD Rom as my portfolio; the viewer would click Next & Prev arrows to navigate. But what if he didn’t want to view every single sample, or in the order I put them in? The Web is all about choices…give them thumbnails and they can click on whatever catches their fancy. If they don’t dig it, they can click something else…it’s not like the dial-up days where a download would cost you a minute.

    As far as I can see, your choices are the linear progression, the thumbnails, or the dreaded text links. If there’s a fourth possibility I’d sure like to hear it.

  116. Interesting Article.
    I have my own recruitment agency aimed at the graphic design and web design industries.
    Some advice that may come in helpful to present your portfolio.
    ALWAYS USE THE K.I.S.S. priciple.
    What i look for in a portfolio.
    Submit a maximum of 5 graphics no more than 1mb. I have 100 other CVs to go through.
    You have 30 seconds to get my attention.
    No fancy flash or graphics.
    The way you present your portfolio is a reflection of you as a person.
    If you have a website or blog include the link.
    Your CV.
    I ALWAYS DO REFERENCE CHECKS.
    Make sure i can contact you via phone or email
    If i see spelling mistakes it reflects you standard of work.
    I dont want to read your life story.
    In no more than 100 words tell me what your strengths are.
    Be genuine, leave your ego at the door.
    Because you have not got the interview does not mean your work is not good. It may just not be suitable for the current positions.
    If you know your strengths you know what type of work to aim for.
    Be grateful if you are called for an interview.
    Dont assume you have got the job.
    Hope this has helped
    Regards
     Marc

  117. This is a great article, and great work thinking through these things. I agree with you, if you hunting for the attention of a Creative Director or someone in charge of the budget, they typically don’t have alot of time on their hands. So you must be 1 click from your work… and it should load fast! Mystery navigation is soooo 2001! And pretty much using Flash as UI is dead.

    cheers,
     Kevin

  118. Make your website interactive, make it interesting, show off your best skills, and don’t have useless crapola. I’d like to know your opinion on my own site.
    Thanks Anne Bebek

  119. Hey

    Brilliant article

    I am currently redesigning my site as I type this and was looking up useful info

    the way my site currently is on the 06/06/2010 is dark grey and pink lines

    it is very formal un-fun and does not show my personality one bit

    my new fresh site design however demonstrates my personality and design style instantly and is just as easy to navigate if not more so

    please send me an email Kyle so i can send yoyu a link to my site when it is updated

    here I am on behance
     http://www.behance.net/OvertonGraphics

  120. You confirmed a suspicion I had already had about cropped thumbnails being used as links to larger images. I too noticed it was quite a large trend, but didn’t see how it benefited the process of viewing a portfolio. The thumbnail previews are often too abstract to even make a connection to the piece it refers to.

    Also, thanks for the laugh from the background music anecdote. I too become disgusted when someone’s website soundtrack interrupts my own.

    Cheers!

  121. i know this isnt my portfolio. but i dont know what i want to put in it because i havee to make an online one for this school year of mine due to the fact it is my last high school year.
    can any of you please help me out with how many examples i should use ad what ones? please and thank you.
     http://www.flickr.com/photos/kellyannmcnamara/

  122. I found your blog while searching for what “not” to do when creating a new portfolio. Thank you for your advice..and yes, music, is a major turn off.

  123. Hello. I have the same problem with thumbnails. Nice work. Thank you.

  124. Nice article. Agree completely. Helped me rethink my work page a little bit!

  125. I agree with the music crap but what if you had it set to off but the viewer can turn it on if they want to? what about that.

  126. Just checkin if the header will change - great little thing btw ;)

  127. You make some very interesting points, Thanks for the share

  128. Thanks for researching this topic. I totally agree. I’m amazed at how many otherwise good sites are spoiled by poor portfolio navigation and presentation. Same goes for WordPress themes, which I’m currently researching.

    Top of my frustration list is when there’s no navigation from one zoomed image to the next …so you’re forced to open each image from its thumbnail.

  129. You made some really valid points. In design business your portfolio is your arsenal and ammo and it should be loaded all the time

  130. On the thumbnails - Hmmmm…don’t agree.

    I did some testing with my own website and found when I put larger pictures up I got less feedback and/or inquiries and people spent less time on my site.

    I figured that either:
    a) people did not scroll down further than what they saw on the
    initial screen (above the fold thing),
    b) the images loaded to slowly (plus took up lots of bandwidth),
    c) too much of a visual overload of so many large images,
    d) all of the above.
    I went to thumbnails and found people staying on my pages longer and more inquiries.

    When displaying my paintings I have moved from all large photos of the painting and its details on a single, long scrolling page to a more compact one large photo, plus thumbnails. It works much better.
    Example here:
     http://charleskaufman.com/paintingsresources/womenpaintings/2008/fashion-alley-art-2011.html

    I am always trying and testing new designs, but will never, ever include music on the website.

  131. I like the valuable knowledge you be offering for your articles. I will be able to bookmark your blog and feature my youngsters check up right here generally. I am relatively certain they’ll be told numerous new stuff right here than any one else!

  132. Scroll baby scroll ( your new site) and I love it. No thumbnails, it’s all right there to see. Very nice.

  133. Nice article, usability is key to a good website - if you cant quickly and easily access areas of a website you are failing. keep the good work up

  134. I agree too that the design quality and design quality of eportfolios is very very variable… And most of the time, the important and necessary information is also missing (real competencies are not well detailled, only the realisations are spotted).

    We try to select some “good practices” eportfolios to register on http://portfoliomix.me/ . If some readers here think their portfolio is a good example, welcome… We give more importance on how the portfolio is structured regarding the competencies, rather than the graphical quality itself.

    Read you,
     Jerome

  135. ps: design quality and *structural* quality