Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Retiring The Portfolio Screenshot

The humble screengrab, staple component of a million personal and agency portfolios, can now retire with thanks for years of sterling service showing snippets of work done for a particular client or project. The screengrab always reflected a mythical state in time where the website looked just as the designer intended it, not how it typically ends up after a week or two when the client has been adding their own ad banners, stock photos of business people shaking hands or several poorly worded press releases.

A screengrab of Daniel Mall's work on the Crayola website at Big Spaceship.1
Image source: Daniel Mall2.

As designers and developers, we spend a great deal of time and effort getting a project just right for a client, yet often we don’t do it justice when we display the extent of our involvement and the various component parts that go into the whole thing. So many personal and agency portfolios simply display a couple of screen grabs of a project along with a few hazy bullet points saying things like “HTML & CSS”; or “WordPress CMS development.”

Further Reading on SmashingMag:

These tell us very little about the effort that’s gone into a project and aren’t really very helpful to visitors who might be looking to your portfolio with a view to working with you on a project.

It’s great to see this trend is slowly changing and we’re seeing some more detail and resources being made available for us, so we can read about and learn from that were probably unthinkable even a few years ago.

“We learn more from studying the thought behind the design vs just the visual design.”

Jason Vanlue7

New Opportunities for Design Link

Opting for a more detailed approach to displaying your work opens the door to a more creative approach to your portfolio.

In our ongoing update to our own website, we’ve made the decision to focus on fewer projects and instead create custom designed case studies for each, because not only do we enjoy sharing the details of a project itself, typically over time we’ve found we also write several blog posts with varying bits of information, from design process to development methods and code, along with assorted business methods or techniques we’ve found productive and useful, and creating a richer case study shows our skills and experiences better.

All of this combines to create a much richer story of a project, in addition to the opportunity to customize a design to tell that story in a way that’s interesting and engaging. It’s an extra outlet to show your design work.

A Willingness To Be More Open Link

It’s noticeable that more and more agencies (and therefore clients) seem to be open to sharing more background process and actual results of their projects, and the decisions and reasons for some choices. It’s hugely helpful seeing the reasons for a choice, not just the polished end result out of any sort of context.

Many clients these days are showing an active desire to actually share more resources, processes and code. You only need look as far as GitHub for countless frameworks and development guidelines that are entirely open to the public to learn from.

A great example is the new Gov.uk8 website here in the UK, that has been developed in public and backed by regular blog updates and feedback9, released to anyone who wishes to find out more about how the website has been designed and developed.

The Role Of The Front-End Developer Link

Over the last few years, there’s been a significant increase in the prominence of the “front end developer,” and while I’m not discussing the specifics of what that role does and does not entail, in my experience it does often (to me at least) involve significant JavaScript development, and it’s something that words and a screenshot don’t really convey well.

Replacing these screenshot-based projects with live, interactive demos is a great way to expand a portfolio and show how something works in a real life context.

Hosting work on CodePen10 or jsFiddle11 is a good start, but perhaps consider going the extra couple of steps to design some great interactive demos and show them off like an actual mini product12 instead of just an isolated snippet.

Case Study Detail Link

There are some truly great bits of work out there at the moment and they’re now being backed by ever more detailed case studies instead of screenshots and bullet points. Here are some great ones to read.

The Story of Ramayana by Fantasy Interactive Link

How Fi & OgilvyOne brought an ancient epic to life and launched Chrome in Asia.13
How Fi & OgilvyOne brought an ancient epic to life and launched Chrome in Asia. Image source: Fantasy Interactive14.

An incredibly designed and detailed overview of Fantasy Interactive’s work with Google. It’s great to see detail on how multiple teams and partners work together to pool their skills, resulting in something groundbreaking.

The Thinking Behind the New Link

The design thinking behind the new
The design thinking behind the new Image source: The Fox Is Black16.

As you’d imagine, a high-profile website like has multiple stakeholders and various objectives for its visitors. The blog The Fox Is Black does a great job of explaining not only the outcomes, but just as importantly, the objectives and challenges for the website, which show why many design choices have been made and what the results were.

More Designed Case Studies Link

Technical Case Studies Link

Next time you’re adding a project to your portfolio, perhaps consider writing it up in a bit more detail and turning it into a case study or a code release that fellow designers and developers can learn from, and understand why the result of the project is what it is.

Seen any good case studies recently? let me know at @welcomebrand27 or leave a comment.

(cp) (jc)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27

↑ Back to top Tweet itShare on Facebook

James Young is a Creative Director at Offroadcode and a freelance designer and front-end developer based in Huddersfield, Yorkshire who works with a wide range of clients around the world. You can follow him on Twitter.

  1. 1

    I’d be interested in seeing case study examples that aren’t for huge brands. Most smaller and lower budget projects follow similar processes, so it’s difficult to create unique case studies from each of them.

    But this is a good write-up nonetheless. I think most importantly designers and developers need to share what was accomplished with their work. For example, did the client generate 15% more leads? Did traffic increase two-fold? Results are what people care about.

    • 2

      This is an issue I see as well, especially for freelancer’s or small agencies. You might work on a couple really small sites for contractors, mom & pop shops, consultants etc. None of which are particularly exciting or probably that different from each other. Sure it’s great when you’re FI and work with Google but for most of us this is not the case.

    • 3

      Andrew Richardson

      November 7, 2012 1:02 am

      I agree here and wanted to add that sometimes it’s a matter of ROI on case studies. Is it worth investing a month into building a single page around a case study when I can use screenshots and copy to tell a similar story and get the point across now rather than in a month?

      Then there’s the issue of just not having projects that can support this kind of display, most freelance projects cannot support a case study like the ones shown in this article. How do we show value in what we are doing while balancing our investment into it?

    • 4

      Frank Neulichedl

      November 7, 2012 10:39 am

      Exactly … and the numbers are really difficult to get. How do you measure it in a way that makes sense – from a client business perspective. Just more visits are not always the right thing – and for building a real case study you should start your project already with the concept of the case study in mind.

  2. 5

    Frank Neulichedl

    November 6, 2012 4:55 pm

    Interesting article – and I tried to include more behind the scenes in my portfolio presentations, but we have to understand who we are talking to.

    Who are your clients – if you are a freelancer working for agencies you can impress them with the process and the evolution of the project.

    If your clients are the average business they will be overwhelmed and they might not understand why they should choose you as a partner.

    Last but not least – the amount of time put into these case studies. There is in my opinion a minimum amount of projects you need to present to show your versatility and that you have the experience to deliver what you promise. This amount might vary – depending on your business, but many designers already have trouble get the enough projects on their websites, let alone doing a custom design for it.

    I’m not advocating to settle for the average, but sometimes a simple client list makes more impression than an elaborate portfolio showcase.

  3. 6

    Great tips and ideas. Working on a redesign of my portfolio now, so this will definitely be the tactic I take.

  4. 7

    This is an interesting perspective, but I tend to disagree on slimming down on the screenshots. From a new customer perspective, they’re surfing the web in search of designs/trends they like and would be most fitting for their website. Without the screenshots, they’re going to skip over the text-heavy descriptions and move to a site that has website samples.

    • 8

      Great point. Not every potential client wants to spend 5 minutes reading a case study.

  5. 9

    I have always thought the portfolio is a stupid concept full stop. Now I know there are many people in the world who will say why would somebody hire you if they can’t see what you’re capable of. Well I argue that you don’t want me for what I WAS capable of, you want me for what I can GIVE you now.

    Portfolios are dumb and tell you nothing, particularly if you’re an individual who worked on a project as part of a bigger team (i.e. most of us). This is why you will never see a portfolio on my site, but I do occasionally write and link off to things I have worked on.

    • 10

      Sorry, but that really does not make alot of sense. One of the great things about being a designer is that your work is much more tangible than many other industries – to the point where it makes it easier for prospective clients / employers to see what you’re capable of.

    • 11

      I am an art director and I’m here to tell you that you will never get a job without a portfolio. On top of that, you will never even get an interview.

  6. 12

    Sure, case studies are great to look at but they also require a copywriter — something not every agency has on staff.

    Obviously, a small agency can hire a freelance writer to help with the copy but how many designers do you know that excel at writing copy? I wish I could convince the agency I work for to do case studies for each and every individual project but that likely wont happen due to budget constraints.

    Now, from a designer’s standpoint — I disagree with going far in-depth with Case Studies on your portfolio. The main purpose of your portfolio is to clearly show your best work and get a job. As someone who has done agency hiring and has reviewed 1000’s of portfolios, I must say that the most annoying thing to do when viewing a designer’s portfolio is having to dig through crap to view the work. If the work looks good, I will dig deeper. If not, on to the next resumé.

  7. 13

    If I had Disney and Google for clients I would probably include a whole bunch more than just a screenshot and some bullet points too. It’s always a good idea to give some context and insight to the strategy you provided. But even CNN has a TLDR at the top of an article.

  8. 14

    Russell Bishop

    November 7, 2012 12:35 am

    So going against your title, what you’d like to see is the death of ‘just’ the portfolio screenshot.

  9. 15

    I’m inclined to do both. A portfolio for projects that don’t justify in-depth case studies, and for those that do, a link from the portfolio screenshot to the case study.

  10. 16

    Darren Azzopardi

    November 7, 2012 1:35 am

    There shouldn’t be a problem here. Those who want to present screen shot grabs of their work, then simply do it. Get the users attention with a beautiful screen shot along with providing them with a choice to view a case study or not-it’s not about having one or the other. It’s about providing the content when they demand it.

    For those who are complaining about getting a copy writer on board or even not wanting to do it because they’re rubbish. If it’s truly important to you then you’ll do it. Yes it could be a rubbish read but guess what? That’s how you get better.

  11. 17


    November 7, 2012 4:32 am

    This is a great way to show clients, fellow artists and developers how a project goes. I really love the idea. More clients want to get to know your process which give them the idea if you’re the kind of person or company that they want to work with.

  12. 18

    James. This. Was. Great!

  13. 19

    Rizky Syazuli

    November 7, 2012 7:05 am

    What’s with all the pessimism and negativity? I agree you can’t make a case study for all your portfolio. but you *shouldn’t* have to anyway. Create a case study only for your bigger & challenging projects. The rest of it? You can stick with the screenshots.

    Just take the ideas on this article, and combine it with your own system. Don’t swallow it all.

  14. 20

    A really great article man, I likethe Ramayana case study most.
    Also I would like to add a nice case study to this article:

  15. 21

    We’ve been using this approach to presenting our projects in the newest incarnation of our website, and it’s been great so far. People seem to enjoy reading about our process and the quality of the leads we get from the website has improved dramatically.

    One draws back I can point out is the fact that these portfolio pieces take up quite more time to produce, compared to the traditional approach of slapping a couple of of screenshots together and calling it a day. That’s why I think this approach will be slowly welcomed — if at all — to a busy freelancer’s website.

  16. 22

    All this talk of willingness to be more open about process — why not show some price tags?

    After all, the costs associated with each step of these luxuriously documented projects is just as relevant to prospective clients? Why be coy about it?

    Or am I the only one who has clients that would ask “How much did all those fancy diagrams cost me?”

  17. 23

    Yuriy Babenko

    November 7, 2012 7:53 pm

    For the last few years I’ve been doing a small ‘hybrid’ between a standard, screenshot-based portfolio and a case study. I’ll put up a few large screenshots, and write a paragraph or two of what I was responsible for in the project, highlighting any interesting or unique functionality; many clients have given me positive feedback about this approach.

  18. 24

    Victoria Merriman

    November 7, 2012 11:02 pm

    Great article! I have to say though, I find it a bit bizarre that many agencies have gone so far the other direction and don’t show *any* imagery of their work.

    The web is most conducive to telling stories visually and with minimal text (let’s face it, people probably won’t read it all anyway). We have kept our portfolio more focused on screenshots and lighter on text, and guess what? People tell us all the time how much they like it, and how user-friendly it is. The largest client we’ve ever had got in touch when they stumbled across our site by accident and loved our portfolio.

    We see the portfolio as a place where prospective clients can get an initial taste of what our work is like and encourage them to get in touch. Once they do, *then* we send a series of hand-picked case studies, along with client testimonials and references, for projects similar to theirs.

  19. 25

    I just have to say this: I STRONGLY DISLIKE those “smashing side notes.” I would much rather see a banner ad than this “Oops, you thought this was part of the article, haha!” promotion. Because I start to read it every. single. time. It’s really annoying; just another form of bad user experience.

  20. 26

    I do not feel that there is the vision here to preach the law on web design. ‘Preaching’ can only be done if you have oversight and authority. Saying that portfolio screenshots are always wrong is plain stupid, and probably done for the reasons of generating traffic and discussion.

    It makes me feel a little used, to be lured in to an article by means of it being such an obvious attention-hook. I do enjoy reading Smashing Magazine and believe I would still read the article if it said “The benefits of a detailed portfolio option”.

  21. 27

    Ivelin Belchev

    November 8, 2012 2:32 pm

    Good point. The current redesign of my agency’s website focuses on that exact same thing – case studies, process, etc.

    A bunch of great images as a portfolio only shows that you’re a great template designer (or not). Nowadays clients should know they’re really looking for more than that when they hire an agency.

    A sneak peek into the yet unfinished thing, for anybody interested:

  22. 28

    I really like the idea behind this, I have very short descriptions in my portfolio, they are more than a bulleted list but only just. I wasn’t sure what else to do really but this article has given me a few ideas, thank you!

  23. 29

    As an agency leader I’ve definitely given writing in more detail about our displayed work lots of thought but there are always some areas where you do not want to give away client strategy even though it may help explain the work and help attract business. Striking a balance is key and I think that if anyone can explain work without giving away anything detrimental to their clients that more info is excellent. I hope to see more of it happen, even at my own agency!

  24. 30

    This is meant for a designer who has seen it all. Clients do not wanna see this. You show them this and you will loose the lead. Is this cool? Yes. Do you make money if you show this? No. I think when you are looking for a designer you need to show “samples”..period.

  25. 31

    children table

    November 12, 2012 8:50 pm

    I do trust all the concepts you have offered on your post. They’re very convincing and will certainly work. Nonetheless, the posts are too quick for starters. Could you please lengthen them a little from next time? Thanks for the post.

  26. 32

    Interesting take. Having been on both sides, client and agency, I’ve seen problems with involved case studies. As a client, I didn’t want to read about design, I wanted to see design. As an agency, they take a long time to create, are not billable, and are out of date very quickly. Process is generally boring for clients, and truth be told, most agencies use a variation of the same process. I’ve also found it’s something that is better explained after initial contact is made where you can provide context that is relevant to the prospective project, and not the last project you did.

    One thing that is missing in the discussion is the value of talking to clients. You are always going to have a better chance of landing a client if you talk to them on the phone, or better yet, in person. I think portfolios are the hook, which hopefully convinces the clients to contact you. It’s finding the balance, but I would err on the side of images over words. If you are relying on your case studies to convince someone that you are the right fit for their project, you have already lost the battle.

  27. 33

    I really disagree. In my experience, case studies and their ilk are, at best, masturbatory and self-important. At worst, they paint an unrealistic picture of what the process was actually like. I’ve yet to see a case study where an agency said, “The client was indecisive and difficult. The review meetings were several hours long and extremely frustrating. We were ultimately unhappy with the final product.”

    Post your work. Say the name of the project, what your role was, and get out. If you need to write a sentence or two to help people understand just what it is they’re looking at, go for it. That’s it. Let your work do the talking. In all likelihood, no one is going to read your thoroughly complimentary case study anyway. They’ve read enough of them to know they’re usually BS.

    You’re an artist. Post art and quit blowing smoke.


↑ Back to top