Zurück zur Übersicht
Case Study · Vereinswebsite

SG-WBO.DE
Kompletter Relaunch

✓ Live seit 2024 UI/UX Design PHP / MySQL Bootstrap Admin-CMS
94
Lighthouse Score
-68%
Ladezeit vs. vorher
3
Admin-Rollen
+120%
Mobile Sessions
Website-Vorschau

Die fertige
Seite.

🔒 sg-wbo.de
Screenshots

6 Ansichten
der Website.

SG-WBO Startseite
Startseite
Live
SG-WBO Navigation
Navigation / IA
SG-WBO News
News / Artikel
SG-WBO Spielplan
Spielplan / Teams
SG-WBO Admin
Admin-Bereich
SG-WBO Mobile Home
Mobile · Home
SG-WBO Mobile Spielplan
Mobile · Spielplan
SG-WBO Mobile Teams
Mobile · Teams

Platzhalter · Bild-URLs durch echte Screenshots ersetzen

× Screenshot groß
Gestaltung

Drei Kernkomponenten
im Detail.

Navigation
Sticky Nav mit Farbidentität
Vereinsfarbe Grün als primärer Marker. Active-State mit klarem Underline. CTA immer sichtbar.
Hero-Bereich
Klar – kein Clutter
Badge + Headline + 2 CTAs. Keine Ablenkung, direkter Weg zum Spielplan.
Content-Cards
Einheitliches Card-System
Bild → Titel → Subtitel. Grid mit 3 Spalten Desktop, 1 Spalte Mobil.
Farbsystem

Grün als
Leitfarbe.

Primary
#22c55e
Primary Dark
#16a34a
Accent
#4ade80
Background
#06050e
Text
#ffffff
Muted
#b0acd0
Typografie

Zwei Fonts,
eine Stimme.

Display – Syne 800
SG WBO
Syne · Extra Bold · −0.04em tracking
Body – Outfit 400/500
Fußball, Gemeinschaft und aktive Vereinsarbeit im Herzen Nordhessens. Klare Lesbarkeit, 1.7 Zeilenabstand.
Outfit · Regular / Medium
Responsive

Desktop & Mobil
auf Augenhöhe.

SG WBO
TeamsNewsSpielplan
Mitglied
⚽
🏆
⚽
🏆
📋
Nächstes Projekt
Mende-Druck · Redesign
Ansehen