Die Vision
Proson gGmbH benötigte eine wirkungsvolle digitale Präsenz, um sich schnell am Markt zu etablieren, während das vollständige Leistungsportfolio noch in der Entwicklung war. Meine Mission bestand darin, eine anspruchsvolle, schnelle und visuell beeindruckende Landingpage zu entwerfen und zu entwickeln, die als sofortiger, professioneller Einstiegspunkt diente. Der gesamte Lebenszyklus des Projekts – vom anfänglichen UX-Wireframing und High-Fidelity-UI-Design bis hin zur komplexen technischen Umsetzung – wurde mir anvertraut. Das Ziel war es, eine elegante digitale "Visitenkarte" zu liefern, die Content-Redakteuren volle Kontrolle gibt und zukünftiges Wachstum nahtlos integriert, ohne die etablierte Designsprache zu beeinträchtigen.
Design & UI/UX Iteration
Ein maßgeschneidertes Designsystem wurde entwickelt, basierend auf einer harmonischen Farbpalette (mit tiefen Grüntönen und warmen Beigetönen) sowie einer gut lesbaren Typografie unter Verwendung harmonischer Proportionen.
- Moderne Design-Patterns: Dezente Schlagschatten, dynamische Hover-Zustände sowie weiche Übergänge und Parallax-Animationen hauchen der Benutzeroberfläche Leben ein und sorgen dafür, dass sie responsiv und lebendig wirkt.
- Mikrointeraktionen & Animationen: Unter Verwendung von modernem Vanilla JavaScript und In-View-Erkennung wurden elegante, scrollgesteuerte Reveal-Animationen implementiert. Bilder und Textboxen verfügen über dezente Parallax-Verschiebungen, die den Nutzer beim Scrollen fesseln und so ein Premium-Erlebnis schaffen.
- Responsiv gedacht: Die Nutzeroberfläche wurde akribisch für alle Endgeräte optimiert und garantiert eine nahtlose Reise – egal ob auf einem großen 4K-Display oder einem mobilen Gerät, wobei srcset für gestochen scharfe, Retina-taugliche Bilder genutzt wird.
Technische Umsetzung & Architektur
Unter der ansprechenden Oberfläche verbirgt sich eine robuste, skalierbare technische Architektur, die speziell auf hohe Performance ausgelegt ist.
- Headless-ähnliche Inhaltspflege: Überladene Page-Builder wurden vollständig vermieden. Stattdessen wurde eine Reihe maßgeschneiderter Gutenberg-Blöcke entwickelt. Dies bietet den Redakteuren ein intuitives, visuelles Drag-and-Drop-Erlebnis und setzt gleichzeitig die Regeln des Designsystems strikt durch.
- Optimiertes Frontend-Fundament: Das Theme setzt auf ein schlankes, unabhängiges Frontend. Unnötiger WordPress-Ballast (wie jQuery) wurde entfernt und stattdessen ein modularer SCSS- und ES6+-Ansatz verfolgt. Build-Tools optimieren SVGs, kompilieren die Styles und minimieren Assets für blitzschnelle Ladezeiten.
- Externe API-Integrationen: Die BITE HR-API wurde nahtlos angebunden, wodurch Stellenangebote dynamisch abgerufen und im Design der Website nativ dargestellt werden können, was den manuellen HR-Aufwand drastisch reduziert.
- Developer Experience & Infrastruktur: Das Projekt ist mithilfe von Docker vollständig containerisiert, was perfekt gespiegelte lokale, Staging- und Produktionsumgebungen ermöglicht. Benutzerdefinierte Node-Skripte automatisieren die Datenbanksynchronisierung, das Plugin-Management und das Asset-Deployment, was eine reibungslose Continuous Integration garantiert.
Das Ergebnis
Eine hochperformante Landingpage, die als starker erster Markteintritt diente. Durch die Kontrolle über Design und Code konnte eine kompromisslose digitale "Visitenkarte" geliefert werden, bei der jeder Pixel einen Zweck erfüllt. Dies ermöglichte es dem Kunden, das wachsende Leistungsportfolio souverän zu präsentieren, während das größere digitale Ökosystem parallel entwickelt wurde.