UX/UI

Frontend-Entwicklung

sv trainingen

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

Rolle:

UX/UI Design

Artdirektion

Grafikdesign

Prototyping

Fokus:

Interaktive Karte

Responsives Design

HTML/CSS Umsetzung

Eigene Icons

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Anforderungen

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

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

Bewertung lesen

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem 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

Auf der Microsite werden alle Inhalte im Sinne eines Onepagers auf der Startseite präsentiert, da heutige Besucher von Websites seit der Entwicklung von Smartphones eher zum Scrollen als zum Klicken durch Unterseiten tendieren.

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. Bootstrap bietet dabei die passenden Breakpoints für ein konsistentes, responsives Design über alle Endgeräte hinweg.

Zur Website

Zur Website

Zur Website

Zur Siegerehrung

Zur Siegerehrung

Zur Siegerehrung

UX/UI

Frontend-Entwicklung

sv trainingen

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

Rolle:

UX/UI Design

Artdirektion

Grafikdesign

Prototyping

Fokus:

Interaktive Karte

Responsives Design

HTML/CSS Umsetzung

Eigene Icons

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Anforderungen

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

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

Bewertung lesen

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem 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

Auf der Microsite werden alle Inhalte im Sinne eines Onepagers auf der Startseite präsentiert, da heutige Besucher von Websites seit der Entwicklung von Smartphones eher zum Scrollen als zum Klicken durch Unterseiten tendieren.

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. Bootstrap bietet dabei die passenden Breakpoints für ein konsistentes, responsives Design über alle Endgeräte hinweg.

Zur Website

Zur Website

Zur Website

Zur Siegerehrung

Zur Siegerehrung

Zur Siegerehrung

UX/UI

Frontend-Entwicklung

sv trainingen

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

Rolle:

UX/UI Design

Artdirektion

Grafikdesign

Prototyping

Fokus:

Interaktive Karte

Responsives Design

HTML/CSS Umsetzung

Eigene Icons

Tools:

Adobe Xd

Visual Studio Code

Bootstrap

Illustrator/InDesign

Projektdauer:

2 Wochen

  • Abschlussarbeit Ausbildung + Einreichen ZFA-Wettbewerb

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Responsive Microsite zur Bewerbung eines Sportevents

Anforderungen

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

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

Bewertung lesen

Bewertung lesen

Typographie

Für konsistente Markenwirkung habe ich DIN Condensed und Morning Brew aus dem 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

Auf der Microsite werden alle Inhalte im Sinne eines Onepagers auf der Startseite präsentiert, da heutige Besucher von Websites seit der Entwicklung von Smartphones eher zum Scrollen als zum Klicken durch Unterseiten tendieren.

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. Bootstrap bietet dabei die passenden Breakpoints für ein konsistentes, responsives Design über alle Endgeräte hinweg.

Zur Website

Zur Website

Zur Website

Zur Siegerehrung

Zur Siegerehrung

Zur Siegerehrung