Psychologische Praxis

Ausgangslage

Ein unbekanntes Thema ohne Überforderung erklären und Besuchern helfen, vertraute Situationen wiederzuerkennen. Die Website verbindet das Angebot der Praxis mit einem eigenen digitalen Produkt in Telegram.

Die Aufgabe

Ein emotionales Bild mit einer präzisen Beschreibung des nächsten Schritts verbinden. Die Selbsteinschätzung soll als Werkzeug zur Selbstbeobachtung wirken – nie als Ersatz für eine Beratung oder eine medizinische Diagnose.

Unsere Lösungen

1. Ein klarer Einstieg

   Der erste Bildschirm enthält ein kurzes Angebot, einen Button für die kostenlose Selbsteinschätzung und einen Hinweis zum Format. Besucher wissen vorab, dass es in Telegram weitergeht.

2. Eine Abfolge statt loser Blöcke

   Von vertrauten Situationen geht die Seite zu vier groben Mustern über, erklärt die Schritte der Selbsteinschätzung, stellt die Praxis vor und beantwortet Fragen.

3. Bilder, die das Thema tragen

   Ein Zimmer mit offenem Fenster und Käfig, ein Vogel, eine Feder und plastische Objektillustrationen erzählen eine durchgehende Bildgeschichte. Vier Icons helfen, die Muster zu unterscheiden.

4. Derselbe Weg auf jedem Bildschirm

   Wiederkehrende Handlungsaufforderungen führen zu einem Ablauf. Auf schmalen Bildschirmen wird das Raster zu einer vertikalen Abfolge, die große Typografie skaliert mit der Breite.

Was wir umgesetzt haben

1. Struktur und Texte

   Wir haben eine Abfolge vom Hauptangebot und vertrauten Situationen zu den vier Profilen, den Quizschritten, der Vorstellung der Praxis und den häufigen Fragen aufgebaut. Jeder Block bereitet den nächsten Schritt vor.

2. Visuelle Richtung

   Wir haben einen ruhigen, redaktionellen Auftritt entwickelt: große Serifenüberschriften, warme neutrale Flächen und großzügige Abstände. Die aktuelle Version ergänzt das System um das Zimmer, den Vogel und plastische Bilder der Muster.

3. Responsive Umsetzung

   Wir haben die Website in HTML, CSS und JavaScript umgesetzt. Auf schmalen Bildschirmen stehen die Inhalte untereinander, die wichtigste Handlungsaufforderung bleibt sichtbar; Überschriften und Abstände passen sich der Breite an.

4. Produktanbindung und Launch

   Wir haben durchgängige Übergänge nach Telegram eingerichtet und die Website gestartet. Sie stellt das Angebot vor, während Quiz, persönliche Ergebnisse, Zahlungen und Termine im separat entwickelten MindType weiterlaufen.

Visuelles System

Die aktuelle Version kombiniert einen warmen hellen Hintergrund mit dunkelblauem Text und einem gedämpften Terrakotta-Akzent. Onest dient dem Lesen und dem Interface, Cormorant den Überschriften, Bodoni der ausdrucksstarken Ziffer im ersten Bildschirm.

Fließtext

Onest 400 · 16 px / 1.6

Erste Überschrift auf dem Desktop

Cormorant 300 · clamp(66 px, 6.8vw, 106 px) / 0.88

Laufweite der Überschrift

−0.068em

Unterzeile

Onest 400 · 18 px / 1,7; maximal 490 px

Bei einem Viewport von 1180 px

H1: 80,24 px; Zeilenabstand: 70,61 px

Abschnittsüberschriften

Cormorant 300 · clamp(34 px, 4vw, 52 px) / 1.15

Nutzerwege und Material

Eine vertraute Situation → die vier Muster erklärt → Beschreibung des kurzen Quiz → weiter zu Telegram. Informationen zu Beratungen bleiben ein eigener Weg: Niemand muss das Quiz machen, bevor er sich meldet.

Vermarktung

Wir haben die Website für Suchmaschinen optimiert, Konten bei Yandex Direct und Google Ads eingerichtet und Werbung sowie Suchmaschinenmarketing gestartet.

Das Ergebnis

Eine schlüsselfertige Website für eine psychologische Praxis ist online. Struktur, Texte, visuelles System und responsive Umsetzung greifen ineinander, die Telegram-Links führen den Weg in MindType weiter. Website und Bot sind zwei verbundene Teile eines Projekts, jeweils in einer eigenen Fallstudie beschrieben.

Werkzeuge und Umsetzung

HTML · CSS · JavaScript ohne Framework · eigene CSS/JS-Animationen · Telegram-Deeplinks