{"id":4649,"date":"2026-08-31T11:19:35","date_gmt":"2026-08-31T09:19:35","guid":{"rendered":"https:\/\/arnerahn.com\/case-studie\/konos-joy-of-filtering\/"},"modified":"2026-10-26T10:58:31","modified_gmt":"2026-10-26T09:58:31","slug":"konos-joy-of-filtering","status":"publish","type":"case-studie","link":"https:\/\/arnerahn.com\/en\/case-study\/konos-joy-of-filtering\/","title":{"rendered":"Konos &#8211; Joyfule of Filtering"},"content":{"rendered":"<!--themify_builder_content-->\n<div id=\"themify_builder_content-4649\" data-postid=\"4649\" class=\"themify_builder_content themify_builder_content-4649 themify_builder tf_clear\">\n                    <div  data-lazy=\"1\" class=\"module_row themify_builder_row tb_q5gj658 tb_first tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_6lct659 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top tb_col_count_2 tb_mtqx830\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_udzr830 first\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_yipu889 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1810\" height=\"1207\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start.webp\" class=\"wp-post-image wp-image-4843\" title=\"Konos Homepage\" alt=\"KONOS-Startseite auf einem Laptop mit der \u00dcberschrift \u201eFreude am Filtern\u201c und blauen Akzenten\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start.webp 1810w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start-1536x1024.webp 1536w\" sizes=\"auto, (max-width: 1810px) 100vw, 1810px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_ovt8830 last\">\n                            <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_693s899 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_7yeh899 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_42cy432\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_d2as432 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_rcte432 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_98an314   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">A Project in Two Stages<\/h2>\n<p>The first ideas for a website redesign emerged back in 2022. During this initial phase, we developed the basic structure, explored early design concepts and set up a technical testing environment. As the work progressed, however, it became clear that the project was more extensive than originally anticipated. Requirements became more specific, other communication priorities took precedence, and the website project was temporarily put on hold.   <\/p>\n<p>The project resumed in late 2024. What we had learned during the first phase became the foundation for a revised concept. Rather than simply continuing with the original design, we reconsidered the entire structure and developed a more consistent visual direction.<br\/>This marked the beginning of the website as it exists today.  <\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_gb2o835\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_k189835 first\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_cno144 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake.webp\" class=\"wp-post-image wp-image-4844\" title=\"Hashtake dieFilterMacher\" alt=\"#dieFilterMacher\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake.webp 1920w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake-768x432.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_gkrs835 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_3a8c149 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos.webp\" class=\"wp-post-image wp-image-4845\" title=\"CI-Konos\" alt=\"KONOS: Schrift Metropolis und eine Farbpalette aus Blau, Hellgrau, Grau und leuchtendem Gr\u00fcn\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos.webp 1920w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos-768x432.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos-1536x864.webp 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_jz6q195 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_u678195 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_uku6195\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_2gbf196 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_8d8p195 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_9w57196   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">A Grid as a Design Principle<\/h2>\n<p>At the heart of the new design is a modular Bento grid. By combining areas of different sizes, the layout allows text, imagery, information and calls to action to be arranged flexibly while maintaining a clear and recognizable structure. <\/p>\n<p>This approach proved particularly suitable for the wide variety of content. A company&#8217;s history calls for a different presentation than a product overview, a careers page or information about quality management. Instead of forcing every page into the same layout, we developed a system of recurring elements that allows each subject to find its own balance.  <\/p>\n<p>As more substantial content became available in early 2025, the system gradually took shape. Sections covering quality, careers and contact were developed, additional pages were built from the ground up, and existing content was transferred into the new structure. <\/p>\n<p>The design continued to evolve alongside the actual content. Typography, spacing, surfaces, gradients and colours were repeatedly reviewed in context. Eventually, a vibrant green emerged as the defining accent colour, giving the website a distinctive and recognizable identity.  <\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_c8hk195\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_t6bx195 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_w20j195 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_5cnu751 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1870\" height=\"1247\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos.webp\" class=\"wp-post-image wp-image-4846\" title=\"Bento Design Konos\" alt=\"KONOS: Website auf einem Laptop mit blauen \u00dcberschriften und mehreren Produktseiten\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos-1536x1024.webp 1536w\" sizes=\"auto, (max-width: 1870px) 100vw, 1870px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_n1hw601\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_5yl7601 first\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_54r530 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2.webp\" class=\"wp-post-image wp-image-4847\" title=\"Bento Grid Konos\" alt=\"KONOS-Produktseite auf einem Tablet mit Dentalpapier, Sterilisationspapier und gr\u00fcnen Schaltfl\u00e4chen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_79ou601 last\">\n                    <!-- module plain text -->\n<div  class=\"module module-plain-text tb_mztq775 \" data-lazy=\"1\">\n        <div class=\"tb_text_wrap\">\n    <div class=\"ar-video\">\n  <video class=\"ar-video__media\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" aria-label=\"Projektvideo\">\n    <source data-src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Konos-Hover-ARMD-Half-678x509-1.mp4\" type=\"video\/mp4\">\n  <\/source><\/video>\n<\/div>    <\/div>\n<\/div>\n<!-- \/module plain text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_h7dz679\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_r564679 first\">\n                    <!-- module plain text -->\n<div  class=\"module module-plain-text tb_xrq7679 pb-s\" data-lazy=\"1\">\n        <div class=\"tb_text_wrap\">\n    <div class=\"ar-video\">\n  <video class=\"ar-video__media\" muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" aria-label=\"Projektvideo\">\n    <source data-src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Konos-History-ARMD-Half.mp4\" type=\"video\/mp4\">\n  <\/source><\/video>\n<\/div>    <\/div>\n<\/div>\n<!-- \/module plain text -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_gikz679 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_tcov679 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History.jpg\" class=\"wp-post-image wp-image-4848\" title=\"History\" alt=\"KONOS-Unternehmensgeschichte als Zeitleiste in Desktop- und Mobilansicht mit historischen Fotos\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History.jpg 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History-768x576.jpg 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_40po7 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_qhhg7 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_w5b27\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_rbpy7 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_stxm7 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_6pnn7   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">Products Between Drawing and Reality<\/h2>\n<p>Presenting the products was a particular design challenge. Filter bags and speciality papers are functional products, but they do not immediately lend themselves to a distinctive visual presentation on a corporate website. <\/p>\n<p>Rather than relying entirely on conventional product photography, we developed a different visual approach. The products are presented as collages combining drawings, sketches and technical elements, deliberately reminiscent of the early stages of a design process.<\/p>\n<p>Suitable references were researched, initial drawings created and gradually refined into a coherent visual language.<\/p>\n<p>These illustrations give the product sections a character of their own, combining technical precision with a more expressive design approach. At the same time, they established a visual language that could extend well beyond the website itself. <\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_sp867\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_wjdv7 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_8swi7 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_qy5n403 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos.webp\" class=\"wp-post-image wp-image-4849\" title=\"Illustrationen-Konos\" alt=\"KONOS: Korbkaffeefilter als technische Zeichnungen und Papierlagen neben dem zugeh\u00f6rigen Weblayout\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_g8fh70 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_1b5j70 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_felk70\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_298b70 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_r0kb70 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_9ipo70   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">When Design Calls for Its Own Tools<\/h2>\n<p>As the design became more refined, the technical requirements grew alongside it. Responsive typography was made more dynamic, the Bento elements on overview pages received carefully considered hover and motion effects, and existing components were replaced whenever they reached their design or technical limitations. <\/p>\n<p>One example is the company timeline. The original timeline solution proved too restrictive, particularly on mobile devices. It was eventually replaced by a custom-built module that brought content, visual design and responsive behaviour together with far greater precision.  <\/p>\n<p>Managing and reviewing the increasingly extensive content also called for a dedicated technical solution. For the final round of revisions, a direct feedback system was integrated into the website. Comments on wording, spelling, units of measurement or individual visual elements could be placed exactly where they were relevant, then collected and addressed systematically.  <\/p>\n<p>Over the course of the project, the work therefore produced more than a collection of new pages. It also led to individual solutions developed directly in response to the project&#8217;s specific needs.<\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_018l70\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_dfeu70 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_gzge70 last\">\n                            <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_ymie222\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_69gz223 first\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_c2u7896 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet.webp\" class=\"wp-post-image wp-image-4850\" title=\"Qualitaet\" alt=\"KONOS-Seite \u201eQualit\u00e4t &amp; Nachhaltigkeit\u201c mit EcoVadis-Bronzeauszeichnung in Desktop- und Mobilansicht\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_4lxf223 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_yyth359 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos.webp\" class=\"wp-post-image wp-image-4851\" title=\"Bewerbung-Konos\" alt=\"KONOS: Karriereseite auf einem Tablet und Online-Bewerbungsformular mit blauen \u00dcberschriften\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_ko7t463 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_0zwa463 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_k3t4463\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_azro463 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_laen463 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_wei5463   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">Two Languages, One Website<\/h2>\n<p>Once the German content was complete, the English version became the final major stage before launch.<\/p>\n<p>The entire website structure was adapted to support both languages. Navigation, varying text lengths and individual page elements all required attention, as did content that had to follow specific wording requirements. <\/p>\n<p>Automated translation helped manage the substantial amount of content, while the structure and visual design remained consistent across both language versions.<\/p>\n<p>The result was a website that also reflects the company&#8217;s international outlook.<\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_unk2463\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_j4df463 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_7s3a463 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_0c23472 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1870\" height=\"1247\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual.webp\" class=\"wp-post-image wp-image-4852\" title=\"Multilingual\" alt=\"KONOS-Karriereseite auf Deutsch und Englisch mit blauen \u00dcberschriften und gr\u00fcnen Schaltfl\u00e4chen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual-1536x1024.webp 1536w\" sizes=\"auto, (max-width: 1870px) 100vw, 1870px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_wjho898 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_mpjq898 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_wyj1898\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_3zm8898 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_0mrp898 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_ij24898   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\">Going Live Is Not the Finish Line<\/h2>\n<p>The new website finally went live in autumn 2025. It replaced the previous site, the prepared domain structure was switched over, and additional security measures were implemented during the final stages of the project. <\/p>\n<p>The website has been maintained and developed continuously ever since. Technical updates, adjustments to changing legal requirements, current job vacancies and smaller refinements to the design and translations are all part of this ongoing work. <\/p>\n<p>Because a web project of this scale does not end the moment it goes live. It is used, it changes, and over time it faces new demands. Its technical foundation must not only accommodate these developments, but remain capable of supporting them for years to come.  <\/p>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s pb-xl col_align_top gutter-narrow tb_col_count_2 tb_3m9t898\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_mhsh898 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_25eq898 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_b9ft837 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1870\" height=\"1247\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung.webp\" class=\"wp-post-image wp-image-4853\" title=\"Leistung\" alt=\"KONOS-Website mit Lighthouse-Werten: Leistung 98, Barrierefreiheit 97, Best Practices 100 und SEO 100\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung-1536x1024.webp 1536w\" sizes=\"auto, (max-width: 1870px) 100vw, 1870px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-css_id=\"9mte596\" data-lazy=\"1\" class=\"module_row themify_builder_row fullwidth_row_container tb_9mte596 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_g4e6596 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-xl pb-xl col_align_top gutter-none tb_col_count_3 tb_eh4x596\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_cgvi596 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_48h6596\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_do0b861   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h3\"><em>Individual applications became a coherent whole. <br>Structure became form \u2013 and form became impact.<\/em><\/h2>\n    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_hsr2163 last\">\n                            <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n                        <div  data-lazy=\"1\" class=\"module_row themify_builder_row pt-xl tb_x9u5412 tf_w\">\n                        <div class=\"row_inner col_align_top tb_col_count_1 tf_box tf_rel\">\n                        <div  data-lazy=\"1\" class=\"module_column tb-column col-full tb_k1cs412 first\">\n                            <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w col_align_top gutter-narrow tb_col_count_2 tb_dpw8412\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_twhs412 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_6ln6412 last\">\n                    <!-- module text -->\n<div  class=\"module module-text tb_8p8v412   \" data-lazy=\"1\">\n        <div  class=\"tb_text_wrap\">\n        <h2 class=\"h-h2\"><span dir=\"auto\" style=\"vertical-align: inherit;\"><span dir=\"auto\" style=\"vertical-align: inherit;\">Some Ideas Go Beyond the Screen<\/span><\/span><\/h2>\n<p>The work on the website did not stop at the digital presence. In particular, the visual language developed for the product sections prompted a fresh look at existing communication materials beyond the web. <\/p>\n<p>The existing product sheets were redesigned and brought into a consistent visual framework. Typography, colour, information hierarchy and the new product illustrations all followed the principles originally established for the website. <\/p>\n<p>Over the years, further applications followed. These included flyers and posters for recruitment campaigns, graphic elements for the company&#8217;s stationery and business materials, and content for various social media channels. One particularly demanding design task was the packaging redesign for the company&#8217;s own brand, EMMA. Each of these projects came with its own requirements, yet all built upon the visual language already established.   <\/p>\n<p>What had originally been developed for a screen became a unifying design principle across a wide range of applications. Not a corporate identity defined after the fact, but a design system that had grown naturally out of the work itself.<\/p>    <\/div>\n<\/div>\n<!-- \/module text -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_2 tb_kxqv412\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_4idd412 first\">\n                            <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col4-2 tb_2u9k412 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_tlb6707 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1870\" height=\"1247\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma.webp\" class=\"wp-post-image wp-image-4854\" title=\"Hausmarke Emma\" alt=\"Drei EMMA-Kaffeefilterpackungen von KONOS in Cremewei\u00df und Blau, in den Gr\u00f6\u00dfen 4 und 2\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma-1536x1024.webp 1536w\" sizes=\"auto, (max-width: 1870px) 100vw, 1870px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <div  data-lazy=\"1\" class=\"module_subrow themify_builder_sub_row tf_w pt-s col_align_top gutter-narrow tb_col_count_3 tb_9e1s360\">\n                <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_1fvh360 first\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_yp13360 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter.webp\" class=\"wp-post-image wp-image-4855\" title=\"Produkt Blaetter Konos\" alt=\"KONOS-Produktdatenbl\u00e4tter mit Korbfilterzeichnung, technischen Tabellen und blauen Gestaltungselementen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_vryw360\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_u4xq360 image-top  pb-s tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos.webp\" class=\"wp-post-image wp-image-4856\" title=\"18-1 Plakat Konos\" alt=\"KONOS-Gro\u00dffl\u00e4chenplakat mit einer Person, Kaffeefilter und dem Schriftzug \u201e#dieFilterMacher\u201c auf blauem Grund\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <div  data-lazy=\"1\" class=\"module_column sub_column col3-1 tb_72bg360 last\">\n                    <!-- module image -->\n<div  class=\"module module-image tb_elik276 image-top   tf_mw\" data-lazy=\"1\">\n        <div class=\"image-wrap tf_rel tf_mw\">\n            <img loading=\"lazy\" decoding=\"async\" width=\"1334\" height=\"1001\" src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung.webp\" class=\"wp-post-image wp-image-4857\" title=\"Korbfilter-Anleitung\" alt=\"Deutsch-englische KONOS-Korbfilteranleitung mit nummerierten Schritten und Schwarz-Wei\u00df-Zeichnungen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung-768x576.webp 768w\" sizes=\"auto, (max-width: 1334px) 100vw, 1334px\" \/>    \n        <\/div>\n    <!-- \/image-wrap -->\n    \n        <\/div>\n<!-- \/module image -->        <\/div>\n                    <\/div>\n                <\/div>\n                        <\/div>\n        <\/div>\n        <\/div>\n<!--\/themify_builder_content-->","protected":false},"excerpt":{"rendered":"<p>A Project in Two Stages The first ideas for a website redesign emerged back in 2022. During this initial phase, we developed the basic structure, explored early design concepts and set up a technical testing environment. As the work progressed, however, it became clear that the project was more extensive than originally anticipated. Requirements became [&hellip;]<\/p>\n","protected":false},"featured_media":4650,"parent":0,"menu_order":0,"template":"","meta":{"slim_seo":{"title":"KONOS \u2013 Web Design, Print & Brand Communication | AR Mediendesign","description":"From website redesign to a cohesive design system: Discover how we created a bilingual website, product illustrations and print materials for KONOS."},"_slim_seo_primary_term_category":0,"_slim_seo_primary_term_post_tag":0},"categories":[32],"tags":[],"class_list":["post-4649","case-studie","type-case-studie","status-publish","has-post-thumbnail","hentry","category-case-studies","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"ptb_metabox":{"ptb_case_studie_client":"Konos GmbH","ptb_case_studie_project":"Website Relaunch","ptb_case_studie_url":["ONLINE \u2197","https:\/\/konos.eu"],"ptb_case_studie_beschreibung":"What began as a redesign of a corporate website gradually evolved into a comprehensive design process. For KONOS, we created a new digital presence that brings together the company, its products, quality standards and career opportunities under one coherent visual concept. Design, content and technology did not develop independently, but evolved together, step by step, into a system capable of growing with the company's needs.  "},"ptb_taxonomy":{"category":[{"term_id":32,"name":"Case Studies","slug":"case-studies","term_group":0,"term_taxonomy_id":32,"taxonomy":"category","description":"","parent":0,"count":3,"filter":"raw"}]},"ptb_featured_image":{"url":"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/08\/Featur-Images_konos.webp","title":"KONOS GmbH","caption":""},"builder_content":"<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start.webp\" title=\"Konos Homepage\" alt=\"KONOS-Startseite auf einem Laptop mit der \u00dcberschrift \u201eFreude am Filtern\u201c und blauen Akzenten\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start.webp 1810w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Mockup-CS-Start-1536x1024.webp 1536w\" sizes=\"(max-width: 1810px) 100vw, 1810px\" \/>\n<h2>A Project in Two Stages<\/h2> <p>The first ideas for a website redesign emerged back in 2022. During this initial phase, we developed the basic structure, explored early design concepts and set up a technical testing environment. As the work progressed, however, it became clear that the project was more extensive than originally anticipated. Requirements became more specific, other communication priorities took precedence, and the website project was temporarily put on hold. <\/p> <p>The project resumed in late 2024. What we had learned during the first phase became the foundation for a revised concept. Rather than simply continuing with the original design, we reconsidered the entire structure and developed a more consistent visual direction.<br\/>This marked the beginning of the website as it exists today. <\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake.webp\" title=\"Hashtake dieFilterMacher\" alt=\"#dieFilterMacher\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake.webp 1920w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake-768x432.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Hashtake-1536x864.webp 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos.webp\" title=\"CI-Konos\" alt=\"KONOS: Schrift Metropolis und eine Farbpalette aus Blau, Hellgrau, Grau und leuchtendem Gr\u00fcn\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos.webp 1920w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos-768x432.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/CI-Konos-1536x864.webp 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\n<h2>A Grid as a Design Principle<\/h2> <p>At the heart of the new design is a modular Bento grid. By combining areas of different sizes, the layout allows text, imagery, information and calls to action to be arranged flexibly while maintaining a clear and recognizable structure. <\/p> <p>This approach proved particularly suitable for the wide variety of content. A company's history calls for a different presentation than a product overview, a careers page or information about quality management. Instead of forcing every page into the same layout, we developed a system of recurring elements that allows each subject to find its own balance. <\/p> <p>As more substantial content became available in early 2025, the system gradually took shape. Sections covering quality, careers and contact were developed, additional pages were built from the ground up, and existing content was transferred into the new structure. <\/p> <p>The design continued to evolve alongside the actual content. Typography, spacing, surfaces, gradients and colours were repeatedly reviewed in context. Eventually, a vibrant green emerged as the defining accent colour, giving the website a distinctive and recognizable identity. <\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos.webp\" title=\"Bento Design Konos\" alt=\"KONOS: Website auf einem Laptop mit blauen \u00dcberschriften und mehreren Produktseiten\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raser-Ex-Konos-1536x1024.webp 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2.webp\" title=\"Bento Grid Konos\" alt=\"KONOS-Produktseite auf einem Tablet mit Dentalpapier, Sterilisationspapier und gr\u00fcnen Schaltfl\u00e4chen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Raster2-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<video muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" aria-label=\"Projektvideo\"> <source data-src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Konos-Hover-ARMD-Half-678x509-1.mp4\" type=\"video\/mp4\"> <\/source><\/video>\n<video muted=\"\" loop=\"\" playsinline=\"\" preload=\"none\" aria-label=\"Projektvideo\"> <source data-src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/09\/Konos-History-ARMD-Half.mp4\" type=\"video\/mp4\"> <\/source><\/video>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History.jpg\" title=\"History\" alt=\"KONOS-Unternehmensgeschichte als Zeitleiste in Desktop- und Mobilansicht mit historischen Fotos\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History.jpg 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/History-768x576.jpg 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<h2>Products Between Drawing and Reality<\/h2> <p>Presenting the products was a particular design challenge. Filter bags and speciality papers are functional products, but they do not immediately lend themselves to a distinctive visual presentation on a corporate website. <\/p> <p>Rather than relying entirely on conventional product photography, we developed a different visual approach. The products are presented as collages combining drawings, sketches and technical elements, deliberately reminiscent of the early stages of a design process.<\/p> <p>Suitable references were researched, initial drawings created and gradually refined into a coherent visual language.<\/p> <p>These illustrations give the product sections a character of their own, combining technical precision with a more expressive design approach. At the same time, they established a visual language that could extend well beyond the website itself. <\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos.webp\" title=\"Illustrationen-Konos\" alt=\"KONOS: Korbkaffeefilter als technische Zeichnungen und Papierlagen neben dem zugeh\u00f6rigen Weblayout\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Illustrationen-Konos-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<h2>When Design Calls for Its Own Tools<\/h2> <p>As the design became more refined, the technical requirements grew alongside it. Responsive typography was made more dynamic, the Bento elements on overview pages received carefully considered hover and motion effects, and existing components were replaced whenever they reached their design or technical limitations. <\/p> <p>One example is the company timeline. The original timeline solution proved too restrictive, particularly on mobile devices. It was eventually replaced by a custom-built module that brought content, visual design and responsive behaviour together with far greater precision. <\/p> <p>Managing and reviewing the increasingly extensive content also called for a dedicated technical solution. For the final round of revisions, a direct feedback system was integrated into the website. Comments on wording, spelling, units of measurement or individual visual elements could be placed exactly where they were relevant, then collected and addressed systematically. <\/p> <p>Over the course of the project, the work therefore produced more than a collection of new pages. It also led to individual solutions developed directly in response to the project's specific needs.<\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet.webp\" title=\"Qualitaet\" alt=\"KONOS-Seite \u201eQualit\u00e4t &amp; Nachhaltigkeit\u201c mit EcoVadis-Bronzeauszeichnung in Desktop- und Mobilansicht\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Qualitaet-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos.webp\" title=\"Bewerbung-Konos\" alt=\"KONOS: Karriereseite auf einem Tablet und Online-Bewerbungsformular mit blauen \u00dcberschriften\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Bewerbung-Konos-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<h2>Two Languages, One Website<\/h2> <p>Once the German content was complete, the English version became the final major stage before launch.<\/p> <p>The entire website structure was adapted to support both languages. Navigation, varying text lengths and individual page elements all required attention, as did content that had to follow specific wording requirements. <\/p> <p>Automated translation helped manage the substantial amount of content, while the structure and visual design remained consistent across both language versions.<\/p> <p>The result was a website that also reflects the company's international outlook.<\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual.webp\" title=\"Multilingual\" alt=\"KONOS-Karriereseite auf Deutsch und Englisch mit blauen \u00dcberschriften und gr\u00fcnen Schaltfl\u00e4chen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Multilingual-1536x1024.webp 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\" \/>\n<h2>Going Live Is Not the Finish Line<\/h2> <p>The new website finally went live in autumn 2025. It replaced the previous site, the prepared domain structure was switched over, and additional security measures were implemented during the final stages of the project. <\/p> <p>The website has been maintained and developed continuously ever since. Technical updates, adjustments to changing legal requirements, current job vacancies and smaller refinements to the design and translations are all part of this ongoing work. <\/p> <p>Because a web project of this scale does not end the moment it goes live. It is used, it changes, and over time it faces new demands. Its technical foundation must not only accommodate these developments, but remain capable of supporting them for years to come. <\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung.webp\" title=\"Leistung\" alt=\"KONOS-Website mit Lighthouse-Werten: Leistung 98, Barrierefreiheit 97, Best Practices 100 und SEO 100\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Leistung-1536x1024.webp 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\" \/>\n<h2><em>Individual applications became a coherent whole. <br>Structure became form \u2013 and form became impact.<\/em><\/h2>\n<h2>Some Ideas Go Beyond the Screen<\/h2> <p>The work on the website did not stop at the digital presence. In particular, the visual language developed for the product sections prompted a fresh look at existing communication materials beyond the web. <\/p> <p>The existing product sheets were redesigned and brought into a consistent visual framework. Typography, colour, information hierarchy and the new product illustrations all followed the principles originally established for the website. <\/p> <p>Over the years, further applications followed. These included flyers and posters for recruitment campaigns, graphic elements for the company's stationery and business materials, and content for various social media channels. One particularly demanding design task was the packaging redesign for the company's own brand, EMMA. Each of these projects came with its own requirements, yet all built upon the visual language already established. <\/p> <p>What had originally been developed for a screen became a unifying design principle across a wide range of applications. Not a corporate identity defined after the fact, but a design system that had grown naturally out of the work itself.<\/p>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma.webp\" title=\"Hausmarke Emma\" alt=\"Drei EMMA-Kaffeefilterpackungen von KONOS in Cremewei\u00df und Blau, in den Gr\u00f6\u00dfen 4 und 2\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma.webp 1870w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma-768x512.webp 768w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Emma-1536x1024.webp 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter.webp\" title=\"Produkt Blaetter Konos\" alt=\"KONOS-Produktdatenbl\u00e4tter mit Korbfilterzeichnung, technischen Tabellen und blauen Gestaltungselementen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/ProduktBlaetter-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos.webp\" title=\"18-1 Plakat Konos\" alt=\"KONOS-Gro\u00dffl\u00e4chenplakat mit einer Person, Kaffeefilter und dem Schriftzug \u201e#dieFilterMacher\u201c auf blauem Grund\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/18-1-Konos-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>\n<img src=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung.webp\" title=\"Korbfilter-Anleitung\" alt=\"Deutsch-englische KONOS-Korbfilteranleitung mit nummerierten Schritten und Schwarz-Wei\u00df-Zeichnungen\" srcset=\"https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung.webp 1334w, https:\/\/arnerahn.com\/wp-content\/uploads\/2026\/10\/Korbfilter-Anleitung-768x576.webp 768w\" sizes=\"(max-width: 1334px) 100vw, 1334px\" \/>","_links":{"self":[{"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/case-studie\/4649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/case-studie"}],"about":[{"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/types\/case-studie"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/media\/4650"}],"wp:attachment":[{"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/media?parent=4649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/categories?post=4649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arnerahn.com\/en\/wp-json\/wp\/v2\/tags?post=4649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}