PPF (Roofing & Facade)
Website for a Company Specializing in the Manufacturing and Installation of Roofing and Facade Systems
About client
The client, PPF, is a company specializing in roofing and facade solutions for both residential and commercial construction. It is an experienced team operating on a full-cycle basis — from manufacturing materials to their installation on-site.
We were approached with a request to redesign the website, as the previous version was created over 10 years ago. Over time, it had become outdated both in terms of visual design and user experience, as well as in the way information was structured and presented.
The main goal was to create a modern website with a complete redesign and redevelopment, while maintaining a critical requirement — migrating all existing content and preserving SEO performance to avoid losing accumulated traffic and search visibility.
Website Structure
Colors
The client’s core request was a light, modern, and highly user-friendly interface that would be easy to perceive and not visually overwhelming.
The brand already had an established brand book with primary corporate colors — blue and green. We used these tones as accent colors to preserve brand recognition and strengthen the visual identity on the new website. Around them, we built a complete design system, selecting additional neutral shades for backgrounds, typography, and supporting interface elements. This approach allowed us to achieve a balance between expressive accents and a clean, lightweight interface that ensures a comfortable user experience.
Typography
The main accent font, defined in the client’s brand book, is Montserrat Alternates — it is used for headings and key interface elements, emphasizing the brand’s character and enhancing its recognizability. As a secondary body font, we used Oxygen, which was also present in the client’s banner materials. It performs well in long-form text and ensures comfortable readability across all devices.
Both fonts were adapted to the Tailwind CSS system, as it is the framework used in the project. This allowed us to maintain typographic consistency, quickly scale styles, and ensure proper text rendering across different screen sizes.
Main page
Other pages
Roofing Calculator
Website Development
At the first stage, we implemented the core functionality of the new website, establishing a stable and scalable technical foundation for further content work and project development. Next, we performed a full migration of the existing content from the old version of the website to the new platform, preserving the structure and logic of information presentation.
Special attention was given to SEO. We configured redirects for pages, as part of the URL structure had been changed. Additionally, we implemented redirects for cases when a product is discontinued, ensuring a smooth user experience and preventing traffic loss from non-existent pages. After that, we set up the admin panel with role-based access control, allowing efficient content management and differentiated user permissions.
The next stage was the roofing calculator — we developed it according to the client’s technical requirements, ensuring accurate material calculations and a convenient tool for website users.
