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.
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.” 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.”
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 studies4 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.uk5 website here in the UK, that has been developed in public and backed by regular blog updates and feedback6, 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
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 CodePen7 or jsFiddle8 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 product9 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
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 Disney.com Link
As you’d imagine, a high-profile website like Disney.com 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
- Fantasy Interactive’s full range of case studies14
- Daniel Mall’s Crayola.com case study15
- Puma redesign by Viget16
- Behind the scenes with Circle App17
- FreeAgent redesign18
- The all new Squarespace19
Technical Case Studies Link
- The story of the new Microsoft homepage20
- Matt Berridge’s extensive write-up of a recent NHS project21
- David Bushell’s write-up of the Passenger Focus website rebuild22
- Andy Clarke’s redesign of the International Organization for Standardization website23
- Trello’s tech stack24
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.
- 1 http://danielmall.com/work/crayola/
- 2 http://danielmall.com/work/crayola/
- 3 https://twitter.com/jasonvanlue/status/253202763905921025
- 4 http://offroadcode.com/prototypes/2012/case-studies.html
- 5 http://gov.uk
- 6 http://digital.cabinetoffice.gov.uk/
- 7 http://codepen.io/
- 8 http://jsfiddle.net
- 9 http://daneden.me/animate/
- 10 http://www.f-i.com/google/ramayana/
- 11 http://www.f-i.com/google/ramayana/
- 12 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
- 13 http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
- 14 http://www.f-i.com/work/all
- 15 http://danielmall.com/work/crayola/
- 16 http://viget.com/work/puma
- 17 http://discovercircle.com/design
- 18 http://www.freeagent.com/l/redesign
- 19 http://www.squarespace.com/
- 20 http://rainypixels.com/words/the-story-of-the-new-microsoft-com/
- 21 http://builtbyboon.com/blog/responsive-design-case-study
- 22 http://dbushell.com/2012/06/17/passenger-focus-responsive-web-design-case-study/
- 23 http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso
- 24 http://blog.fogcreek.com/the-trello-tech-stack/
- 25 http://twitter.com/welcomebrand
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.