Beyeler Finefoods

<div data-tn style="display:none">Markenstrategie</div><style> .bf-ms-container { max-width: 100%; padding: 2rem 1.5rem; background-color: #150D0C; font-family: Trispace, sans-serif; } .bf-ms-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 2rem; line-height: 1.4; color: #F1EBC9; } .bf-ms-section { margin-bottom: 2.5rem; } .bf-ms-section-title { font-size: 1.125rem; font-weight: 700; color: #d4a574; margin-bottom: 1rem; } .bf-ms-items { display: flex; flex-direction: column; gap: 0.75rem; } .bf-ms-item { padding: 1rem; background: #1C1C1C; border-left: 3px solid #d4a574; border-radius:0; } .bf-ms-item-text { font-size: 0.95rem; color: rgba(241,235,201,0.55); line-height: 1.5; } .bf-ms-insight { padding: 1.5rem; background: #1C1C1C; border: 1px solid #2A2020; border-radius:0; } .bf-ms-insight-label { font-size: 0.875rem; color: rgba(241,235,201,0.55); text-transform: uppercase; margin-bottom: 0.75rem; } .bf-ms-insight-text { font-size: 1rem; color: #F1EBC9; line-height: 1.6; } .bf-ms-title { font-size: 1.2rem; margin-bottom: 1.5rem; } } @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-ms-container"> <div class="bf-ms-title">Beyeler Finefoods — Markenstrategie</div> <div class="bf-ms-section"> <div class="bf-ms-section-title">Kern-Messaging</div> <div class="bf-ms-items"> <div class="bf-ms-item"><div class="bf-ms-item-text">Authentische Handwerkstradition trifft modernes Design</div></div> <div class="bf-ms-item"><div class="bf-ms-item-text">Hochwertige Rohstoffe, sorgfältige Verarbeitung</div></div> <div class="bf-ms-item"><div class="bf-ms-item-text">Premium-Erlebnis in jedem Aspekt</div></div> </div> </div> <div class="bf-ms-section"> <div class="bf-ms-section-title">Beziehung zur Zielgruppe</div> <div class="bf-ms-items"> <div class="bf-ms-item"><div class="bf-ms-item-text">Geschichtenverkauf statt Produktverkauf</div></div> <div class="bf-ms-item"><div class="bf-ms-item-text">Vertrauen durch Transparenz der Herkunft</div></div> <div class="bf-ms-item"><div class="bf-ms-item-text">Exklusivität und Begrenztheit betonen</div></div> </div> </div> <div class="bf-ms-insight"> <div class="bf-ms-insight-label">Strategie</div> <div class="bf-ms-insight-text">Positioning als Premiummarke, die Authentizität, Handwerk und Verlangsamung verkörpert</div> </div> </div>

<div data-tn style="display:none">Marktanalyse</div><style> .bf-container { max-width: 100%; padding: 2rem 1.5rem; background-color: #150D0C; font-family:Trispace,sans-serif; } .bf-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 2rem; line-height: 1.4; color: #F1EBC9; } .bf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .bf-card { padding: 1.5rem; background: #1C1C1C; border: 1px solid #2A2020; border-radius:0; transition: all 0.3s ease; } .bf-card:hover { border-color: #2A2020; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .bf-label { font-weight: 700; font-size: 1rem; color: #F1EBC9; margin-bottom: 0.75rem; } .bf-text { font-size: 0.95rem; color: rgba(241,235,201,0.55); line-height: 1.6; } .bf-insight { padding: 1.5rem; background: #1C1C1C; border: 1px solid #2A2020; border-radius:0; border-left: 4px solid #d4a574; } .bf-insight-label { font-size: 0.875rem; color: rgba(241,235,201,0.55); text-transform: uppercase; margin-bottom: 0.75rem; } .bf-insight-text { font-size: 1rem; color: #F1EBC9; line-height: 1.6; font-weight: 500; } .bf-title { font-size: 1.2rem; margin-bottom: 1.5rem; } .bf-grid { grid-template-columns: 1fr; } } @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-container"> <div class="bf-title">Beyeler Finefoods — Marktanalyse</div> <div class="bf-grid"> <div class="bf-card"> <div class="bf-label">Zielgruppe</div> <div class="bf-text">Gourmet-Liebhaber im Premium-Segment mit höheren Ansprüchen an Qualität und Authentizität</div> </div> <div class="bf-card"> <div class="bf-label">Wettbewerb</div> <div class="bf-text">Gespsättigt durch anonyme Online-Verkäufer. Beyeler unterscheidet sich durch Geschichten und Handwerk</div> </div> <div class="bf-card"> <div class="bf-label">Chance</div> <div class="bf-text">Narrative Premium-Vermarktung von künstlerisch hergestellten Produkten zu Premium-Preisen</div> </div> </div> <div class="bf-insight"> <div class="bf-insight-label">Insight</div> <div class="bf-insight-text">Ein E-Commerce-Erlebnis, das authentische Herkunft und kunsthandwerkliche Verarbeitung kommuniziert</div> </div> </div>

<div data-tn style="display:none">UX-Methode</div><style> .bf-ux-container { max-width: 100%; padding: 2rem 1.5rem; background-color: #150D0C; font-family: Trispace, sans-serif; } .bf-ux-title { font-size: 1.375rem; font-weight: 600; margin-bottom: 2rem; line-height: 1.4; color: #F1EBC9; } .bf-ux-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .bf-ux-card { padding: 1.5rem; background: #1C1C1C; border: 1px solid #2A2020; border-radius:0; transition: all 0.3s ease; display: flex; flex-direction: column; gap: 0.75rem; } .bf-ux-card:hover { border-color: #2A2020; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .bf-ux-card-icon { font-size: 2rem; } .bf-ux-card-title { font-weight: 700; color: #d4a574; font-size: 1rem; } .bf-ux-card-desc { font-size: 0.9rem; color: rgba(241,235,201,0.55); line-height: 1.5; } .bf-ux-insight { padding: 1.5rem; background: #1C1C1C; border: 1px solid #2A2020; border-radius:0; } .bf-ux-insight-label { font-size: 0.875rem; color: rgba(241,235,201,0.55); text-transform: uppercase; margin-bottom: 0.75rem; } .bf-ux-insight-text { font-size: 1rem; color: #F1EBC9; line-height: 1.6; } .bf-ux-title { font-size: 1.2rem; margin-bottom: 1.5rem; } .bf-ux-principles { grid-template-columns: 1fr; } } @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-ux-container"> <div class="bf-ux-title">Beyeler Finefoods — UX-Methode</div> <div class="bf-ux-principles"> <div class="bf-ux-card"> <div class="bf-ux-card-icon">📖</div> <div class="bf-ux-card-title">Storytelling</div> <div class="bf-ux-card-desc">Jedes Produkt mit seiner Herkunftsgeschichte verbunden</div> </div> <div class="bf-ux-card"> <div class="bf-ux-card-icon">🎨</div> <div class="bf-ux-card-title">Visuell Premium</div> <div class="bf-ux-card-desc">Hochwertige Fotografie und elegante Darstellung</div> </div> <div class="bf-ux-card"> <div class="bf-ux-card-icon">🔍</div> <div class="bf-ux-card-title">Transparenz</div> <div class="bf-ux-card-desc">Herkunft, Herstellung und Zutaten deutlich sichtbar</div> </div> <div class="bf-ux-card"> <div class="bf-ux-card-icon">✨</div> <div class="bf-ux-card-title">Entdeckung</div> <div class="bf-ux-card-desc">Intuitive Navigation zu Sammlerstücken und Neuheiten</div> </div> </div> <div class="bf-ux-insight"> <div class="bf-ux-insight-label">Ergebnis</div> <div class="bf-ux-insight-text">Ein Shop, der wie ein Showroom fühlt und Vertrauen aufbaut</div> </div> </div>

<div data-tn style="display:none">Moodboard</div> <style> .bf-mb{position:relative;width:100%;min-height:650px;background:#150D0C;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none} .bf-mb:active{cursor:grabbing} .bf-mb-img{position:absolute;border-radius:0;box-shadow:0 4px 20px rgba(0,0,0,0.5);transition:box-shadow 0.2s,transform 0.15s;cursor:grab;object-fit:cover} .bf-mb-img:hover{box-shadow:0 8px 32px rgba(0,0,0,0.7);z-index:10!important} .bf-mb-img.dragging{box-shadow:0 12px 40px rgba(0,0,0,0.8);transform:scale(1.03);z-index:100!important;transition:none} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-mb" id="bf-moodboard"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8935b04b162fa41cc261_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-dijon-senf-2.png" style="width:250px;top:20px;left:3%;z-index:1" alt="Beyeler Dijon Senf"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca89340bf80ec513130d2f_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-parsely-mayo-petersilie.png" style="width:230px;top:30px;left:28%;z-index:2" alt="Beyeler Parsley Mayo"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca893457cca81a76029193_annekevandermost_beyelerfinefoods-wu%CC%88rzpasten-fonds-gemuesefond-bh.png" style="width:260px;top:10px;left:54%;z-index:3" alt="Beyeler Gemüsefond"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8934b475807fefcb87b0_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-illustration-3-p-1080.png" style="width:220px;top:50px;left:78%;z-index:4" alt="Beyeler Illustration"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8934ebccb80bf2003525_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-wasabi-mayo-1.png" style="width:240px;top:230px;left:5%;z-index:5" alt="Beyeler Wasabi Mayo"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8934f39c5a50dfcebe9f_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-sriracha-mayo.png" style="width:250px;top:210px;left:30%;z-index:6" alt="Beyeler Sriracha Mayo"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8934bf2bf4a7903fdbc4_annekevandermost_beyelerfinefoods-wu%CC%88rzpasten-fonds-rindsfond-bg.png" style="width:270px;top:240px;left:56%;z-index:7" alt="Beyeler Rindsfond"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca8933d42f00f04f5c6c2e_annekevandermost_Unbenanntes_Projekt%2010-p-1600.png" style="width:260px;top:420px;left:10%;z-index:8" alt="Beyeler Projekt"> <img class="bf-mb-img" src="https://cdn.prod.website-files.com/651855a500ee886d8d6529c7/69ca893332a93d4499e37ed1_annekevandermost_Beyeler-Fine-Foods-schweizer-feinkost-sossen-illustration-2-p-1080.png" style="width:240px;top:400px;left:45%;z-index:9" alt="Beyeler Illustration 2"> </div> <script> (function(){var c=document.getElementById('bf-moodboard');if(!c)return;var imgs=c.querySelectorAll('.bf-mb-img');var drag=null,ox=0,oy=0,mx=0;imgs.forEach(function(img,i){img.style.zIndex=i+1});function start(e){var t=e.target.closest('.bf-mb-img');if(!t)return;e.preventDefault();drag=t;mx=Math.max.apply(null,Array.from(imgs).map(function(x){return parseInt(x.style.zIndex)||0}))+1;drag.style.zIndex=mx;drag.classList.add('dragging');var p=e.touches?e.touches[0]:e;ox=p.clientX-drag.offsetLeft;oy=p.clientY-drag.offsetTop}function move(e){if(!drag)return;e.preventDefault();var p=e.touches?e.touches[0]:e;drag.style.left=(p.clientX-ox)+'px';drag.style.top=(p.clientY-oy)+'px'}function end(){if(drag){drag.classList.remove('dragging');drag=null}}c.addEventListener('mousedown',start);c.addEventListener('mousemove',move);c.addEventListener('mouseup',end);c.addEventListener('mouseleave',end);c.addEventListener('touchstart',start,{passive:false});c.addEventListener('touchmove',move,{passive:false});c.addEventListener('touchend',end)})(); </script>

<div data-tn style="display:none">Design System</div><style> .bf-ds{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .bf-ds-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 16px} .bf-ds-sub{text-align:left;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px} .bf-ds-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:0 auto 16px} .bf-ds-section{background:#1C1C1C;border:1px solid #2A2020;border-radius:0;padding:20px} .bf-ds-section-title{font-weight:700;font-size:13px;color:#F1EBC9;margin:0 0 16px;text-transform:uppercase;gap:12px;flex-wrap:wrap} .bf-ds-color{display:flex;flex-direction:column;align-items:center;gap:6px} .bf-ds-swatch{width:48px;height:48px;border-radius:0;border:1px solid rgba(241,235,201,0.15)} .bf-ds-color-name{font-size:10px;color:rgba(241,235,201,0.55);font-weight:600} .bf-ds-typo-sample{margin:0 0 12px} .bf-ds-typo-label{font-size:10px;color:rgba(241,235,201,0.4);margin:0 0 16px} .bf-ds-typo-text{font-size:22px;font-weight:700;color:#F1EBC9;margin:0} .bf-ds-typo-body{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.6;margin:0} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-ds"> <h3 class="bf-ds-title">Design System</h3> <p class="bf-ds-sub">Premium-Positionierung durch Farbe & Typografie</p> <div class="bf-ds-row"> <div class="bf-ds-section"> <p class="bf-ds-section-title">Farbpalette</p> <div class="bf-ds-colors"> <div class="bf-ds-color"><div class="bf-ds-swatch" style="background:#1A3C34"></div><p class="bf-ds-color-name">Forest</p></div> <div class="bf-ds-color"><div class="bf-ds-swatch" style="background:#C8A96E"></div><p class="bf-ds-color-name">Gold</p></div> <div class="bf-ds-color"><div class="bf-ds-swatch" style="background:#F8F4EF"></div><p class="bf-ds-color-name">Cream</p></div> <div class="bf-ds-color"><div class="bf-ds-swatch" style="background:#2C2C2C"></div><p class="bf-ds-color-name">Charcoal</p></div> <div class="bf-ds-color"><div class="bf-ds-swatch" style="background:#8B7355"></div><p class="bf-ds-color-name">Walnut</p></div> </div> </div> <div class="bf-ds-section"> <p class="bf-ds-section-title">Typografie</p> <div class="bf-ds-typo-sample"><p class="bf-ds-typo-label">Heading / Serif</p><p class="bf-ds-typo-text">Beyeler Finefoods</p></div> <div class="bf-ds-typo-sample"><p class="bf-ds-typo-label">Body / Sans-Serif</p><p class="bf-ds-typo-body">Klare, reduzierte Typografie unterstreicht die Premium-Positionierung. Großzügige Weißräume und hochwertige Bildsprache.</p></div> </div> </div> </div>

<div data-tn style="display:none">Fazit</div><style> .bf-fz{max-width:100%;width:100%;background:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .bf-fz-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 20px} .bf-fz-content{max-width:640px;margin:0 auto} .bf-fz-text{font-size:13px;color:rgba(241,235,201,0.7);line-height:1.8;margin:0 0 16px;font-family:Generalsans,sans-serif} .bf-fz-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} .bf-fz-metric{background:#1C1C1C;border:1px solid #2A2020;border-radius:0;padding:20px;text-align:left} .bf-fz-metric-val{font-weight:700;font-size:24px;color:#F1EBC9;margin:0 0 16px} .bf-fz-metric-lbl{font-size:11px;color:rgba(241,235,201,0.55);text-transform:uppercase;margin:0} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-'],[class*='vis-'],[class*='faz-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}h2{font-size:22px!important}h3{font-size:16px!important}[class$='-container'],[class*='-wrap'],[class*='-content']{padding:20px 12px!important;max-width:100%!important;overflow-x:hidden!important}}</style> <div class="bf-fz"> <h3 class="bf-fz-title">Fazit & Ausblick</h3> <div class="bf-fz-content"> <p class="bf-fz-text">Das Redesign von Beyeler Finefoods zeigt, wie eine Premium-Lebensmittelmarke digital überzeugend positioniert werden kann. Hochwertige Bildsprache, detaillierte Produktseiten und SEO-Optimierung schaffen eine professionelle Online-Präsenz, die sowohl Amazon- als auch Retail-Kunden anspricht.</p> <p class="bf-fz-text">Nächster Schritt: Social-Media-Redesign zur Stärkung der Markenidentität und Erhöhung der organischen Reichweite — aufbauend auf dem visuellen System der Website.</p> <div class="bf-fz-metrics"> <div class="bf-fz-metric"><p class="bf-fz-metric-val">SEO</p><p class="bf-fz-metric-lbl">Search Console Setup</p></div> <div class="bf-fz-metric"><p class="bf-fz-metric-val">Premium</p><p class="bf-fz-metric-lbl">Brand-Positionierung</p></div> <div class="bf-fz-metric"><p class="bf-fz-metric-val">1 Monat</p><p class="bf-fz-metric-lbl">Projektdauer</p></div> </div></div></div>