{"id":401,"date":"2025-07-01T11:07:05","date_gmt":"2025-07-01T11:07:05","guid":{"rendered":"https:\/\/235.111.205.92.host.secureserver.net\/?page_id=401"},"modified":"2026-07-30T16:23:03","modified_gmt":"2026-07-30T16:23:03","slug":"cartoonlobby","status":"publish","type":"page","link":"https:\/\/benjamin-muenster.de\/index.php\/cartoonlobby\/","title":{"rendered":"Cartoonlobby"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull case-study-pattern is-layout-constrained wp-container-core-group-is-layout-2db4f2d6 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-left has-huge-font-size\">Website Design<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-right has-large-font-size wp-block-paragraph\">2023<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized has-custom-border is-style-rounded\" style=\"margin-top:var(--wp--preset--spacing--50);margin-right:0;margin-bottom:var(--wp--preset--spacing--50);margin-left:0\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"488\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Logo_Website.png\" alt=\"\" class=\"wp-image-399\" style=\"border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;aspect-ratio:1.7777777777777777;object-fit:contain;width:1110px;height:auto\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Logo_Website.png 551w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Logo_Website-300x266.png 300w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-18a83455 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-8d5352f2 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Using Figma components I created a custom webdesign for a german museum called &#8220;Cartoonlobby&#8221;. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-medium-gray-color\">The website uses wordpress with custom blocks and contains an ever growing collection of german carricatures to prevent them from getting lost.<\/mark><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-dd60b241 wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Key Contributions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:<\/strong> Based on the client&#8217;s information architecture, I designed the website layout and established a consistent and responsive design system.<\/li>\n\n\n\n<li><strong>Design system:<\/strong> To ensure clear documentation of design changes and maintain consistent communication with the development team, I created and documented design components in Figma while providing ongoing support to clarify design-related questions throughout the project.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Visit the &#8220;Cartoonlobby&#8221; <a href=\"https:\/\/cartoonmuseum-digital.de\/\" data-type=\"link\" data-id=\"https:\/\/cartoonmuseum-digital.de\/\">website<\/a> to see the final result.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"789\" height=\"2560\" data-id=\"407\" src=\"https:\/\/235.111.205.92.host.secureserver.net\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-scaled.png\" alt=\"\" class=\"wp-image-407\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-scaled.png 789w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-92x300.png 92w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-316x1024.png 316w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-768x2491.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Desktop@1x-631x2048.png 631w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\" \/><\/figure>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-8d5352f2 wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Detail pages<\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h5 class=\"wp-block-heading\">Collection Search<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Users can browse through the digital collection by using filters and keywords<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.67%\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1133\" height=\"2560\" data-id=\"410\" src=\"https:\/\/235.111.205.92.host.secureserver.net\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-scaled.png\" alt=\"\" class=\"wp-image-410\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-scaled.png 1133w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-133x300.png 133w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-453x1024.png 453w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-768x1736.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-680x1536.png 680w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Suche@1x-906x2048.png 906w\" sizes=\"auto, (max-width: 1133px) 100vw, 1133px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h5 class=\"wp-block-heading\">Artwork detail view<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Each artwork has a detail view with tags and additional information like measures and subtitles for example<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.67%\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1129\" height=\"2560\" data-id=\"409\" src=\"https:\/\/235.111.205.92.host.secureserver.net\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-scaled.png\" alt=\"\" class=\"wp-image-409\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-scaled.png 1129w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-132x300.png 132w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-452x1024.png 452w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-768x1741.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Sammlung-Online-Detailseite@1x-678x1536.png 678w\" sizes=\"auto, (max-width: 1129px) 100vw, 1129px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h5 class=\"wp-block-heading\">Custom Illustration<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">To match the style of the website&#8217;s mascot, I created a custom illustration for the 404 error page. The website also uses cartoon-like icons and symbols to emphasize the topic of carricatures and drawings.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.67%\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"1744\" data-id=\"408\" src=\"https:\/\/235.111.205.92.host.secureserver.net\/wp-content\/uploads\/2025\/07\/404-Screen@1x.png\" alt=\"\" class=\"wp-image-408\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/404-Screen@1x.png 1200w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/404-Screen@1x-206x300.png 206w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/404-Screen@1x-705x1024.png 705w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/404-Screen@1x-768x1116.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/404-Screen@1x-1057x1536.png 1057w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h5 class=\"wp-block-heading\">Responsive Design<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">The website was mainly designed for Desktop view, but also recieved a mobile version.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-gallery has-nested-images columns-2 wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"2560\" data-id=\"414\" src=\"https:\/\/235.111.205.92.host.secureserver.net\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-scaled.png\" alt=\"\" class=\"wp-image-414\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-scaled.png 240w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-28x300.png 28w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-96x1024.png 96w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-144x1536.png 144w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2025\/07\/Homepage-Template-Mobile@1x-192x2048.png 192w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/figure>\n<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Website Design 2023 Using Figma components I created a custom webdesign for a german museum called &#8220;Cartoonlobby&#8221;. The website uses wordpress with custom blocks and contains an ever growing collection of german carricatures to prevent them from getting lost. Key Contributions Visit the &#8220;Cartoonlobby&#8221; website to see the final result. Detail pages Collection Search Users [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"iawp_total_views":15,"footnotes":""},"class_list":["post-401","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/comments?post=401"}],"version-history":[{"count":17,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions"}],"predecessor-version":[{"id":931,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/401\/revisions\/931"}],"wp:attachment":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/media?parent=401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}