The Vision
Proson gGmbH needed a high-impact digital presence to quickly establish themselves on the market while their full portfolio of services was still in development. My mission was to design and develop a sophisticated, fast, and visually striking landing page that served as an immediate, professional entry point. The complete lifecycle of the project—from the initial UX wireframing and high-fidelity UI design to the complex technical execution—was entrusted to me. The goal was to deliver a sleek corporate "business card" that empowers content editors and seamlessly accommodates future growth without compromising the established design language.
Design & UI/UX Iteration
A bespoke design system was crafted, built around a harmonious color palette (featuring deep greens and warm beige tones) and highly readable typography utilizing a harmonic scale.
- Modern Design Patterns: Subtle drop shadows, dynamic hover states, and smooth transitions and parallax animations breathe life into the interface, ensuring it feels responsive and alive.
- Micro-Interactions & Animation: Using custom Vanilla JavaScript and in-view detection, elegant, scroll-triggered reveal animations were implemented. Images and text boxes feature subtle parallax translations that engage the user as they scroll, creating a premium browsing experience.
- Responsive by Heart: The UI is meticulously optimized for all viewports, ensuring a seamless journey whether on a massive 4k display or a mobile device, utilizing srcset for crisp, retina-ready imagery.
Technical Execution & Architecture
Beneath the beautiful exterior lies a robust, enterprise-grade technical architecture tailored for performance and scalability.
- Headless-Like Editing: Bloated page builders were completely bypassed. Instead, a suite of custom Gutenberg blocks was developed. This provides editors with an intuitive, visual drag-and-drop experience while strictly enforcing the design system's rules.
- Optimized Frontend Foundation: The theme relies on a lightweight, dependency-free frontend. Unnecessary WordPress bloat (like jQuery) was stripped out, and a modular SCSS and ES6+ approach was adopted. Build tools optimize SVGs, compile styles, and minify assets for blazing-fast load times.
- External API Integrations: The BITE HR API was seamlessly integrated, allowing job listings to be dynamically pulled and displayed natively within the website's design language, drastically reducing manual HR overhead.
- Developer Experience & Infrastructure: The project is fully containerized using Docker, allowing for a perfectly mirrored local, staging, and production environment. Custom Node scripts automate database syncing, plugin management, and asset deployments, ensuring flawless continuous integration.
The Result
A high-performance landing page that served as a powerful initial market entry. Controlling both the design and the code enabled the delivery of an uncompromising digital "business card" where every pixel has a purpose, allowing the client to confidently present their growing portfolio of services while the larger digital ecosystem was being developed.