Digital Branding: Bayer 04 Leverkusen Website+App

Auftraggeber

Bayer 04 Leverkusen

Expertise

Digital Branding

Projektbezeichnung

Website und App Relaunch, Webdesign, UX/UI,

Übersichtlichkeit, Vereinfachung der Navigation und responsives Design sind nur einige der konzeptionellen Aspekte der neuen Bayer 04 Leverkusen Website, bei der stay golden als Corporate Design Leadagentur für die Entwicklung und Gestaltung der grafischen Benutzeroberfläche verantwortlich war.

Bayer 04 Website Relaunch, responsives Redesign, Liveticker, Webdesign, UX, UI, Tablet View

Bayer 04 Website Relaunch, responsives Redesign, Webdesign, UX, UI, mobile View

Aufräumen und Vereinfachen

Neben dem Kernaspekt, die Bayer 04 Leverkusen Website responsive und damit auch mobil betrachtbar zu machen, wurde eine grundlegende Veränderung der inhaltlichen Struktur und Aufbereitung der Informationsdichte vorgenommen. Auf die sonst typische horizontale Navigation mit überladenen Megadropdownmenüs haben wir verzichtet. Stattdessen führt ein aufgeräumtes Hamburgermenü direkt zu den für Fans wichtigsten Menüpunkten. So wird auch eine konsistente Benutzerführung zwischen Desktop- und Mobilansicht unterstützt.

Bayer 04 Website Relaunch, Redesign, Scribbles, UserInterface, Webdesign

Sections und Hubs

Die Struktur der Website basiert auf einem modfizierten Konzept des „Atomic Design“ (siehe dazu Artikel auf matter-of-design.com) und gliedert die einzelnen Informationsblöcke wie z.B. Spielplan, News, Termine, Statistiken in sogenannte „Sections“. Sections sind vertikal angeordnete Service- und Funktionsbereiche, die für den User Informationen zu einem spezifischen Thema bereitstellen. Mehrer Sections verbinden sich zu „Hubs“, die dann eine (Unter)seite auf der Website darstellen können. Auf diese Weise wird die „Klicktiefe“ deutlich reduziert.

Dieses Darstellungkonzept ermöglicht eine flexible Handhabung von Funktionsbereichen im Hintergrund. Zusätzliche, neue Seiten können so schneller und einfacher erstellt werden.

Bayer 04 Leverkusen Website, Designsystem, modified Atomic Design, Grid

Bayer 04 Website Relaunch, Redesign, Webdesign, User Interface Design, Section Structure

Inline Navigation

Die verschiedenen Sections lassen sich in den Hubs gezielt durch eine Inline Navigation ansteuern, die sich beim Scrollen am oberen Browserrand anheftet (sticky behaviour). Die Inline Navigation verbessert die Orientierung und vereinfacht dem User die Navigation innerhalb einer Seite/eines Hubs.

Corporate Design

Farbgebung, Typografie und der Einsatz von Gestaltungselementen (Bsp. Bühne, Balken) aus dem Corporate Design wurden form- und funktionsgemäß auf die interaktiven, digitalen Medien (Website, App) übertragen und gewährleisten so ein konsistentes Markenerlebnis innerhalb der Bayer 04-Medienwelt.