Ü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
IndustrieAuftraggeber
EBK Krüger GmbH & Co. KGLeistungen
Konzeption & Umsetzung WebsiteCMS
TYPO3 v. 8.7.8Features
Mehrsprachigkeit / Online-Bewerbung / Animiertes Intro & flexible Navigationselemente mit pixi.js & HTML5 Canvas / Seitenübergänge mit barba.js (PJAX)Templates
12Projektzeitraum
10 Monate
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.
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.
In der letzten Sektion der Startseite werden die vier aktuellsten News angeteasert. Auf Smartphones wird diese Sektion zu einem Slider.
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.
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.
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.
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.
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.
Ü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
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.
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
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.
