Portfolio websites are critical for designers who want to get exposure for their work and attract new clients. While all portfolio sites will showcase the work of the designer, some have chosen to provide additional information about the project through case studies.
In this post we will be featuring more than 30 portfolio sites to show how they are using case studies from their own design projects to communicate with potential clients. Not all of them are referred to as “case studies” on the site, but all provide much more information than just giving a screenshot with the client’s name.
If you are considering ways to make your existing work more relevant or appealing to visitors who may be potential clients, providing case studies is one option. Take a look at the sites featured here and you may come up with some ideas of how they could be used on your own site.
You may also be interested in the following related posts:
- My (Simple) Workflow To Design And Develop A Portfolio Website1
- Portfolio Web Design Showcases2
- 30 Fresh and Inspirational Portfolios With A Twist3
- 10 Steps To The Perfect Portfolio Website4
Common Features in Case Studies Link
As you browse through the sites that are featured in this post, you may notice that many of them include the following:
While all design portfolios will include screenshots or images to display the work, many sites that use case studies to provide detailed information about the project will also include several screenshots instead of just one.
Client background information
The purpose of the case study is to put the design project into context and to show how it works in a real world situation, as opposed to showing only how the final product looks. Part of the context is the particular situation of the client, therefore, many cases studies will include some basic information about the client, what they do, and what they wanted from the designer.
The project overview or description will allow visitors to the portfolio to get some additional information about the project and may help them to understand what was accomplished. Some cases studies, as you will see below, will go a step further and even define the problem or challenge, as well as the solution that was accomplished with the design.
Listing of specific services provided
Many case studies will include the details of services that were performed as part of the project by the designer or agency. This is especially useful when multiple parties have worked together to complete the end result. Without knowing who is responsible for what part of the project it can be difficult to assess the work that was done.
Another element that is often found as part of the case study is a quote or testimonial from the client. In many cases they are brief testimonials, and in some cases they give more detailed information about their experience working with the designer.
Generally, but not always, when case studies are used there will be a separate page on the portfolio site for each case study. When case studies are not used, the “portfolio” or “work” page of the site typically includes images for a number of projects with links to larger versions of the image.
Showcase of Case Studies Link
Instrument’s case studies include several screenshots from the project, basic info like the launch date, and a detailed write up that includes some client information as well as a description of the project. Instrument also lists the specific team members and their role in the project.
Sunrise Design’s portfolio includes multiple screenshots from the project, a detailed summary, a list of services that were provided, and a testimonial from the client.
Anthony J. Zinni20
Anthony J. Zinni shows a large screenshot from each project, details about the client, the project, the studio, and the role. He also includes a brief written description of the project.
45royale’s case studies include some background information on the client and project, a listing of the services that were provided, a testimonial from the client, and a few images in a slider.
DrawingArt gives the details of the project, including the technologies involved and the services provided, along with a brief description. They also show multiple images from the project in a slide show.
The Plant gives informative case studies about their projects. They start by giving details of the problem, followed by a description of the solution. Technologies involved are also listed.
OnWired provides background information and details about the project, plus a listing of the services provided. In addition to showing a screenshot, the initial sketch and wireframe are also displayed (in a slider).
Powerful CMS’ site includes case studies with background information about the client and project, a list of challenges that were faced, and the solution and result. It also includes a testimonial from the client.
Keystone Design Union
Keystone Design Union’s case studies include several images, a description and project information. Some case studies also include a listing of contributors to the project.
- 1 https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portfolio-website/
- 2 https://www.smashingmagazine.com/portfolio-web-design-showcases/
- 3 https://www.smashingmagazine.com/2009/08/30-fresh-and-inspirational-portfolios-with-a-twist/
- 4 https://www.smashingmagazine.com/2009/02/10-steps-to-the-perfect-portfolio-website/
- 5 http://erskinedesign.com/
- 6 http://www.agent8.co.uk/
- 7 http://www.agent8.co.uk/2009/03/21/review-award-winning-salons/
- 8 http://www.ihookcreative.com/
- 9 http://www.ihookcreative.com/the-work/true-dentistry
- 10 http://www.deletelondon.com/
- 11 http://www.deletelondon.com/view/babyliss-pro-website?workFilter=Website;
- 12 http://corporateedge.com/
- 13 http://corporateedge.com/articles/view/1
- 14 http://www.ngenworks.com/
- 15 http://tobiasahlin.com/
- 16 http://www.weareinstrument.com/
- 17 http://www.weareinstrument.com/#/work/bonfire-snow-website
- 18 http://www.flex360.com/
- 19 http://www.flex360.com/portfolio?id=92&page=1
- 20 http://zinnidesign.com/
- 21 http://www.jaredigital.com/
- 22 http://www.mdxinteractive.com/
- 23 http://www.mdxinteractive.com/portfolio/spitfire/
- 24 http://jaradjohnson.com/
- 25 http://www.45royale.com/
- 26 http://www.45royale.com/work/mindzeye-studios/
- 27 http://valendesigns.com/
- 28 http://valendesigns.com/portfolio/psdtuts/
- 29 http://www.drawingart.org/
- 30 http://madebyfudge.com/
- 31 http://www.bkwld.com/
- 32 http://theplant.jp/
- 33 http://onwired.com/
- 34 http://www.energycell.co.uk/
- 35 http://elliotjaystocks.com/
- 36 http://www.powerfulcms.com/
- 37 http://www.powerfulcms.com/case-studies/non-profit-organization-house-design-skills-move-drupal-cms
- 38 http://winnielim.com/
- 39 http://www.ohmedia.ca/
- 40 http://ohmedia.ca/work
- 41 http://www.thisisgrow.com/
- 42 http://www.thisisgrow.com/#/work/selectedwork/sponsors