QuestionsAnswered.net
What's Your Question?
What Is a Case Study?
When you’re performing research as part of your job or for a school assignment, you’ll probably come across case studies that help you to learn more about the topic at hand. But what is a case study and why are they helpful? Read on to learn all about case studies.
Deep Dive into a Topic
At face value, a case study is a deep dive into a topic. Case studies can be found in many fields, particularly across the social sciences and medicine. When you conduct a case study, you create a body of research based on an inquiry and related data from analysis of a group, individual or controlled research environment.
As a researcher, you can benefit from the analysis of case studies similar to inquiries you’re currently studying. Researchers often rely on case studies to answer questions that basic information and standard diagnostics cannot address.
Study a Pattern
One of the main objectives of a case study is to find a pattern that answers whatever the initial inquiry seeks to find. This might be a question about why college students are prone to certain eating habits or what mental health problems afflict house fire survivors. The researcher then collects data, either through observation or data research, and starts connecting the dots to find underlying behaviors or impacts of the sample group’s behavior.
Gather Evidence
During the study period, the researcher gathers evidence to back the observed patterns and future claims that’ll be derived from the data. Since case studies are usually presented in the professional environment, it’s not enough to simply have a theory and observational notes to back up a claim. Instead, the researcher must provide evidence to support the body of study and the resulting conclusions.
Present Findings
As the study progresses, the researcher develops a solid case to present to peers or a governing body. Case study presentation is important because it legitimizes the body of research and opens the findings to a broader analysis that may end up drawing a conclusion that’s more true to the data than what one or two researchers might establish. The presentation might be formal or casual, depending on the case study itself.
Draw Conclusions
Once the body of research is established, it’s time to draw conclusions from the case study. As with all social sciences studies, conclusions from one researcher shouldn’t necessarily be taken as gospel, but they’re helpful for advancing the body of knowledge in a given field. For that purpose, they’re an invaluable way of gathering new material and presenting ideas that others in the field can learn from and expand upon.
MORE FROM QUESTIONSANSWERED.NET
Jun 7, 2020
7 Inspiring Case Studies That Every Designer Should Read
By bestfolios.com — collecting the best designer portfolio websites, resumes and design resources.
1. Luminaire Jar
By Joanne Chen | Ariel Chiang | Yichen Xie | Elyssa Yim, students at University of Washtington.
See full screenshot
2. SAP CX Live — crafting B2B2C prototypes
By Javier Yep, former designer at SAP.
3. Microsoft: Query formulation and auto-suggest
By Mr Brian Morris, Senior designer at Microsoft.
4. Strat VR
By Jiacheng Yang, student at ArtCenter.
5. IBM C.School
By Micheal Lo, digital product designer at IBM
6. Box Annotations
By Vandana Pai, former product designer at Box.
7. Notifi VR
By Philippe Kimura, MS HCI student at Georgia Tech.
Thanks for reading!
More from bestfolios.com.
Bestfolios is a gallery featuring the best portfolios and resumes from top UI/UX designers, graphic designers and motion designers.
About Help Terms Privacy
Get the Medium app
bestfolios.com
Text to speech
📚 LAST CHANCE TO REGISTER FOR THE JOB GUARANTEED 8-WEEK Product Design Career Preparation course! Sign up now!
Case Studies
473 inspirational designs, illustrations, and graphic elements from the world’s best designers. want more inspiration browse our search results ....
- 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 .
Further Reading on SmashingMag:
- Showcase of Case Studies in Design Portfolios
- 15 Impressive Case Studies from Behance
- Improving Smashing Magazine’s Performance: A Case Study
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. View the finished project.
“ 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.
(al) (il) (ea)
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.
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.
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 Design Blog:
- UX Portfolio Tips and Best Practices
- Ditch MVPs, Adopt Minimum Viable Prototypes (MVPr)
- Breaking Down the Design Thinking Process
- Influence with Design – A Guide to Color and Emotions
- The Best UX Designer Portfolios – Inspiring Case Studies and Examples
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
Located in Sarajevo, Federation of Bosnia and Herzegovina, Bosnia and Herzegovina
Member since September 28, 2015
About the author
Designing vr games worth playing: 6 key considerations.
World-class articles, delivered weekly.
Subscription implies consent to our privacy policy
Toptal Designers
- Adobe Creative Suite Experts
- Agile Designers
- AI Designers
- Art Direction Experts
- Augmented Reality Designers
- Axure Experts
- Brand Designers
- Creative Directors
- Dashboard Designers
- Digital Product Designers
- E-Commerce Website Designers
- Front End Designers
- Full Stack Designers
- Information Architecture Experts
- Interactive Designers
- Mobile App Designers
- Mockup Designers
- Presentation Designers
- Prototype Designers
- Prototyping Experts
- SaaS Designers
- Sketch Experts
- Squarespace Designers
- Usability Designers
- User Flow Designers
- User Research Designers
- Virtual Reality Designers
- Visual Designers
- Wireframing Experts
- View More Freelance Designers
Join the Toptal ® community.
Save 50% on all annual plans with code 50FORMAT .* View Plans
Save 50% * 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?
Get the best of Format Magazine delivered to your inbox.
The 7 Best Model Poses for a Successful Photo Session
7 Steps for Writing Your Portfolio’s Biography ‘About Me’ Page
What Female Photographers Should Know About How to Deal with Stereotypes
TikTok as a modern tool for portfolio promotion
Free Photography Courses You Can Take Online
How to Get Into Real Estate Photography
20 Incredible Illustration Portfolio Examples You Should Bookmark
Create an online portfolio in minutes
Promotion valid until March 15th, 2023 at 11:59 p.m. PST. Promotional discount off the subscription price of a new Basic, Pro, Pro Plus, Workflow or Bundle annual plan can be applied at checkout with code 50FORMAT. Discount applies to the first year only. Cannot be combined with any other promotion.
- Print Design
- Digital Art
- Logo Design
- Case Studies
Graphic & Logo Design Case Studies
Let’s go on a journey…
…10 years in the making..
These case studies provide a unique insight into the design work created for select clients. Every job is different, every business wanted to make a difference. Real design, real clients.
Case Study: Nitracore
Case study: adv.1 wheels, case study: tru-bilt fabrications, case study: apex training, case study: crossfire motorcycles, privacy preference center, privacy preferences.
How to write engaging case studies for your portfolio
We examine 5 portfolios with powerful case studies.
Project case studies are one of the most important yet overlooked parts of building a design portfolio (opens in new tab) . In our efforts to design the perfect portfolio and showcase our visual work, we often rush the copy or omit it entirely, leaving only a shallow overview of who we are and what we can do. But dumping a bunch of photos on your project pages without any context sells your work short.
Case studies are so crucial to the success of a designer's website that we built Semplice (opens in new tab) , a portfolio system for designers, entirely around them. (If you're after design portfolio and case study inspiration, check out the Semplice Showcase (opens in new tab) .)
Your portfolio case studies are your opportunity to show prospective clients and employers how you think, how you work and what you can contribute to the world. Here are five examples of designers who do case studies well.
01. Liz Wells (opens in new tab)
As a UX designer, Liz Wells (opens in new tab) has the unique task of making sitemaps, sketches, prototypes and user flows both visually engaging and concrete for her readers. She strikes the perfect balance in her portfolio case studies, highlighting work for brands like Google, Viceland and Spotify.
Wells shares the project story from challenge to solution, taking care to explain her process along the way. Photos, videos – even early sketches torn from her notebooks – are thoughtfully photographed and laid out. All of it works together to not only showcase Wells' work, but also who she is and how she thinks.
On my blog, I publish a series (opens in new tab) in which I interview top companies about how to get a design job where they work. Almost every company has voiced that they want to understand how you think and see your process.
Think about your project in phases and share your work – even the less glamorous notes and sketches, if they’re important to the story – from beginning to end, and you’ll find you have plenty to say.
02. Melissa Deckhert (opens in new tab)
Melissa Deckert (opens in new tab) ’s case studies may be minimal but they pack a punch. Some, like her Food Quote GIFs case study for Tumblr, hook you in with a little secret that makes you look closer at the work.
“Tumblr asked me to animate a few food quotes for an internal project,” Deckert explains in the case study. “Naturally I found a way to weave Beyonce into two out of three.” Short and sweet, but the last line creates intrigue and make you want to see more.
Others case studies, like her In Every Moment We Are Alive (opens in new tab) book cover project, surprise you with a big reveal at the end. The case study works in reverse, leading with the finished product (the final book cover) and ending with a behind-the-scenes shot that makes you rethink what you saw before.
Despite all our excuses, designers can write too (opens in new tab) . While it’s good to share your process, it also helps to remember the one person who is reading your website. They’re tired, they’re busy and they’ve probably reviewed dozens of portfolios today already. If your case study surprises them and brightens their day, it will be remembered.
03. Naim Sheriff (opens in new tab)
Naim Sheriff (opens in new tab) breaks his case studies into sections, making the page easy to read and digest. He leads with a brief paragraph introducing the client and task at hand, then shares each project element in bite-sized pieces.
Most importantly, he explains his visuals instead of just dumping them on the page. Sheriff’s case studies are rich in imagery but he doesn’t just show, he tells.
Just as with a newspaper or magazine article, it’s important to remember people are scanning your case studies. They may decide to read deeper if something catches their interest, or they may just skim and move on to the next project.
Use your layout to guide them through the content and draw them deeper. Make your captions meaningful for scanners, and write easy-to-read paragraphs for the ones who stay.
04. Mackey Saturday (opens in new tab)
Mackey Saturday (opens in new tab) ’s case studies, like his whole portfolio, are clean and light. His identity designs for brands like Instagram, Oculus and Luxe stand on their own (as logos must do) but his case studies, complete with videos, polished photos and before and after GIFs, explain the nuances and decisions behind the finished product. Most notably, Saturday reveals his entire perspective on branding and design in his case studies.
“Redesigning a globally recognised logo is a polarising opportunity: Do you put your personal style on display, or stay true to what the brand’s users are familiar with?” he writes. “I believe the best designs channel a company’s culture, not the designer’s.”
Don’t be afraid to share your opinion and perspective in your case study. While you should avoid sharing opinions like, 'I really hated working with this client', you should, where relevant, express your beliefs about design and how you applied them to your work.
Tell people what inspires you, what principles guide you, share your feelings about the final result. This adds personality and helps visitors understand who you are as a designer. Read more tips for writing case studies here. (opens in new tab)
05. Kali & Karina (opens in new tab)
Kali & Karina (opens in new tab) tee everything up for their case study readers with a strong introduction, including the project challenge, the project brief (in one sentence), as well as the partnering agency, their client and their role. They then follow through with their approach and the outcome.
On of the most common portfolio mistakes (opens in new tab) is forgetting to mention your role and give credit to your team. Giving credit doesn’t make your work on the project any less impressive.
In fact, it shows you can work well and collaborate with a team. It also helps a potential employer or client understand where your main skills lie and how you’ll fit into their team or project.
- Inspiring redesigns of design agency portfolios (opens in new tab)
- 6 ways to power up your portfolio (opens in new tab)
- How to start a blog: 10 pro tips (opens in new tab)
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Get Weekly Tips and Inspiration
Sign up below to get the latest from Creative Bloq, plus exclusive special offers, direct to your inbox!
Related articles
- Hubspot Blog
- HubSpot.com
Oh no! We couldn't find anything like that.
Try another search, and we'll give it our best shot.
The 14 Best Graphic Design Portfolios We've Ever Seen, & How to Start Your Own
Published: June 03, 2022
A great graphic design portfolio can’t move mountains, but it can change your life with a new job or opportunity. AI and other factors are impacting graphic design hiring, making your portfolio more important than ever before.
And while some designers still carry a physical book of printed design examples, most portfolios are graphic designer websites. These sites show audiences much more than design skills like logo design or typography.
Whether you're a full-time graphic designer or dabbling in design as a side project in your free time, it's critical you create a sleek graphic design portfolio to showcase your work to potential clients.
Fortunately, we've created a list of 14 impressive graphic design portfolios, followed by instructions on how you can create your own. Keep reading to get all the tips you need to curate the perfect space to showcase your work.
Graphic Design Portfolio Website Examples
- Morag Myerscough
- Heather Shaw
- Mohamed Samir
- Gleb Kuznetsov
- Chris Tammar
- Sophia Yeshi
- Stefanie Brückler
- Alex Trochut
- Tobias van Schneider
- Kate Moross
- Nisha K. Sethi
A graphic design portfolio is one of the most important elements a client needs to see when choosing a graphic designer — which means a portfolio is vital for proving your skill as a designer.
Additionally, a graphic design portfolio, much like a resume, provides necessary contact information, and any case studies you care to include from past employers.
Most portfolios today are graphic designer websites. This means that they’re not only a way to connect with clients. They also help graphic designers build communities and share their work with potential fans around the world.
So what does a graphic design portfolio need to look like to stand out? Some of the best graphic design portfolios today include these elements:
- Motion graphics
- Original illustrations
- Product design
- Ad campaigns
- Storyboards
- Brand identity
Let’s look at some graphic design portfolio website examples to inspire and motivate your portfolio development. You could be a traditional graphic designer or experimenting with new media. There’s something here for everyone.
1. Morag Myerscough
Bright graphics, animations, and clean design make this an exceptional graphic design portfolio. This approach is great for designers who lean into the art of design. It also works for designers who take on more experimental or site-specific projects.
Why we chose this graphic design portfolio: Myerscough’s aesthetic is unique and this image-focused site quickly communicates her style.
Short sections of copy connect her visual brand to her background, professional experience, and personal philosophy. The combination makes the site feel like it shows the whole designer, not just a visualization of the work she does for clients.
2. Heather Shaw
This graphic design portfolio website includes samples of book and website designs, branding, and more. It’s good for designers who work in many different media but want to present a cohesive portfolio.
Why we chose this graphic design portfolio: Heather Shaw’s portfolio is super clear and easy to navigate. It shows a wide range of skills and approaches to solving client problems, but it’s also visually consistent.
The designer also uses text effectively to explain each project and to encourage further engagement with the work.
3. Mohamed Samir
Samir’s work includes branding, typography, posters, and print design. So, this graphic design portfolio zeros in on a tight collection of award-winning designs.
This graphic design portfolio is on Behance . This makes it a good fit for graphic designers who want an online presence without designing their own website.
Why we love this graphic designer's website: Besides the high quality of the design work, this portfolio shows a diverse range of approaches to typography and style. At the same time, it shows a consistent vision and passion for visual communication.
The printed design work is also well-photographed. While the designer could have added a digital file instead, the photographs give you a better sense of the final polished design.
4. Gleb Kuznetsov
Kuznetsov’s portfolio combines product design, user experience, and graphic design to create something entirely new. This Dribble-hosted portfolio has over 50 images, which could be overwhelming. But they're split into seven easy-to-understand projects.
This makes it a great graphic design portfolio example for designers who want to show long-term or complex projects.
Why this is a great example of a graphic design portfolio website: From the images to his brief "About" statement, this designer makes his unique vision and personality part of the work and its presentation.
5. Chris Tammar
Great designers often let the work do the talking. It’s a streamlined graphic design portfolio that calls attention to client deliverables. When text is present, it adds to the value of the work, like mentioning other websites that featured their infographics. This is a great portfolio format for designers doing graphic design work like:
- Logo design
- Brochures for business clients
Why we chose this graphic design portfolio: This group of work is simple and to the point. It also shows off a wide range of skills and tactics with a consistent vision.
6. Sophia Yeshi
A clear header and tile design emphasize work samples from this powerful graphic designer.
While the tiles emphasize the designer’s unique style, you can click on each tile to get the full details about each project. This is a great approach for designers who want to share the deeper story behind each project while still making the site easy to navigate.
Why we love this graphic designer's website: A distinct style is important in graphic design. That said, it can be tough to show how many ways you can apply that distinct style in a business context. Major brands, including Google, Nike, and Comcast, use Yeshi’s unique illustrative voice to speak for their brands.
This website portfolio makes that point clear, while still making graphic design the focus.
7. Stefanie Brüeckler
This portfolio includes packaging design, illustration, and web design as well as graphic design and branding work. It’s one of our favorite graphic designer websites because it’s clean and easy to navigate.
It also shows a lot of different examples of work at a glance. This makes it a great example for designers who aren’t sure how to organize all the work they want to include in their portfolio.
Why we love this graphic designer website example: Brückler’s graphic design portfolio focuses on the tiniest of details to create an excellent user experience. From the simple page loading animation to the thoughtful use of motion graphics, this designer hones in on the stunning details.
8. Chip Kidd
Book cover designer Chip Kidd’s graphic design portfolio website uses lightbox-style pop-ups. Popups make it easier to focus on each book cover. This is a smart way to narrow in on the visuals with a graphic design site while still making it easy to see all the work in one place.
Kidd uses a range of different styles for book covers, and it’s edited in a way that makes this range look natural and exciting instead of chaotic.
Why this is a great example of a graphic design portfolio website: The dark background makes this graphic designer’s style pop. And the simple side navigation gives users a quick path to learn more about the designer and his work.
9. MDZ Design
Concise and exciting images on this graphic designer website example give site visitors a peek at execution and strategy.
MDZ Design also offers product design and strategy to clients. This makes their graphic design portfolio a useful example for strategy-focused designers.
Why we love this graphic designer website example: The range of services this portfolio shows could be overwhelming or confusing. Instead, it’s a chance to see their approach to problem-solving. They also make it easy to see how their process leads to results for their clients.
10. Alex Trochut
This graphic design portfolio is also a home for Trochut’s product design, animations, music, and NFTs. It’s a great example for multimedia artists who want to present their work on a single website. It also works for creators with a big collection of work to show.
Why we love this graphic designer website example: The four-column layout of this site shows image thumbnails of varying sizes. Each column moves at a different pace as you scroll down the page.
This motion feels dynamic and exciting and reinforces this designer’s original takes on color, type, and layout.
11. Tobias van Schneider
This graphic design portfolio website uses a range of type sizes and contrasts to emphasize the ideas it communicates. This is a great approach for entrepreneurial designers. It's also smart for anyone who does collaborations as part of their design work.
Why we love this graphic designer's website: A sticky header and big blocks of color and text make this graphic designer website interesting to explore. This site also uses scale well. It combines big images with both big and small text to emphasize each client project.
12. Kate Moross
There are many ways to play up a unique style, and this graphic design website highlights this designer’s recent work as well as a full project archive. This is a great example for designers who also do illustration.
Why we chose this graphic design portfolio: Moross uses space effectively on this site. It’s easy to get an immediate sense of the designer’s distinct style. The simple navigation helps users refine their search to target a specific type of work, like hand-drawn type or editorial design.
LingK's portfolio features their latest project while also showing other industry niches. The structure of the website helps prospective clients quickly decide if they want to work with this designer.
Why this is a great example of a graphic design portfolio website: It can be tough to convey how campaign materials for a complex event, like a wedding or conference, work together. This designer effectively shows the breadth and depth of work for each project and makes it easy to see the value of each deliverable.
14. Nisha K. Sethi
Sethi’s portfolio is simple and straightforward. It puts the spotlight on each design project. The "About" section also tells a clear story that encourages further questions and conversation.
It can be tempting to tell an audience everything on your website. But a great portfolio should offer enough samples to entice clients to reach out and learn more, but not so much that it overwhelms. This website is a great example of offering just enough.
Why we love this graphic designer website example: This graphic design portfolio combines hand-lettering, printmaking, and other media with digital design. While this designer works in a range of media, their portfolio shows a strong voice that is effective across many channels.
How to Make a Graphic Design Portfolio
- Curate your best work, and show a wide breadth of skill.
- Choose the right platform to showcase your work.
- Include a professional case study, or client recommendations.
- Integrate your personality.
- Describe the creative process.
- Show non-client work, or side projects.
1. Curate your best work, and show a wide breadth of skill.
Lindsay Burke , a HubSpot Product Designer, emphasizes the importance of quality over quantity when it comes to curating a graphic design portfolio. She says, "I recommend selecting your strongest projects and making these the primary focus of your portfolio website."
Ideally, your portfolio will feature your sharpest, most impressive 10-20 designs — undoubtedly, someone pursuing your portfolio won't have the time to look at more, and if your first couple projects are impressive enough, they shouldn't need to.
But it's equally critical you show potential clients your versatility. If you've dabbled in logo design as well as video animation, it's good to include both kinds of projects in your portfolio.
2. Choose the right platform to showcase your work.
Investing in a quality website with a custom domain URL will pay off in the long run by demonstrating your professionalism to potential clients.
Having your own website helps you organize your portfolio to suit all your business needs — for instance, perhaps you'll include 'Projects', 'About Me', and 'Contact Me' sections, so visitors can peruse your content and then contact you without ever leaving the site.
Take a look at this list of the best website builders if you need help choosing a platform for your portfolio.
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 — "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. A lot of time, effort, and iteration goes into design solutions, and a written case study will help communicate your unique process."
To cultivate a strong case study, consider including the background of the project, the problem, the process, your deliverable, and any next steps.
In the process section of your case study, Burke suggests including research, experience mapping, persona development, wire-framing, sketching, usability testing, and iteration.
Additionally, it will impress future clients if you can include recommendations from prior employers, which allows you to demonstrate a level of professionalism.
4. Integrate your personality.
As you can see in the examples above, each portfolio is drastically different depending on the artist's unique style. Someone checking out Tobias van Schneider's portfolio will expect something vastly different from someone looking at Ling K's site. Ensure your portfolio — including layout, background, and website title — reflects who you are as a designer.
5. Describe the creative process.
Each designer has a unique process when working with clients — and the sooner a potential client can learn about your process, the better. It's important you include context, so visitors can get a sense of how you handle challenges, and how your designs solve real-world problems.
Plus, including a description of your creative process can help a potential client figure out whether you're capable of handling the scope of their project.
For instance, they might be unsure of your ability to handle graphic designs for mobile until they read how you single-handedly brainstormed and created the designs for another client's mobile site. In this case, context is critical.
6. Show non-client work, or side projects.
Amanda Chong , a former HubSpot Designer, says, "Side projects are a great way to demonstrate your will to take initiative and your ability to balance multiple things at once. They're also a great way to show some of the more experimental, creative ideas that you might not be able to show through your day-to-day work."
If you're just starting out, it's acceptable to include side projects or non-client work so potential customers can get a sense of your ability and style.
Consider incorporating school work, a logo you designed for your aunt's company, or an internal design you created for your current company — ideally, your designs will negate any concerns potential clients have over your lack of career experience.
Graphic Design Portfolio Ideas
- Help a local business or start-up with its design and brand.
- Create content for your own personal brand.
- Redesign an existing website.
- Create graphic design materials for a made-up company.
- Design a logo for a brand you love.
- Create a stock theme for WordPress.
- Take part in a design challenge.
1. Help a local business or start-up with its design and brand.
One of the easiest ways to begin building your client base is by reaching out to non-profits or local businesses in your area. Think about creating mock-ups or sketches in advance, These can help you give businesses a sense of your skill and vision.
Perhaps you think a local restaurant needs a new menu logo, or want to help a gift shop with their online marketing materials.
Projects like these will help you better understand local marketing challenges, and give you time to develop your skills in those areas. You never know what a pro-bono project could lead to next.
2. Create content for your own personal brand.
As you build personal brand content, take the time to ensure your marketing materials are cohesive and sleek.
Design a unique logo for your brand. Next, start building your website, and add that same design across various materials, including your business card and resume. This is also a great time to start a branded social media account, and to create posts that show off your design skills and interests.
Clients are more likely to work with you if they can see the type of high-quality work you're able to create for yourself.
3. Redesign an existing website.
Don’t wait for your dream client to give you a call. Instead, create a complete website redesign for a well-known brand to prove your skills to future clients.
This is a well-known strategy already used by plenty of designers — just take a look at some of the impressive Behance mock-ups for brands like Twitch .
Additionally, Amanda Chong told me, "If you're creating mockups for established brands to use as part of your portfolio, it's important to pair this with a case study or description of the process that helped you arrive at your proposed design. Talk about what you think wasn't working with the existing design, some of the constraints that you think the designers were working with, and why you made the decisions that you did."
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.
Consider demonstrating your skills by putting together a creative brief for a fake company, complete with wireframes and sketches. Other projects you can create for imaginary companies include:
- Style guides
- Social media ads
- Apparel graphics
- Wrapping paper
- Brochures and email newsletters
- Simple GIFs
- Animated infographics
- Trade show booths
- Branded wall art
- Pitch decks
- Book covers
In due time, real companies will take notice.
5. Design a logo for a brand you love.
Stick to the type of content you enjoy designing. If you're particularly adept at making logos, and are often inspired by the logos used by real brands, consider designing an alternative logo for a brand you like.
Then take a look at these inspiring reimagined NFL logos . While these NFL teams probably won’t make a shift, they're great examples of the designers' skills and creativity.
6. Create a stock theme for WordPress.
WordPress, a popular content management system, allows users to develop stock themes for WP. Best of all, if your theme is approved, you can sell it as a premium theme for extra cash.
Begin by studying WordPress's most popular themes, and considering how you can create an impressive alternative. Take a look at WordPress's Theme Review Requirements and this overview of how to create a child theme to learn more.
7. Take part in a design challenge.
To get inspired, practice your skills, or interact with other designers in a community and build your portfolio at the same time, think about participating in a design challenge.
Design challenges can also help you uncover skills you didn't know you had by forcing you to step outside your design comfort zone.
There are various daily, weekly, or monthly challenges that will send you prompts on things to design — for instance, try checking out the Daily UI Design Challenge or The Daily Logo Challenge .
Graphic Design Portfolio Tips
- Show your versatility.
- Display your best work.
- Include case studies.
- Make it clean and easy to navigate.
- Prominently display contact information.
- Display your unique personality.
You’ve done the work, and now you’re pulling together your graphic design portfolio. Try these tips to make your graphic design portfolio stand out.
1. Show your versatility.
A portfolio should show a range of different works, so you want to highlight what you can do. Some clients prefer a more streamlined look, while others are looking for more experimentation.
If you have clients from different industries, include some work from each industry. Then, edit your portfolio based on the kind of client you’re showing your portfolio to.
For example, if you’re meeting with a client in real estate, show work samples from similar industries.
You’ll also want to show anyone who sees your portfolio what you can do. So, if you create design logos, books, and motion graphics, include a little bit of everything in your portfolio.
2. Display your best work.
That said, try to limit your portfolio to your best work. Don’t include a piece in your portfolio just to show that you can do it. The way that you edit your portfolio shows that you understand your strengths and know how to play them up. So, edit your portfolio to include only your best work.
If you’re great with one skill set but not as good with another, edit your portfolio to spotlight that skill. If possible, create portfolio pieces that show many skill sets at the same time.
For example, if you love hand lettering, a poster could emphasize your graphic design skills alongside this unique ability.
3. Include case studies.
Every client is unique, and each will teach you something new. As you continue to work with different clients, build up a collection of these stories.
Try not to throw anything away without documenting it. That page of thumbnails might not be much to look at on its own, but this kind of work in progress is a great way to show prospective clients how you solve problems.
When you present case studies in your portfolio, start with the initial problem your client approached you with. Next, show what the conversation and ideation process looked like over time. As you pull your case study together, don't forget to include the final solution you delivered.
4. Make it clean and easy to navigate.
Design is about more than visual skills, it’s about communicating. So the format of your portfolio, whether it’s printed or online, should be clear and simple to scan.
This point is especially important for graphic designer websites. It can be tempting to build a website that shows off the latest trends or to add Easter eggs that people need to hunt for. There’s a fine line between art and design, and those approaches can be super inspiring.
But building a complex site can also mean that clients in a hurry could miss some of your best work.
For example, a graphic designer once sent his portfolio to a creative director friend of mine. They liked the designer’s drawing but didn’t see much of the graphic design or web work that he talked about in his resume. With a little digging, they found a URL in one of the sketchbook drawings, and that URL led to his website.
This hide-and-seek process was cool, but it wasn’t clear or easy to navigate. This scenario could have been a missed opportunity for that designer.
5. Prominently display contact information.
If someone wants to talk to you, there are many places they can find you online. But you want to make it easy for them, and for you. You don’t want to miss out on an important meeting because a client reached out to you with an email you don’t check anymore.
Most graphic designer websites have a contact page that has your contact information. Once you add this to your site, be sure to check that the links and forms are working.
6. Display your unique personality.
There are thousands of successful graphic designers out there, and you might be competing against some of them for your next client. So, the best tip for a great portfolio is to be yourself.
Whether you have a feel for typography or are talented with color, show off the way that you see the world in your graphic design portfolio. Think about every detail, and then execute to the best of your ability.
Whether it’s the first version of your portfolio or the 200th, make it feel like something only you could create.
The best graphic design portfolios aren’t ever finished.
You’ve learned about the value of a graphic design portfolio and checked out some of the best portfolio examples. You read about how to create your portfolio, then you scanned some smart ideas to build on the graphic design work you’ve already completed.
So what’s next?
Even the best graphic design portfolios need constant updates. Keep in mind that while your first graphic design portfolio may be complete, portfolio building won’t ever really end.
What do you want to tackle for your next project? Social media to promote your new portfolio? A new resume or professional bio to attract clients? The possibilities are endless.
Editor's note: This post was originally published in March 2019 and has been updated for comprehensiveness.
Don't forget to share this post!
Related articles.
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]](https://blog.hubspot.com/hubfs/graphic-design-terms.jpeg "case studies graphic design")
28 Graphic Design Terms Every Marketer Should Know [Infographic]
Free templates for blog posts, images, ebooks, CTAs, and more.
IMAGES
VIDEO
COMMENTS
When you’re performing research as part of your job or for a school assignment, you’ll probably come across case studies that help you to learn more about the topic at hand. But what is a case study and why are they helpful? Read on to lear...
Case studies are important because they help make something being discussed more realistic for both teachers and learners. Case studies help students to see that what they have learned is not purely theoretical but instead can serve to crea...
Examples of a case study could be anything from researching why a single subject has nightmares when they sleep in their new apartment, to why a group of people feel uncomfortable in heavily populated areas. A case study is an in-depth anal...
7 Inspiring Case Studies That Every Designer Should Read · 1. Luminaire Jar · 2. SAP CX Live — crafting B2B2C prototypes · 3. Microsoft: Query formulation and auto
Case Studies. 473 inspirational designs, illustrations, and graphic elements from the world's best designers. Want more inspiration?
Further Reading on SmashingMag: # · Illustration, Graphics And Logo Design # · Typography # · Usability # · Advertising, Promotion And E-Commerce #.
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
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
This design principles and process I share work for all graphic design case studies, logo design, app design, web design, and more.
What to include in a design case study | Graphic design portfolio · Make A Case Study That Gets Client Work · Pen Tool Hacks you don't want to
Graphic Design case studies about a wide range of business. Including logo design, branding, print, advertising, marketing and web design.
In our efforts to design the perfect portfolio and showcase our visual work, we often rush the copy or omit it entirely, leaving only a shallow
Additionally, a graphic design portfolio, much like a resume, provides necessary contact information, and any case studies you care to
Grids. Grids serve as an integral part of every piece of graphic design. Grids offer the designer a structure over which they can arrange images