Rolle: UI/UX Design · Visual Design · Art Direction · Brand Experience
Überblick
Thalassa Foundation ist eine internationale gemeinnützige Organisation, die sich dem Schutz und der Wiederherstellung der Ozeane widmet. Mit Fokus auf Korallenriff-Restauration, Schutz mariner Lebensräume und Reduktion von Plastikmüll verbindet die Stiftung wissenschaftliche Arbeit, lokale Gemeinschaftsprojekte und globale Aufklärungsarbeit.
Thalassa Foundation ist eine internationale gemeinnützige Organisation, die sich dem Schutz und der Wiederherstellung der Ozeane widmet. Mit Fokus auf Korallenriff-Restauration, Schutz mariner Lebensräume und Reduktion von Plastikmüll verbindet die Stiftung wissenschaftliche Arbeit, lokale Gemeinschaftsprojekte und globale Aufklärungsarbeit.
Meine Aufgabe war es, eine emotionale, vertrauenswürdige und gleichzeitig seriöse digitale Präsenz zu schaffen, die die Schönheit der Ozeane zeigt, die Dringlichkeit des Handelns vermittelt und Besucher effektiv zur Unterstützung (Spenden, Mitgliedschaft) motiviert.
Design Direction
Clean. Emotional. Maritime.
Das Design basiert auf einer ruhigen, natürlichen und hochwertigen Ästhetik. Die Farbpalette besteht aus tiefem Ozeanblau, klarem Türkis, warmem Sandbeige und viel Weiß. Ich habe bewusst viel Weißraum eingesetzt, um die Inhalte atmen zu lassen, und eine moderne, klare Sans-Serif-Typografie gewählt. Die Bildsprache ist von hoher Qualität — unterwasseraufnahmen und atmosphärische Meeresbilder erzeugen emotionale Verbundenheit.
Clean. Emotional. Maritime.
Das Design basiert auf einer ruhigen, natürlichen und hochwertigen Ästhetik. Die Farbpalette besteht aus tiefem Ozeanblau, klarem Türkis, warmem Sandbeige und viel Weiß. Ich habe bewusst viel Weißraum eingesetzt, um die Inhalte atmen zu lassen, und eine moderne, klare Sans-Serif-Typografie gewählt. Die Bildsprache ist von hoher Qualität — unterwasseraufnahmen und atmosphärische Meeresbilder erzeugen emotionale Verbundenheit.
Hero Experience
Der Einstieg ist bewusst beeindruckend und emotional: eine großformatige, lebendige Unterwasseraufnahme eines gesunden Korallenriffs mit bunten Fischen. Die Headline „Healing our oceans together“ vermittelt sofort Hoffnung und Handlungsaufruf. Zwei klare CTAs („Support Our Mission“ und „Learn More“) führen den Besucher direkt zur gewünschten Aktion.
Der Einstieg ist bewusst beeindruckend und emotional: eine großformatige, lebendige Unterwasseraufnahme eines gesunden Korallenriffs mit bunten Fischen. Die Headline „Healing our oceans together“ vermittelt sofort Hoffnung und Handlungsaufruf. Zwei klare CTAs („Support Our Mission“ und „Learn More“) führen den Besucher direkt zur gewünschten Aktion.
Inhaltsstruktur & Storytelling
Die Seite ist logisch und emotional durchdacht aufgebaut:
- Our Mission – Klare Darstellung der Vision und Werte
- Our Impact – Drei starke Kennzahlen (1.240 Hektar restaurierte Riffe, 450.000 geschützte Meerestiere, 28 Länder)
- What We Do – Drei fokussierte Programmkarten (Coral Reef Restoration, Marine Protected Areas, Plastic Pollution Reduction)
- Stories of Change – Drei authentische Erfolgsgeschichten mit ansprechenden Bildern
- Transparency – Offene Aufschlüsselung der Mittelverwendung (65 % Feldarbeit, 20 % Forschung, 15 % Verwaltung)
- Call to Action – Starker Abschluss mit Spenden- und Mitgliedschafts-Buttons
Die Seite ist logisch und emotional durchdacht aufgebaut:
- Our Mission – Klare Darstellung der Vision und Werte
- Our Impact – Drei starke Kennzahlen (1.240 Hektar restaurierte Riffe, 450.000 geschützte Meerestiere, 28 Länder)
- What We Do – Drei fokussierte Programmkarten (Coral Reef Restoration, Marine Protected Areas, Plastic Pollution Reduction)
- Stories of Change – Drei authentische Erfolgsgeschichten mit ansprechenden Bildern
- Transparency – Offene Aufschlüsselung der Mittelverwendung (65 % Feldarbeit, 20 % Forschung, 15 % Verwaltung)
- Call to Action – Starker Abschluss mit Spenden- und Mitgliedschafts-Buttons
UI & UX
Die Nutzerführung ist bewusst einfach, übersichtlich und vertrauensbildend. Die Navigation bleibt dezent, während die visuellen Elemente und klaren Handlungsaufforderungen den Besucher sanft durch die Seite führen. Besonders gelungen ist die Balance zwischen emotionaler Bildsprache und sachlicher Transparenz — typisch für seriöse Non-Profit-Organisationen.
Die Nutzerführung ist bewusst einfach, übersichtlich und vertrauensbildend. Die Navigation bleibt dezent, während die visuellen Elemente und klaren Handlungsaufforderungen den Besucher sanft durch die Seite führen. Besonders gelungen ist die Balance zwischen emotionaler Bildsprache und sachlicher Transparenz — typisch für seriöse Non-Profit-Organisationen.
Technische Umsetzung
- Vollständig responsives Design mit optimierter Mobile Experience
- Durchgängiges Design System (Farbtokens, Typografie, Komponenten, Grid)
- Hohe Bildqualität und schnelle Ladezeiten
- Detaillierte Design-Übergabe mit Styleguide und Interaktionsbeschreibungen
- Vollständig responsives Design mit optimierter Mobile Experience
- Durchgängiges Design System (Farbtokens, Typografie, Komponenten, Grid)
- Hohe Bildqualität und schnelle Ladezeiten
- Detaillierte Design-Übergabe mit Styleguide und Interaktionsbeschreibungen
Tools
Figma · Adobe XD · Adobe Illustrator · Adobe Photoshop
Figma · Adobe XD · Adobe Illustrator · Adobe Photoshop
Ergebnis
Es entstand eine ruhige, emotionale und sehr vertrauenswürdige Landing Page, die die Werte von Thalassa Foundation authentisch transportiert. Die Seite schafft nicht nur Aufmerksamkeit für das Thema, sondern motiviert Besucher aktiv zur Unterstützung — optisch hochwertig und strategisch durchdacht.
Es entstand eine ruhige, emotionale und sehr vertrauenswürdige Landing Page, die die Werte von Thalassa Foundation authentisch transportiert. Die Seite schafft nicht nur Aufmerksamkeit für das Thema, sondern motiviert Besucher aktiv zur Unterstützung — optisch hochwertig und strategisch durchdacht.
