{"id":39181,"date":"2026-01-15T11:09:05","date_gmt":"2026-01-15T10:09:05","guid":{"rendered":"https:\/\/www.360vier.de\/case-study\/menlo-systems\/"},"modified":"2026-11-09T11:31:08","modified_gmt":"2026-11-09T10:31:08","slug":"menlo-systems","status":"publish","type":"case_study","link":"https:\/\/www.360vier.de\/en\/case-study\/menlo-systems\/","title":{"rendered":"Science Made Visible: Digital Precision at Menlo Systems"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-h-1-font-size\">From Nobel Prize in Physics to a Digital Platform That Makes Precision Visible<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.menlosystems.com\/\" target=\"_blank\" rel=\"noopener\">Menlo Systems GmbH<\/a> is one of the world&#8217;s leading providers of high-precision measurement technology in the field of photonics. Their optical frequency combs revolutionize time measurement\u2014a technological milestone honored with the Nobel Prize in Physics. The goal of the website relaunch was to translate this scientific excellence into an equally precise and inspiring digital experience.  <\/p>\n\n\n\n<div style=\"height:2rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1508\" height=\"865\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case.webp\" alt=\"\" class=\"wp-image-34827\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case.webp 1508w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-300x172.webp 300w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-768x441.webp 768w\" sizes=\"auto, (max-width: 1508px) 100vw, 1508px\" \/><\/figure>\n\n\n\n<div style=\"height:4rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group alignfull is-style- has-dark-gradient-background has-background is-content-justification-center is-layout-constrained wp-container-core-group-is-layout-030eddf1 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:7rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-h-2-font-size\">Objective: Visually Translating Scientific Strengths<\/h2>\n\n\n\n<div style=\"height:0.5rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<ul class=\"wp-block-list\">\n<li>Translating scientific excellence and precision into a digital brand world<\/li>\n\n\n\n<li>Developing a modular, consistent design system with strong brand recognition<\/li>\n\n\n\n<li>Building a structured, scalable web architecture based on WordPress<\/li>\n\n\n\n<li>Establishing a user-friendly UX for target audiences with varying technical expertise<\/li>\n\n\n\n<li>Visual differentiation through light color gradients and animated UI elements<\/li>\n\n\n\n<li>Content and module structure for smart linking of complementary content<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div style=\"height:2rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image alignfull size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1516\" height=\"804\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/360vier-webdesign-referenz-case-menlo-systems-bildschirm-darstellung-desktop-mobile.png\" alt=\"\" class=\"wp-image-34750\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/360vier-webdesign-referenz-case-menlo-systems-bildschirm-darstellung-desktop-mobile.png 1516w, https:\/\/www.360vier.de\/wp-content\/uploads\/360vier-webdesign-referenz-case-menlo-systems-bildschirm-darstellung-desktop-mobile-300x159.png 300w, https:\/\/www.360vier.de\/wp-content\/uploads\/360vier-webdesign-referenz-case-menlo-systems-bildschirm-darstellung-desktop-mobile-768x407.png 768w\" sizes=\"auto, (max-width: 1516px) 100vw, 1516px\" \/><\/figure>\n\n\n\n<div style=\"height:2rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-h-3-font-size\">Structure with System: Information Architecture &amp; User Guidance<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The new website structures the diverse content around research, products, and applications in a clear, modular architecture. The goal was intuitive user guidance that makes complex content accessible\u2014for scientists, developers, and industrial partners alike. Content blocks can be flexibly combined, allowing the site to respond quickly to new topics and products.  <\/p>\n\n\n\n<div style=\"height:2rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-h-3-font-size\">Design with Precision: Grid, Color &amp; Motion<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The design consistently embraces the principle of precision: Square layout modules, derived from the logo, form a recurring design motif\u2014always with exactly the same spacing. They reflect not only the modular plug-in system of Menlo products, but also the scientific commitment to accuracy. Light color gradients reference the spectrum of photonics and bring visual depth to the design. Subtle micro-animations emphasize the dynamic system\u2014without distraction.   <\/p>\n\n\n\n<div style=\"height:2rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-h-3-font-size\">Result<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The new Menlo Systems website translates the highest scientific precision into a digital system that functions intuitively, differentiates visually, and is sustainable in the long term. Research becomes visible, technology becomes tangible, brand becomes real. <\/p>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-constrained wp-block-group-is-layout-constrained\">\n<div style=\"height:2rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Precise visual language based on a consistent design system<\/li>\n\n\n\n<li>Structured information architecture for complex and diverse content<\/li>\n\n\n\n<li>Modular structure for editorial scalability<\/li>\n\n\n\n<li>WordPress setup with high flexibility and interface compatibility<\/li>\n\n\n\n<li>Micro-animations and color gradients as a visual framework for technology and light<\/li>\n<\/ul>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This project was conceived, designed, and implemented by our <a href=\"https:\/\/www.360vier.de\/en\/digital-platforms\/wordpress-agency\/\" data-type=\"page\" data-id=\"33482\">WordPress agency<\/a>.<\/p>\n\n\n\n<div style=\"height:7rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n<div style=\"height:7rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-h-2-font-size\">Technology That Thinks Ahead: WordPress with Interface Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Technically, the website is based on a WordPress system specifically designed for editorial requirements and interface capability. Whether product data, contact forms, or expansion with additional modules\u2014the infrastructure is future-proof, high-performance, and low-maintenance. <\/p>\n\n\n\n<div style=\"height:0.5rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<section class=\"slider-container  text-default align\">\n    <div\n        class=\"dhsv-slider splide alignfull  with-space\"\n        aria-label=\"\"\n        data-splide=\"{&quot;type&quot;:&quot;slide&quot;,&quot;autoplay&quot;:true,&quot;autoWidth&quot;:false,&quot;perPage&quot;:1,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;destroy&quot;:false,&quot;breakpoints&quot;:{&quot;768&quot;:{&quot;perPage&quot;:1,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;destroy&quot;:false},&quot;1024&quot;:{&quot;perPage&quot;:1,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;destroy&quot;:false},&quot;1500&quot;:{&quot;perPage&quot;:1,&quot;arrows&quot;:true,&quot;pagination&quot;:true,&quot;destroy&quot;:false}}}\"\n    >\n        <div class=\"splide__track\">\n            <div class=\"splide__list\">\n                \n<div class=\"dhsv-slider-item splide__slide\">\n\t\n\n<figure class=\"wp-block-image size-full is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1720\" height=\"1000\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case.webp\" alt=\"\" class=\"wp-image-34839\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case.webp 1720w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case-300x174.webp 300w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case-1600x930.webp 1600w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case-768x447.webp 768w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-Mobile-ansicht-authentisches-Designsystem-360vier-digitalagentur-referenz-case-1536x893.webp 1536w\" sizes=\"auto, (max-width: 1720px) 100vw, 1720px\" \/><\/figure>\n\n\n<\/div>\n\n\n<div class=\"dhsv-slider-item splide__slide\">\n\t\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1720\" height=\"1000\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case.webp\" alt=\"\" class=\"wp-image-34838\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case.webp 1720w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case-300x174.webp 300w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case-1600x930.webp 1600w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case-768x447.webp 768w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-ui-design-Application-Astronomy-Designsystem-360vier-digitalagentur-referenz-case-1536x893.webp 1536w\" sizes=\"auto, (max-width: 1720px) 100vw, 1720px\" \/><\/figure>\n\n\n<\/div>\n\n\n<div class=\"dhsv-slider-item splide__slide\">\n\t\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1720\" height=\"1000\" src=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2.webp\" alt=\"\" class=\"wp-image-34841\" srcset=\"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2.webp 1720w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2-300x174.webp 300w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2-1600x930.webp 1600w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2-768x447.webp 768w, https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-website-features-Icons-Designsystem-360vier-digitalagentur-referenz-case-2-1536x893.webp 1536w\" sizes=\"auto, (max-width: 1720px) 100vw, 1720px\" \/><\/figure>\n\n\n<\/div>\n\n\n            <\/div>\n        <\/div>\n\n        <div class=\"splide__dragable-pagination\"><\/div>\n    <\/div>\n<\/section>\n\n\n\n\n<div style=\"height:4rem;width:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n<div style=\"height:7rem\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"featured_media":0,"template":"","class_list":["post-39181","case_study","type-case_study","status-publish","hentry"],"acf":[],"featured_image":null,"related_client":38957,"related_client_name":"Menlo Systems","mood_image":{"url":"https:\/\/www.360vier.de\/wp-content\/uploads\/Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2.webp","width":2056,"height":1542,"alt":"","caption":"","sizes":{"medium":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-300x225.webp","width":300,"height":225,"mime-type":"image\/webp","filesize":6410},"large":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-1600x1200.webp","width":1600,"height":1200,"mime-type":"image\/webp","filesize":92506},"thumbnail":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-250x250.webp","width":250,"height":250,"mime-type":"image\/webp","filesize":7362},"medium_large":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-768x576.webp","width":768,"height":576,"mime-type":"image\/webp","filesize":27966},"1536x1536":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-1536x1152.webp","width":1536,"height":1152,"mime-type":"image\/webp","filesize":88846},"2048x2048":{"file":"Menlo-Systems-hero-case-website-relaunch-wordpress-social-teaser-360vier-digitalagentur-referenz-case-2-2048x1536.webp","width":2048,"height":1536,"mime-type":"image\/webp","filesize":137988}}},"_links":{"self":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/case_study\/39181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/case_study"}],"about":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/types\/case_study"}],"version-history":[{"count":2,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/case_study\/39181\/revisions"}],"predecessor-version":[{"id":40853,"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/case_study\/39181\/revisions\/40853"}],"wp:attachment":[{"href":"https:\/\/www.360vier.de\/en\/wp-json\/wp\/v2\/media?parent=39181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}