Angela Ulanova

Ausgangslage

Online-Kurse für Pilates und Stretching als klare, persönliche Praxis zeigen. Besucher sollen die Trainerin in Bewegung sehen, Kursformate und Preise verstehen und dann den passenden Kontaktweg wählen.

Die Aufgabe

Atmosphäre und Information in Balance halten. Ein großes Videostill setzt die Stimmung, darf aber die Kursinformationen nie verdecken. Fünf Sprachversionen bewahren denselben Charakter – trotz unterschiedlich langer Überschriften und Interface-Texte.

Unsere Lösungen

1. Erst die Praxis, dann die Details

   Der erste Bildschirm zeigt Bewegung und die wichtigsten Aktionen. Weiter unten folgen Kurse, Preise, Angelas Geschichte und Kontakt – fünf Bereiche auf Russisch, Englisch, Deutsch, Französisch und Spanisch.

2. Typografie für zwei Schriftsysteme

   Im Russischen treffen die ausdrucksstarke Cormorant und die neutrale Inter aufeinander. In der englischen Version trägt Newsreader den redaktionellen Ton und DM Sans das Interface. Cinzel ist dem Namen vorbehalten.

3. Foto und Video als Inhalt

   Wir haben mit dem Material der Kundin gearbeitet: Fotos werden im Layout zugeschnitten, Videos wurden mit Posterbildern fürs Web aufbereitet. Die Aufnahmen bleiben, wie sie sind – ohne Retusche-Versprechen.

4. Bewegung ohne Kontrollverlust

   Sanfte Einblendungen geben der Seite Rhythmus. Hover-Effekte greifen nur bei präzisen Zeigegeräten, und die Einstellung „Bewegung reduzieren“ schaltet alles Unnötige ab.

Was wir umgesetzt haben

1. Angebot und Struktur

   Wir haben die Inhalte in Start, Kurse, Preise, Über Angela und Kontakt gegliedert und den Weg vom Kennenlernen der Trainerin über die Formatwahl bis zur Anfrage geplant.

2. Visuelles System und Material

   Wir haben Farbpalette, Typografie, Größen, Raster und Abstände festgelegt. Echte Fotos der Kundin sitzen mit Zuschnitt im Layout in der Komposition; Videos haben Posterbilder für schnelles Laden und Abspielen.

3. Mehrsprachige Umsetzung

   Wir haben 25 Seiten in fünf Sprachen mit responsivem Menü und Sprachumschalter umgesetzt, dazu Kurs- und Preisbereiche sowie die Auswahl von Richtung und Format. Der Kontaktweg erstellt eine fertige Nachricht für Telegram, WhatsApp oder E-Mail; den Termin stimmt man anschließend direkt mit der Trainerin ab.

4. Bewegung und Hosting

   Wir haben sanfte Einblendungen, Unterstützung für reduzierte Bewegung und zeigerabhängige Hover-Effekte ergänzt. Die Website läuft mit lokalen Assets und Schriften auf ulanova.fit über HTTPS.

Visuelles System

Ein warmer Sandton und helle Flächen lassen den Fotos Raum. Salbeigrün markiert die Aktionen, dunkler Text hält die Hierarchie. Die Größen unten beziehen sich auf die Live-Website, nicht auf diese Fallstudie.

Gemessen bei

Englische Version · Viewport 1180 × 757 CSS-px

Erster Bildschirm

Newsreader 300 · 96 px / 96 px

Einleitungstext

DM Sans · 18 px / 29.25 px

Fließtext

DM Sans · 16 px / 27.2 px

Abschnittsüberschriften

Newsreader 300 · 40 px / 46 px

Überschriften der Vorteile

Newsreader 300 · 28 px / 36.4 px

H1 der Unterseiten

Newsreader · 72 px / 76.32 px

Name im Kopfbereich

Cinzel · 20 px / 22 px

Abstandsskala

8 · 16 · 24 · 40 · 64 · 96 · 128 · 192 px

Die Größen wurden mit der englischen Version der Live-Website beim angegebenen Viewport abgeglichen. Farben sind im CSS geprüft; responsive Größen ändern sich mit der Bildschirmbreite.

Nutzerwege und Material

Die Startseite stellt den Ansatz vor → der Kursbereich hilft bei der Formatwahl → die Preise zeigen das Angebot → der Kontakt gibt den nächsten Schritt. Der Wechsel zwischen RU / EN / DE / FR / ES behält die Struktur bei, auf schmalen Bildschirmen steht alles in einer Spalte.

Vermarktung

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

Das Ergebnis

ulanova.fit ist online: 25 Seiten auf Russisch, Englisch, Deutsch, Französisch und Spanisch. Ein gemeinsames visuelles System verbindet Kursinformationen, Preise, Fotos und Videos aus der Praxis. Besucher wählen Richtung und Format und vereinbaren dann ihren Termin persönlich. Struktur, Design, Inhaltsaufbau, Entwicklung und Medienaufbereitung kamen von uns.

Werkzeuge und Umsetzung

HTML · CSS · JavaScript ohne Framework · Build mit Vite · Animationen mit IntersectionObserver und requestAnimationFrame · lokal gehostete Schriften · SVG · MP4-Video · Sprachversionen · Telegram und WhatsApp