EBK-Gruppe | Industrie | TYPO3 Ein Technologiesprung braucht mittelständische Flexibilität

Ü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 - Offene Unternehmenskultur digitalisiert

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

    2017 - 2018

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.

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 passende Inhalt.

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

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.