Industrie Digitale Transformation für die EBK-Gruppe erfolgreich abgeschlossen.

Über EBK Krüger GmbH & Co. KG

Die EBK spezialisierte sich Ende der 90er Jahre auf die Produktion und das Engineering von Auslaufserien und Ersatzteilen. Heute produzieren sie an drei Standorten Motorkomponenten für fast alle Automobilhersteller in Europa, sowie elektromechanische Komponenten für die Industrie. Die Beherrschung von enormer Komplexität und die langfristige Sicherstellung von Ersatzteilverfügbarkeiten, machen sie im europäischen Markt fast einmalig.

Das Ergebnis - Alles andere als eine klassische Navigation

Der EBK-Gruppe war es besonders wichtig keine Hierarchien darzustellen, sondern den ausgeprägten Netzwerkgedanken der Firma wiederzuspiegeln. Die Elemente der Hauptnavigation sind als Kreise dargestellt und sind durch weitere Punkte miteinander verbunden. Fährt der Nutzer mit der Maus über einen Menüpunkt, so verhält sich dieser dem Cursor gegenüber "magnetisch".

Online bewerben in nur drei Schritten

Die Suche nach neuen Mitarbeitern hat für die EBK höchste Priorität, daher haben wir auf das Konzept des Online-Bewerbungsformulars einen besonderen Fokus gelegt. In nur drei einfachen Schritten kann der Nutzer das Formular ausfüllen und ohne umständliche Vorgehensweisen absenden.

  • Branche

    Industrie
  • Auftraggeber

    EBK Krüger GmbH & Co. KG
  • Leistungen

    Konzeption & Umsetzung Website
  • CMS

    TYPO3 v. 8.7.8
  • Features

    Mehrsprachigkeit / Online-Bewerbung / Animiertes Intro & flexible Navigationselemente mit pixi.js & HTML5 Canvas / Seitenübergänge mit barba.js (PJAX)
  • Templates

    12
  • Projektzeitraum

    10 Monate

www.ebk-gruppe.com

Das Konzept der Startseite

Dynamische Einleitung

Bevor sich die Startseite öffnet, beginnt die Internetseite der EBK-Gruppe mit einem Intro. Das Logo der EBK steht zuerst starr, mittig auf weißem Hintergrund. Erst durch Klick oder Scroll mit der Maus kommt Bewegung ins Spiel. Das Logo beginnt zu rotieren und vergrößert sich bis die gesamte Bildschirmgröße erreicht ist. Danach gelangt der Nutzer zur eigentlichen Startseite. Mithilfe von Cookies läuft dieser Vorgang nur beim erstmaligen Besuch der Seite ab. Bei einem erneuten Besuch öffnet sich direkt die Startseite.

Intro

Vom Intro zur Startseite

Die Startseite ist in vier Sektionen eingeteilt, die sich jeweils über den gesamten Bildschirm erstrecken. In den ersten drei Sektionen ist im Hintergrund ein vollflächiges, aussagekräftiges Bild. Darauf liegt eine Sektionsüberschrift sowie ein Call-to-Action-Button, über den der Nutzer zur angeteaserten Unterseite gelangt. Diese beiden Elemente blenden sich bei Scroll zur Sektion von der linken Seite ein.

Startseite

Alles andere als eine klassische Navigation

Weg vom gewohnten Aufbau! Das Menü ist über einen Button, in Form des Logos, zu erreichen. Auch der Inhalt der Navigation ist keineswegs klassisch aufgebaut. Der EBK-Gruppe war es besonders wichtig keine Hierarchien darzustellen, sondern den ausgeprägten Netzwerkgedanken der Firma wiederzuspiegeln. Die Menüpunkte sind als Kreise dargestellt, teilweise mit einem Bild und blauem Overlay im Hintergrund und sind durch weitere kleine Punkte miteinander verbunden. Fährt der Nutzer mit der Maus über einen Menüpunkt, so verhält sich dieser dem Cursor gegenüber "magnetisch". Durch Klick auf einen Menüpunkt öffnet sich ein Unternetzwerk mit weiteren Punkten. Wählt der Nutzer einen Unterpunkt aus, vergrößert sich der Kreis bis er die volle Bildschirmgröße einnimmt. Daraufhin öffnet sich die ausgewählte Unterseite.

Navigation GIF Animation

Das TYPO3-Backend

Im Backend steuert der Admin über x- und y-Koordinaten die Positionen der Navigationspunkte, zusätzlich kann er definieren welche Punkte miteinander verbunden sein sollen. Dadurch ist ein hohes Maß an Flexibilität gewährleistet.

Typo3 Backend

Dynamischer Seitenwechsel

Besonders am Aufbau der Unterseiten ist das Split-Screen-Konzept. Hier ist auf der linken Seite eine Slideshow mit Bildern, die durch Scrolldown mit der Maus aktiviert wird. Auf der rechten Seite befindet sich der Text. Oben rechts auf der Seite sind zwei Pfeile implementiert, um sich zu den anderen Untermenüpunkten zu navigieren. Bei Hover über einem Pfeil fährt das Wording ein. Klickt der Nutzer auf den Menüpunkt, so sliden Bild und Text entgegengesetzt ein.

Aufbau Unterseiten GIF Animation
Zeitraffer GIF Animation

Zeitraffer

Die wichtigsten Entwicklungsschritte der EBK-Firmengeschichte werden mithilfe einer animierten Timeline präsentiert. Erst durch Scrolldown baut sich die Sektion Schritt für Schritt auf. Abwechselnd blendet sich der dazugehörige Text von links und rechts ein.

Aktuelles

Im Menüpunkt "Was gibt es Neues?" erfährt der Nutzer alle wichtigen Neuigkeiten über die EBK. Die Untermenüpunkte geben ihm einen ersten Einblick über die letzten vier Geschehnisse. Klickt der Nutzer einen Punkt an, so wird er auf der Aktuelles-Seite automatisch zum ausgewählten Ereignis navigiert. Das Akkordeon öffnet sich und der Inhalt ist auf blauem Hintergrund dargestellt.

Aktuelles Übersicht

Online bewerben in nur drei Schritten

Die Suche nach neuen Mitarbeitern hat für die EBK höchste Priorität, daher haben wir auf das Konzept des Online-Bewerbungsformulars einen besonderen Fokus gelegt. Das Angebot reicht von offenen Stellen für Schülerpraktika - über Ausbildungsplätze - bis hin zu Festanstellungen.

Firmeneigenes Online-Bewerbungsformular GIF Animation

Über ein Tabsystem, welches bei Scrolldown am oberen Browserrand fixiert bleibt, kann sich der Nutzer für eine gewünschte Präferenz entscheiden. Im Tab "Offene Stellen" sind alle Stellenangebote in einem Akkordeon dargestellt. Über den Button "Online bewerben" öffnet der Nutzer das Bewerbungsformular, welches sich mittels eines dynamischen Layers von oben einblendet. In nur drei einfachen Schritten kann er das Formular ausfüllen und ohne umständliche Vorgehensweisen absenden.

Mobile Design

Mobile Navigation

Klassische Navigation

In der mobilen Auflösung haben wir auf eine klassische Navigation gewechselt. Bei Klick auf einen Menüpunkt slidet das zweite Level ein. Durch die Überschrift auf blauem Hintergrund im Kopfbereich sieht der Nutzer auf welcher Seite er sich gerade befindet.

Mobiler Slider

Dynamischer Slider

Auf den Unterseiten verschiebt sich der Slider nach oben, der Text ist darunter platziert. Mithilfe von Pfeilen und Punkten navigiert sich der Nutzer durch den Slider. Am Seitenende kann er zu den weiteren Untermenüs wechseln.

Online bewerben

Online bewerben

Die Jobseite auf der mobilen Auflösung ist der Desktopversion sehr ähnlich. Auch hier haben wir wieder das Tabsystem, welches bei Scrolldown fixiert bleibt. Über den Button blendet sich das Bewerbungsformular von oben ein.