{"id":37187,"date":"2022-05-06T15:00:25","date_gmt":"2022-05-06T13:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=37187"},"modified":"2023-08-30T13:07:01","modified_gmt":"2023-08-30T11:07:01","slug":"examples-of-online-case-studies","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-online-case-studies\/","title":{"rendered":"19 Examples of Online Case Studies Done Right"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Designers generally don\u2019t like writing. After all, creative problem-solving through design uses visual, not verbal tools, right? But, sadly for many, case studies are supposed to contain text, too. This is where a lot of designers and art directors stumble, ending up either with poorly crafted case studies, or no case studies in their portfolio at all. And that\u2019s a huge mistake. Online case studies (because these days, if it\u2019s not online, it\u2019s not there at all) are immensely important as they provide a compact, informative display of not just your skills and expertise, but your professionalism too. A good case study shows that you understand the concept of focus, that you can distinguish between different layers of relevance and also sheds some light on your creative process. As such, case studies are an indispensable hiring tool.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, let\u2019s see how the visually-oriented folks can craft a case study that ticks all the right boxes.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Quick Tips for Designing Perfect Online Case Studies<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re in doubt as to where to start with your case studies, here are a few things to keep in mind:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Stay focused<\/strong>. Don\u2019t use case studies as an opportunity to channel your revolutionary ideas, but don\u2019t delve in conventionalities, either. Don\u2019t try to tell everything about the project at once, or at all. Your clients don\u2019t need to know everything you did for a project. But they do need to know the relevant bits.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Provide a solid structure.<\/strong> Scannable content is the form that works the best, whatever the format. Separate your key information in tidy, well-rounded units. These include, but are not limited to: project target\/goal\/outcome, background, evaluation, concept, implementation, conclusion.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Provide essential project information.<\/strong> Viewers need the who, the what and the when.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Treat the page as a gallery wall.<\/strong> Consider your own portfolio style and create case study pages that are in line with it, but also convey the character and the spirit of the project, too. When displaying visual material, don\u2019t just scatter it around the page &#8211; it won\u2019t impress anyone. Try exhibiting it in engaging, interactive frames, add interaction for better immersion, and display the material in their intended environment &#8211; various device screens, etc.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Maintain good measure.<\/strong> You want to dazzle the visitors, not blind them. If your case studies are too cluttered, flashy or visually saturated, they might create an undesired effect. Go for minimalism, but avoid making your pages look poor.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sure, things like these are sometimes easier said than done. That\u2019s why we prepared a curated selection of the best, most inspiring online case studies we handpicked around the web, hoping to give you some cues and ideas for your own cases. Here\u2019s what we\u2019ll talk about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#juicebrothers-by-lama-lama\">Juicebrothers by Lama Lama<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#art-of-swissdent-by-creative-nights\">Art of Swissdent by Creative Nights<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#max-shkret-by-zhenya-rynzhuk\">Max Shkret by Zhenya Rynzhuk<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#mercado-by-loer-architecten\">Mercado by Loer Architecten<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#self-scenter-by-ultranoir\">Self Scenter by Ultranoir<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#fontshare-by-wemakefab\">Fontshare by Wemakefab<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#more-more-nespresso-by-playful\">More &amp; More Nespresso by Playful<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bian-2016-by-baillat-studio\">Bian 2016 by Baillat Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#prada-employees-online-store-by-niccolo-miranda\">Prada Employees Online Store by Niccol\u00f2 Miranda<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#ortovivo-by-k95\">Ortovivo by K95<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#obys-agency-typography-principles\">Obys Agency Typography Principles<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#komuso-design-by-tubik\">Komuso Design by Tubik<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-92-group-by-humana-studio\">The 92 Group by Humana Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#dreamhaus-by-works-studio\">DreamHaus by W\u00d8RKS Studio<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#topline-by-parsons-branding\">Topline by Parsons Branding<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#weekend-by-hello-today\">Weekend by Hello Today<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#posted-by-fuge\">Posted by Fuge<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#decathlon-app-by-fuego-camina-conmigo\">Decathlon App by Fuego Camina Conmigo<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#unstuck-by-violet-office\">Unstuck by Violet Office<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"juicebrothers-by-lama-lama\"><\/a>Juicebrothers by Lama Lama<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Juicebrothers-by-Lama-Lama.jpg\" class=\"attachment-full size-full\" alt=\"Juicebrothers by Lama Lama\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Juicebrothers-by-Lama-Lama.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Juicebrothers-by-Lama-Lama-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Juicebrothers-by-Lama-Lama-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Juicebrothers-by-Lama-Lama-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you read our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-creative-page-transitions\/\">creative page transitions<\/a>, you probably remember <a href=\"https:\/\/lamalama.nl\/\" target=\"_blank\" rel=\"noopener\">Lama Lama<\/a>, a creative digital agency from Amsterdam, and their <a href=\"https:\/\/lamalama.nl\/work\/juicebrothers\/\" target=\"_blank\" rel=\"noopener\">Juicebrothers<\/a> project. The case study for the project (the organic, cold-pressed juice brand from Netherlands) is presented in <strong>a combination of playfulness and youth typical of Lama Lama, and a high level of professionalism, also typical of the agency<\/strong>. The main visual motif is the beautiful deep green color that communicates health and vitality, featured extensively in layouts for the Juicebrothers website. Small white typography conveys just the right amount of information about the project and allows the imagery to take center stage. The case study page opens with a sort of split screen between bits of text on the left and a vertical image gallery to the right, and then proceeds with larger image and video sections displaying selected bits of visual content for the brand. All the while, we also get to <strong>play with the cursor effect<\/strong> &#8211; an oversized, pixelized snake trail that follows the mouse movements.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"art-of-swissdent-by-creative-nights\"><\/a>Art of Swissdent by Creative Nights<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Art-of-Swissdent-by-Creative-Nights.jpg\" class=\"attachment-full size-full\" alt=\"Art of Swissdent by Creative Nights\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Art-of-Swissdent-by-Creative-Nights.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Art-of-Swissdent-by-Creative-Nights-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Art-of-Swissdent-by-Creative-Nights-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Art-of-Swissdent-by-Creative-Nights-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.creative-nights.com\/\" target=\"_blank\" rel=\"noopener\">Creative Nights<\/a> is a UX design consultancy and creative studio headquartered in Prague, with an impressive roster of international projects. One of these projects is the website for the renowned dental products brand, Swissdent. <a href=\"https:\/\/creative-nights.com\/works\/art_of_swissdent\" target=\"_blank\" rel=\"noopener\">Art of Swissdent<\/a> is designed as a crossover between an eCommerce website and an online presentation of the brand. The <a href=\"https:\/\/www.customwritings.com\/case-study.html\" target=\"_blank\" rel=\"noopener\">case study<\/a>, available at the agency\u2019s website in their Works section, follows the style and the look of the agency\u2019s branding and design, and the selected imagery from the project is given in beautiful frame sections with round edges. The entire page is <strong>perfectly balanced in terms of atmosphere, colors and dynamics<\/strong>, and makes the displayed work appear as an integral part of the agency\u2019s own aesthetics, even if that may not necessarily be the case. The page ends with three fun, oversized buttons that the visitors can use to share their impressions with the agency.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"max-shkret-by-zhenya-rynzhuk\"><\/a>Max Shkret by Zhenya Rynzhuk<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Max-Shkret-by-Zhenya-Rynzhuk.jpg\" class=\"attachment-full size-full\" alt=\"Max Shkret by Zhenya Rynzhuk\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Max-Shkret-by-Zhenya-Rynzhuk.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Max-Shkret-by-Zhenya-Rynzhuk-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Max-Shkret-by-Zhenya-Rynzhuk-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Max-Shkret-by-Zhenya-Rynzhuk-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.zhenyary.com\" target=\"_blank\" rel=\"noopener\">Zhenya Rynzhuk<\/a> is an architect-turned-art director with a solid industry experience and quite a few awards under her belt. Her website, which has received accolades for overall design as well as for mobile excellence, features some innovative design solutions, plenty of interactivity and<strong> just the right amount of brutalist details to keep things exciting in a minimalist environment<\/strong>. The Work section features several case studies for the projects Zhenya is most proud of, including art direction and interface design for <a href=\"https:\/\/zhenyary.com\/work\/m-shkret\/\" target=\"_blank\" rel=\"noopener\">Max Shkret<\/a>, an award-winning digital artist creating 3D digital models. After an airy, minimalist and monochromatic section introducing the project, the page proceeds with a scroll-animated gallery of select project imagery. The images of Shkret\u2019s digital models of animals (for which he hopes to raise enough money to turn into actual physical objects) are presented in successive full-width sections, each with a background that matches the object chromatically), resulting in <strong>an interesting, exciting stroll through Shrek\u2019s imaginary world<\/strong>. This layout also adds a welcome touch of color to Zhenya\u2019s generally monochromatic ambient.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"mercado-by-loer-architecten\"><\/a>Mercado by Loer Architecten<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Mercado-by-Loer-Architecten.jpg\" class=\"attachment-full size-full\" alt=\"Mercado by Loer Architecten\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Mercado-by-Loer-Architecten.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Mercado-by-Loer-Architecten-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Mercado-by-Loer-Architecten-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Mercado-by-Loer-Architecten-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.loerarchitecten.com\" target=\"_blank\" rel=\"noopener\">Loer Architecten<\/a> is a Dutch architecture studio with a beautiful, airy, dynamic website based on full-screen imagery, interactivity and interesting navigational solutions. The Projects section includes an interactive links list from which we get to navigate to the projects that interest us. We picked the <a href=\"https:\/\/loerarchitecten.com\/en\/projects\/mercado\" target=\"_blank\" rel=\"noopener\">Mercado project<\/a>, which has the goal of transforming an abandoned backalley in the center of Groeningen into a thriving commercial and urban hub. Just as it would be expected from an architecture studio, <strong>the case study is clean and precise, opening with the most essential information<\/strong>, such as status and location. It is the page layout, however, that gives it <strong>a welcome kick and saves it from being plain and dull<\/strong>. The project name is displayed in vertical letters to avoid occupying precious space on the page. Thin straight and curved interface lines give it dynamicity, and so do animations in individual pieces of visual content, as well as animated scrolling effects. There isn\u2019t a single full-width or full-screen image in this case study which, combined with ample use of negative space, gives it a very clean, breathable character.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;latest-themes&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"self-scenter-by-ultranoir\"><\/a>Self Scenter by Ultranoir<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Self-Scenter-by-Ultranoir.jpg\" class=\"attachment-full size-full\" alt=\"Self Scenter by Ultranoir\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Self-Scenter-by-Ultranoir.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Self-Scenter-by-Ultranoir-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Self-Scenter-by-Ultranoir-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Self-Scenter-by-Ultranoir-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Commissioned by Comme des Garcons to create an interactive digital experience helping customers discover their fragrances, the French digital agency <a href=\"http:\/\/www.ultranoir.com\" target=\"_blank\" rel=\"noopener\">Ultranoir<\/a> came up with <a href=\"https:\/\/www.ultranoir.com\/en\/works\/self-scenter-1483.html\" target=\"_blank\" rel=\"noopener\">Self Scenter<\/a>, a Web GL-based reinvention of the brand\u2019s Fragrance Finder so that it dynamically creates user-specific shapes. <strong>The case study shares some of the immersiveness of the project, especially in the hero section<\/strong> with a video and a large title. The case study, however, assumes a cleaner, more informative and practical character later on the page, sharing some of the visual pieces that best convey the atmosphere of the project &#8211; videos and select imagery. And the project is truly stunning, too &#8211; a beautiful dark interface with a somewhat mysterious character is graced by superbly designed elements with utmost attention to detail and aesthetic coherence. These dark visuals are contrasted by a light background, complete with the cursor shaped like a dot that changes from black to white and vice versa, depending on the surface it hovers upon.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"fontshare-by-wemakefab\"><\/a>Fontshare by Wemakefab<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Fontshare-by-Wemakefab.jpg\" class=\"attachment-full size-full\" alt=\"Fontshare by Wemakefab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Fontshare-by-Wemakefab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Fontshare-by-Wemakefab-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Fontshare-by-Wemakefab-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Fontshare-by-Wemakefab-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.wemakefab.com\" target=\"_blank\" rel=\"noopener\">Wemakefab<\/a> is an old acquaintance from our exploration of the power of <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-illustrating-power-of-interactive-links-in-design\/\">interactive links in web design<\/a>, and today we want to take a look at the case study for the project they developed for the online font aggregator Fontshare. As we get to learn from the case study, the project involved complete visual rebranding, interface design and even the logo redesign. And we have to say, <strong>this is a proper case study here, the one that ticks all the boxes as to how a case study should be done and what it should include<\/strong>. Each element of the project is listed and illustrated in a logical, sequential manner, on a clean, high-contrast black and white page. It starts with the project blurb, and then moves to font cards, internal pages, mobile view, the palette and select details. All visuals are given in a manner that follows the principles of usability and clean design &#8211; they are large (occasionally oversized), clean, carefully arranged, with occasional thin lines, both vertical and horizontal, that sequence off the sections. Several elements give off a spirit of playfulness and humor &#8211; like the section that switches from white ot black when hovered upon, oversized typography and the blinking cursor. The case study is stylistically coherent and tight and very well matched to the nature and the purpose of the project.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"more-more-nespresso-by-playful\"><\/a>More &amp; More Nespresso by Playful<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/More-More-Nespresso-by-Playful.jpg\" class=\"attachment-full size-full\" alt=\"More &amp; More Nespresso by Playful\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/More-More-Nespresso-by-Playful.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/More-More-Nespresso-by-Playful-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/More-More-Nespresso-by-Playful-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/More-More-Nespresso-by-Playful-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/helloplayful.com\/\" target=\"_blank\" rel=\"noopener\">Playful<\/a> is a collaborative collective of digital creators specialized in art direction and moving picture campaigns. <a href=\"https:\/\/helloplayful.com\/case-studies\/nespresso\" target=\"_blank\" rel=\"noopener\">More &amp; More Nespresso<\/a> is, by their own admission, one of the most challenging and rewarding projects the agency has worked on. The case study for the project is just as complex and rich as the project itself. It opens with an impressive hero slider introducing some of the textures that played a central role in the project, in a deep, sultry purple. Carefully curated images and videos from the project are skillfully arranged along the page, contrasted with large empty spaces with light backgrounds and text, offering a welcome pause from the visual feast. <strong>The color play is particularly striking<\/strong> &#8211; the project itself features a delicate interplay between rich, deep burgundys, greens and blues on one hand, and fine, elegant pastels on the other. The same interplay is repeated in the case study, and the elegant, sophisticated character of the project is underlined by the use of the lovely Antiga typeface throughout the page. The page features a director\u2019s cut video, which is the centerpiece of the project, but doesn\u2019t take over the case study, as it is after all exactly that &#8211; a case study in which the agency explains the creative process and pinpoints main visual cues and motifs.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bian-2016-by-baillat-studio\"><\/a>Bian 2016 by Baillat Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Bian-2016-by-Baillat-Studio.jpg\" class=\"attachment-full size-full\" alt=\"Bian 2016 by Baillat Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Bian-2016-by-Baillat-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Bian-2016-by-Baillat-Studio-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Bian-2016-by-Baillat-Studio-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Bian-2016-by-Baillat-Studio-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You may remember the <a href=\"http:\/\/www.baillatstudio.com\" target=\"_blank\" rel=\"noopener\">Baillat Studio<\/a> from our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-with-inspiring-menu-design\">inspiring menu design<\/a>, in which we praised the studio\u2019s modern, interactive fullscreen menu. Today we\u2019re going to check out the Project section of the website, specifically the case study for the <a href=\"https:\/\/baillatstudio.com\/en\/project\/bian-2016\" target=\"_blank\" rel=\"noopener\">2016 edition of BIAN<\/a> (the International Digital Art Biennale). The visual identity for the festival was based on black and red, a color combination that creates a lovely contrast with the page\u2019s light gray background and black interface typography. A short text about the target and the main identity elements (Swiss style-based aesthetics, right-angle frames, repetition, lines and precision) follows the opening hero section with a full-width visual from the project. After this introductory section, we get to explore the visuals from the project, presented in the form of photography, video and images of project material in real life, in its designated ambience. The agency, therefore, decided to <strong>let the images speak for themselves, without excessive explanations and textual narratives<\/strong>. And it was a good call, too &#8211; the page is compact and informative, just what a case study should be.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"prada-employees-online-store-by-niccolo-miranda\"><\/a>Prada Employees Online Store by Niccol\u00f2 Miranda<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Prada-Employees-Online-Store-by-Niccolo-Miranda.jpg\" class=\"attachment-full size-full\" alt=\"Prada Employees Online Store by Niccol\u00f2 Miranda\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Prada-Employees-Online-Store-by-Niccolo-Miranda.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Prada-Employees-Online-Store-by-Niccolo-Miranda-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Prada-Employees-Online-Store-by-Niccolo-Miranda-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Prada-Employees-Online-Store-by-Niccolo-Miranda-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s a designer we love to feature in our articles &#8211; we\u2019ve written about <a href=\"http:\/\/www.niccolomiranda.com\" target=\"_blank\" rel=\"noopener\">Niccol\u00f2 Miranda<\/a> in our pieces on <a href=\"https:\/\/qodeinteractive.com\/magazine\/websites-inspired-by-poster-aesthetics\">poster-inspired web design<\/a> and on <a href=\"https:\/\/qodeinteractive.com\/magazine\/examples-of-innovative-footer-design\/\">great examples of footer design<\/a>, to name a few. This time around, let\u2019s take a look at how this talented Italian designer and developer with a penchant for illustration decided to present his featured works on his website, using the case study for <a href=\"https:\/\/www.niccolomiranda.com\/work\/prada\" target=\"_blank\" rel=\"noopener\">Prada Employees Online Store<\/a> as an example. The first thing we notice is that the project pages are completely in line with the overall style of Miranda\u2019s portfolio. By that we mean<strong> the paper-like texture, the torn paper effect, the columns and sections resembling newspaper layouts, and, of course, illustrations<\/strong>. The page opens with a hero section that holds a lovely illustration from the project he did for Prada (an online store that sells the brand\u2019s previous collections). We then move on to a section explaining what it was that Miranda was commissioned to do, and sections explaining how he did it. What\u2019s interesting (in addition to the distinct and idiosyncratic style) is that the imagery from the project is presented not in the main page content, but instead<strong> in a sidebar that opens to the right when we click on the appropriate icon<\/strong>. The page also features a big oval button that leads to the project\u2019s live site, and that\u2019s about it. It is basically more of a project blurb page than a case study per se, but considering its unique style and Miranda\u2019s amazing talent, we figured it deserved a mention here as well.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"ortovivo-by-k95\"><\/a>Ortovivo by K95<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Ortovivo-by-K95.jpg\" class=\"attachment-full size-full\" alt=\"Ortovivo by K95\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Ortovivo-by-K95.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Ortovivo-by-K95-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Ortovivo-by-K95-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Ortovivo-by-K95-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.k95.it\/\" target=\"_blank\" rel=\"noopener\">K95<\/a> is a design, branding and communications agency from Catania, Sicily. They work with mostly Italian clients but have a few international names on their roster as well. Their website features a neat list of projects in the form of an interactive link carousel, each link leading to the appropriate case study. Today we\u2019re going to check out the one for <a href=\"https:\/\/www.k95.it\/en\/ortovivo-en\/\" target=\"_blank\" rel=\"noopener\">Ortovivo<\/a>, a Sicilian organic food production company. Each project is <strong>neatly divided into sections that include description, target, branding and packaging<\/strong>, linked in the header (from which we can also turn off the case study and return to the homepage). The layout is airy and clean, with plenty of empty space around each piece of visual content, and a large circular animated button inviting us to scroll to explore the project. Sections with empty space are combined with full-width interactive ones, moving and expanding as we scroll. It is a dynamic, modern and skillfully designed page that <strong>unites good UX, usability and efficiency with modern design practices<\/strong> that speak volumes of the agency\u2019s expertise and taste.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"obys-agency-typography-principles\"><\/a>Obys Agency Typography Principles<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Obys-Agency-Typography-Principles.jpg\" class=\"attachment-full size-full\" alt=\"Obys Agency Typography Principles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Obys-Agency-Typography-Principles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Obys-Agency-Typography-Principles-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Obys-Agency-Typography-Principles-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Obys-Agency-Typography-Principles-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/obys.agency\/\" target=\"_blank\" rel=\"noopener\">Obys Agency<\/a> is a creative design agency from Ukraine with a focus on UX\/UI design, animation, graphic design and development. Their website is a modern, streamlined and fluid display of their works, principles, accolades and much more. As an agency that flaunts a serious approach to everything they do, Obys wanted to share some of their ethos and the artistic and design principles they follow in their work, and that\u2019s why they created a standalone website on <a href=\"https:\/\/typographyprinciples.obys.agency\/\" target=\"_blank\" rel=\"noopener\">Typography Principles<\/a>, while the main website has a page that serves as <a href=\"https:\/\/obys.agency\/typography-principles\/\" target=\"_blank\" rel=\"noopener\">a case study<\/a> for it. The site includes three sections explaining how the agency uses fonts, how it combines them and what rules it follows when it comes to typography. The page follows the white on black aesthetic line of the rest of the website, with sections that roll up or down revealing underlying content. <strong>Navigation is particularly interesting here, as we get to explore the visual content through scrolling, clicking on oversized interactive buttons, and play videos.<\/strong> Numbered sections and diagonal arrows hint to physical navigation signals (like traffic or airport ones), and the part of the study that deals with animation is presented in a separate unit. The website itself is rather impressive and the case study does an excellent job at conveying its complexity and elegance, both design-wise and in terms of UX.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"komuso-design-by-tubik\"><\/a>Komuso Design by Tubik<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"551\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Komuso-Design-by-Tubik.jpg\" class=\"attachment-full size-full\" alt=\"Komuso Design by Tubik\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Komuso-Design-by-Tubik.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Komuso-Design-by-Tubik-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Komuso-Design-by-Tubik-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Komuso-Design-by-Tubik-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.tubikstudio.com\" target=\"_blank\" rel=\"noopener\">Tubik Studio<\/a> is a full-stack digital service agency with a focus on UX and UI design. Their website offers a rather no-frills (but nevertheless striking) display of services and works the studio is most proud of, with a gallery of images leading to specific projects. The page for <a href=\"https:\/\/tubikstudio.com\/works\/komuso-design\" target=\"_blank\" rel=\"noopener\">Komuso Design<\/a> project, for instance, offers an informative and hands-on overview of the project. It opens with an intro hero image, followed by brief project info presented in a simple, readable form, with comfortable black Gilroy typography on a white background. The visual content is presented in the form of videos on a lovely marble-like background, combined with screenshots from the project arranged on a beautifully combined palette of pastels. A particularly well-designed section is the <strong>boxed split slider gallery that offers a dynamic and convenient way of displaying several instances of content without cluttering the page<\/strong> or making it too long. The study ends with the visual system: a color scheme with HEX codes, some representative samples of typography and the mobile layout. The entire page bears an airy, pleasant character, perfectly aligned with the client\u2019s brand and product (a wellness tool designed to help people relax through breathing).[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-92-group-by-humana-studio\"><\/a>The 92 Group by Humana Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/The-92-Group-by-Humana-Studio.jpg\" class=\"attachment-full size-full\" alt=\"The 92 Group by Humana Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/The-92-Group-by-Humana-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/The-92-Group-by-Humana-Studio-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/The-92-Group-by-Humana-Studio-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/The-92-Group-by-Humana-Studio-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.humanastudio.com\" target=\"_blank\" rel=\"noopener\">Humana Studio<\/a> is a Portuguese agency that helps build brands with a social and environmental impact. They were commissioned by the 92 Group, a design studio that challenges traditions in media and entertainment through irreverence, unconventionality and youth. Obviously, this was an excellent fit as the Humana Studio has a distinctly disruptive approach. The <a href=\"https:\/\/humanastudio.com\/creations\/the-92-group\" target=\"_blank\" rel=\"noopener\">case study for the 92 Group<\/a> brand identity and communication strategy partly follows the same disruptive principles &#8211; especially in terms of visual communication &#8211; but also some more conventional ones, specifically when it comes to UX. <strong>The visual content is saturated, loud and bold<\/strong>, with strong, deep colors on a black background, but the way it is arranged on the page guarantees <strong>proper navigation, readability and ease of consumption<\/strong>. The sections are topped with a subtle zoom-in effect and a yellow round cursor that shrinks and expands and the text is short and to the point. The study is brief but concentrated, informative and practical, coherent in character and atmosphere.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"dreamhaus-by-works-studio\"><\/a>DreamHaus by W\u00d8RKS Studio<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"543\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/DreamHaus-by-WORKS-Studio.jpg\" class=\"attachment-full size-full\" alt=\"DreamHaus by W\u00d8RKS Studio\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/DreamHaus-by-WORKS-Studio.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/DreamHaus-by-WORKS-Studio-300x168.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/DreamHaus-by-WORKS-Studio-768x430.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/DreamHaus-by-WORKS-Studio-620x347.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/works.studio\/\" target=\"_blank\" rel=\"noopener\">W\u00d8RKS Studio<\/a> is a New York-based consultancy specializing in creative direction, strategy and design. Their main website is an exciting showcase of both the agency ethos and their projects, and is marked by a distinct cinematic approach, with a lot of information and content being handed in form of immersive fullscreen videos and animated sequences. The <a href=\"https:\/\/works.studio\/projects\/dreamhaus\" target=\"_blank\" rel=\"noopener\">DreamHaus project<\/a> is presented as <strong>an animated study of the pillar design elements used for the project &#8211; with the main focus on typography and the palette<\/strong>. The fullscreen hero section opens with a large animated logo of the project, proceeds with a palette of beautiful pastels, with names and hex codes, and ends with a sequence that showcases the typography used for the project, and the main layout style, as well as textures. The visitor can scroll to learn more about the project and its goal, as well as the main guidelines that the agency followed in the creative direction of this project. The images related to the project, or the products of the direction, if you will, are presented with animation effects that feature a brief flash of yellow, which is the agency\u2019s signature color, thus providing <strong>a continuity between the project and its creator<\/strong> and, of course, reinforcing the agency\u2019s own branding.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"topline-by-parsons-branding\"><\/a>Topline by Parsons Branding<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Topline-by-Parsons-Branding.jpg\" class=\"attachment-full size-full\" alt=\"Topline by Parsons Branding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Topline-by-Parsons-Branding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Topline-by-Parsons-Branding-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Topline-by-Parsons-Branding-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Topline-by-Parsons-Branding-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Our most frequent readers might remember <a href=\"http:\/\/www.parsonsbranding.com\" target=\"_blank\" rel=\"noopener\">Parsons Branding<\/a> from our piece on <a href=\"https:\/\/qodeinteractive.com\/magazine\/inspiring-creative-agency-and-designer-websites\">inspiring creative agencies and designers<\/a>, in which we praised the agency\u2019s beautiful UI design and interesting navigation solutions. Today, we want to check out one of their case studies, specifically the one for <a href=\"https:\/\/www.parsonsbranding.com\/case-study\/topline\/\" target=\"_blank\" rel=\"noopener\">Topline<\/a>, the South African tool manufacturer. The case studies all feature <strong>unique page navigation &#8211; the left portion of the screen contains a numbered section with jump links to specific parts of the case study<\/strong>: Overview, Identity, Packaging and so on, and of course we can simply scroll down and explore the entire study in its intended order. The background is in the agency\u2019s signature green and gray, with a very subtle paper-like texture, giving the entire interface a lifelike quality. The left side, the one with the table of contents, remains static as we scroll, assuring easy navigation and orientation on the page, which is, in itself, quite rich in content, both visual and textual. Certain sections are given in horizontal scroll sliders, so we get an impression that the page expands in all directions. This is an extremely well thought-out case study, brimful of information for those interested in exploring the project in great detail, but at the same time simple and informative for those looking to just skim the content.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"weekend-by-hello-today\"><\/a>Weekend by Hello Today<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Weekend-by-Hello-Today.jpg\" class=\"attachment-full size-full\" alt=\"Weekend by Hello Today\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Weekend-by-Hello-Today.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Weekend-by-Hello-Today-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Weekend-by-Hello-Today-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Weekend-by-Hello-Today-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Japanese <a href=\"http:\/\/www.hellotoday.jp\" target=\"_blank\" rel=\"noopener\">Hello Today<\/a> did a quite complete agency work for the home appliance manufacturer Weekend, from strategic planning and branding to graphic design, web design, photo and art direction and even copywriting. The <a href=\"https:\/\/hellotoday.jp\/weekend\/\" target=\"_blank\" rel=\"noopener\">Weekend case study<\/a> on the agency website is a modern, elegantly dark showcase of everything the agency did, from the first steps to the completion of the project. Discrete white typography on a black background introduces basic project information and brand philosophy, both in English and in Japanese, before we scroll down to visuals. These are presented<strong> in a typically Japanese, dignified manner, gently floating on the black background, creating a beautiful contrast and a strange sense of calm<\/strong>. Thin, subtle interface lines provide some framework for the visual content and communicate rather successfully with the overall aesthetics of the website &#8211; minimalist and stripped-down.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"posted-by-fuge\"><\/a>Posted by Fuge<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Posted-by-Fuge.jpg\" class=\"attachment-full size-full\" alt=\"Posted by Fuge\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Posted-by-Fuge.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Posted-by-Fuge-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Posted-by-Fuge-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Posted-by-Fuge-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/www.fuge.ru\" target=\"_blank\" rel=\"noopener\">Fuge<\/a> is a Moscow-based design agency delivering UI, branding and digital solutions. The agency website is minimalist, in a very reduced palette, with small typography and on-lover grid patterns, resulting in a modern, serious look. This character is repeated throughout the website, including the individual case pages. Our favorite one is <a href=\"http:\/\/fuge.ru\/cases\/posted\" target=\"_blank\" rel=\"noopener\">the case study for Posted<\/a>, a design magazine for which the agency did branding, as well as UX and UI services and animations. The case page starts rather minimalistically, with a large image on a light background and just a few bits of text. As we scroll, more and more pieces of content appear on screen, <strong>in an interactive and rather fluid way<\/strong>. The case study is divided into sections &#8211; logo and elements, desktop and mobile versions of the magazine website. <strong>Each image can be expanded in a popup, with smooth and modern transitions, giving the page a dynamic and modern look.<\/strong> This atmosphere is reinforced by a modern, minimalist palette reduced to grayscale, black and red, which is the Posted brand palette. The images (or rather previews) are alternately arranged on the page, creating a lovely balance, and the entire composition appears to be held in place by the grid lines that appear as we hover over certain areas.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"decathlon-app-by-fuego-camina-conmigo\"><\/a>Decathlon App by Fuego Camina Conmigo<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Decathlon-App-by-Fuego-Camina-Conmigo.jpg\" class=\"attachment-full size-full\" alt=\"Decathlon App by Fuego Camina Conmigo\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Decathlon-App-by-Fuego-Camina-Conmigo.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Decathlon-App-by-Fuego-Camina-Conmigo-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Decathlon-App-by-Fuego-Camina-Conmigo-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Decathlon-App-by-Fuego-Camina-Conmigo-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Decathlon has long planned a redesign and a relaunch of its app for the Spanish market but the Covid-19 pandemic put a halt to those plans for a while. As soon as the pandemic loosened, the sports goods company reached out to the Barcelona-based, Twin Peaks-named agency <a href=\"https:\/\/fuegocaminaconmigo.com\/\" target=\"_blank\" rel=\"noopener\">Fuego Camina Conmigo<\/a> (Fire Walk with Me) for a range of services from digital strategy, art direction and concept, to copy, audiovisual content and social ads. The <a href=\"https:\/\/fuegocaminaconmigo.com\/projects\/app-decathlon\/\" target=\"_blank\" rel=\"noopener\">Decathlon App case study<\/a> is available at the agency website, and it\u2019s <strong>one of the most successful, detailed and complete studies we\u2019ve seen in a while<\/strong>. it ticks all the boxes in terms of what a case study should contain &#8211; the context, the target, the implementation, and so on, but it does so in a way that is by no means dry or technical. The agency achieved this <strong>by skillfully alternating light and readable text sections with fullscreen sections with the visual material from the app<\/strong>, which can be viewed either as images or clicked to play a video. All the while, the agency maintains its own visual identity, present in typography, layout styles and elements such as the round cursor, buttons and icons.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"unstuck-by-violet-office\"><\/a>Unstuck by Violet Office<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"552\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Unstuck-by-Violet-Office.jpg\" class=\"attachment-full size-full\" alt=\"Unstuck by Violet Office\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Unstuck-by-Violet-Office.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Unstuck-by-Violet-Office-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Unstuck-by-Violet-Office-768x437.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/05\/Unstuck-by-Violet-Office-620x353.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s a project that is as noble as it is well-carried out. <a href=\"https:\/\/violetoffice.com\/work\/unstuck\" target=\"_blank\" rel=\"noopener\">Unstuck by Violet Office<\/a> is an effort started by the CEO of Chobani and several other stakeholders with the goal of helping refugees find full-time jobs in partner companies and their supply chains. Chobani was the first to join the project, of course, and it was soon followed by other major brands like Ben &amp; Jerry and Dole. Violet Office did the branding, web design and development, as well as social media. The branding part is perhaps the most impressive &#8211; <strong>the agency created a logo and wordmark that can easily fit any brand partner\u2019s logo<\/strong>, and the first part of the case study focuses on that particular effort, complete with <strong>rich visuals proving the efficiency of the design<\/strong>. It then proceeds with an analysis of the Unstuck visual system (colors, patterns, typography), and ends with examples of brand activations, complete with the launch video. The high-contrast visuals are displayed full-width, either in galleries or individually, which creates an immersive effect on the visitor, who ends up being completely drawn into the narrative of this commendable project.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we saw from the examples we visited today, while a good case study may not necessarily have to strictly adhere to a formulaic structure, it\u2019s still a good idea to give it some structure and to conceptualize it in a way that communicates clearly and directly with the viewer. And since the viewers are also potential clients, it\u2019s needless to stress how important this is.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve seen some \u201cproper\u201d case studies with neatly divided sections and a tight structure repeated throughout each study. We\u2019ve also seen some more \u201crelaxed\u201d ones, and some that perhaps don\u2019t really qualify as case studies in the strictest terms but that due to their quality and supreme design elements deserve a mention.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Hopefully we managed to inspire you by showing a variety of styles and methodologies you can follow in creating your own case studies. Feel free to share with us your own favorites or, even better, your own work!<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Case studies are an immensely important asset as they provide a compact, informative display of not just your skills and expertise, but your professionalism too. They show your ability to focus and to distinguish between layers of relevance, and also shed some light on your creative process. While they&#8217;re not always easy to create, there are some terrific examples that can serve as inspiration and guidance<\/p>\n","protected":false},"author":3,"featured_media":37235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[24,30,40,43],"class_list":["post-37187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-case-study","tag-creative","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/37187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=37187"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/37187\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/37235"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=37187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=37187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=37187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}