UX/UI

Frontend-Entwicklung

sv trainingen

Für den SV Trainingen habe ich eine responsive Microsite konzipiert, gestaltet und technisch umgesetzt, um den Waldtriathlon emotional zu inszenieren und zur Teilnahme zu motivieren. Der Fokus lag auf einer scrollbasierten Onepager-Struktur, konsistenter Markenwirkung, eigenentwickelten Icons sowie einer interaktiven Karte zur verständlichen Darstellung der Strecken.

Zur Website

Zur Siegerehrung

Rolle:

UX/UI Design

Artdirektion/Grafikdesign

Prototyping

HTML/CSS Umsetzung

HTML/CSS Umsetzung

Fokus:

Conversion-Optimierung

Conversion-Optimierung

Interaktive Karte

Responsives Design

Zielgruppenorientierung

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Anforderungen

Anforderungen umfassten die Gestaltung einer vollständigen Microsite unter Verwendung des Vereinslogos, die Entwicklung eigener Icons, responsives Webdesign sowie die Entwicklung und technische Umsetzung einer interaktiven Karte mit Auswahl- und Legendenfunktion; Texte und Logo wurden bereitgestellt.

Conversion-orientierte Nutzerführung

Um die Besucher möglichst direkt zur Teilnahme am Triathlon zu führen, lag der Fokus darauf, Interesse zu wecken, Orientierung zu geben und die Anmeldung möglichst niedrigschwellig zu gestalten.

Klare Handlungsführung

Die wichtigsten Inhalte (Wettkämpfe, Zeitplan, Streckenpläne und Anmeldung) folgen einer logischen Scroll-Dramaturgie. Besucher erhalten zuerst einen emotionalen Einstieg in das Event, danach die relevanten Informationen und schließlich eine direkte Möglichkeit zur Anmeldung.


Reduzierte Entscheidungswege

Die Wettkämpfe sind als übersichtliche Karten dargestellt. Jede Karte enthält die wichtigsten Informationen sowie einen direkten Anmelde-CTA, der automatisch zum Formular scrollt. Dadurch werden unnötige Navigationsschritte reduziert.

Conversion-Trigger

Mehrere Elemente unterstützen die Motivation zur Teilnahme:

  • Frühbucher-Rabatt als animierter Störer zur Erzeugung von Dringlichkeit (FOMO)

  • Countdown zum Event zur Steigerung der Vorfreude

  • klare „Anmelden“-Buttons innerhalb der Wettkampf-Kacheln

Niedrigschwellige Anmeldung

Das Anmeldeformular ist bewusst kompakt gehalten und nutzt Auswahlfelder für die wichtigsten Angaben, um den Anmeldeprozess schnell und unkompliziert zu gestalten.

Farben

Die Farbwelt leitet sich aus dem Orange des Vereinslogos als dynamischer Akzentfarbe ab; Grün- und Schwarztöne strukturieren Inhalte und verankern die Microsite visuell in der Umgebung des Schwarzwaldes.

Orange

Hex: #BF4C0C
RGB: 190, 75, 10
CMYK: 20, 75, 100, 10

White

Hex: #efefef
RGB: 240, 240, 240
CMYK: 7, 7, 7, 0

Black

Hex: #101010
RGB: 15, 15, 15
CMYK: 80, 70, 60, 90

Lightgreen

Hex: #3a4544
RGB: 60, 70, 70
CMYK: 70, 50, 50, 50

Green

Hex: #182a2a
RGB: 25, 40, 40
CMYK: 85, 60, 60, 70

Darkgreen

Hex: #111e1d
RGB: 15, 30, 30
CMYK: 85, 60, 60, 80

Bildsprache

Nahezu jedes Bild enthält einen sportlich aktiven Protagonisten, der Konzentration, Ehrgeiz, Freude oder Stärke ausstrahlt, um eine emotionale Bindung zum Besucher der Website, sowie eine freundliche Atmosphäre aufzubauen und ihn zu motivieren, am Triathlon teilnehmen zu wollen. Zur Stärkung der Markenidentität werden einige Bilder in Baum- und Waldsilhouetten gesetzt, die aus der Bildmarke des Logos gebaut sind.

„Hier wurde wirklich über den Tellerrand geschaut.“ Der klare Favorit.

Zentral-Fachausschuss Berufsbildung Druck und Medien (ZFA), Kassel

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem mitgelieferten Logo übernommen: DIN Condensed für gut lesbare UI- und Fließtexte, Morning Brew als prägnante Headline-Schrift. Ein klares Raster steuert Hierarchie und Ausrichtung je nach Funktionsbereich.

Bildmodifikationen

Zur Marken-Kohärenz wurden Kleidungsfarben in Orange angepasst und das Vereinslogo auf Sportkleidung integriert; ergänzende Waldhintergründe unterstützen die narrative Verortung im Schwarzwald.

Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher

Icons

Zur Visualisierung und schnelleren Zurechtfindung werden für den Zeitplan und die Streckenpläne Icons erstellt. Diese werden mit der App “Procreate” auf dem Ipad gezeichnet und mit Adobe Illustrator vektorisiert. Dadurch sollen sie stilistisch der Bildmarke des Logos gleichen, die ebenfalls ein handgezeichnetes Erscheinungsbild aufweist. Die Pfeile zur Steuerung des Sliders sind aus Bestandteilen der Schrift „Morning Brew“ gebaut.

Technische Umsetzung

Die Umsetzung erfolgte mit HTML, CSS und dem Framework Bootstrap, das die Integration von Animationen sowie die optimale Anpassung an vier definierte Viewports ermöglicht.

Die Streckenkarte wurde als mitgelieferte SVG-Grafik direkt in den HTML-Code eingebunden und für größere Viewports (≥ 992 px) als interaktive Infografik umgesetzt.

Die einzelnen Strecken lassen sich über Legendenpunkte ein- und ausblenden. Diese wurden als Checkboxen umgesetzt, deren Zustände über CSS-Selektoren (:hover und :checked) die entsprechenden SVG-Paths ansprechen. Dadurch verändern sich Farbe und Strichstärke der Strecken, während ergänzende Icons und Infotexte dynamisch ein- oder ausgeblendet werden.

Zur Website

Zur Siegerehrung

learnings

Bei Event-Websites entscheidet oft die Kombination aus Emotion und Klarheit über die Teilnahme. Visuelle Inszenierung kann Aufmerksamkeit erzeugen. Entscheidend für die Conversion ist jedoch eine klare Struktur, die Besucher Schritt für Schritt zur Anmeldung führt.

UX/UI

Frontend-Entwicklung

sv trainingen

Für den SV Trainingen habe ich eine responsive Microsite konzipiert, gestaltet und technisch umgesetzt, um den Waldtriathlon emotional zu inszenieren und zur Teilnahme zu motivieren. Der Fokus lag auf einer scrollbasierten Onepager-Struktur, konsistenter Markenwirkung, eigenentwickelten Icons sowie einer interaktiven Karte zur verständlichen Darstellung der Strecken.

Zur Website

Zur Siegerehrung

Rolle:

UX/UI Design

Artdirektion/Grafikdesign

Prototyping

HTML/CSS Umsetzung

HTML/CSS Umsetzung

Fokus:

Conversion-Optimierung

Conversion-Optimierung

Interaktive Karte

Responsives Design

Zielgruppenorientierung

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Anforderungen

Anforderungen umfassten die Gestaltung einer vollständigen Microsite unter Verwendung des Vereinslogos, die Entwicklung eigener Icons, responsives Webdesign sowie die Entwicklung und technische Umsetzung einer interaktiven Karte mit Auswahl- und Legendenfunktion; Texte und Logo wurden bereitgestellt.

Conversion-orientierte Nutzerführung

Um die Besucher möglichst direkt zur Teilnahme am Triathlon zu führen, lag der Fokus darauf, Interesse zu wecken, Orientierung zu geben und die Anmeldung möglichst niedrigschwellig zu gestalten.

Klare Handlungsführung

Die wichtigsten Inhalte (Wettkämpfe, Zeitplan, Streckenpläne und Anmeldung) folgen einer logischen Scroll-Dramaturgie. Besucher erhalten zuerst einen emotionalen Einstieg in das Event, danach die relevanten Informationen und schließlich eine direkte Möglichkeit zur Anmeldung.


Reduzierte Entscheidungswege

Die Wettkämpfe sind als übersichtliche Karten dargestellt. Jede Karte enthält die wichtigsten Informationen sowie einen direkten Anmelde-CTA, der automatisch zum Formular scrollt. Dadurch werden unnötige Navigationsschritte reduziert.

Conversion-Trigger

Mehrere Elemente unterstützen die Motivation zur Teilnahme:

  • Frühbucher-Rabatt als animierter Störer zur Erzeugung von Dringlichkeit (FOMO)

  • Countdown zum Event zur Steigerung der Vorfreude

  • klare „Anmelden“-Buttons innerhalb der Wettkampf-Kacheln

Niedrigschwellige Anmeldung

Das Anmeldeformular ist bewusst kompakt gehalten und nutzt Auswahlfelder für die wichtigsten Angaben, um den Anmeldeprozess schnell und unkompliziert zu gestalten.

Farben

Die Farbwelt leitet sich aus dem Orange des Vereinslogos als dynamischer Akzentfarbe ab; Grün- und Schwarztöne strukturieren Inhalte und verankern die Microsite visuell in der Umgebung des Schwarzwaldes.

Orange

Hex: #BF4C0C
RGB: 190, 75, 10
CMYK: 20, 75, 100, 10

White

Hex: #efefef
RGB: 240, 240, 240
CMYK: 7, 7, 7, 0

Black

Hex: #101010
RGB: 15, 15, 15
CMYK: 80, 70, 60, 90

Lightgreen

Hex: #3a4544
RGB: 60, 70, 70
CMYK: 70, 50, 50, 50

Green

Hex: #182a2a
RGB: 25, 40, 40
CMYK: 85, 60, 60, 70

Darkgreen

Hex: #111e1d
RGB: 15, 30, 30
CMYK: 85, 60, 60, 80

Bildsprache

Nahezu jedes Bild enthält einen sportlich aktiven Protagonisten, der Konzentration, Ehrgeiz, Freude oder Stärke ausstrahlt, um eine emotionale Bindung zum Besucher der Website, sowie eine freundliche Atmosphäre aufzubauen und ihn zu motivieren, am Triathlon teilnehmen zu wollen. Zur Stärkung der Markenidentität werden einige Bilder in Baum- und Waldsilhouetten gesetzt, die aus der Bildmarke des Logos gebaut sind.

„Hier wurde wirklich über den Tellerrand geschaut.“ Der klare Favorit.

Zentral-Fachausschuss Berufsbildung Druck und Medien (ZFA), Kassel

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem mitgelieferten Logo übernommen: DIN Condensed für gut lesbare UI- und Fließtexte, Morning Brew als prägnante Headline-Schrift. Ein klares Raster steuert Hierarchie und Ausrichtung je nach Funktionsbereich.

Bildmodifikationen

Zur Marken-Kohärenz wurden Kleidungsfarben in Orange angepasst und das Vereinslogo auf Sportkleidung integriert; ergänzende Waldhintergründe unterstützen die narrative Verortung im Schwarzwald.

Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher

Icons

Zur Visualisierung und schnelleren Zurechtfindung werden für den Zeitplan und die Streckenpläne Icons erstellt. Diese werden mit der App “Procreate” auf dem Ipad gezeichnet und mit Adobe Illustrator vektorisiert. Dadurch sollen sie stilistisch der Bildmarke des Logos gleichen, die ebenfalls ein handgezeichnetes Erscheinungsbild aufweist. Die Pfeile zur Steuerung des Sliders sind aus Bestandteilen der Schrift „Morning Brew“ gebaut.

Technische Umsetzung

Die Umsetzung erfolgte mit HTML, CSS und dem Framework Bootstrap, das die Integration von Animationen sowie die optimale Anpassung an vier definierte Viewports ermöglicht.

Die Streckenkarte wurde als mitgelieferte SVG-Grafik direkt in den HTML-Code eingebunden und für größere Viewports (≥ 992 px) als interaktive Infografik umgesetzt.

Die einzelnen Strecken lassen sich über Legendenpunkte ein- und ausblenden. Diese wurden als Checkboxen umgesetzt, deren Zustände über CSS-Selektoren (:hover und :checked) die entsprechenden SVG-Paths ansprechen. Dadurch verändern sich Farbe und Strichstärke der Strecken, während ergänzende Icons und Infotexte dynamisch ein- oder ausgeblendet werden.

Zur Website

Zur Siegerehrung

learnings

Bei Event-Websites entscheidet oft die Kombination aus Emotion und Klarheit über die Teilnahme. Visuelle Inszenierung kann Aufmerksamkeit erzeugen. Entscheidend für die Conversion ist jedoch eine klare Struktur, die Besucher Schritt für Schritt zur Anmeldung führt.

UX/UI

Frontend-Entwicklung

sv trainingen

Für den SV Trainingen habe ich eine responsive Microsite konzipiert, gestaltet und technisch umgesetzt, um den Waldtriathlon emotional zu inszenieren und zur Teilnahme zu motivieren. Der Fokus lag auf einer scrollbasierten Onepager-Struktur, konsistenter Markenwirkung, eigenentwickelten Icons sowie einer interaktiven Karte zur verständlichen Darstellung der Strecken.

Zur Website

Zur Siegerehrung

Rolle:

UX/UI Design

Artdirektion/Grafikdesign

Prototyping

HTML/CSS Umsetzung

HTML/CSS Umsetzung

Fokus:

Conversion-Optimierung

Conversion-Optimierung

Interaktive Karte

Responsives Design

Zielgruppenorientierung

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Anforderungen

Anforderungen umfassten die Gestaltung einer vollständigen Microsite unter Verwendung des Vereinslogos, die Entwicklung eigener Icons, responsives Webdesign sowie die Entwicklung und technische Umsetzung einer interaktiven Karte mit Auswahl- und Legendenfunktion; Texte und Logo wurden bereitgestellt.

Conversion-orientierte Nutzerführung

Um die Besucher möglichst direkt zur Teilnahme am Triathlon zu führen, lag der Fokus darauf, Interesse zu wecken, Orientierung zu geben und die Anmeldung möglichst niedrigschwellig zu gestalten.

Klare Handlungsführung

Die wichtigsten Inhalte (Wettkämpfe, Zeitplan, Streckenpläne und Anmeldung) folgen einer logischen Scroll-Dramaturgie. Besucher erhalten zuerst einen emotionalen Einstieg in das Event, danach die relevanten Informationen und schließlich eine direkte Möglichkeit zur Anmeldung.


Reduzierte Entscheidungswege

Die Wettkämpfe sind als übersichtliche Karten dargestellt. Jede Karte enthält die wichtigsten Informationen sowie einen direkten Anmelde-CTA, der automatisch zum Formular scrollt. Dadurch werden unnötige Navigationsschritte reduziert.

Conversion-Trigger

Mehrere Elemente unterstützen die Motivation zur Teilnahme:

  • Frühbucher-Rabatt als animierter Störer zur Erzeugung von Dringlichkeit (FOMO)

  • Countdown zum Event zur Steigerung der Vorfreude

  • klare „Anmelden“-Buttons innerhalb der Wettkampf-Kacheln

Niedrigschwellige Anmeldung

Das Anmeldeformular ist bewusst kompakt gehalten und nutzt Auswahlfelder für die wichtigsten Angaben, um den Anmeldeprozess schnell und unkompliziert zu gestalten.

Farben

Die Farbwelt leitet sich aus dem Orange des Vereinslogos als dynamischer Akzentfarbe ab; Grün- und Schwarztöne strukturieren Inhalte und verankern die Microsite visuell in der Umgebung des Schwarzwaldes.

Orange

Hex: #BF4C0C
RGB: 190, 75, 10
CMYK: 20, 75, 100, 10

White

Hex: #efefef
RGB: 240, 240, 240
CMYK: 7, 7, 7, 0

Black

Hex: #101010
RGB: 15, 15, 15
CMYK: 80, 70, 60, 90

Lightgreen

Hex: #3a4544
RGB: 60, 70, 70
CMYK: 70, 50, 50, 50

Green

Hex: #182a2a
RGB: 25, 40, 40
CMYK: 85, 60, 60, 70

Darkgreen

Hex: #111e1d
RGB: 15, 30, 30
CMYK: 85, 60, 60, 80

Bildsprache

Nahezu jedes Bild enthält einen sportlich aktiven Protagonisten, der Konzentration, Ehrgeiz, Freude oder Stärke ausstrahlt, um eine emotionale Bindung zum Besucher der Website, sowie eine freundliche Atmosphäre aufzubauen und ihn zu motivieren, am Triathlon teilnehmen zu wollen. Zur Stärkung der Markenidentität werden einige Bilder in Baum- und Waldsilhouetten gesetzt, die aus der Bildmarke des Logos gebaut sind.

„Hier wurde wirklich über den Tellerrand geschaut.“ Der klare Favorit.

Zentral-Fachausschuss Berufsbildung Druck und Medien (ZFA), Kassel

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem mitgelieferten Logo übernommen: DIN Condensed für gut lesbare UI- und Fließtexte, Morning Brew als prägnante Headline-Schrift. Ein klares Raster steuert Hierarchie und Ausrichtung je nach Funktionsbereich.

Bildmodifikationen

Zur Marken-Kohärenz wurden Kleidungsfarben in Orange angepasst und das Vereinslogo auf Sportkleidung integriert; ergänzende Waldhintergründe unterstützen die narrative Verortung im Schwarzwald.

Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher

Icons

Zur Visualisierung und schnelleren Zurechtfindung werden für den Zeitplan und die Streckenpläne Icons erstellt. Diese werden mit der App “Procreate” auf dem Ipad gezeichnet und mit Adobe Illustrator vektorisiert. Dadurch sollen sie stilistisch der Bildmarke des Logos gleichen, die ebenfalls ein handgezeichnetes Erscheinungsbild aufweist. Die Pfeile zur Steuerung des Sliders sind aus Bestandteilen der Schrift „Morning Brew“ gebaut.

Technische Umsetzung

Die Umsetzung erfolgte mit HTML, CSS und dem Framework Bootstrap, das die Integration von Animationen sowie die optimale Anpassung an vier definierte Viewports ermöglicht.

Die Streckenkarte wurde als mitgelieferte SVG-Grafik direkt in den HTML-Code eingebunden und für größere Viewports (≥ 992 px) als interaktive Infografik umgesetzt.

Die einzelnen Strecken lassen sich über Legendenpunkte ein- und ausblenden. Diese wurden als Checkboxen umgesetzt, deren Zustände über CSS-Selektoren (:hover und :checked) die entsprechenden SVG-Paths ansprechen. Dadurch verändern sich Farbe und Strichstärke der Strecken, während ergänzende Icons und Infotexte dynamisch ein- oder ausgeblendet werden.

Zur Website

Zur Siegerehrung

learnings

Bei Event-Websites entscheidet oft die Kombination aus Emotion und Klarheit über die Teilnahme. Visuelle Inszenierung kann Aufmerksamkeit erzeugen. Entscheidend für die Conversion ist jedoch eine klare Struktur, die Besucher Schritt für Schritt zur Anmeldung führt.