Phase 1 · Frontend-Entwurf · Juli 2026

Design Relaunch 2026

Das komplette Redesign von vitalstoffmedizin.ch — mobile-first, auf Basis des CI-Manuals, mit allen Inhalten und Features der aktuellen Seite. Neu gedacht, klickbar, bereit für Phase 2.

16
Seiten-Entwürfe
53
echte Wirkstoffe
2
neue Werkzeuge
Alles ist echt. Sämtliche Texte, Bilder, Daten und Werkzeuge basieren auf den Inhalten der Live-Site — kein Blindtext, keine Platzhalter-Features.

Konzept

«Seriös wie eine Arztpraxis, natürlich warm.»

Fünf Prinzipien leiten jeden Entwurf — abgeleitet aus Markenkern, Zielgruppen und CI-Manual.

01

Esoterikfrei sichtbar gemacht

Ruhige Layouts, viel Weissraum, präzise Typografie. Evidenz (Studien, Dosierungen) als wertige UI-Elemente statt Textwüsten. Keine Heilsversprechen-Ästhetik.

02

Helle CI-Farbwelt

Taube, Salve und Sand aus dem CI-Manual in hellen Tönen — das Logo-Grün bleibt dem Logo und feinen Akzenten vorbehalten. Ein Token-System statt Farb-Wildwuchs.

03

Zwei Leseebenen

Laien bekommen den schnellen Einstieg (Steckbrief, Chips, klare CTAs), Fachpersonen die Tiefe (Dosierungs-Tabellen, Studien, Schemas) — auf derselben Seite.

04

Ärztliche Nähe

Die Ich-Stimme von Dr. Lüscher, «Medizinisch geprüft»-Kennzeichnungen und das Experten-Netzwerk werden zu sichtbaren Vertrauens-Ankern.

05

Verbunden statt verwaist

Wirkstoffe ↔ Therapieschemas ↔ Web-Doktor ↔ Blog: konsequente interne Verlinkung, wo heute null kontextuelle Links stehen.

Neu

Suche, die findet

Synonym-Lexikon, Tippfehler-Toleranz und Autocomplete — sitewide (⌘K) und im Web-Doktor. «Kopfweh» findet jetzt «Migräne».

Design-System

Farbwelt & Typografie

Helle Töne der CI-Sekundärfarben tragen das Interface. Gabarito — die Web-Schrift aus dem CI-Manual — in einer fluiden Skala.

Taube 50Flächen
Taube 200Linien, Akzente
Taube 500 · CIMarke
Taube 800Buttons, Headlines
Salve 100Natur-Flächen
Salve 500 · CIBadges, Zitate
Sand 100warme Sektionen
Sand 500 · CIWärme
Logo-Grünnur Akzente ✓
InkFliesstext
Display 700Die Kraft natürlicher Vitalstoffe
H2 · 650Gesund werden und gesund bleiben
LeadVerständlich für Laien, fundiert für Fachpersonen.
Body 17pxMagnesium ist ein essenzieller Mineralstoff mit zahlreichen Funktionen im menschlichen Körper — optimiert für lange Fachtexte und Leser:innen 50+.

Alle Seitentypen

Die Entwürfe

Jeder Seitentyp der Live-Site, komplett neu gedacht — mit den echten Inhalten. Klick dich durch.

Highlights

Was der Prototyp beweist

Web-Doktor: der neue 2-Seiten-Flow

Beschwerden angeben, Vorschlag erhalten: Die Eingabe mit Synonym-Suche («Kopfweh» findet Migräne), Tippfehler-Toleranz und Gewichts-Dosierung führt zu einem Behandlungsvorschlag auf einer eigenen Seite — klar, sachlich, teilbar.

Wirkstoff-Seiten als Referenz

Steckbrief-Box, Dosierungs-Tabelle statt Textwüste, Studien-Sektion, Synergien mit internen Links, FAQ aus echten Nutzerfragen — das neue Content-Template.

Sitewide-Suche (⌘K)

Eine Command-Palette über alle 53 Wirkstoffe, 72 Artikel, 17 Therapieschemas und Seiten — mit Typ-Badges, Highlighting und Fehlertoleranz. Auf jeder Prototyp-Seite verfügbar.

Hinweise zum Prototyp. Bilder sind von der Live-Site verlinkt (eigenes Foto-Shooting ist als Phase-2-Empfehlung dokumentiert). Detail-Links führen als Demo auf die jeweilige Beispielseite. Formulare sind statische Demos. Die Therapie-Dosierungs-Schemas selbst bleiben wie heute E-Mail-gated.