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.

14
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 ↔ Therapie-Schemas ↔ Web-Doktor ↔ Ratgeber: 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: 5 UI-Varianten zur Wahl

Ein Kern — Synonym-Suche («kopfweh» findet Migräne), Tippfehler-Toleranz, Gewichts-Dosierung — und fünf komplett verschiedene Oberflächen: Pill-Cloud, geführter Assistent, Chat-Sprechstunde, Direkt-Suche und klassischer Anamnesebogen. Direkt auf der Seite umschaltbar, die Auswahl bleibt erhalten.

Matrix-Revival

86 Krankheiten × 26 Wirkstoffe mit 586 Praxis-Bewertungen schlummerten in einem Archiv-PDF. Jetzt: ein durchsuchbares, filterbares Werkzeug — ein Alleinstellungsmerkmal.

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 Schemas 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.