ППФ (Покрівля & Фасад)
Cайт для компанії з виробництва та монтажу покрівельних і фасадних систем
Про клієнта
Клієнт — компанія ППФ, яка спеціалізується на покрівельних і фасадних рішеннях для приватного та комерційного будівництва. Це команда з великим досвідом на ринку, яка працює з повним циклом — від виробництва матеріалів до їх монтажу на об’єктах.
До нас звернулися із запитом на оновлення сайту, оскільки попередня версія була створена понад 10 років тому. З часом вона втратила актуальність як з точки зору дизайну, так і з точки зору зручності користування та подачі інформації.
Основною задачею стало створення нового сучасного сайту з повним редизайном і оновленою розробкою, але з важливою умовою — перенести весь існуючий контент і зберегти SEO-позиції, щоб не втратити напрацьований трафік і видимість у пошукових системах.
Структура сайту
Кольори
Базовим запитом від клієнта був світлий, сучасний і максимально зручний для користувачів інтерфейс, який би легко сприймався та не перевантажував візуально.
У бренду вже був сформований брендбук з основними фірмовими кольорами — синім і зеленим. Саме ці відтінки ми взяли як акцентні, щоб зберегти впізнаваність бренду та підсилити його візуальну ідентичність на новому сайті. Навколо них ми побудували повноцінну дизайн-систему, підібравши додаткові нейтральні відтінки для фону, текстів і допоміжних елементів. Це дозволило досягти балансу між яскравими акцентами та чистим, легким інтерфейсом, у якому користувачу комфортно взаємодіяти з контентом.
Типографіка
Основним акцентним шрифтом, згідно з брендбуком клієнта, став Montserrat Alternates — він використовується для заголовків та ключових елементів, підкреслюючи характер бренду та додаючи йому впізнаваності. Як додатковий текстовий шрифт ми використали Oxygen, який також був присутній у банерних матеріалах клієнта. Він добре працює в довгих текстах і забезпечує комфортне читання на всіх пристроях.
Обидва шрифти були адаптовані під систему Tailwind CSS, оскільки саме її ми використовуємо у проєкті. Це дозволило зберегти консистентність типографіки, швидко масштабувати стилі та забезпечити коректне відображення текстів на різних екранах.
Головна сторінка
Інші сторінки
Калькулятор покрівлі
Розробка веб-сайту
На першому етапі ми реалізували основний функціонал нового сайту, заклавши стабільну та масштабовану технічну основу для подальшої роботи з контентом і розвитком проєкту. Далі здійснили повне перенесення існуючого контенту зі старої версії сайту на нову платформу, зберігаючи структуру та логіку подачі інформації.
Окрему увагу приділили SEO-частині — налаштували редіректи для сторінок, оскільки частина URL-структури була змінена. Додатково реалізували редіректи для випадків, коли товар знімається з продажу, щоб зберегти користувацький досвід і не втрачати трафік через неіснуючі сторінки. Після цього налаштували адмін-панель із розмежуванням ролей, що дозволило зручно керувати контентом і правами доступу різним типам користувачів.
Наступним етапом став калькулятор покрівлі — ми реалізували його відповідно до технічного завдання клієнта, забезпечивши точний розрахунок матеріалів і зручний інструмент для користувачів сайту.
