Creating an online graphic design portfolio

Apple laptop

There are a few important points to consider when it comes to building your online design portfolio. I’m often asked what builds that necessary appeal. Here are some relevant resources and a few common portfolio mistakes.

Kyle Meyer recently published his experience of bad design portfolios.

Astheria

“…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… 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.”

There are seven common mistakes Kyle found:

  1. Poor navigation, using new tricks that impede viewing
  2. Using thumbnails that don’t show what the project is
  3. ‘Mystery meat’ squares that offer a ‘peek-a-boo’ game of surprises
  4. Not including a telephone number
  5. Hiding your email address
  6. No contact information of any kind
  7. Background music playing automatically

I’m guilty of one — not including a phone number. I purposely removed mine after receiving nuisance calls, but that’s not to say I don’t talk to my clients. My number is given after the initial emails, and is also on my card.

LifeClever

Chanpory Rith, of LifeClever, adds a further three portfolio mistakes:

  1. Flash animation
  2. No project labels
  3. No resumé / CV

My advice? Don’t build websites using Flash.

Leo Burnett website

Have you seen a 100% Flash-based portfolio that works? Take the Leo Burnett website, for instance. Very clever, but do you need a big reputation in order to pull it off?

In the comment thread on the LifeClever article, Clark of Pop Wuping adds a further mistake that I completely agree with, neglect. Portfolios should be kept up-to-date. If nothing else, this can highlight a progression of your skills. I often find myself cringing at the standard of past work. I reckon I’m not alone.

As for Chanpory’s third mistake (no CV), Seth Godin gives an interesting point of view in his post: Why bother having a resumé?

“Great people shouldn’t have a resumé.

“Here’s why: A resumé is an excuse to reject you. Once you send me your resumé, I can say, ‘Oh, they’re missing this or they’re missing that,’ and boom, you’re out.”

Seth then answers the question, “If I don’t have a resumé, what do I use?”

Worth a read.

Further resources

Are you making any of these mistakes? Do you have some usability tips of your own?

← Older post

Newer post →

61 Comments

  1. One question I’ve always wanted to ask is what a programmer should do for a perfect portfolio to show of his programming skills? Obviously a designer can show off his design skills but whats in if for a developer?

    Currently my own website shows what I’ve done in a few programs but the portfolio still looks like it’s for someone who is selling off their design work…

    does anyone have any ideas??

  2. Hi David!
    How have you been?

    I find Indexhibit to be an excellent system for managing portfolios. It’s lightweight, flexible, easy to use and straight to the point. I’ve only done some minor changes to mine — it’s almost out of the box: http://asgeirhoem.no/exhibit/ (I hope it’s alright that I post it)

    Cheers,
    Asgeir

  3. Tom Johnson

    Chris-

    Hey now, this is a “brainstorming session” so don’t go all hyper-critical on my ideas. They’re all valid and may spark some ideas for you to chase around. I visited your site and have some thoughts:

    How about showing some screen captures of the actual code?
    You could show it side by side with the final design. You may have done this in the second example on your websites page…?

    You could add testimonials from real live customers.

    You could add a manifesto-mission statement-credo-philosophy that speaks directly to your target demographic.

    I’m not sure “inventory” helps your cause if you feel that your “portfolio still looks like it’s for someone who is selling off their design work…”
    Maybe change the name of that section and change the rollover labels to show a testimonial from the client for each one.

    What is your unique selling proposition? What can Chris Vincents do for me that I can’t get for cheaper? Why would I want a website like the new construction outsourcing company hired you for? What is the benefit to me me me me me me me. It’s all about me you know?

    Maybe you should search for local small businesses, visit their websites, and then call them or drop by to ask them some questions about their website. Why on earth did you choose blinking neon green type? What features is your site missing? Do you want it to be a flyer or a time saver for your business? Would features like x, y and z that I provide be useful for your business? How much would you pay for that? If I did x for you could you recommend me to some other people?

    Hope this helps jump-start your thought process!

  4. I really appreciate this post, as I’m beginning to flesh out my own portfolio now that I’m getting some good things to place in it. I personally despise automatically playing music, and i feel, like you do, that Flash has its place. Especially for professional photographers where it helps stop piracy and protects their copyrights better. I’m not sure why, but I see a lot of web designers that constantly bash Flash, and then a lot of designers/photographers living off Flash. I’m not sre why this is. I generally only do XHTML/CSS, but if a project could benefit from some flash on the site, I would add it.

  5. Chris, what do you think of Tom’s response?

    Asgeir, I’ve been well thanks. You? I don’t mind you posting a link at all. It’s good to have some examples here, especially as I’m unfamiliar with Indexhibit.

    Tom, good of you to answer. I agree about the ‘inventory’. It can mislead for those looking for portfolios. Testimonials also help, I agree.

    Zach, it seems that many photographers favour Flash-based portfolios (in my experience). Glad this post came at a good time.

  6. I just read that article yesterday so a coincidence you posted it here too. I use those thumbnails on in my portfolio but they are 125x125pixels so I wonder how that stacks up with navigating portfolios? Is it ok if the thumbnails are big enough?

    I really hate those peek a boo portfolios and I love the ones where you can see every thing on one page, quick simple and easy to view all the work at once. You The Designer had a great post on how to create an awesome portfolio page

    Now that I think about it I need to make a USP too.

  7. Just finishing school, I designed my website with contacting me in mind. I DID use flash, but I figured that was a good move since there isn’t as much web design in my portfolio, but I am comfortable with it.

    And of course, no background music – nothing bugs me more, so I figure other people feel similar.

    Excellent tips.

  8. I don’t like Flash-based portfolios because you can’t bookmark the page you like for later reference or to send to someone. I think that’s one of the points Kyle made in his post on Astheria, too. And portfolios shouldn’t experiment too much with navigation. The Leo Burnett site is cool, but only if you have time to explore it. If you just want to get in, see their style and get out, you can’t. I suppose if a design firm is that big, though, everyone knows their work and they really just need to impress the newbies with their Flash.

    As for developer portfolios, I don’t think screenshots work and neither do code samples (most people won’t understand it anyway). Link directly to the site and tell the potential client to see how the site functions, that everything is working as it should, and maybe point out a nifty thing it can do (like a really cool CMS, advanced search or something). And I wouldn’t show partially completed projects (no matter if you are a developer or designer). All it does is make the viewer wonder why you never followed through.

  9. Valentino

    I don’t mind a Flash site. But Leo Burnett’s site resized my browser. And that’s an instant turn-off for me. So I never got to look at it.

  10. Problem with showing off code from a developer is that people have the chance of copying and using it within their own name, though that’s the same with everything on the net currently. In my situation the second website (once it’s live) will be a perfect place for those devs looking for a dev will be able to find that i have somewhat skill. I might also provide source for the current programming items as well…

    One thing I am happy about is that I my own eyes I’ve been able to cover the list of necessities in a portfolio… though feel free to correct my biased view of my portfolio

    @Tim & LaurenMarie
    Thanks for the tips…. some i’ll have to think about…

  11. David,
    Thanks for the link. There are so many great portfolio sites around that I really enjoy just looking around sometimes. I think a portfolio site should truly represent what you do. Graphic designers will be judged by the quality of graphics used on their own portfolio. Thanks for the article.

  12. Along with the posts on Coroflot’s Creative Seeds, Six Things To Never Do and Six Things You ALWAYS Do, this post and all the links included in comments… I can’t see how anyone can go wrong!

    I’ve always held the opinion that simplest is best. Not necessarily minimalism… but the easier it is to navigate and view, the happier I am. Nothing is more frustrating than a portfolio that has hidden links, or embedded links in pictures or any other bologna. Clear, direct, easy-to-navigate = awesome.

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

    However one mistake most people try to do is, for a portfolio site to do everything! I always belief your online portfolio should be a taster of your abilities, as the trick is to get the interested party to CALL you for your full portfolio or for a meeting.

    Never rely on anyone, online or off to sell you. You should sell you, as you know yourself best. You do, don’t you?

  14. Hi David,

    I recently launched my portfolio site and I used a template for designers and photographers that don’t know code. Basically, the template consisted of a frame for each page…giving me the option to fill it with color, images, text, links. The template also came with flash, but unless flash is really bringing something to the table, I’d rather do without. Honestly, the greatest thing about the template is that I can update my portfolio section in seconds. This is great because you never know when you are going to want to rework something or upload new pieces. There are a few downsides to this template, but for my current needs it works just fine.

    As far as the phone number issue: I have found that if I place my number as a GIF instead of live text on a page that solicitors don’t call.

    I’d be curious to hear how people are presenting their portfolio once they are at an interview. Are we still showing up with the big black books full of printed pieces? I have been doing a bit of both. I show up with my favorite printed pieces and walk the CD through my online website.

    I think a portfolio website should contain not just your resume, contact, and work, but it should also give a little visual narrative about who you are as a designer.

    -Calie

  15. Steve O

    All good points to consider. I’m guilty of using ‘abstract’ thumbnails in the past myself!

    What do you think about presenting your email? Should it be a direct link, risking tons of spam? Or is it OK to display it using the ‘username AT domain DOT com’ format? Does that cause more problems than the spam? How about using a simple form with a security question?

  16. I only re-did my own portfolio site a short while ago and it’s very difficult designing for myself. I don’t feel I’m too guilty of any of the mistakes though. I do actually find it hard to get any feedback on my portfolio site however.
    Any recommendations for a site where I could receive intelligent feedback which isn’t, like most design forums seem to be, populated by 16 year old “web designers”?

  17. Jacob, where thumbnails are concerned, I think they work fine for your logo projects. When you get to the print work, however, it becomes a guessing game with a few.

    Marc, I had a look at your portfolio. One thing I’d say is that there’s no indication of how many projects you include. Visitors can’t choose a particular project or style and are forced to skip through one-by-one. So you need to take extra care to showcase your best work towards the beginning of the showreel, where it’s more likely to be seen. Do you have any way of tracking how many ‘next’ clicks a user will make before leaving? That’s a vital statistic in your case.

    Lauren, great point about the inability to bookmark a set page. As for the Leo Burnett website, you’re spot on how you can’t get in, take a quick look, then leave. It’s one that takes time to explore.

    Valentino, it resized my browser too. Not a good move.

    Chris, the plagiarism issue certainly applies to coders more than most. If someone really wants your code, couldn’t they just do it from the actual site linked to in your portfolio? It’s a tough one, and if you find a way around it I’d love to know.

    Gabriel, excellent Coroflot links. I’ll read them in depth when I have more time.

    DT, I’m of the same opinion — your portfolio should show a taster. You don’t want to overwhelm, and in most cases there are projects you want to highlight. Yes, I know we’re the ones responsible for selling ourselves. It’d be foolish to leave it up to someone else, unless you’ve hired a salesperson. ;) There’s a thin line between selling and an over-selling. Few things put me off more than a pushy sales pitch.

    Calie, did you get solicitors calling you after publishing your number online? Were they pushing a hard sell? I notice you also use an image, as opposed to text, for your email address. From experience this can help lower spam, but it’s not ideal for those who want to copy and paste. Yours is quite an easy one to remember though. I completely agree that your portfolio should include some of your personality. That’s the beauty of publishing a blog. Have you found that using a blog and a static site works well?

    Steve, good question about email presentation — one that Calie gets around by using a GIF image. Forms aren’t immune to spam either, so it’s not easy to give a definitive answer. In my contact form I have a ‘spam question’ at the end, which makes it more difficult for robots, and I also substitute the @ symbol for (at). Spammers have probably got around this already, but levels aren’t so bad, and I figure it’s near impossible to banish. Do you have any tips?

    Rich, have you tried the HOW design forum? There’s a section for ‘critiques’, and if you give plenty of background info on your rationale, you’re almost sure to get valuable feedback.

  18. Steve O

    David, I look into email protection from time to time, although most of the information is out of date by the time I read it! I have just done another search and found some useful tips and code solutions. I’m wondering whether to post them here or leave it for a blog entry – maybe as a guest on Just Creative eh?

  19. Interesting. I’ve had my mobile number in live text on my website for over a year and I’ve got some of my best clients this way. I think some people prefer an initial chat.

    I’ve obviously been lucky as I’ve had no negative experiences. Only one, there’s a UK scam: a 087* number calls you and quickly hangs up, it’s a premium rate number and if you call back you’ll have to pay. To get round this you can Google the number and find this website – http://whocallsme.com/ – that has a database of scam numbers so you know not to call back.

    So for me the phone number is OK.

    As far as my old-fashioned portfolio is concerned, it’s gathering dust in the cupboard. And, for me, resumes are less important these days. I like to direct people to my online portfolio and website as that is the best representation of what I do. For me, non-flash ones are better for SEO and don’t run the risk of annoying people!

  20. Steve, if you feel the content discovered would better suit a guest post, go for it. Either way, I’m interested to know. When do you think you’ll have your own site up and running?

    Rob, I’ve not heard of that scam before. I’ll watch-out, thanks. Another is leaving your bluetooth enabled when not using it. Other people (if nearby in a public place) can use your phone to call their premium rate numbers. The ‘whocallsme.com’ site sounds great. I agree that traditional CVs are a little less important today. In my case one’s not really needed.

  21. It took me a long time (and many attempts) before I finally nailed my own portfolio. My biggest problem was trying to impress people. When I finally realized that my online presence should be a reflection of “me” I began to build around that, implementing a layout that showed my own personality and character. I believe portfolios should relate something about the person whose work is being displayed. The Web is filled with countless sites of this nature, which is the number one reason why you should strive to be original.

  22. Steve O

    Ah, now you made me feel guilty, lol.

    Here’s the links I came across that seemed the most informative:
    ONE, TWO, THREE, FOUR

    For the moment I’m putting work into a Coroflot portfolio here (for job applications) but I hope to have a new domain chosen soon. My name is already gone so I’m looking at alternatives. The favourite so far is stevethedesignerDOTcom. I won’t be blogging though! Not for a while anyway.

  23. Hi David,

    I just found an interesting place for portfolios. On our business card.
    Is there anyone who has experience with cd / dvd business cards?
    They look quite impressive although I’m not sure if fore example an iMac can handle them. I’ve just posted a few words about it on my blog. Please let me know what do you think.

  24. Steve O

    CD / DVD business cards were all the rage a few years ago Szabi. Problems such as taking up to much room in a wallet (thicker than a regular card) and getting scratched unless it was in a separate plastic wallet made it a fad rather than an exciting extra.

  25. Doug, it took me a long time to arrive at what I have. There’s no doubt the format will change again. Like you, I feel your portfolio should tell a story.

    Steve, that’s a shame about the domain. I think mine would’ve already gone, too, had I not got in first. From time-to-time I’ll try creating new profiles online, only to find another David Airey has beat me to it.

    Your stevethedesigner.com idea reminds me of davidthedesigner.com. I’ve been following David’s blog ever since I started my own. Thanks very much for linking to those articles. Some top tips.

    Szabi, as Steve pointed out, the CD cards seemed superb at the time, but I’d not recommend using them as your only card option. Will stop by your blog now.

  26. Hi Steve,

    Thanks for your answer. It seems I really missed something here :) That’s because a few years ago I wasn’t thinking of business cards. I ordered a sample to have a look. You make a good point with the thickness that probably I don’t want to run around with 50 CDs in my pocket and that would be the point of the business card.

  27. Hi David,

    Definitely can not replace the paper/plastic/metal cards. I’ve already prepared the design and looking for a good printer, because I need some cards by the end of this month, that’s how I came across these ones. Have you used any online printing services? Which one would you recommend?

  28. Szabi,

    Here’s a blog post with my own card, and recommendation for printers:

    Personal business card

    Splash Print aren’t too far from you. Closer to Newcastle than Edinburgh anyhow.

  29. Hi David

    Very valuble points ! Yes it sounds pretty obviuos , but lof of us do the kind of mistakes that you have mentioned . I have resently upadted how my portfolio’s look and feel . Can you give some feed back on it ?

    http://www.onecreations.com/insidepages/Portfolio/portfolio.asp

    Thanks David !

  30. Steve O

    David, it is a shame about my name being gone. When I first had my own domain (a few years ago now) I was going under an ‘unusual’ studio style name. Bloody awful really, lol. I forgot about David – I’ve read his blog a few times linked from Noisy Decent Graphics. I’m sure there’s room for me too. I did try other options (I liked DesignBySteve) but they were all gone too. Serves me right for having the Irish equivalent of John Smith!

    Great personal cards btw.

  31. Julian,

    I like how you provide additional info on your web design projects. All too often I see portfolios that offer a link, and a picture, but little else. It’s all very well if a design looks nice, but whether it answers the initial brief is an important question.

    What’s the idea behind the painted hands header image? For me, it detracts too much from your logo, which should ideally be the first thing visitors look at. Had you tried any different headers?

    Steve,

    I’m sure there’s room for you aswell. Shame about the personal name, but maybe it’ll become available sometime soon?

  32. Hi David,

    I only received a few solicitors after publishing my number online…they were the pre-taped messages and were very annoying. The email address is an image simply because I liked the way it looked. I have a real link for my email on my blog and do receive a decent amount of spam. Mostly from “Dear One, Will you deposit money in to your account for me”. Luckily, my spam folder catches most of those.

    As for my blog, I have found it to be an incredible place to connect with people (clients and designers). I have also found it to be a wonderful way to archive imagery and ideas that I am currently fascinated with. Honestly, I blog because I enjoy it…not really a goal driven endeavor.

    Your blog is great, I love the wealth of relevant information and ideas!

    Have a great day,
    Calie

  33. David!
    Standards people actually abhor flash sites, as its not universally friendly. I do find the content glamorous but better to be be a little anal and stick with xhtml is what I say. While on the topic, Read what Ben Henick and Regnard Kreisler have to say on both ends of the spectrum.

    For a portfolio, a downloadable resume and/or a proposal (RFP) is a must. Clarity over style anyday. I actually ask my 10 year old son what he thinks. And I never tell him what the page actually is. One should always critique their site with average people who are not graphic artists, designers or anything to do with media. You just may be surprised. :)

    Most important, does your design hold up when I press “CTRL ++” keys to enlarge fonts? I am comfortable with larger fonts despite having 20/20 vision, and your clients may be that way too.. If the design breaks, would I hire you as a designer at all?Hmmmm… Now this is something that flash sites just dont offer.. [font size change..]

    Secondly, have you considered tools such as Jaxtr instead of a phone number?

    Thats about as much as I can think of now David! Keep up the conversations as usual :)

  34. Calie,

    Glad to know you’ve found your blog of such use, and I hope your day is / was equally great!

    Hi Lakshmi,

    Thanks very much for those article links. There seems to be good discussion too, which I’ll read asap. You know, I’ve not come across Jaxtr before. Certainly worth considering.

  35. Awesome right up and some good information! I just re-did my portfolio, perhaps I should do it again? lol

  36. I’m pretty amazed how often people still forget to make them easy to contact. If I have to research several artists (and who wouldn’t?) I don’t want to spend 10 minutes to find a way to contact them.

    In terms of graphic design I think your prior education doesn’t matter much because the portfolio is what matters.

  37. Sean,

    A quick tip is that it’s not very clear in your header that you’re a graphic designer. The ‘G’ and ‘D’ are visible, but not the rest of the text. Hope all’s well with you.

    Jay,

    I get frustrated sometimes with websites that don’t make it obvious how to contact the owner / author etc. There’s little with as much importance.

  38. Cool, thanks for the advice David. I can’t believe I didn’t notice that haha. It’s time for a new header anyways, that green is kind of bothering me lol.

  39. Hi David, I’m a fan of your designs and I’ve been reading some of your articles. I find you to be a great inspiration. I found this article to be very useful to me as I’ve just started a portfolio site. I’m inexperienced though and I found it challenging to have everything on the site exactly how I want it. After reading, I realized my thumbnails are surprising and I am hiding my contact info and my logo needs to be fixed (resizing issue). My site is meant more for future employers than clients because I’m looking for a job. if you could take a few secs to check it out and tell me if I made any bad choices, I’d be really happy.

    Looking forward to seeing your upcoming logos :)

  40. No worries, Sean.

    Tif,

    Thanks for reading a few of my articles. I can 100% empathise with frustration at not having your portfolio exactly as you want. There are always changes I want to make, but sometimes I just have to draw the line and work on more pressing matters. Having looked at your portfolio, it’s not easy making out your thumbnails, so when I click to view, I’m guessing at what’s coming next. That said, I love your drawings and paintings. You’re very creative. :)

  41. Hi David, thanks for your reply. I graduated last year and can’t even get a job. I don’t know why. I live in a metropolitan city with a LOT of graphic designers everywhere! If I still can’t find a job by Christmas, I’m afraid what I will have to do. I wonder how many graphic designers has had to change careers. Anyways, thanks for visiting my site!

  42. @Tif I love that Mixed Messages piece! That’s awesome! You have some great work in your portfolio; I’m surprised you haven’t been able to get a job! It’s cute the way you’ve worked the .tif into everything. Very creative. Have you considered doing freelance? It might be the way to go if you can’t get a corporate or agency gig. Don’t give up! You may have to hustle a bit at the beginning, but it would be a shame to waste your talents.

  43. Tif,

    Some wise words from Lauren. Going solo is certainly an option, and it’d be a real shame to give up on your talents for a non-creative role.

  44. Hi David, yes I think it will be a shame if I have to change careers…I hope it will not come to that. There’s not a lot of job’s I can apply to because they’re all looking for 2+ yrs experience…and then when they see I only did an internship.. Gah..can be frustrating…

    Hi Lauren, Thanks for checking out my portfolio! I think my resume is the problem..I will try to make it more appealing. I saw your site, and your resume is very consistent and to the point. Gosh, I guess I need to market myself better…they never taught me that in school. Love your photo portrait btw!

    *gets back to frowning at her resume*

  45. Tif,

    If you think I can help in any way, just let me know.

    Bye for now.

  46. Thanks David, your site already helps me a lot. I find your site to be very inspiring and makes me want to push myself harder. I guess I just haven’t been lucky at landing a job. Anyhow, I will keep reading your articles…and let you know in a year if I’ve landed a job or not. :)

  47. I’m forever playing around with different styles of online portfolio. I’ve attempted Flash and had a go at the minimalist Indexhibit look, but (for now) I’ve recently settled on a blog with a portfolio page.

    As well as showcasing my work, I can express my own personality and show my interests and influences. On TypePad there’s only so much behind-the-scenes stuff I can do, meaning I can spend more time on the content and less time CSS-wrangling (something that took up a LOT of time when I used WordPress or Indexhibit). Plus feedback from peers is always good, offering fresh perspective on my work.

    It’s nowhere near as detailed as your site David, but it’s a start! Any opinions would be welcome.

  48. Danny,

    I think you’re on the right track with the simple, easy-to-read approach, and enjoyed looking through your portfolio.

    I’ve never used TypePad, so am not clued in on the capabilities, but if there’s any way to add a ‘subscribe to comments’ option, it’d be a plus. I see you highlight the RSS comments feed, which is an alternative, though not as efficient in my opinion.

    When I first visited your site, I half expected an image of some sort to appear near the top. There’s quite a large gap between your title and where the content starts, I thought something was missing.

    Thanks very much for your recent feature of my own site! That was kind of you.

  49. Thanks for the critique! Fresh pair of eyes always good.

    I’ve added an RSS subscription button now – it’s something I overlooked because I never really use RSS feeds myself, but realise it’s a good way to keep hold of repeat-visitors.

    Appreciate your comment about the header. I may have gone a little too minimal there, and the white-space is actually disrupting the flow.

  50. No worries, Daniel.

    Nice work adding an RSS icon. I recommend using a third party feed supplier, such as FeedBurner. It saved me when my domain was stolen last year, because my subscribers were kept separate, so I could inform them of my circumstances. There are also some nifty stats and features supplied.

Leave a Reply