graphic design case study

• Melanie Lang
• Jul 19, 2013

75 Instructive Design Case Studies

• 20 min read
• Inspiration , Web Design , Graphic Design , Case Studies
• Share on Twitter ,  LinkedIn

About The Author

Former Smashing Editor Melanie completed her degree in Philosophy, Politics and Economics at Otago University, and is now freelancer and part-time politician. … More about Melanie ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

Not only are case studies a great way to explain the design process of an agency, but they also help designers and developers to learn from each other. Seeing how designers work, create, build and play is great, and furthermore, you can learn how to write a great case study yourself and how to use one to spice up your portfolio .

In this overview of useful case studies, we’ve featured studies that have recounted decisions made about particular design elements, as well as studies of full overhauls and their accompanying technical challenges. Most of them provide interesting insights into failures and successes , stories, workflows and design decisions made and rejected.

We must admit that this post is quite a long one, so we’ve decided to divide it into two parts to make it easier for you to navigate. Now you should be well prepared for a couple of late reading sessions over the next weekends!

Illustration, Graphics And Logo Design

“ Illustrator Full Spectrum Spirograph ,” Veerle Pieters Pieters talks about her experimentation process with spirographs, inspired by the work of Andy Gilmore.

“ The Design Process of my Infographic About Women Cycling for Grinta! ,” Veerle Pieters Pieters shares her experience of the design process behind the infographic on women’s cycling that she produced for Grinta magazine.

“ A Systematic Approach to Logo Design ,” Adham Dannaway Icon design can be time-consuming. Dannaway shows how to systematically approach a new logo design.

“ (Re)building a Simplified Firefox Logo ,” Sean Martell Learn how Firefox’s logo was simplified to better fit its extended usage beyond a desktop web browser.

“ Five Details ,” Jon Hicks Jon Hicks shares the design process behind the Five Details Logo, including the design and choice of typography.

“ Iconfinder Logo ,” SoftFacade SoftFacade completely reimagined Iconfinder’s existing identity and came up with a shiny and modern robot character. View the detailed design process.

“The Great Gatsby” Like Minded Studio collaborated on the branding of “The Great Gatsby“. The aim was to develop a bespoke Deco styled logo reflective of the roaring 20s and Fitzgerald’s masterpiece. They also created a display typeface to acompany the main branding. Additionally read more about it following this link.

“ Whitney Graphic Identity ,” Experimental Jetset In this case study of the Whitney Museum of Art’s logo, Experimental Jetset discusses the impact that a responsive logo can have on branding.

“My ‘Tour de France’ posters,” Veerle Pieters Pieters created posters for the 100th edition of the Tour of France. She mainly used the French landscape which she had used for the ‘Tour de France Infographic’ as a starting point.

“ Designing Type Systems ,” Peter Bil’ak To create truly useful designs, typographers need to examine not only how characters relate to each other within a style, but also how different styles relate to each other within a family. Peter Bil’ak discusses how to achieve this.

“ Novel Constructions: The Making of a Typeface ,” Christopher Dunst Dunst shares the process behind the creation of the “Novel” typeface.

“ The Development of the Signage Typeface Wayfinding Sans Pro ,” Ralf Herrmann Herrmann describes the development of the Wayfinding Sans Pro, a signage typeface that can be read from a long distance.

“ The Making of FF Tundra ,” Ludwig Übele Übele shares the process behing making the FF Tundra typeface, which was highly inspired by nature.

“ The Making of Magasin ,” Laura Meseguer Meseguer writes how she created Magasin, a typefaces inspired by fluid handwriting.

“Type Study” series, Adobe Typekit Typekit features a whole series of case studies of typography:

• “ Hi-DPI Web Typography ,” David Demaree
• “ Typographic Hierarchy ,” Frank Chimero
• “ Pairing Typefaces ,” Aura Seltzer
• “ Sizing the Legible Letter ,” Ethan Marcotte
• “ Stereo-Typography ,” Dan Mall
• “ Choosing Fallback Fonts ,” Josh Brewer
• “ Techniques for Using Novelty Fonts ,” Meagan Fisher

“ Social Login Buttons Aren’t Worth It ,” MailChimp Social login buttons are used by many apps today. MailChimp shares its own experience and considerations in using social login buttons.

“Usability in Icons,” Peter Steen Høgenhaug Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them.

“iOS Icon Design: A Designer’s Exploration,” iOS icon design is not only difficult, but requires a lot of experimentation. David Killoy shares his experience of designing the icon for his note-taking app Notorious.

“ The Making of Octicons ,” GitHub Octicons is a icon font made by GitHub. Five designers collaborated on the project, and they share how they built Octicons and what they learned along the way.

“ Designing Facebook Home ,” Julie Zhuo On May 8th, the designers behind Facebook Home (Justin Stahl, Francis Luu, Joey Flynn and Mac Tyler) presented a behind-the-scenes look at their work at the Bluxome Street Winery for a small crowd.

Advertising, Promotion And E-Commerce

“ How to Make Your Own App Promo Cards ,” Mike Swanson Swanson was inspired by Starbuck’s promo cards for giving away free apps and decided to make his own for an upcoming event. Learn how you can do one, too!

“ The Art of Launching an App ,” John Casey You’ve made your first app! Now what? This study covers some tactics and lessons learned during one process of launching an app.

“ How to Launch Anything ,” Nathan Barry Barry has launched five products in fewer than nine months. Read about the strategy that helped him generate over $200,000 in revenue from online products, starting from scratch.

“ Selling My E-Book on Amazon ,” Jonathan Snook Several people predicted that 2013 would be the year of self-publishing. Snook shares insight into his eBook sales on Amazon.

“ Increase Online Sales on Your Ecommerce Website ,” Headscape increased sales on Wiltshire Farmfoods’ e-commerce website by over 10,000% in only five years. What makes it even more special, the target audience is over 50 years old. Paul Boag shares his experience.

“ Twitter Promoted Tweets ,” MailChimp MailChimp has made use of Twitter’s promoted tweets and shares insight into this experience.

Redesigning Elements And Features

“ Visual Exploration Behind Signal vs. Noise ,” Mig Reyes 37signals share the process behind making its blog special. This study is about how the company visualized noise and styled its blog categories in a unique way.

“ Reinventing Our Default Profile Pictures ,” Jamie Jamie talks about the process of finding the right default profile pictures for the 37signals website. It’s a great new approach to a very basic element.

“ Login Screen Design: Behind the Scenes ,” Simon Tabor Good UX is not just about the main content, but also about little details such as log-in (and error) pages. GoSquared shares how it made its log-in experience exceptional.

“ Save for Later ,” Brian Groudan All browsers support two functions: searching and revisiting. Groudan worked closely with Mozilla’s user experience researchers and designers to rethink how Firefox could better offer “saving for later” functionality in the browser.

“A Closer Look at Zoom,” FiftyThree FiftyThree shares the design process behind the new zoom feature in its Paper app.

“Reinventing the Investment Calculator ,” Alex Bendiken Drawing from the book Money for Something , Alex Bendiken built a tool that lets users experiment and create a unique investment plan. It’s a UX study in turning a boring financial calculator into something you’d actually want to use.

“ Getting Down to Business ,” Teenhan+Lax The Globe and Mail is Canada’s national newspaper of record. It serves millions of readers everyday with in-depth journalism and informed comment. Learn how Teenhan+Lax helped refresh and enrich the way users experience and engage with the news today.

“ Olympics: User Experience and Design ,” Nick Haley Nick Haley shares the BBC’s design process of delivering the Olympics across desktop, tablet, mobile and connected TV.

“ How We Built the Responsive Olympics Site ,” Matt Clark Matt Clark writes about MSN UK’s approach to delivering the Olympics digitally, from the brief to the finished design.

“ The Anatomy Of A Successful Logo Redesign ,” Belinda Lanks Lanks summarizes how Jessica Hische had freshened up the new logo for MailChimp with a slight facelift. The new logo now looks new and fresh — more refined but just as playful.

“ What I Want Out of Facebook ,” Keenan Cummings Cummings explains why Facebook fails him and what he wants to get out of it that would make it useful for his personal life.

“ In Praise of Lost Time ,” Dan Hill Dan Hill talks about Facebook’s Timeline as an exemplary bit of interaction design that does little to advance the timeline formally. Yet it might alter the nature of human memory itself.

“Designing the new, fully responsive Wired.co.uk article pages,” Javier Ghaemi This article is about redesigning the Wired.co.uk article website to provide a more content-first and immersive experience.

Complete (Re)branding And (Re)design

“How to Approach a Responsive Design,” Tito Bottitta This article shows the design process behind The Boston Globe’s website, one of the most famous examples of responsive designs. Read about how Upstatement approached its first responsive design.

“Responsive Design Case Study,” Matt Berridge This case study outlines the entire process of constructing the South Tees Hospitals’ website, a large responsive design containing over a thousand pages.

“ Rebuilding a University Homepage to Be Responsive. Twice. In Less Than a Year ,” Erik Runyon This slideshow discusses how and why Notre Dame University’s home page was rebuilt twice in less than a year. You will find a recording of the talk below the slides.

“Yes, You Really Can Make Complex Web Apps Responsive,” Daniel Wearne Wearne shares his experience in creating Adioso’s web app, a complex yet accessible project. He covers the framework, responsive mixins, tables and future challenges.

“Designing a New Playground Brand,” Ryan Bannon This case study shows the design process of Playground’s new brand. It covers the logo, overall website and vector animation process, as well as the core values and personality of the company. The extensive study comes in three parts.

“ How House Parties Helped Us Design Potluck ,” Cemre Güngör The team at Potluck describes how it took inspiration from reality to design a “house party on the Internet.”

“ Colorado Identity ,” Berger & Föhr Imagine someone hiring you to define your own identity. Berger & Föhr was hired to help create the new identity and visual brand of Colorado, the place they call home. Have a look at the work and logo they came up with.

“ Building the New Financial Times Web App ,” Wilson Page Page talks about building the Financial Times’ new app, a challenge that many on his team believed to be impossible. He covers device support, fixed-height layouts, truncation, modularization, reusable components, Retina support, native-like scrolling, offline support and the topic of ever-evolving apps.

“ Google Treasure Maps ,” Alex Griendling Griendling writes about the design process behind Google Maps’ treasure mode.

“ Find Your Way to Oz ,” HTML5 Rocks This very detailed case study looks at the “Find Your Way to Oz” demo, a Google Chrome experiment by Disney. It covers sprite sheets, Retina support, 3-D content and more.

“ The Making of the Moscow Metro Map 2.0 ,” Art Lebedev Studio This study is about the design process behind the Moscow Metro map, a complex project that needed to meet the requirements of both Web and print.

“ Skinny Ties and Responsive eCommerce ,” Brendan Falkowski Read and learn how GravDept redesigned Skinny Ties’ creative and technical direction to propel shopping on every device.

“ The Design Thinking Behind the New Disney.com ,” Bobby Solomon Solomon shares the process of creating a Disney website that is flexible enough to showcase the widest range of offerings imaginable — in other words, a website that can do everything.

“Say Hello to the New ISO,” Andy Clarke Clarke and David Roessli redesigned the website of the ISO (International Organization for Standardization) and share their experience.

“ A Responsive Design Case Study ,” David Bushell The redesign of Passenger Focus takes advantage of the Web as an unique medium.

“ BBC News: Responsive Web Design and Mustard ,” Kaelig Deloumeau-Prigent These slides address the core principles and the “cutting the mustard” technique behind the BBC News’ responsive website.

“The Trello Tech Stack,” Brett Kiefer Read the process behind the Trello app, from initial mockup to a solid server and maintainable client.

“ Responsibly Responsive: Developing the Greenbelt Website ,” Rachel Andrew Andrew writes about her front-end design decisions in rebuilding the Greenbelt Festival’s website.

“ The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives ,” Craig Mod Mod walks through the process of building the Flipboard app for iPhone and of finding the edges of its digital narratives.

“ Page-Flip Effect From 20 Things I Learned ,” Hakim El Hattab This study shows how this team found the best way to achieve the feeling of a real-world book, while leveraging the benefits of the digital realm in areas such as navigation.

“ Six Key Lessons From a Design Legend ,” Kapil Kale The GiftRocket team eventually recruited Mike Kus as a designer. This article shows why that decision took their website to the next level.

“ Breaking The Rules: A UX Case Study ,” Laura Klein Klein shows how she broke all rules to create the great UX for Outright.

“ 7 UX Considerations When Designing Lens Hawk ,” Christian Holst Lens Hawk is a massive DSLR lens database. This article shares seven UX considerations that were made in its design process.

“ The Story of the New Microsoft.com ,” Nishant Kothary Kothary shares his insight into making Microsoft’s new website. Also, check out Trent Walton’s perspective on the redesign .

“Behind the Scenes of the New Kippt,” Gannon Burgett This interview about the work behind the new Kippt app covers the redesign process, the design principles and problems that the team faced, insights into the new era of web app design, and where Kippt will head in the future.

“ Crayola: Free the ‘What If’ ,” Daniel Mall Dan Mall has put together a case study of the creation of the new Crayola application for kids.

“Campus Quad iPhone App,” Soft Facade Soft Facade covers every aspects of the design process behind its Campus Quad app.

“How to Make a Vesper: Design,” Vesper Learn how the Vesper app was designed and made.

“ Betting on a Fully Responsive Web Application ,” 14islands Read about how 14islands took the web app for Kambi, a sports-betting service, to the next level.

“AMMO Rack App Design Critique,” Alexander Komarov An interesting study of the feedback process that improved the AMMO Rack app.

“ Walking Through the Design Process ,” Ian Storm Taylor Taylor walks you through the design process of Segment.io, including the progression of mockups in Photoshop.

“ Music Video ‘Lights’: The Latest WebGL Sensation ,” Carlos Ulloa Interactive studio HelloEnjoy built a mind-blowing 3-D music video for Ellie Goulding’s song “Lights.” Creative director Carlos Ulloa explains why the team chose WebGL and how it created various immersive graphic effects.

“Designing for Designers,” Kyle Meyer Designing for other designers is different than working for regular clients. Kyle Meyer shares his experience.

“ Adapting to a Responsive Design ,” Matt Gibson Cyber-Duck abandoned its separate mobile website and created a new responsive design.

“ Grids, Flexibility and Responsiveness ,” Laura Kalbag Kalbag shares her thoughts on the redesign of her own website, including her choice of typefaces.

“ Making of Typespiration ,” Rafal Tomal Rafal Tomal built Typespiration as a side project. Learn about the process from initial idea to finished WordPress website.

“ Case Studies ,” Fi Design firm Fi has integrated case studies into its portfolio. The studies are very interactive and beautifully designed. Here are four of them:

• “Is This The Future of The Airline Website?”
• “The Story of Ramayana: Brought to Life by Google Chrome”
• “Sony: Connected World”
• “USAToday.com: Redesigning One of America’s Most Popular News Sites”

Content And Storytelling

“ Step-By-Step Landing Page Copywriting ,” Nathan Barry The process of writing great copy for a landing page is covered step by step.

“ The Art Of Storytelling Around An App ,” John Casey This case study is about the art of storytelling in the app “The House That Went on Strike.”

“Rethinking the Case Study,” Christopher Butler Butler explains what case studies are for and what a great one looks like, and he lays out a practical plan for writing one.

“ Retiring The Portfolio Screenshot ,” James Young You’ve probably noticed that portfolios nowadays are packed with detailed analysis, rather than screenshots. Take yours to the next level and learn how to create an amazing portfolio (such as the ones featured in this post).

“Responsibly Leveraging Advanced Web Features,” Ryan Heap Heap tells us about his full responsive redesign of Travois, a consulting firm focused on housing and economic development. The study includes topics such as progressive enhancement, responsive and responsible Web design, SVG, and the HTML5 History API.

“ My Notes on Writing an E-Book ,” Jonathan Snook Several people have suggested that 2013 is the year of self-publishing. Jonathan Snook shares his process of writing and digital publishing.

Technical Challenges And Solutions

“ Beating Borders: The Bane of Responsive Layout ,” Joshua Johnson Responsive design often requires setting widths in percentages. This is easy enough, until borders are thrown into the mix.

“ How We Improved Page Speed by Cleaning CSS, HTML and Images ,” Lara Swanson Page-loading time is a big part of the user experience. Dyn shows how it improved it simply by cleaning up the CSS, HTML and images.

“ Mein Honig – Brand Identity ,” Thomas Lichtblau “My Honey makes people and bees happy. And if they are happy, nature is happy too.” This simple yet beautiful statement belongs to Mein Honig (My Honey), a personal project of Thomas Lichtblau from Austria. Thomas shares fascinating insights about a production, banding and packaging process in which he only used colorless, organic and traditional tools and materials.

“Front-End Performance Case Study: GitHub,” JP Castro Castro analyzes the front-end performance of GitHub and shares his findings.

“ iPad to Windows Store App ,” Bart Claeys and Qixing Zheng This case study helps designers and developers who are familiar with iOS to reimagine their apps using design principles for Windows Store apps. Translate common UI and UX patterns found in iPad apps to Windows 8 apps.

“ Behind the Scenes of Mad Manimation ,” Anthony Calzadilla Here is the process behing the Mad Manimation, an HTML- and CSS-based animation of the introduction to the Mad Men TV show.

“ Embedding Canvas and SVG Charts in Emails ,” Thomas Fuchs Learn how to use embedded canvas and SVG charts in email.

“ Scaling Pinterest From 0 to 10s of Billions of Page Views a Month in Two Years ,” Todd Hoff This case study traces the evolution of Pinterest’s architecture, which was scaling fast, with a lot of incorrect choices made along the way

“ How We Built a Photoshop Extension With HTML, CSS and JS ,” Brian Reavis Creative Market’s extension is a Backbone.js Web app that lives inside of Photoshop. The team can update it without the user having to install an update. How does that work? Read up on it!

“ Batch Processing Millions and Millions of Images ,” Mike Brittain Etsy wanted to redesign a few of its major sections and had to rescale over 135 million images in order to do it.

“ Making 100,000 Stars ,” Michael Chang Chang writes about 100,000 Stars, an experience for Chrome that was built with Three.js and CSS3D.

“ Mastering the Application Cache Manifest for Offline Web Apps and Performance ,” Julien Nicault Nicault, who work on Cinémur, a new social film app, describes how to use AppCache to improve performance and enable offline usage of Web apps

“ Harvey: A Second Face for Your JavaScript ,” Joschka Kintscher Responsive design often requires drastic UI changes. This study shows how to execute parts of your JavaScript depending on the device’s type and screen size.

“ Our First Node.js App: Backbone on the Client and Server ,” Spike Brehm The team at Airbnb has been curious about Node.js for a long time, but used it only for odds and ends. See how they used it on a production-scale project.

“ Making a 60fps Mobile App ,” Paul Lewis Paul Lewis shows you how to make a mobile app that has 60fps at all times, does one thing really well, has offline support and a flat UI.

“ The Making of the Interactive Treehouse Ad ,” Chris Coyier Treehouse is the primary sponsor of CSS-Tricks, and this case study looks at its interactive ad using jQuery.

“ Improve Mobile Support With Server-Side-Enhanced Responsive Design ,” Jon Arne Sæterås This is an analysis of the process of finding the right mix between server-side and client-side logic for adaptive Web design.

“Designing an Instant Interface,” Luke Wroblewski Wroblewski shows how to design the instant interface used for the real-time views, real-time notifications and real-time comments on Bagcheck’s website.

“ Lessons in Website Security Anti-Patterns by Tesco ,” Troy Hunt Hunt looks closely at the many simple security errors Tesco makes, analyzing how he would apply basic security principles to remedy them.

“ Refactoring >14,000 Lines of CSS Into Sass ,” Eugene Fedorenko Beanstalk is a mature product whose CSS grew accordingly to 5 files, 14,211 lines and 290 KB of code. Learn how the team rebuilt its style sheets into something cleaner and easier to maintain.

“Refinder: Test-Driven Development,” Maciej Pasternacki These slides show how test-driven development enabled Gnowsis to reimplement Refinder’s basic data model.

“Managing JavaScript on Responsive Websites,” Jeremy Fields Jeremy Fields of Viget talks about how to manage JavaScript on a website whose interface and functionality changes at different breakpoints.

“ Trimming the Fat ,” Paul Robert Lloyd Lloyd walks through the performance optimizations he made for his website, trimming the page load from 383 to 100 KB. He also shows graphs.

Workflow And Optimization

“ Visual Design Explorations ,” Paul Lloyd Lloyd of Clearleft talks about how to maintain knowledge-sharing and collaboration on a growing team.

“ The Anatomy of an Experience Map ,” Chris Risdon Experience maps are becoming increasingly useful for gaining insight in order to orchestrate service touch points over time and space. This study explains what they are and how to create them.

“The design process of my infographic for the ‘Tour of France’ for Grinta!,” Veerle Pieters Pieters designed an infographic about the Tour of France, and focused mainly on the question, “What does a pro cycling team take with them to the Tour of France?”

“ Turning Small Projects Into Big Profit ,” Jon Savage and Simon Birky Hartmann Ace of Spade discusses how it overhauled its operations and started making a living off of small projects.

“What We’ve Learned About Responsive Design,” Christopher Butler Butler shares what his agency has learned about responsive design, which is to overcome initial fears and focus on what is important.

“The Modular Canvas: A Pragmatic Workflow for Designing Applications,” by Gabriel O’Flaherty-Chan There are some gaps in the way we work; the bigger the project, the more glaring the gaps become. O’Flaherty-Chan looks at a better workflow for designing apps.

“ How We Reduced Our Cancellation Rate by 87.5% ,” Kareem Mayan Kareem Mayan tackles the issue of user cancellations by using a cohort analysis. Learn how he did it.

“ How I Run a Membership Site ,” Justin Tadlock This study looks at how Theme Hybrid handles memberships after registration and payment.

“Post-Implementation, Pre-Launch: A Crucial Checkpoint,” Mindy Wagner Wagner of Viget discusses how to approach the time of post-implementation and pre-launch, a crucial checkpoint that can create a lot of stress for a team.

“ A New Make Mantra: A Statement of Design Intent ,” Mark Boulton Mark Boulton used the CERN redesign project as an occasion to define a new “make” mantra that would help him tackle projects. This single, actionable sentence would guide him through projects.

“ 100 Conversion Optimization Case Studies ,” KISSmetrics Lots of techniques and tactics to optimize your website for better conversions shared by marketers.

Responsive Design

“ Responsive Design and ROI: Observations From the Coalface ,” Chris Berridge Working on the frontline, Berridge share his insights on responsive design and returns on investment.

“ Making Your Site Responsive: Mastering Real-World Constraints ,” Alex Fedorov Listen to how agency Fresh Tilled Soil addressed real-world constraints, such as resources, time and budget, in its responsive design process.

“ Goals, Constraints, and Concept in a Redesign ,” Steven Bradley Some thoughts on the redesign of Vanseo Design.

“ How a Simple Redesign Increased Customer Feedback by 65% ,” James Santilli Customer feedback is the backbone of many Web services. Campaign Monitor analyzed the process behind a simple redesign that increased customer feedback by 65%.

“ More on Apples: Mobile Optimization in Ecommerce ,” Electric Pulp This study analyzes how both mobile and non-mobile conversions went up when Electric Pulp redesigned a website to be responsive.

“How I’m Implementing Responsive Web Design,” Jeff Croft Croft is finally at the point where responsive design feels worth the extra effort. Read about how he got there.

“ Mentoring: The Evaluation ,” Laura Kalbag Freelancers are often offered projects whose budget is below their rate. Laura Kalbag had a fantastic idea on how to transform these kind of projects into a win-win: She decided to mentor a group of students. Such a project would give the students an opportunity to gain valuable experience and help them transition into freelancing, and the client would get good quality work, despite the modest budget. This series of posts describes her experience, from initial idea to launched project.

Further Reading

• Showcase of Case Studies in Design Portfolios
• 15 Impressive Case Studies from Behance
• Improving Smashing Magazine’s Performance: A Case Study
• Powerful Workflow Tips, Tools And Tricks For Web Designers

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Limited Time Offer! Save up to 50% Off annual plans.* View Plans

Save up to 50% Now .* View Plans

How To Write A Case Study For Your Design Portfolio

Case studies are an important part of any designer’s portfolio. Read this article to learn everything you need to know to start writing the perfect case study.

When you’re putting together your online design portfolio , design case studies are a great way to showcase your experience and skills. They also give potential clients a window into how you work.

By showing off what you can do and your design process, case studies can help you land more clients and freelance design jobs —so it can be smart to dedicate an entire section of your online portfolio website to case studies.

Getting Started

So—what is a design case study and how do they fit in your portfolio.

Let’s get some definitions out of the way first, shall we? A design case study is an example of a successful project you’ve completed. The exact case study format can vary greatly depending on your style and preferences, but typically it should outline the problem or assignment, show off your solution, and explain your approach.

One of the best ways to do that is to use a case study design that’s similar to a magazine article or long-form web article with lots of images throughout. When building your case study portfolio, create a new page for each case study. Then create a listing of all your case studies with an image and link to each of them. Now, let’s get into the nitty-gritty of creating these case studies.

Choose Your Best Projects

To make your online portfolio the best it can be , it’s good to be picky when choosing projects for case studies. Since your portfolio will often act as your first impression with potential clients, you only want it to showcase your best work.

If you have a large collection of completed projects, you may have an urge to do a ton of case studies. There’s an argument to be made in favor of that, since it’s a way to show off your extensive experience. In addition, by including a wide variety of case studies, it’s more likely that potential clients will be able to find one that closely relates to their business or upcoming project.

But don’t let your desire to have many case studies on your portfolio lead you to include projects you’re not as proud of. Keep in mind that your potential clients are probably busy people, so you shouldn’t expect them to wade through a massive list of case studies. If you include too many, you can never be sure which ones potential clients will take a look at. As a result, they may miss out on seeing some of your best work.

There’s no hard-and-fast rule for how many case studies to include. It’ll depend on the amount of experience you have, and how many of your completed projects you consider to be among your best work.

Use Your Design Expertise

When creating the case study section of your portfolio, use your designer’s eye to make everything attractive and easily digestible. One important guideline is to choose a layout that will enable you to include copy and image captions throughout.

Don’t have your portfolio up and running yet and not sure which portfolio platform is best for you? Try one that offers a free trial and a variety of cool templates that you can play around with to best showcase your design case studies.

If you don’t provide context for every image you include, it can end up looking like just a (somewhat confusing) image gallery. Case studies are more than that—they should explain everything that went into what you see in the images.

Check Out Other Case Study Examples for Inspiration

Looking at case study examples from successful designers is a great way to get ideas for making your case study portfolio more effective. Pay special attention to the case study design elements, including the layout, the number of images, and amount of copy. This will give you a better idea of how the designer keeps visitors interested in the story behind their projects.

To see some great case study examples, check out these UX designer portfolios .

Try a Case Study Template

There are plenty of resources online that offer free case study templates . These templates can be helpful, as they include questions that’ll help you ensure you’ve included all the important information.

However, most of them are not tailored to designers. These general case study templates don’t have the formatting you’ll want (i.e. the ability to include lots of images). Even the ones that are aimed at designers aren’t as effective as creating your own design. That’s why case study templates are best used as a starting point to get you thinking, or as a checklist to ensure you’ve included everything.

How to Write Case Studies

Maintain your usual tone.

You should write your case studies in the same personal, authentic (yet still professional!) tone of voice as you would when creating the About Me section of your portfolio . Don’t get bogged down in too much technical detail and jargon—that will make your case studies harder to read.

Since your case studies are part of your online portfolio, changing your usual tone can be jarring to the reader.

Instead, everything on your portfolio should have a consistent style. This will help you with creating brand identity . The result will be potential clients will be more connected to your writing and get the feeling that they’re learning what makes you unique.

Provide Some Context

Case studies are more effective when you include some information at the beginning to set the stage. This can include things like the date of the project, name of the client, and what the client does. Providing some context will make the case study more relatable to potential clients.

Also, by including the date of the project, you can highlight how your work has progressed over time. However, you don’t want to bog down this part of the case study with too much information. So it only really needs to be a sentence or two.

Explain the Client’s Expectations

Another important piece of information to include near the beginning of your case study is what the client wanted to accomplish with the project. Consider the guidelines the client provided, and what they would consider a successful outcome.

Did this project involve unique requirements? Did you tailor the design to suit the client’s brand or target audience? Did you have to balance some conflicting requirements?

Establishing the client’s expectations early on in the case study will help you later when you want to explain how you made the project a success.

Document Your Design Process

As you write your case study, you should take a look at your process from an outsider’s point of view. You already know why you made the decisions you did, so it may feel like you’re explaining the obvious. But by explaining your thought process, the case study will highlight all the consideration you put into the design project.

This can include everything from your initial plan to your inspiration, and the changes you made along the way. Basically, you should think about why you took the approach you did, and then explain it.

At this point, consider mentioning any tricks you use to make your design process more efficient . That can include how you managed your time, how you communicated with clients, and how you kept things on track.

Don’t Be Afraid to Mention Challenges

When writing a case study, it can be tempting to only explain the parts that went flawlessly. But you should consider mentioning any challenges that popped up along the way.

Was this project assigned with an extremely tight deadline? Did you have to ask the client to clarify their desired outcome? Were there revisions requested?

If you have any early drafts or drawings from the project saved, it can be a good idea to include them in the case study as well—even if they show that you initially had a very different design in mind than you ended up with. This can show your flexibility and willingness to go in new directions in order to achieve the best results.

Mentioning these challenges is another opportunity to highlight your value as a designer to potential clients. It will give you a chance to explain how you overcame those challenges and made the project a success.

Show How the Project’s Success Was Measured

Case studies are most engaging when they’re written like stories. If you followed the guidelines in this article, you started by explaining the assignment. Next, you described the process you went through when working on it. Now, conclude by going over how you know the project was a success.

This can include mentioning that all of the client’s guidelines were met, and explaining how the design ended up being used.

Check if you still have any emails or communications with the client about their satisfaction with the completed project. This can help put you in the right mindset for hyping up the results. You may even want to include a quote from the client praising your work.

Start Writing Your Case Studies ASAP

Since case studies involve explaining your process, it’s best to do them while the project is still fresh in your mind. That may sound like a pain; once you put a project to bed, you’re probably not looking forward to doing more work on it. But if you get started on your case study right away, it’s easier to remember everything that went into the design project, and why you made the choices you did.

If you’re just starting writing your case studies for projects you’ve completed in the past, don’t worry. It will just require a couple more steps, as you may need to refresh your memory a bit.

Start by taking a look at any emails or assignment documents that show what the client requested. Reviewing those guidelines will make it easier to know what to include in your case study about how you met all of the client’s expectations.

Another helpful resource is preliminary drafts, drawings, or notes you may have saved. Next, go through the completed project and remind yourself of all the work that went into achieving that final design.

Draw Potential Clients to See Your Case Studies

Having a great portfolio is the key to getting hired . By adding some case studies to your design portfolio, you’ll give potential clients insight into how you work, and the value you can offer them.

But it won’t do you any good if they don’t visit your portfolio in the first place! Luckily, there are many ways you can increase your chances. One way is to add a blog to your portfolio , as that will improve your site’s SEO and draw in visitors from search results. Another is to promote your design business using social media . If you’re looking to extend your reach further, consider investing in a Facebook ad campaign , as its likely easier and less expensive than you think.

Once clients lay eyes on all your well-written, beautifully designed case studies, the work will come roaring in!

Want to learn more about creating the perfect design portfolio? 5 Designers Reveal How to Get Clients With Your Portfolio 20 Design Portfolios You Need to See for Inspiration Study: How Does the Quality of Your Portfolio Site Influence Getting Hired?

A Guide to Improving Your Photography Skills

Elevate your photography with our free resource guide. Gain exclusive access to insider tips, tricks, and tools for perfecting your craft, building your online portfolio, and growing your business.

Get the best of Format Magazine delivered to your inbox.

Enter the Booooooom Illustration Awards: Supported by Format

Mastering Pet Photography: 29 Tips for Perfectly Capturing Your Clients’ Pets

Capturing Stunning Images: A Comprehensive Studio Lighting Guide

The Definitive Guide to Tilt-Shift Photography: Top 10 Techniques to Master

The 15 Best Photography Workshops in The World

Unlock the True Potential of Your Visuals: 12 Must-Learn Color Grading Techniques in Lightroom and Photoshop

8 Makeup Artist Portfolios for Creative Inspiration

*Offer must be redeemed by August 31st , 2024 at 11:59 p.m. PST. 50% discount off the subscription price of a new annual Pro Plus plan can be applied at checkout with code PROPLUSANNUAL, 38% discount off the price of a new annual Pro plan can be applied with code PROANNUAL, and 20% discount off the price of a new Basic annual plan can be applied with code BASICANNUAL. The discount applies to the first year only. Cannot be combined with any other promotion.

Must-see graphic design portfolios: 22 inspiring examples

Get inspired to create your own graphic design portfolio by checking out these stunning examples.

Design and build a custom portfolio website, visually, within 21 days.

In need of some inspiration for your graphic design portfolio? We got you covered. Here’s our list of 22 stunning graphic design portfolio examples.

A graphic design portfolio visually presents your past achievements and future aspirations, essential for freelance designers to exhibit their talents to potential clients.

Having an online portfolio to showcase your design work is absolutely essential if you want to scale your reach and secure new, potential clients as a graphic designer.

You know this. That's why you're here.

However, not just any design portfolio will do in today's online marketplace. 

To stand out from the crowd and, more notably, from the likes of AI-powered graphic design platforms, your portfolio website needs that extra 'oomph' — that oomph being you.  

‍ Me? Yup, you read correctly. 

Not only should your graphic design portfolio website demonstrate your design skills and versatility as a graphic designer, it should also serve as a visual embodiment of your personal brand or ‘ brand identity ,’ showcasing who you are and the kind of work you do.

Before we get ahead of ourselves, let’s discuss what makes up graphic design portfolios. We’ll then explore 22 visually stunning graphic designer websites — each demonstrating the skill and personality of their designers.

What is a graphic design portfolio, and what should it include?

Your graphic design portfolio should include a curation of your best work, the disciplines, brands, sectors, or industries you specialize in, your design process, and a method for contacting you.

‍ Best work — Your portfolio website is an online introduction or first impression to site visitors. To secure the best first impression, quality over quantity is key here.

‍ Specializations & disciplines — Your online portfolio should demonstrate your graphic design style . Highlight the kind of work you do or the brands, sectors, or industries you specialize in. Doing so displays your expertise and affirms you are the go-to graphic designer for that particular niche.

‍ Design process — Showcase your design process by including concept development through sketches, rough drafts, mood boards, and other visual materials. Employ the occasional case study where applicable within your graphic design website.

‍ Contact information — Be it your email, LinkedIn, Behance, or social media, include your contact information so intrigued onlookers can express their interest in working with you.

With the key elements laid out, let’s see them in action with these inspiring graphic design portfolio examples, each beautifully crafted using Webflow.

22 inspiring graphic design portfolios

1. howsem huang.

To kick off our list, take a look at Howsem Huang ’s brilliant portfolio website.

Howsem’s use of bold sans-serif typography placed atop contemporary imagery wonderfully displays their unique yet tastefully stylized design work — truly an eye-catching display of their artistry.

2. damn website

If a name could speak for itself, it is most certainly Nando’s damn website . Nando’s gaudy yet tasteful vaporwave -esque design is a testament to fully showcasing your brand identity and design skills as a graphic designer.

Nando ties in the motif of “damn” by employing choice repetition of the word alongside visual design elements to further support his claim of being a damn good designer — and it works.

His portfolio website is a complete representation of his bold artistic approach to design, competency as a graphic designer, and overall personality as a highly imaginative individual.

3. Rani Vestal

Next on our list is Rani Vestal’s online design portfolio. If you don’t have a flair for the dramatic and want a minimal yet high-quality way to demonstrate your best work online, look no further than Rani’s portfolio website.

Similar to Howsem’s design approach, Rani lets her notable design projects speak for themselves. Brand identity is Rani’s forte. In just a few words, you can define her brand as aesthetic functionality that meets creative professionalism.

4. Stensen design

Oslo-based graphic designer Mailinn Stensen ’s portfolio website wonderfully portrays their innovative and creative take on graphic design.

Their choice of a bold burnt orange alongside a contemporary sans-serif font matching their self-portrait totally encapsulates both their work and themselves — a subtle display of their innovative creativity.

5. Alex Fisher

Alex Fisher’s online portfolio is a breathtaking visual display of a graphic designer’s and illustrator’s artistic prowess.

Visiting Alex’s website is like stepping into a time capsule reminiscent of a classic fairy tale. Its feminine and eloquent elements are perfectly complemented by hints of a whimsical innocence that you’d find in a Disney classic. Her artistry and website alike will leave you in awe, wishing this was your own portfolio.

Alex’s site beautifully and brilliantly functions as a visual testament to her creative and artistic talent. Do yourself a favor and visit this gorgeous website for yourself.

6. Roos Beeldt

Roos Beeldt’s online portfolio evokes a spunky sentiment similar to the American pop art movement of the 1950s and 60s. Roos uses typography, shapes, hover effects, and colors to demonstrate her creative approach as a graphic designer and illustrator throughout the site’s design.

‍ Roos’ approach is seen most notably in her creative take on the services section on her homepage. Roos incorporates the hover effect and shapes to guide visitors to select one of the services she offers. Her attention to detail and unique take on visual cues within web design is made evident by the way she reframes the site’s narrative flow to fit her brand identity and her style as an artist..

7. Be Kind Design

Next on our list is Be Kind Design , a design studio known for turning frowns upside down since 1986, and it shows! While the design is simplistic, its functionality and content design make it stand out.

By featuring a homepage, social media icons, and case studies, Be Kind Design strips down its online portfolio to only the bare necessities — and for good reason. The case studies feature some of their best work. They’re incredibly detailed and stunningly put together, demonstrating their deep knowledge of art direction, graphic design, and product design

8. Sierra Plese

Sierra Plese is an award-winning graphic designer with years of industry experience. What makes Plese’s portfolio most memorable is her employment of textured geographic shapes to serve as a visual design motif, a nod to the principles of graphic design.

The addition of hover effects for these textured shapes breathes life into her portfolio, making it feel fun and playful. These effects transform an already good design into a great one.

9. Annie Szafranski

Immediately upon opening Annie Szafranski’s website portfolio, the typography catches your eye. Her portfolio serves as a perfect example of how to effectively use typography as the central theme for a design.

If you’re at a loss as to how you should design your portfolio website, choosing typography to complement the white space and layout is a great way to infuse personality into your design.

10. Luke Meyer

Luke Meyer ’s graphic design portfolio website is more than meets the eye. At first, we find a minimal off-white color scheme; however, hovering over each work sample unveils a color-changing background of each individual work sample. An added cursor effect reveals a further creative flair.

11. Andreas Gaida

Andreas Gaida is a freelance graphic designer, art director, and web designer with a clean, modern portfolio website that exhibits his expertise.

While his design is more muted in comparison to other graphic design portfolios on the list, the content design within the site is what makes his portfolio worth mentioning. Take a look for yourself, and you’ll come to appreciate his play on layout and content — both of which come together beautifully to create a functional site that maintains the appeal of modern design.

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

12. Cristiaan the Designer

Cristiaan the Designer ’s play with white space, typography, color, and layout should not be overlooked. Her choice of typeface brings her online portfolio together in a unique and playful way.

13. Sylvain de la Porte

Sylvain de la Porte is a French web and graphic designer with over 15 years of industry experience. 

His design is exquisite, combining motion graphics and scrolling effects that both captivate and intrigue viewers. Sylvain tactfully fills the folds of each page’s layout with relevant content that is also pleasant to look at, a feat that takes skill that isn’t acquired overnight.

14. Travis McClure

Travis McClure is an Austin-based graphic designer specializing in brand identity, logo design, package design, and illustration. While his portfolio may appear simplistic, his case studies are the true champion of his site.

The layout for his case studies differs from the homepage, about, and contact pages — a design choice he executes marvelously. His side-by-side layout of an aesthetic, still juxtaposed by a detailed brief on his design process, demonstrates how to effectively deviate from the more traditional page layouts and structures we so often see on sites.

15. Graphic Department

Graphic Department is a German design studio with a simplistic yet effective online portfolio. While the site is only available in German, its minimalist design makes the site’s navigation effortless and easy to comprehend.

Creator Diego Toda de Olivera created the cloneable portfolio template, Bilbao , to showcase Webflow’s blend mode.

The graphic designer website opens with a large photo of a man, filled with video footage of various natural landscapes. Diego continues to highlight the effect with a video of cascading coffee beans filling the shape of a coffee bag.

17. Tony Mayer

Tony Mayer is a New York-based freelance web and graphic designer with a lineup of work that can only be described as impressive. This impressive design translates to his online portfolio, specifically his case studies and the interactive elements within the mockups of his case studies.

While this subtle inclusion of motion may appear insignificant to some, it serves as a visual theme within his portfolio website’s narrative. It’s employed with the arrow at the bottom of his site’s page and, most importantly, immediately upon redirecting to his homepage. This approach is an excellent way to add subtle hints of flair and vigor to your graphic design portfolio site.

18. Mauricio Barreto

(Motion warning)

For another example of exercising subtle accents, check out Mauricio Barreto ’s online portfolio. Though his homepage isn’t exactly subtle, you will find little Easter eggs of personality throughout the rest of his site by hovering over text items or searching in the site’s white space.

What’s particularly fun is how Mauricio guides the visitor on his contact page. Instead of using a traditional form for someone to fill in their contact information, Mauricio facetiously uses pixel arrows that literally point visitors in the direction of his Instagram. Who needs a boring old contact form when you have pixel arrows to guide potential clients to your Insta’s DMs?

19. Rhianna B Dunn

Rhianna B Dunn ’s portfolio website is an aesthetic wonder. Their load screen, static-noise-like background, chosen typography, and work samples beautifully come together to create a cohesive, aesthetic haven — a gorgeous display of themselves and their creative niche.

Never be afraid to put your full personality on display for your website portfolio, as Rhianna beautifully demonstrates their aesthetic expertise.

20. David Klaus

(Motion & photosensitivity warning)

A simple paragraph wouldn’t do justice when it comes to describing this online portfolio. Web designer and digital artist David Klaus ’ portfolio is where profound artistry meets the digital medium, where creativity truly has no bounds when given the means to, well, create — and create is precisely what David did.

21. Harry Moses

Harry Moses ’ portfolio website is reminiscent of high fashion editorial spreads you’d find in magazines such as Vogue or during promos for fashion week in New York and Paris.

Harry makes his skill set as a brand designer, digital designer, and art director evident through his online portfolio. Harry uses text and layout as the primary narrative devices within the site. This strategy is genius. Imagery is appropriately hidden within each project’s case study, found after clicking and scrolling to reveal high-quality visuals relevant to each study.

22. WW Studios portfolio template

Last but certainly not least is this portfolio website template by WW Studios . Not only is the template a wholesome visual treat for the eye, but it also communicates Sandra’s delightful, creative nature.

Your next best graphic design portfolio is a click away

There you have it, our list of 22 inspiring graphic design portfolios designed beautifully with Webflow. Find more inspiration from graphic design blogs or check out our 21-day design portfolio course to learn how to create your own portfolio.

Our comprehensive course teaches you how to build and design your own portfolio website without a single line of code. Enrollment is completely free, and we update the course periodically to ensure the content remains relevant in this ever-changing digital landscape.

Now fly, my friend! We’re excited to see what you create.

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

9 inspiring portfolios and insights from the designers behind them

Get inspired by some of our favorite portfolios built in Webflow. Go behind the screens with the designers who built them.

10 stunning web design portfolio examples in 2024

As a web designer, you need a portfolio to show your best work and land clients. Here are 10 web design portfolio examples for inspiration.

The best graphic design ideas for your next project

You know you need a graphic design portfolio. But what projects should you put in it? Get inspired with four graphic design project ideas.

9 freelancer portfolios designed to stand out

Find the inspiration you need to build a portfolio that communicates your talents — and brings in new clients.

12 inspiring landing page designs that engage and convert

Get inspired by the ways these landing pages use smart design and content to engage and convert visitors.

5 Design & development podcasts worth listening to

Expand your creative knowledge and get inspired with these 5 design and development podcasts.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

• Interactions
• Localization
• DevLink Labs
• Figma to Webflow Labs
• Accessibility
• Global alliances
• Freelancers
• Customer stories
• Webinars and ebooks
• Made in Webflow
• Livestreams
• Careers We're Hiring
• Webflow Shop
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences
• Accessibility statement
• Discover the community
• Partner with Webflow
• Certified Partners
• Become a template designer
• Become an affiliate
• Become a Global Leader
• Find a meetup near you

You are using an outdated browser. Please upgrade your browser to improve your experience and security.

Case Studies

Inspiration

Start Building

Developer Toos

Collaboration

Design & Layout

Interactions

SEO & Performance

Integrations

Solutions ↘

Inspiration ↘

Use Cases ↘

Reimagine the boundaries of web creation with Vev's design tools.

Bring your design to life with Vev's animation and interaction suite.

Explore hosting solutions that blend in with your tech stack

Boost your SEO and performance metrics using Vev's robust toolkits.

Enhance your workflow with real-time multiplayer and comments.

Developer Tools

Take your code experience to new heights with Vev's developer tools.

Effortlessly connect your existing tech stack via integrations.

Discover how Vev can empower your business

Publishers are using Vev to enhance their digital storytelling.

Agencies are using Vev to deliver powerful digital products to clients.

Marketers are using Vev to create and scale unique content.

Set your imagination free with content that inspires

View examples of digital content that has been created using Vev.

Discover how industry leaders are using Vev for success.

Dive deeper into the world of creative no-code web content.

Create compelling visual editorials with scrollytelling.

Data visualization

Transform your raw data into captivating visual narratives.

Give your products the interactive online home they deserve.

10 Amazing Case Study Design Examples

March 16, 2023

Words by Jeff Cardello

Wondering how to grow your business? Our favorite case study design examples will definitely spark a few lightbulb moments.

For agencies, one of the most effective ways to communicate your technical expertise, problem-solving skills, and professional knowledge is to show how you’ve put this all into action in real-world examples of your work. For SaaS companies, case studies are your chance to share how your product provides value to successful customers and clients.

Case study designs should be as uniquely bold and creative as the services or products you offer. This is where no-code tools like Vev are invaluable. Using pre-coded design components, interactive case studies are easy to build and publish in as little as two hours. Let’s take a look at the basics of case study design and some stunning examples.

Why is Case Study Design Important?

Think of case studies as the chance to tell stories about how valuable your service or product is. It’s an opportunity to lead prospective clients and customers through a relatable use case, culminating in how you can help them meet— or even exceed—their goals. Case studies give freelancers and agencies the opportunity to demonstrate their skills, and SaaS companies the chance to showcase their product for various use cases. Case studies are proof of the value of your work or product.

As a reflection of your expertise and creative prowess, you’ll want to think careful about your case study design. Good design doesn’t only make for a visually engaging piece of content; it enhances the functionality and can help support your authority. You’ll find that the best case study design examples will have a few things in common:

• They are visually captivating . All good case study designs will include a combination of photo, video, and illustrations or charts to tell a story of their clients’ success. Rather than just relying on text, these visual aids back-up any claims being made as well as visually capturing the attention of readers.
• They are laser focused. With case study design, there’s no room for filler. Copy is clear and concise, offering explanations about the customer’s goals, as well as the tools, techniques, and skills used to achieve these. You’ll notice most case studies follow a fool-proof structure: establish the client problem, present the solution, explore the benefits and value delivered.
• They tell a story. Often, a chronology of the work process that takes people through what happened at each stage. Some case studies even use horizontal scrolling timelines to showcase this in a more imaginative way.
• They hammer home ROI. case studies are full of data on how the project or product succeeded in meeting the client’s goals or objectives. From animated charts to number counters , this is another opportunity to make sure your design pops and draws attention to the core impact of your service or product.
• They drive action. good case studies urge website visitors to take further actions, such as book a call or demo, get in touch, purchase your product, or book your services. These are usually included in the case study design as a button , brightly colored and prominent placed to grab attention and make next steps clear.

10 Case Study Design Examples

There are so many ways to put together a case study — and as a reflection of your brand, you’ll want to get creative with it. We’re going to take you through several case study design examples that manage to capture what went on behind the scenes in ways that is both informative and visually engaging.

Vev - Decimal

Giving real-world examples of how people use your products is a great way to demonstrate their value. We put together this case study on how Decimal uses Vev for interactive prototyping. As a creative agency that utilizes 3D animations and video in their web projects, it’s essential that clients grasp how complex interactivity will work up front. This case study focuses on how important Vev is for Decimal to explore and communicate interactivity internally and with clients in the early stages of a project.

Along with telling the story about how Decimal uses Vev, we also included plenty of action-packed visuals in the form of screen captures, animations, horizontal scrolling, and micro-interactions that make this a lively and engaging case study design.

DFY - Galaxy Z7 FLIP3 5G

Writing a case study lets you go in-depth into the strategy and reasoning that guided your work. In this case study DFY talks about what went into creating a website for the Galaxy Z Flip3 5G phone. It covers the marketing goals and the decisions DFY made for the visuals of this design that would show people why they should buy it.

DFY was tasked with creating a design that showed that the Galaxy Z Flip3 5G wasn’t a throwback to the clunky days of flip phones, but rather a sleek and modern reimagining. Much of this case study goes into the visuals and 360-view animations they created and how they were used to highlight this product’s main features. 

What’s impressive isn’t just the beautiful visuals they created for the Galaxy Z Flip3 5G website, but this case study itself. It echoes the same creative approach with a space full of brilliant effects and interactivity making it one of the most visually compelling case study design examples we’ve come across.

Publicis Norway - Burger King Spicy Whopper

Case study design examples can range from huge and expansive reads covering every bit of minutiae about a project, or they may provide just enough context and background in understanding what was behind it.

The Norwegian arm of international media and tech agency Publicis specializes in PR, marketing, and video production. This case study they made in Vev for the Burger King Spicy Whopper succeeds with minimal text, taking a highly visual approach. They let the video they made speak for itself, demonstrating to potential clients their creative skills with a video that captures the burger’s heat in a way that’s offbeat and ridiculous in just the right ways.

Orizon - LoveTheSales 

When discussing something like a rebrand, you want to explain why it was necessary, show what needed to be changed, and demonstrate how it succeeded. In this case study Orizon gives plenty of background into why the e-commerce website LoveTheSales wanted to change things up. There are numerous examples throughout of problem areas in terms of UI and UX, and what Orizon did to address these issues.

Orizon’s rebranding for LoveTheSales met its objectives, as demonstrated throughout this case study with metrics as well as quantitative insights showing the positive outcomes of Orizon’s work. With fade-in animations and a custom cursor, this colorful case study design example keeps readers scrolling to the end.

Colin Reitz - Marine Data Platform

If you’re a designer, writer, programmer, or in another type of creative field, having a portfolio website is essential in getting your work out there in front of prospective clients and employers. Case studies can be a big part of demonstrating your talents, skills, and knowledge. 

Colin Reitz is a designer with a multidisciplinary skill set that touches UI and UX design, strategy, and technology. In this case study made in Vev, he explains how he created the Marine Data Platform which is a collaborative and interactive web app that collects data gathered from oceanic sensors.

If it sounds like there are a dizzying number of moving parts to this application, you would be right, but Colin doesn’t let the complexities of this project get in the way. With an easy to follow layout and screenshots of the work he completed, it’s immediately easy to see how much work Colin put into the project. The use of image carousels even keeps the page short and relevant visuals grouped together. We love seeing case study design examples like Colin’s that distill a large amount of information in a way that is easy to understand and looks good.

Miracle Next - Prehistoric Chef

We love seeing case study design examples that not only highlight talents and expertise, but capture the creative sensibilities of those behind them. Miracle Next is a game development studio with a focus on 3D modeling. This case study for the game Prehistoric Chef has a nice balance between visuals that demonstrate their skills as artists, as well as text that gives a glimpse into their creative process.

Whether it’s the cast of prehistoric characters or the different types of food you’ll juggle in preparing the dishes that are a part of the gameplay, all of the artwork has a sense of consistency and personality. The rough drawings of the artwork are also a nice touch, showing how they transformed simple renderings into fully fleshed-out three-dimensional characters.

Dragonfly - Natural History Museum

Dragonfly worked with the National History Museum in producing a fun animated short about bugs aimed at kids. This case study showcases the storyboards, illustrations, character designs, and scriptwriting that went into creating it.

Case study design examples like this one aren’t only important in communicating the steps you took in completing a project, but serve an important marketing role. This case study shines due to its navigation. While it could be complicated in some instances to have multiple CTAs, Dragonfly makes sure that each section showcases a service they offer, linking readers directly from that section to the service they are most interested in. When you offer so much, this is a smart way to capture all prospective clients and make it easy for them to learn more about what they want to know, rather than overwhelming them with irrelevant information.

OH Partners - Arizona Lottery

In the advertising industry case studies are essential in showing how an agency’s work helps its clients in meeting their goals. Providing examples from successful marketing campaigns, along with numbers representing their positive results goes far in showing prospective clients the value of what advertising agencies do.

OH Partners , launched a campaign for the Arizona Lottery that went far in building awareness and excitement about it. They hired actor Jon Ennis, known for his work on Better Call Saul and Mr. Show as the bearded old-timey prospector, and produced several hilarious and weird spots.

This case study features images and videos from this marketing campaign, as well as data in the form of big and bold text showing how lottery sales went up, how social media likes increased, the dollar amounts of earned media, as well as numerous awards their work received.

Joy Pepper - Nextdoor

Nextdoor features stylized depictions of people from a diversity of backgrounds that add a sense of warmth and humanity to its website and app. Joy Pepper is the artist responsible for these amazing illustrations, and we love seeing case study design examples like this that go in-depth into the creative process.

Joy Pepper recounts her work in coming up with these illustrations in a case study full of wonderful details and sketches. From finding inspiration in real life, her first drawings, and the concept boards she put together, to the final versions of the icons and other artwork you get a glimpse into every step of her creative process.

Aucadian - GoLoop

It’s no secret that we’re fans of storytelling , and we love seeing case study design examples that take you along a journey from the initial spark of an idea to product launch.

GoLoop is a fleet management app, and this detailed case study begins with scribbles on a whiteboard and ends with screenshots of its sophisticated GPS-based app. From analyzing what problems it should solve and branding ideas to design elements like component libraries, typography style sheets, and color schemes this is a comprehensive look at everything that was involved in building this application.

Related articles

Website button design 101: tips, best practices and examples, prototyping in figma to live site: the vev shortcut, create your own compelling case studies with no-code.

Feeling inspired to create your own cutting-edge case study? Vev makes it easy to put one together so that you can broadcast your talents and products with the world. With a host of powerful tools, layout options, immersive effects, and animations all easy to access in Vev’s drag-and-drop interface, creating for the web has never been easier. Publish your creation anywhere when you’re done — including to your existing website.

Want More Inspo?

Get our monthly newsletter straight to your inbox. You can always unsubscribe at any time. Privacy Policy

Find the images you need to make standout work. If it’s in your head, it’s on our site.

• Images home
• Curated collections
• AI image generator
• Offset images
• Backgrounds/Textures
• Business/Finance
• Sports/Recreation
• Animals/Wildlife
• Beauty/Fashion
• Celebrities
• Food and Drink
• Illustrations/Clip-Art
• Miscellaneous
• Parks/Outdoor
• Buildings/Landmarks
• Healthcare/Medical
• Signs/Symbols
• Transportation
• All categories
• Editorial video
• Shutterstock Select
• Shutterstock Elements
• Health Care
• PremiumBeat
• Templates Home
• Instagram all
• Highlight covers
• Facebook all
• Carousel ads
• Cover photos
• Event covers
• Youtube all
• Channel Art
• Etsy big banner
• Etsy mini banner
• Etsy shop icon
• Pinterest all
• Pinterest pins
• Twitter all
• Twitter Banner
• Infographics
• Zoom backgrounds
• Announcements
• Certificates
• Gift Certificates
• Real Estate Flyer
• Travel Brochures
• Anniversary
• Baby Shower
• Mother’s Day
• Thanksgiving
• All Invitations
• Party invitations
• Wedding invitations
• Book Covers
• Editorial home
• Entertainment
• About Creative Flow
• Create editor
• Content calendar
• Photo editor
• Background remover
• Collage maker
• Resize image
• Color palettes
• Color palette generator
• Image converter
• Contributors
• PremiumBeat blog
• Invitations
• Design Inspiration
• Design Resources
• Design Elements & Principles
• Contributor Support
• Marketing Assets
• Cards and Invitations
• Social Media Designs
• Print Projects
• Organizational Tools
• Case Studies
• Platform Solutions
• Generative AI
• Computer Vision
• Free Downloads
• Create Fund

An Expert’s Guide to Creating Graphic Design Case Studies

Case studies are a powerful tool in the creative industry. Being able to review your work, look at what you’ve accomplished, and learn from it is incredibly useful. But beyond being a tool to sharpen your skills, a case study is an invaluable marketing asset to have at your disposal. In an industry as competitive as design, a graphic design case study could become the driving force of your portfolio.

Since case studies are so powerful — going beyond simple testimonials and work screenshots — spending the time and effort to create an effective, well-done study pays for itself many times over. So how do you get the most out of your graphic design case study?

This quick guide will cover how to make an effective case study for your portfolio. Here are the key components:

• Targeting : Focus on a past client that represents your ideal future client.
• Perspective : Write in the client’s perspective so potential clients can easily relate.
• Narrative : Don’t be dry – tell a story about the client’s needs and your design process.
• Data : Show the success of your work through cold hard facts and numbers.

Read on for more case study insights from Wes McDowell of The Deep End Design .

Write for your ideal client

The first step in any case study is figuring out who to write about. Most likely, you have dozens — if not hundreds (if you’re doing your job right) — of happy clients to choose from. So how do you choose the best of the bunch?

The easiest and most effective way to figure out which client to focus on is by figuring out who you want to appeal to. Take a moment and try to visualize your ideal client. Maybe it’s someone in the music industry because of all those record-label internships you had in college. Or maybe you want to attract people in the healthcare industry. Whoever your ideal client is, and whatever the reasons, start there.

Once you’ve got your ideal client in mind, think about similar clients you’ve already helped. Maybe you designed a website for a new band last week. Or maybe you created a logo for your favorite doctor’s group practice. Starting with related case studies helps you to attract more of the same.

Write about the client, not about yourself

Writing a case study from the perspective of the client is another effective method. Writing about the specific issues that made them come to you in the first place is a great place to start.

If a potential new client can read the study and easily put themselves in the shoes of someone you’ve already helped, then congratulations — you’re on your way to a study done right. Prospects who can read it and think, “That’s my problem too!” will immediately feel that you can really help them. And that leads to more inquiries and even more clients.

Tell a story

Everyone loves to hear a good story, whether it’s what your friend saw her neighbor doing on her lawn, or how that crazy SUV driver cut off your brother in traffic today. Case studies might sound boring, but a well-crafted one isn’t.

Take your potential client on a journey from start to finish. Begin with who the original client was, what they do, and why they contacted you. Take the reader through your process: how you identified ways to help, how you met with the client, and what changes you implemented. Then reveal what the work looked like when it was done, how the client felt, and the end results.

Here’s a good example from the folks at Erskine Design. They draw you in from the first line, explaining why they were contacted, and walking you through the process from start to finish. There are also plenty of visuals to show you what work was being done and how.

Share the results

Last, and most certainly not least, be sure to use real, hard data. Some clients will scan your case studies just for that data. Maybe they aren’t interested in the journey, or how your old client is now your best friend who brings you apple pie on Sundays. That doesn’t make the story less important, but prospects need also to be assured that if they hire you, you’ll get results.

By all means, give them what they’re looking for. Show how your client’s traffic jumped from 100 people a day to 300. Show how sales increased by 20% because they hired you. Use real, hard, and authentic data.

This is incredibly important for those of us who handle a lot of SEO, SEM, or writing work. SEO MOZ has a very well-done case study that drives the point home. Here, they show us all the before-mentioned tactics — plus plenty of data, showing off exactly what they were able to accomplish and how.

Final thoughts

While the thought of writing a full case study may sound daunting (and a bit like homework), it doesn’t have to be. Prospective clients don’t want to read inside jargon any more than you want to write it, so feel free to write the way you would speak. Just tell a good story about how you took a client with a problem and effectively solved that problem for them, along with why you made some of the choices you did. It’s really just that simple.

Wes McDowell is the lead designer, blogger, and podcast host at The Deep End Design in Los Angeles.

Top image by Dmitriy Domino

All other images by  Darko 1981

Recently viewed

Related Posts

Website Design Ideas, Examples, and Inspiration

A good website design merges usability with aesthetic style. We’ll…

How to Make a Coloring Book for Self-Publish or Just for Fun!

Coloring books aren’t just for children anymore! You can design…

Inspiring Graphic Design Portfolio Examples

Learn how to create a graphic design portfolio with style and impact in this complete guide to portfolio design.

How to Design a Book Cover: The 5 Elements of Best-Seller Cover Design

What makes a book a best-seller? A compelling story, fantastic characters, or the quality of the writing perhaps? It’s more visual than you might think.

© 2023 Shutterstock Inc. All rights reserved.

• Terms of use
• License agreement
• Privacy policy
• Social media guidelines

Get the course! 10h video + UX training

How To Write a Great Design Case Study

Case studies are often seen as documentation. But they can be more than that — digestible, thorough stories that showcase skills, values and process. Here are some examples to refer to when writing one.

How do we write a great design case study? I’ve put together some practical guides, examples and do’s and don’ts on how to stand out.

Key Takeaways #

• Think of a case study like a magazine feature.
• Keep a case study digestible, thorough and a story.
• Choose a customer that represents your scope of work.
• Promote the skills that you want to be hired for.
• Focus on insights rather than process.
• Show your intention and your values.
• Use the language that your future clients will understand.
• Teach readers something they don’t already know.

A fantastic example: Creating Slack's illustrations , neatly put together by Alice Lee.

I absolutely love diving into case studies that highlight wrong assumptions and failures, explaining how designers managed to turn the ship towards a better outcome. It’s a wonderful way to understand how a designer thinks, and that how they learn and adapt along the way.

Don’t be afraid to show your mistakes, and tell honest stories that your prospect clients can connect to. Probably the worst thing you could do is to create a polished, soulless, marketing version of your work that is too perfect to be true.

Authenticity and enthusiasm always shine through. Don’t hide them, and people will notice how incredible you are.

Design Case Study Examples and Guides #

A Complete Guide To Case Study Design , by Fabricio Teixeira, Caio Braga

Creating Slack's illustration voice , by Alice Lee

Reimagine the future of TV , by Abdus Salam

Designing Urban Walks , by Anton Repponen

Case Study Club , a curated hub by Jan Haaland

A Guide To Case Studies for Designers , by Jenny Kowalski

How to Write Project Case Studies For Your Portfolio , by Tobias van Schneider

Tips to Structuring Case Studies , by Lillian Xiao

How to Write Great UX Case Studies , by Yu Siang Teo

How To Write A Case Study For Your Design Portfolio

How To Write Trust-Building Case Studies (+ Templates) , by Elise Dopson

The Ultimate Guide to Writing a Good Case Study

How to Create Case Studies Without Any Past Projects

Related articles

How To Name Design Tokens in Design Systems

How To Make A Strong Case For UX Research

The Best Handoff Is No Handoff

Mobile Accessibility Target Sizes Cheatsheet

• mindful design
• student success
• product design
• ui/ux design
• watch me work
• design careers
• design inspiration

10 Exceptional Product Design Portfolios with Case Study Breakdowns

After working with many designers throughout my own career and helping many more build their job-ready portfolios, there are a few designers that I keep coming back to for inspiration and some that are inspiring a new generation of UI/UX and Product Designers to enter the field.

I've chosen 10 of our favorite UI/UX and Product Designers—a colorful tapestry of digital product architects that have evolved from graphic designers, marketers, architects, engineers and everything in-between. Their unique backgrounds and journey bring something special to our industry and illustrate how we can all do more meaningful, interesting and impactful work:

There are 10 things in particular that make these 10 designers really stand out:

• They have each honed their craft from the bottom up (whether having gone through a traditional academic program, an online course like DesignerUp , or being self-taught).
• They are all at different stages of their careers (some newly minted and others seasoned veterans).
• They continue to learn, grow, push the envelope, document and share their genuine experiences.
• They each hail from a different background (and sometimes non-design industry) that informs who they are and what they work on as a designer.
• Their evolution is apparent in their work.
• They are passionate about the problems they solve and find joy in connecting with the users they serve.
• They are transparent about their processes, thoughtful in their communication about it and not afraid to show what worked and what didn't.
• They have focused portfolios that reveal their unique point of view as a designer.
• They are a diverse group of designers from different cultural, gender and socio-economic backgrounds.
• They have so much to teach us all about design and how to use it to express authenticity and to understand and help others do the same.

Case Study Format:   http://simonpan.com/work/uber/

• The Challenge
• Early Insights
• Reframing the Problem
• The Redesign
• Design Strategy

“In a city as busy as San Francisco, over $1 million was wasted per week because of problematic pickups.”

Madeline Wukusick

Madeline is a graduate of our DesignerUp Product Design course. She was able to create an incredible portfolio working through our curriculum, blended with her background in graphic and data design that set her up for immediate success landing professional design roles.

Case Study Format:

• The Observed Problem
• The Research
• In the Insights
• The proposed How Might We Statements
• Lean Canvas and Product Strategy
• Business Requirements
• The Solutions and MVP Features
• Things that could be improved

"Thanks for helping me work through these iterations—it's been tremendously helpful! You have such a knack for fine-tuning and teasing out subtle themes that I hadn't noticed before. From these comments, I have a better sense of some of my growth areas to work on and ways in which to push myself. It also helped me realize that I am most interested in hybrid roles, or at least roles with a strong visual component. Really grateful to have discovered this course :-)" - Madeline

Not an Italian mobster; Johny Vino is an engineers' designer. I've been a long time admirer of his work every since his mind-blowing animations and micro-interactions arrested me mid Dribbble scroll many years ago. He is a thoughtful, meticulous designer that understands how to align user and business goals all while transmuting conventional interaction patterns into something that is altogether transcendent yet familiar.

Case Study Format: https://johnyvino.com/

Process, Goal and Task Oriented that varies with each project

• What he worked on
• What he aim to accomplish
• Business Goals
• Representation of complex data
• Integration

Humans are not perfect. I like to apply 3 principles to ever product I design to help me focus on that. Fitt's Law, Mimicry, Aesthetic Usability Effect

Steph Parrott

Steph is a product designer based in Toronto. Currently working on Plantd and most recently at Square in San Francisco.

Case Study Format: https://www.stephparrott.com/plantd/

• Roles and Process
• App Overview
• Feature proposal
• Design to Development
• Looking to the future and what's next

"As someone who hasn’t eaten meat in almost 20 years, I’m highly motivated to put in the work to find plant-based options, but for those starting to dabble, how can we except them to do the same?" - Steph

Tom is the co-founder of the community and event series Design Club , and an investor & advisor to Bricklane . He currently works  own clients, helping invent, design, and launch new ventures. Before that he held design leadership roles at fashion and fintech startups, and was as a senior designer at a global agency. Case Study Format: http://tom.pe/gc-dashboard.html

• Summary of the problem space, challenges, project and contribution
• Goal and Problem
• Design Principles applied
• Proposed solution and representation of dashboard and data
• Design frameworks used
• Future considerations

"The problem here is that by trying to create something for everyone, we risked helping no one. Avoiding the design equivelant of an identity crisis became a big focus of mine. I'd do this by finding ways to inject a point of view into the product. By knowing what it wasn't, as well as what it was." - Tom Petty

Want to create an incredible portfolio like these full of amazing case studies to get you hired? Enroll in our Product Design Course today!

Garett MacGillivray

Much like myself and other designers of a particular generation, Aussie/Canadian Garett MacGillivray has been around the block and through the evolution of graphic designer, web design, UI/UX Designers and now landed squarely as a full stack Product Designer.

Case Study Format: https://aucadian.com.au/project/goloop

• Exploration and Ideation
• Component Library
• B2B product interface

I've had many labels throughout my career in the digital industry. It's safe to say that I enjoy crafting digital experiences.

Elise is a Bay Area designer that jumped to the bay from NYU. She comes from an advertising and marketing background and has fine tuned her communication skills and processes vast knowledge of the tech and digital product industry has a whole having been on the broadcasting and marketing side of things.

Case Study Format: http://www.elisefu.com/work-komeeda/

• Impact/Metrics
• User testing
• User research
• Information Architecture
• Implementation
• Major Findings
• Formal User Testing

I was driven to design because I felt excited and rewarding to learn about people’s goals and desires, help them solve problems and make their lives easier.

Latiesha Caston

Latisha is a User Experience Designer passionate about holistic, accessible, and inclusive design, based in Seattle.

Case Study Format: https://www.latieshacaston.com/veggie-grill-online-ordering-experience

• The Problem
• The High-level Goal
• The approach
• Pain Points
• Optimizing flow and improving architecture
• Interaction model breakdown
• Looking to the future

"Our high level goal was to design a holistic order-ahead experience that keeps the core of what we've built, while delivering on opportunities, addressing pain points, and setting the stage for the future." - Latisha

Karolis Kosas

Having recently joined the amazing design team at Stripe as a Product designer, Karolis's portfolio is clean and minimal and his case studies really understand the mental model of the user, getting into their heads and revealing the friction points they are feeling and how he can insert a solution that improves on the experience with compromising the soul of the designer.

Case Study Format: http://karoliskosas.com/cinemaclub/

• prototyping
• Built the product from zero

Visual communication is a self-sufficient organism capable of adapting and evolving based on the input of multiple sources.Acting in such context, the designer is an initiator, establishing methods and boundaries for the system to establish itself as an independent entity.

Rohit Singh

One of o ur very own graduates ! Rohit Singh is an up and coming product designer with a focus on helping early-stage startups and new businesses blossom.

Rohit outlines his process for creating an MVP for his digital product from scratch, which serves as a sort of physical and virtual library for the poorest class of India.

Case Study Format: https://work.khadush.in/booksite-an-online-physical-book-sharing-platform/

• Inspiration
• User Interviews
• Lean Canvas
• Visual Design
• Final Words

I specialize in helping early stage startups validate their riskiest assumptions using leading design methods

After analyzing all of these case studies and working with 100s of designers in our product design course to get them ready for the job application process, we've created our own tried-and-true templates to make it easy for designers to replicate the successful format and structure of these top portfolios using Notion .

Each of these amazing portfolios tells the story of the product designer, their evolution, their process and shows what they bring to the world. But it's not easy doing what they do or knowing exactly how to show and tell who you are as designer. Having a solid design education and getting feedback from the design community is the best way to ensure that your work is up to par and being presented in a way the shows your skills and your worth.

Have a look at our partners' advice over at Pathrise on building a strong UX design portfolio .

The best design resources, in your inbox

Tips, tricks, articles and freebies. It's all happening in the DesignerUp Newsletter. View the archives →

We'll only send the occasional email and promise not to spam.

© Copyright 2022 DesignerUp. All Rights Reserved.

The 23 Best Graphic Design Portfolios I've Ever Seen, & How to Start Your Own

Published: June 10, 2024

A great graphic design portfolio doesn’t do the work for you, but as an ever-running marketing tool, it can change your life by reeling in new opportunities.

AI-generated design as well as online design platforms like Canva are impacting graphic design hiring, making your portfolio more important than ever before.

So whether you‘re a full-time graphic designer or dabbling in graphic design as a freelancer, it’s critical to create a tailored graphic design portfolio to showcase your work to potential clients.

To that end, I've created a list of over 20 impressive graphic design portfolios, instructions on how you can create your own, and tips to curate the perfect space for your unique work.

Table of Contents

• What is a graphic design portfolio?

Graphic Design Portfolio Website Examples

Where to find inspiration for your design portfolio, how to make a graphic design portfolio, graphic design portfolio ideas, graphic design portfolio tips, what is a graphic design portfolio.

A graphic design portfolio is one of the most important elements a client or employer needs to see when choosing a graphic designer. A portfolio should include a selection of a graphic designer’s best work, as well as professional samples from client projects.

It’s important to note that while there’s definitely still a place for physical portfolios, graphic designer websites can really offer a host of advantages when done well.

150+ Free Content Creation Templates

Access ebook, blog post, CTA, case study, and more content templates.

• Ebook Templates
• CTA Templates
• Blog Post Templates

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

With a decade in the floral design industry, I know from experience how quickly you can share your expertise and create a great impression with an online body of visual work at hand. Mine is simple and has ads on it, but the landing page represents my abilities in pavé design, wedding work, and high style.

21. Aries Moross

HubSpot's Free Website Builder

Create and customize your own business website with an easy drag-and-drop website builder.

• Build a website without any coding skills.
• Pre-built themes and templates.
• Built-in marketing tools and features.

3. Include a professional case study or client recommendations.

Lindsay Burke told me it's incredibly valuable to write out a case study to complement any website visuals.

She says, “Through a written case study, your site visitors can get a sense of your project's background, the problem you were aiming to solve through design, and the process you took to arrive at a final deliverable.”

Chong added, “Mockups are great at showing your visual design skills, but don't necessarily demonstrate your ability to work in a real-world context, so you'll want to take the time to explain how you would have approached it in a true business setting.”

4. Create graphic design materials for a made-up company.

If your designs are impressive enough, potential clients won't care that you created them for a fictitious company. In fact, you could impress them with your innovation and creativity.

Don't forget to share this post!

Related articles.

14 Essential Design Tips for Beginners: Transform Your Skills and Create Stunning Graphics

13 Graphic Design Trends to Use in 2021 — and Two to Avoid

10 Projects to Improve Your Design Skills

6 Questions to Ask Before Hiring a Freelance Graphic Designer

The 7 Elements of Graphic Design, and How to Apply Them This Year

28 Graphic Design Terms Every Marketer Should Know [Infographic]

Free templates for blog posts, images, ebooks, CTAs, and more.

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

5 Key Parts of a Great Design Case Study

Here are five of the most important areas that go beyond the basics of case study writing and get into the more challenging parts that can provide a far greater reward.

When done right, case studies are seriously complex and represent hundreds of hours of design work. At their start, they can feel like a disorganized, overwhelming mess.

Step by step, they transform into a piece of work a designer can truly be proud of because it tells the story of their growth over the project. Being able to effectively communicate and illustrate that unique story is key to a designer’s success in the interview process, and a way for them to stand out from competitors.

I’ve lost track of how many case studies I’ve reviewed in my time at Designation — it’s probably somewhere close to 1,000 by now — and in all that time, I’ve seen many important parts of case study writing come into focus.

Below are five of the most important areas that go beyond the basics of case study writing and get into the more challenging parts that can provide a far greater reward. Together, they can turn good designers into great design storytellers—and set them up for greater success later on as professionals.

Show your process assets purposefully.

Assets are your opportunity to show rather than tell—explain a big chunk of the process in a visual form. Assets can take many forms, and the more diversity in them, the more engaging for readers.

They include photographs, which can backup descriptions of on-site research, interviews, and teamwork; screenshots of in-progress work and art boards; sketches showing rough ideas that were fleshed out later; Post-it notes and affinity diagrams; wireframes, sometimes with color added for extra clarity for the reader; animated gifs showing microinteractions and user flows through the product; charts and tables; and so many others.

When focusing on a design or visual case study image like this shows a surprising amount of information and process—how creatively messy it can be to sketch, sorting to find ideas worthy of development, fleshing the strong ones out, and applying design elements and patterns to them.

A case study without showing assets is incomplete, but one that shows assets without explaining them is almost worse, because a designer always needs to explain their importance to the process.

The best way to do that is to use  captions  for each asset. But captions must always be a part of the overall story; they shouldn’t only repeat information that the asset already shows. They must provide a unique insight, and further the story for the reader. By doing this, it activates the caption and justifies its existence and the work it takes to write them by the designer.

This designer used two forms of captions to illustrate their screens: Annotations that point out specific areas of concern from testers who looked at them, and a caption below that collected and synthesized them for easier comprehension.

Provide a  competitive benchmark for the study.

Designers often like to downplay the research and analysis of competitors that happens near the beginning of a project because it doesn’t directly focus on the work they created. This is an unfortunate mistake because it’s a huge part of the story and it often leads directly to designers making research or design decisions later in the process.

Furthermore, designers should show off that they have a deep understanding of the competition whenever they work on a product; that they know what’s happening in the landscape and how their product fits in. Showing logos or only mentioning names of competitors isn’t anywhere near enough; designers need to discuss in detail what competitors do well, and analyze the areas in which they need improvement. Designers can provide screenshots of competitors’ products, but they need to go further and  annotate or comment on them, to show a more detailed analysis.

They can’t ignore out-of-category competitors too, because that research often leads to innovative ideas that can catapult their product over in-category competitors’.

This designer looked at three competitors and called out unique areas of strength and weakness from each one, especially as they led the designer to make design decisions later in the process.

Finally, all that analysis requires synthesis, which means explaining the opportunities the designer saw for their own product after looking at the competition. This helps the designer more formally describe the end of the competitive research phase of a project and how that helped them refocus on their own product.

The designer analyzed competitors’ images in the center of this screen, but the text at the bottom presents what they did with that analysis: They derived an important design principle from it, which heavily impacted the next phase of their work.

Be team-centered in user experience design.

Almost every project done at Designation is done as part of a team because almost every project done as a professional designer is done as part of a team. It’s crucial for designers to reflect that in their case studies. Designers must write  “we”  when talking about group actions, and  “I”  when talking about personal design decisions or insights. In other words, we encourage designers to use “I” when they talk about where they led their team, and “we” when they supported another team member leading their team.

This is a great example of team-centered writing, where the designer discusses how the team worked together to generate concepts. She then switches to individual writing to indicate which concept she took charge of. Both extremes of this spectrum are bad in a case study—ones that only say “we” look like the designer didn’t think for themselves, and ones that only say “I” look like the designer isn’t a team player. So that balance has to always be found. Employers look for teamwork skills as much as they look for hard design skills, and a case study can be an excellent place to find records of them.

Don’t designsplain.

This is a big one. A lot of designers fall into the trap of explaining a basic element of the design process or design deliverables to the reader. You might be asking yourself: Why is this problematic? It’s because the intended readership of a designer’s case study is a hiring manager, design director, or someone else looking for evidence the designer will make a good fit for their team.

That means the designer needs to make an educated assumption that the reader is already familiar with design—and write their case study with that in mind. Unless it’s a part of their design process that was extremely unusual or the designer came up with it themselves, a designer has to assume the reader’s already familiar with it. If they don’t, they risk looking like the case study condescends to the reader, and that’s not purposeful writing.

One easy way to avoid this is for a designer to always  avoid second-person writing —using “you” and “your”—which is a little too conversational for a case study anyway. They keep the focus on themselves and their work, and tell a stronger story in doing so.

Get the details right.

It might be cheating a little to clump a bunch of little steps together like this, but it’s important at the end of the case study writing process to  micro-edit and make sure every detail is taken care of.

That’s why designers utilize tools like Figma to to tell their story in a professional way.

That’s making sure every word is spelled right, every publication title is italicized, and every piece of software is properly capitalized. But it’s also doing tasks like using contractions as often as possible throughout the text, removing extra spaces from between words or in front of paragraphs, knowing when to use a semicolon or an em dash, and making sure all dumb quotes are taken care of. And using writing tools like Hemingway, Grammarly, and GradeProof are a huge gift to anyone who needs a little help to take care of tricky grammar and get rid of run-on sentences.

Though tedious and time-consuming, the best way to take care of these details is to go through the complete draft and look to make one editing change at a time. Trying to edit for multiple needs causes the designer’s attention to be split in many directions—and makes them much less effective as self-editors.

Digital Designer Case Studies Conclusion

Writing effective, powerful case studies is a craft, and like all crafts, it rarely comes naturally to people. It takes skill and work, and staying in practice. The tools, resources, feedback, and processes we give every designer at Designation are able to be used for years and decades to come, so a designer can turn any work they produce into a case study anytime during their long career.

Remember:  Hiring managers don’t look for designers with superpowers; they look for designers who are committed to designing better and better for as long as they practice design. And case studies are the absolute best metric for a designer to see how far they’ve come and how much they’ve learned, from tool to tool, project to project, and job to job.

Disclaimer: The information in this blog is current as of February 26, 2020. Current policies, offerings, procedures, and programs may differ.

About Flatiron School

Related posts.

Learn to Code Python: Free Lesson for Beginners

Flatiron School Announces Partnership with Bletchley Institute

Quantifying Rafael Nadal’s Dominance with French Open Data

Related resources.

Behind JavaScript, HTML/CSS, and SQL, Python is the fourth most popular language with 44.1% of developers. Check out this article on how you can learn this popular programming language for free.

Flatiron School is thrilled to announce a partnership with the Bletchley Institute, an organization dedicated to creating the premier community for technologists and creatives.

The French Open tennis tournament is underway in Paris. Learn how data science can help us understand Rafael Nadal’s success and how impressive his career has been at the clay court tournament.

Privacy Overview

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

A Space for Creative Growth

How to write case studies for your design portfolio

A good case study on your design portfolio is a great way to make it stand out. Here’s how to get it right

Illustration: Yali Ziv

• Jul 13, 2020

Putting a work process into words might cause some to break out in a light sweat, but just like the rest of a design portfolio , a case study is a chance to shine. The key to approaching such a task is by realizing that crafting the perfect case study isn’t that different from any other design work you do.

Here’s everything you need to know about writing good case studies, from how to structure them visually, to which details to include and more.

What is a design case study?

In a nutshell, the main aim of a case study is to tell the story of a specific project of yours. The text you write can put your design work into context and make it more fully understandable. Integrating images with text, a case study outlines the most important details of the process, from the brief you were given, to how you approached the task, to the final result. Incorporating case studies into your portfolio helps give potential clients or employers a look into how you work, what you’re good at and what your thought process is.

When making your online design portfolio, note that not every project requires a full case study. You can pick the projects you’re proudest of, giving you the chance to highlight your skills and explain what made the design so successful. Now that we’re on the same page, here’s our best advice:

Include the relevant details

To make sure you’ve covered all the relevant information, here’s a checklist of the main details to include. Note that these aren’t strict guidelines - it depends on how thorough you want to be and what you feel is important for your project.

1. Background info: If you were working with a client, include their name and what they do, plus the date and location in which the project took place. Also explain what your role was within the project (for example “Web Design,” “Branding” or “Art Direction”). If you worked in a team, credit the other people and list their roles. This is also the place to give a brief sentence on what the project actually is.

Example: See how designer Ariel Sun , introduces her rebranding project:

“The Human Project at NYU (THP) worked with the agency Ogilvy & Mather to redefine their brand and develop a new logomark. As THP's internal graphic designer, I applied that visual language to a variety of marketing & communications assets and fresh brand collateral.”

2. Goal: Briefly explain what the aim of the project was. You can base this on the design brief you worked with throughout the project.

Example: Design studio and Wix user, Run Wild , state the goal of their UX project:

“The challenge was to redesign a convoluted site into an action-oriented site that provides clear navigation and call to action.”

3. Design process: You can really decide how much you want to elaborate here. Keeping it short is also an option. Either way, the idea is to talk about the main stages you went through in the design process, which decisions you made and why, what your approach was, and any changes made throughout.

You can include some of the research you did and what your inspirations were. Don’t be afraid to mention any challenges you experienced or concepts that were later scrapped - as long as you keep a positive attitude and explain the reasoning behind the decisions, remember that it’s all part of the process.

4. Results: Here, present the final outcome and your main learnings. You can also write about how success was measured. For example, state whether all your client’s expectations were met (this can be in the form of client quotes if you like), or perhaps include stats you have about an increase in sales, or describe how part of your design was later used on a larger scale.

Example: In this case study about a redesign for a website, Ariel Sun explains the results:

“The result is an engaging and unexpected twist on a garden party that tells a clear story while still leaving room for the viewer’s imagination. After reviewing a set of submissions that included work from our very talented colleagues, Tattly picked this design and will elaborate it into a full-on marketing campaign.”

Make it skimmable

We all know that we live in a time of short attention spans . Even when it comes to prospective clients or employers, they want to get a feel for your design project fairly quickly. That’s why you should make your case studies accessible, inviting and easy to grasp at first glance , both in terms of the design and the text itself.

The layout of the page should serve the storytelling process, revealing information in digestible, bite-sized chunks. Combine images with text cohesively, somewhat like the structure of a magazine or book. See how designer and Wix user, Brittney Johnson , separates the parts of her case study into drop-down sections, enabling you to focus on one point at a time.

Split up your text into paragraphs and add headers that will enable visitors to navigate easily from section to section. Consider emphasizing certain words by making them bold, changing their size or opting for a different color. Additionally, caption each image with a brief description, so that even people that aren’t into reading lengthy text can comprehend the context. It will also help make your design more accessible , offering your visually impaired site visitors an alternative understanding of the image.

In terms of the writing style, keep it concise and to the point . Use short sentences that explain exactly what you want to say, without repeating themselves just for the sake of sounding sophisticated. This doesn’t mean you need to sound robotic - you should still keep it personal and remember that at the end of the day, your target audience is humans.

Write it like a (short) story

Just like in any other design project, a case study simply tells a story. And that’s exactly the way you should write it. It should have a structure, including a beginning, middle, and end, made up of all the relevant details (scroll up if you missed what those are). It’s not just random sentences placed one after the other, but rather, an outline of a process, generally written in chronological order.

Maintain your tone of voice

On a similar note, remember that your case study describes your project, so feel free to let your individual personality shine through in your writing. Keep the same tone as in the rest of your design portfolio’s copy , in order to form a clear personal brand and consistent browsing experience.

You don’t need to be overly formal or use complex jargon, as this could just end up intimidating people. On the flip side, including jokes might be taking it a little too far. Simply focus on getting the point across succinctly and in your own language. As a result, the likelihood is that you’ll give your site visitors a better idea of who you are and where your specialty lies.

The combination of text and images helps break it up into a story-like layout, resulting in a more immersive and engaging experience, which is why you should make sure not to only include visuals. Plus, text is great for your design portfolio’s SEO (search engine optimization), increasing your chance of ranking higher on search results.

Get more inspiration on how to tell a visual story through your portfolio with these 8 graphic designers’ websites .

MORE POSTS LIKE THIS:

Nov 3, 2021

Show and tell: sharing the story behind your creation

Apr 14, 2021

How to write your best personal statement

Feb 4, 2019

How to Write the Perfect Copy for Your Design Portfolio

5 Case Study Examples and Design Tips

Businesses can promote their own products and services all they want with every marketing strategy out there, but it’s equally important to hear from the customers and clients themselves—that’s where case studies come in. If you're new to the medium or looking for inspiration, we've dedicated this post to sharing the goods on what case studies are, as well as several strong case study examples.

Case studies are an extremely powerful tool that every business needs to leverage. In fact, only 14% of consumers said they trust advertising to be truly honest about their product or service. Consumers are more inclined to trust outside reviews, data, and testimonials.

Of course a business wants to tout how amazing its offerings are, but to hear from a client and learn how that client achieved their goals? Priceless!

What is a case study?

Case studies are a proven and effective marketing strategy that centers both the business and the client, while providing ways that the business went above and beyond and solved the client’s problems. 

In addition to showcasing client quotes and testimonials, case studies dive deeper into the problem-solving process from start to finish, complete with tangible examples. If you thought product and store reviews were helpful, then case studies will be your new best friend! 

Case studies not only uplift the customer— they also influence other potential customers and allow them to imagine how their goals can be achieved. It’s easier to make a bigger decision when you hear from those who have successfully gone through the process themselves, isn’t it? 

Publishing case studies is a win-win for everyone involved. Here are 5 case study examples to get you inspired to find new ways to leverage your brand and uplift your clients at the same time.

5 case study examples and best practice tips

1. web design case study example.

Digital and creative-based agencies or businesses create case studies to showcase their design processes, ideas from start to finish, and the end result in action. If you’re a creative business, consider visualizing your business’s processes while showcasing how happy your client is with the final product. 

See the full case study here .

Takeaway: highlight key components of project

Balkan Brothers Agency highlighted many key components of their project with DECODE, such as timeline, challenges, solutions, outcomes, and mockups. Not only did they showcase their user-friendly designs, they analyzed the process from pen and paper to web.

2. Software case study example

Many software as a service (SaaS) companies showcase customer stories, or case studies, on their webpages, with an emphasis on encouraging potential clients to contact the business’s sales team and learn more about the business’s offerings.

By highlighting customer studies on your main page or making it easily accessible to find on your site, businesses can create a case study repository within reach.

See the full Slack/Stripe case study .

Takeaway: encourage potential clients

In Slack’s case study, they highlight key testimonials from the client, break down the case study into digestible sections, and promote a call-to-action to reach out to their sales team or try the software for free. 

Catchy, isn’t it? You’re inspired from a client’s story, and now you’re ready to go try it for yourself today.

3. Visual branding case study example

There’s nothing quite like a well-designed and colorful brand . Visually pleasing branding design has a positive effect on consumers and clients.

When a client is truly satisfied with their end result, their verbal proof is best positioned up front and center. In addition to showcasing any quotes from the client, find a way to promote analytics and data from the project.

Read the Metalab and Headspace case study.

If you’re in a hurry to create a stunning case study outside of a website page, we’ve got you covered with our free presentation templates and tools. Select your favorite layout, add any quotes, testimonials, or statistics, and bam! You’re ready to go in just a few steps.

Read the Metalab and Headspace case study .

Takeaway: amplify quotes and analytics

If your case study is content-heavy, it’s best to break down your case study into impactful chunks, such as isolating the testimonial and analytics from other pieces of information. 

Putting your project’s results in the form of numbers not only provides you with stats you can brag about, but it also helps others to see the true results of working with your business. A 69 percent increase in average number of pages per session from working with this company? Count me in!

4. Workflow development case study example

When working with a company, many clients are hoping to overcome their organizational pain points, or challenges.

Read more about Spotify and Figma .

Whether that client is searching for a redesign of an interface, or a new workflow tool that can speed up their organization’s processes, overcoming those challenges and highlighting how your business solved those challenges can have a tremendous impact on potential clients—especially if potential customers have similar challenges.

Takeaway: highlight challenges and ways to overcome them

When in doubt, highlight the challenges that your client faced before working with your product or service and emphasize how your business overcame them. There’s a huge chance others may have similar challenges that they are eager to solve.

5. Restaurant case study example

Many businesses rely on a strong visual brand to differentiate them from their competitors. If your business offers photography to elevate a client’s brands, create a collection of your designs created just for them—and let the images speak for themselves.

See the Shutterstock/Blaze Pizza case study .

Alongside the custom photography , highlight the client’s challenges, the solution your business arrived at, and the results of the collaboration. Who knows, maybe a future client will be eager to elevate their own brands with your creative treatment?

Takeaway: imagery can have a huge impact

If you’re a creative services business, promoting the final design or image is crucial to showcasing your style and also giving others a snippet of what you can do for their business.

Let the images you showcase in your case study speak for themselves. You can also supplement each with brief descriptions on the challenges the client faced, the solutions you brought to the table, and the results of your work.

There are many ways to put your client in the spotlight —but also subtly boost your business as well. Case studies represent a gold mine for businesses; interviewing your clients to gain their perspective on your products, services, and processes goes a long way.

Set your business up for success: Learn how to write a business proposal , get inspiration for your next infographic design , and make next-level marketing materials .

Check out all the things you can make for your business:

Alex Clem is a Dallas-based graphic designer and content marketer. She grew up captivated by the world of color, typography, and print design — and now enjoys writing about the important intersections of design, activism, and sustainability.

Related Articles

• UI Designers
• UX Designers
• Creative Directors
• Web Designers
• Mobile App Designers
• Visual Designers
• Product Designers
• Responsive Web Designers

All About Process: Dissecting Case Study Portfolios

A portfolio is more than a cache of images, it’s a way to demonstrate design skills and problem solving to clients. We show how to elevate portfolios by explaining the inner workings of a case study.

By Adnan Puzic

Adnan is a UI/UX expert with a bold aesthetic and a passion for designing digital products for startups and corporations.

PREVIOUSLY AT

Designers have portfolios. It’s a precondition of our profession. We all know we need one, so we get to work assembling images and writing project descriptions. Then, we put our work on the web for all to see, tiny shrines to individual talent and creativity.

It’s a familiar process, a rite of passage, but why do we need portfolios in the first place?

If we’re honest, we must admit that most of our portfolio design decisions are influenced by what other designers are doing. That’s not necessarily bad, but if we don’t understand why portfolios look the way they do, we’re merely imitating.

We may produce dazzling imagery, but we also risk a portfolio experience that’s like strolling through an art gallery. “Look at the pretty pictures…”

The number one audience that design portfolios must please? Non-designers.

These are the people who seek our services, the ones working for the businesses and organizations that invest in our problem solving abilities.

Non-designers need more than beauty from a design portfolio; they need clarity and assurance. They need to come away believing in a designer’s expertise, their design process, and ability to solve problems in an efficient manner.

Luckily, it’s not difficult to design a portfolio to meet those needs.

The Advantages of a Case Study

What is a case study?

A case study is a tool that a designer may use to explain his involvement in a design project, whether as a solo designer or part of a team. It is a detailed account, written in the designer’s own voice (first person), that examines the client’s problem, the designer’s role, the problem solving process, and the project’s outcome.

Who can use a case study?

The beauty of the case study framework is that it’s adaptable to multiple design disciplines. It organizes need-to-know information around common categories and questions that are applicable to all kinds of design projects—from UX research to visual identities .

At its core, a case study is a presentation format for communicating the journey from problem to solution. Details within the framework may change, but the momentum is always moving towards clarity and uncovering a project’s most important whats , whys , and hows .

How do case studies benefit designers?

Many clients don’t understand all that goes into the design process. And while they certainly don’t need to know everything , a case study provides a big-picture overview and sets up realistic expectations about what it takes to design an elegant solution.

A case study can also be a handy presentation aide that a designer may use when interviewing a potential client. The format allows a designer to talk about their work and demonstrate their expertise in a natural and logical progression. “Here’s what I did, how it helped, and how I might apply a similar approach with you.”

Are there any drawbacks to using case studies?

Don’t let a case study turn into a ca-a-a-a-a-se study. The whole project should be digestible within 1-2 minutes max. If necessary, provide links to more detailed documents so that interested visitors may explore further.

A lot of design work, especially digital, is created within multidisciplinary teams, so designers need to be clear about their role in a project. Blurring the lines of participation gives clients false expectations.

Many make the mistake of treating portfolios as repositories of all of their past projects, but three to five case studies documenting a designer’s most outstanding work is enough to satisfy the curiosity of most potential clients (who simply don’t have time to mine through everything a designer ever did).

Case studies are professional documents, not tell-all manuscripts, and there are some things that simply shouldn’t be included. Descriptions of difficult working relationships, revelations of company-specific information (i.e., intellectual property), and contentious explanations of rejected ideas ought to be left out.

Crafting a Customer-centric Case Study

It’s one thing to know what a case study is and why it’s valuable. It’s an entirely different and more important thing to know how to craft a customer-centric case study. There are essentials that every case study must include if clients are to make sense of what they’re seeing.

What are the core elements of a case study?

Introduce the client.

Present the design problem.

Recap your role.

Share the solution you designed.

Walk through the steps of your design process.

Describe the results.

Note any key learnings.

Wrap it all up with a short conclusion.

Happily, the core elements also outline a case study presentation format that’s simple, repeatable, and applicable to multiple disciplines. Let’s look closer:

• Who was the client?
• What industry are they in?
• What goods or services do they provide?
• Keep this section brief.
• What was the client’s problem?
• Why was it important that the problem be solved?
• Are there any additional background tidbits that might be helpful or interesting?

• What, specifically, were you hired to do?
• What were the constraints? Time. Budgetary. Technological. Etc.
• Before diving into your process, summarize the solution you designed.
• Make the summary short but powerful.
• Don’t give all the good parts away, and don’t be afraid to use language that makes your audience curious about the rest of the project.
• Go through the various steps of your discipline specific process.
• Again, summarize what you did, but don’t overload. Find a balance between informational and interesting.
• If you can, try to make each step introduce a question that only the following step can answer.

• Use this section to share a more robust description of the results of your design process.
• Be direct, avoid jargon, and don’t get too carried away with the amount of text you include.
• Don’t go overboard here, but if there are interesting things that you learned during the process, include them.
• If they won’t be helpful for the client, leave them out.
• Quickly summarize the project, and invite potential customers to contact you.
• It doesn’t hurt to provide a call to action and a contact link.

*Note: This isn’t the only case study format, just one that works. It’s helpful for people to encounter a predictable framework so they can focus on what they’re looking at as opposed to interpreting an inventive presentation structure.

The Value of Overlooked Details

Want to create a case study with a top notch user experience? Don’t underestimate the value of design details. Design projects are more than problem-meets-solution. They’re deeply human endeavors, and it makes a difference to clients when they see that a designer goes above and beyond in their work.

Share client feedback.

How did the client feel about your working relationship and the solution you provided? When you deliver top-notch work and nurture trust, get client feedback and include it in the case study as a testimonial.

If something you designed blew your client away, weave a testimonial into the case study (along with an image of what you made). This combo is proof positive to potential customers that you can deliver.

Explain positive metrics.

Not all design work has direct metrics that prove its success, but if your work does, and the results are impressive, include them. Just make sure that you don’t mislead (easy to do with statistics), and be careful that the metrics make sense to your audience.

Show unselected work.

Sometimes, amazing work from the design process doesn’t make it through to the finished product. These unused artifacts are helpful because they show an ability to explore a range of concepts.

Highlight unglamorous design features.

Not every aspect of design is glamorous. Like a pinky finger, small details may seem insignificant but they’re actually indispensable. Highlight these and recap why they matter.

Link to live projects.

It can be highly persuasive for a client to experience your work doing it’s thing out in the real world. Don’t hesitate to include links to live projects. Just make sure that your role in the project is clear, especially when you didn’t design everything you’re linking to.

Win Clients and Advance Careers with Case Study Portfolios

Designers need clients. We need their problems, their insights, their feedback, and their investments in the solutions we provide.

Since clients are so important, we ought to think about them often and strive to make entering into partnership with us as easy and painless as possible. Design portfolios are a first impression, an opportunity to put potential clients at ease and show that we understand their needs.

Case studies push our design portfolios past aesthetic allure to a level where our skills, communication abilities, and creativity instill trust and inspire confidence. Even better, they take clients out of a passive, browsing mindset to a place where “That looks cool,” becomes “That’s someone I’d like to work with.”

Further Reading on the Toptal Blog:

• UX Portfolio Tips and Best Practices
• Ditch MVPs, Adopt Minimum Viable Prototypes (MVPrs)
• Breaking Down the Design Thinking Process
• The Best UX Designer Portfolios: Inspiring Case Studies and Examples
• Influence with Design: A Guide to Color and Emotions

Understanding the basics

How do i create a design portfolio.

Nowadays, it’s best to create a design portfolio online. Options vary: Some designers use a service like Behance or a WYSIWYG website builder like Squarespace, while others build custom sites with CSS. It’s also important that online design portfolios be responsive for multiple screen sizes.

How do I create an online portfolio for free?

Websites like Behance and Dribbble (among others) are free options for designers to publish online portfolios. Some designers have opted to forgo traditional web portfolios and instead document their work on social platforms like Instagram and Facebook. Free sites also take care of design portfolio layout.

How do you organize a design portfolio?

A designer ought to organize his portfolio according to his strengths. This means highlighting his best and most relevant work. Remember that design portfolios should be made with potential clients in mind. Avoid overly technical project descriptions, images without context, and excessively long case studies.

What is the purpose of a case study?

Many design portfolios consist of short project summaries and process images, but case studies are a way for designers to show their problem-solving skills to clients in greater detail. This is achieved by defining the client’s problem and the designer’s role, along with an overview of the designer’s process.

What are the advantages of a case study?

Case studies combine descriptive text and images and allow designers to demonstrate the details of their design processes to potential clients. They are also a great way for designers to highlight problem solving and small, but powerful, design features that may otherwise be overlooked.

• VisualDesign
• DesignProcess

Adnan Puzic

Sarajevo, Federation of Bosnia and Herzegovina, Bosnia and Herzegovina

Member since September 28, 2015

About the author

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy .

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• SaaS Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

20 Brilliant Design Case Studies That Neatly Present Brand Identity Concepts

• Articles & Inspiration
• 13 November 2017

21 Comments

Developing a brand identity involves more than just making a logo design. Research into the company’s values is necessary to collect inspiration from which to draw ideas. Concept sketches are then developed into a visual identity that represents the brand, which consists of not just the logomark, but also a complementary colour scheme and typography that provide consistency across the entire brand image. Rather than presenting just the final logo graphic in their portfolios, the designers featured in today’s showcase have produced thorough case studies that completely breakdown their brand designs. See how they neatly present the concept alongside stationery mockups and examples of real life usage.

Vintage Font Bundle Apply 70% Discount Code

Font & Label Collection Apply 20% Discount Code

Modern Lettering 5 Fonts Collection

interastar by Necon

BEUNIT by Ollestudio

Validbox by Motyf Studio

Fortune Step by Sheen Young

BKK Logos by Hidden Characters

Worken Identity by Paola Flores

4Decision by Joy Intermedia

Costella Empreendimentos by Estudio Alice

Wyre Branding by Ramotion

Volusion Brand Identity by Ramotion

Veranda by Marka Network

Annecy by Grapheine

Gaia by Marka Network

Neostalgia by Marka Network

Jalan Surabaya Antique Market

Charly Gusto by Mubien Studio

Palm House by The Seventh Art

Aracely Melendrez Arquitecto by Roberto Melendrez

Extrajet by Alphabet

Origami by Mohammed Mirza

Semet Identity by Mohd Almousa

Subscribe to my newsletter to be the first to hear about new posts

that’s all cool am,azing design process and very talented designer i’ve ever seen.. I hope you to upload tutorial on Youtube about logo process design and brainstorming idea for logo project ? ,. Hope you answer… Thanks :)

Thanks for your feedback/request!

Amazing cases.. Thanks for sharing!!

Glad you liked the examples. Thanks Eduardo

Such amazing talent! Thank you for sharing Chris : )

Thanks for your comment Leandi

They all look fantastic!

Glad you liked the post

Wow! Nice work! I really like it! Keep it up :)

Thank you tauhedul

This goes to show the amount of thought and dedication that is put into designing logos. They’re not just logos but rather the birthchild of a creator.

I like that concept

Amazing, thanks for sharing! I always in a search for something new for my site and sites of my clients

Thanks for your comment Betty

Great examples Chris. The first one, Interastar, reminds me of the E-trade logo.

Glad you liked the examples Michael!

This is one fine article worth bookmarking as a brand design resource. Great designs with fantastic color schemes and top class typography. Thanks a lot for sharing :)

Glad you like the article Davo!

ThanQ for presenting these examples, they helped allot

Ohhh MG you are amazing !! Wonderful, fantastic and beautiful works. Where you studied? Im from Puerto Rico and I did my Master Degree in Pratt institute, my favorite designs are Corporate Identity but a long time I dont work, I really like a lot your Corporate Identity works, my works are junk next to yours. I wich to meet you and see your other works. Continue like that, you’re going to get far away. GOD BLESS YOU.

that is Awesome…! a true brand identity is such like that. This makes your costumes really amazed at your creativity. By the way, who is the mighty designer behind all this,. thanks

Comments are now closed

Join my mailing list and receive a free design resources bundle!

Stay up to date with Spoon Graphics by having new content delivered to your email inbox. As a way to say thanks, you’ll also gain instant access to my free bundle of design resources.

• Design for Business
• Most Recent
• Presentations
• Infographics
• Data Visualizations
• Forms and Surveys
• Video & Animation
• Case Studies
• Digital Marketing
• Design Inspiration
• Visual Thinking
• Product Updates
• Visme Webinars
• Artificial Intelligence

How to Create a Case Study + 14 Case Study Templates

Written by: Brian Nuckols

When it comes to high impact marketing content, case studies are at the top of the list for helping show off your brand’s stuff. 

In this post, I’ve put together a few high-level case study design tips as well as 14 professionally designed case study templates that you can use to start designing beautiful case studies today. 

Let’s begin! 

Here’s a short selection of 12 easy-to-edit case study templates you can edit, share and download with Visme. View more templates below:

What is a Case Study?

A case study is a way for you to demonstrate the success you’ve already had with existing clients. When you create a case study, you explore how previous clients have used your product or service to reach their goals. 

In particular, a case study highlights a specific challenge or goal one of your clients was struggling with before they discovered your product. 

It then demonstrates how your work has assisted them on the journey towards overcoming the challenge or accomplishing the goal. 

A case study’s outcome is typically to share the story of a company’s growth or highlight the increase of metrics the company tracks to understand success. 

The case study includes an analysis of a campaign or project that goes through a few steps from identifying the problem to how you implemented the solution. 

How to Write a Case Study

When it comes to adding irresistible design to your content from the start, using a helpful tool is a great start. Sign up for a free Visme account and start highlighting your own client success stories using one of our case study templates today. 

Also, while you’re beginning to transition your case study workflow to include a professional design tool, it’s helpful to review some high level principles you can incorporate into your case study. 

We’ll start by reviewing some of the critical style tips and structural elements to include in your case study before progressing to a more detailed design section. 

Pinpoint Your Main Message

When designing an impactful case study, it’s essential to stay clear on the metrics that you’re highlighting. The process of overcoming business challenges is a dynamic process with many moving parts. 

If you do not stay focused on what matters in your case study, you risk obscuring the big win your client experienced by using your product or service. 

This is why you need to focus on a single message or metric. This is often called the north star metric . 

The north star metric is the single most crucial rate, count or ratio that helped your client move closer towards their goals or overcame an obstacle. 

While north star metrics are context dependent, a useful heuristic you can utilize is to figure out the most predictive metric of your client’s long term success. 

In the template I’ll highlight below, cost per lead was the north star metric that The College for Adult Learning needed to optimize. 

Build relationships with customers and drive sales growth

• Reach out to prospects with impressive pitch decks and proposals that convert
• Monitor clients' level of engagement to see what they are most interested in
• Build a winning sales playbook to maximize your sales team's efficiency

Sign up. It’s free.

Use Emotionally Rich Language 

Recently researchers at Presado did an interesting study to understand the types of language that help readers take action. They broke the content included in marketing assets into several categories, including functional, emotional and descriptive. 

In the most successful pieces of content, the researchers found that emotionally coded words were present in 61% of the content’s total volume.

This research shows the benefit of using emotionally engaging content in your case study. While it’s essential to focus on the concrete evidence of how you helped your client get from where they started to a successful outcome, do not forget to highlight the emotional journey. 

Use Data For Concrete Evidence 

Once you’ve decided on the north star metric to highlight and you choose the emotional response you want to reinforce in your case study, it’s important to use actual data from the project to share the concrete results your product helped to achieve. 

To make sure your audience can follow your line of thinking, make sure the data in your case study is precise. If you track data across time, your readers must know whether you chose to track by month or years. 

If there are any apparent trends, you can use color to highlight specific areas in a chart. 

If you want to dig deeper into using data to tell compelling stories, check out our video data storytelling tips to improve your charts and graphs. 

In the template below, The College for Adult Learning case study is an excellent example of how these elements can work together. 

Cost per lead was a critical north star metric, so we chose to emphasize the increase in revenue and a decrease in cost per lead. 

Additionally, the background section uses emotionally rich language by highlighting how the school helps students get ahead with their career goals. Also, the factual data is the centerpiece of this page in the case study.

If you’re ready to share how you impacted a client, use the College for Adult Learning case study template right now! 

Include All Necessary Parts of a Case Study

After you’ve interviewed your client and you’re getting ready to start writing, it’s important to remember each piece you need to cover.

All good case studies consist of five parts: Introduction, Challenge, Solution, Benefit and Result.

While you don’t necessarily need to label each section like that, be sure that the flow makes sense and covers each section fully to give your audience the full scope of your case study.

RELATED: 15 Real-Life Case Study Examples & Best Practices

14 Case Study Templates

Now that we have explored some of the high level strategies you can use to create a business case study, we will transition to 14 case study design templates you can use with Visme. 

1. Fuji Xerox Australia Case Study Template

Use the Fuji Xerox case study template to showcase the concrete results you achieved for your clients. It has sections where you can explain the goals you started with and the results you achieved. 

2. College for Adult Learning Case Study Template

As we’ve explored already, the College for Adult Learning template has sections where you can embrace a data driven storytelling approach while also connecting with your audience using emotionally rich language. 

Utilize the professionally designed business case study to connect with your audience. 

3. Intel Case Study Template

The Intel case study has beautiful visual elements and gives you space to share the project’s context and the goals you set out to achieve. It also allows you to get concrete with the results you achieved. 

You can always use the Visme Brand Kit to incorporate your unique brand colors into this stunning design. 

4. Bit.ly Case Study Template

Bit.ly is a marketing product that helps brands track how they are doing with campaign results. The bit.ly business case study template showcases how they drove impressive results for an eCommerce business. 

You can modify the professionally designed case study template to illustrate the key results you drive for your clients. 

5. NVISIONCenters Case Study Template

The NVISIONCenters case study template is an excellent example of how powerful it is to pair beautiful designs with the results you generate for your clients. In this case study, we see how you can transform your past accomplishments into a powerful marketing asset. 

6. Adobe Case Study Template

The Adobe case study is an exciting example of a business case study because it does a great job illustrating how you can use a specific result to create a powerful marketing asset. 

Adobe had a particular goal of branding to position itself as a leader for the future of digital marketing. LinkedIn sponsored messages was an effective tactic to drive the outcome Adobe needed. 

You can use the Adobe case study template to demonstrate the success of your most effective tactics. 

7. Inkjet Wholesale Case Study Template

The Inkjet wholesale case study template is an excellent choice if you want to experiment with your case study’s visual element. The roadmap to objectives diagram is a powerful graphic that illustrates the journey of a successful campaign. 

8. Neutrogena Case Study Template

If you have a strong visual brand to tell your case study’s story with visuals, the Neutrogena template is a great choice. It is already designed with plenty of space to highlight your visuals. 

When it is all said and done, you have the results section to complete a successful client partnership story.

9. Weebly Case Study Template

The Weebly case study template is your choice if you want to add visual flair to your case study. The beautiful layout is a testament to the power of pairing minimal design with an exciting statistic. 

10. Patagonia Case Study Template

The Patagonia case study is a perfect example of how crucial it is to make design choices based on your brand’s unique personality. 

It is a fantastic choice if you have a project to showcase featuring a brand with a distinct brand aesthetic.  

11. Think With Google Case Study Template

The Think With Google case study template tells the story of a mobile game that needed to create more engagement on their app. 

It is a visually impactful case study design template that you can use to tell a compelling story about your results. 

12. Kleenex Case Study Template

This case study template is the perfect way to show off search marketing results for a client or other highly specific KPIs that you managed to accomplish.

Insert the initial challenge followed by your company’s solution and adjust the included data visualization tools to showcase your specific results.

13. Customer Experience Presentation Case Study Template

The presentation case study template is an excellent choice for blending beautiful visual elements with the ability to give detailed information about the results you generated, as well as showcasing that data in a unique format. 

If you are ready to show how the unique features of your product or service drove real world business results then it is a good choice for your case study. 

14. Webinar Presentation Case Study Template

One small business saw incredible results when using Visme to optimize their webinar workflow. They saved 100 hours of their precious time by incorporating our collaborative design tools. 

We designed the small business template using those results as an example. When you have an eye catching effect to showcase to your audience, you can use this template as a starting point. 

Case Study Design Tips

Now that we’ve explored the 14 templates you can use with Visme to create your case study, let’s take a look at some practical design tips that will take your content to the next level. 

Be Brief In Your Case Study 

In discussions about writing with style, brevity is a common topic. However, it’s also an important design principle. 

Brevity in design is when you find the best way to perform your intended objective in as few steps as possible. 

When designing your case study, make sure you do not add extraneous visual elements where they are not needed. Instead, think of the effect you want to have on your reader and try to do it simply. 

Describe Your Vision Clearly

Earlier in this article, I wrote about the north star metric, your case study’s emotional effect and using data to make the case study concrete. Your design choices should serve to reinforce these primary goals. 

Clarity in design is when all of the visual elements add up to a whole. 

A great example of this is in the small business case study template where the shapes, typography and color scheme all emphasize the main idea that Visme helps the reader save time. 

Create A Consistent Style 

Visual consistency is a fundamental design principle that you can not afford to ignore in your case study. It will help you increase readability and make sure your audience does not get frustrated with jarring visual elements. 

In short, a consistent style is when you use a uniform color scheme, typography and the same kinds of visual elements throughout the case study. 

Use A Case Study Template For Readability

Readability is a crucial element of design, especially for case studies that are experienced on mobile devices. Contrast is an impactful readability principle. 

Make sure any contrasting colors you chose are easy on the eye and your reader does not have to strain to read your case study. 

Use Proper Alignment In Your Case Study 

Alignment is one of the principles of design that sets professionally designed business case study templates apart. Great designers have an intuitive eye for the mathematically based ratios of proximity invisible in sound design and an eyesore in lousy design. 

The good news is that you do not have to be a mathematician nor a professional designer to have a perfect alignment for your case study. Visme utilizes an easy to use drag and drop design tool that helps you achieve proper alignment in your case study. 

Let Your Brand Personality Speak

When we make intentional design decisions, we want to create a positive emotional experience for our audience. One of the best ways to do that is to make decisions that showcase your brand’s unique personality .

Is the case study you are creating like a well dressed business person who is serious, trustworthy and capable of doing a great job? Is it more like an extravert at a party bouncing from person to person lighting up the room? 

There is no right answer, but you need to infuse your viewpoint into the case study you create if you want to create a unique design. 

Start Designing Your Case Study Today 

A professionally designed case study template will help you create a stunning case study. While reviewing some high level design strategies is an important step, a tool like Visme will help you make a real impact on your audience.

If you’re ready to create your next case study, get started with Visme today .

Design beautiful visual content you can be proud of.

Trusted by leading brands

Recommended content for you:

Create Stunning Content!

Design visual brand experiences for your business whether you are a seasoned designer or a total novice.

About the Author

Brian Nuckols is a writer working in Pittsburgh, Pennsylvania. He enjoys communicating visionary ideas in clear, action oriented language. When he’s not working on content for a transformative company you can find him analyzing dreams, creating music, and writing poetry.

Case Studies

586 inspirational designs, illustrations, and graphic elements from the world’s best designers. want more inspiration browse our search results ....

• For designers
• Hire talent
• Inspiration
• Advertising
• © 2024 Dribbble
• Freelancers