™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_0
Назад

Промо-сайт ПРОФІНВЕСТ

™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_1
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_2
ПРОФІНВЕСТ: гібридна B2B-платформа, що об'єднує інженерні рішення та e-commerce

Компанія «ПРОФІНВЕСТ» працює у двох різних площинах: постачання складних алюмінієвих систем (для архітекторів та забудовників) і продаж комплектуючих (для виробників та монтажників). Перед нами стояло завдання створити єдиний ресурс, який би пріоритетно працював на імідж інженерного партнера, але водночас надавав зручний інструмент для швидких онлайн-покупок фурнітури.
Ми розробили платформу на CMS Drupal, де корпоративна презентація та інтернет-магазин гармонійно співіснують, не заважаючи одне одному.

Виклик №1: візуальне розділення та пріоритет корпоративного бренду

Головна складність полягала в тому, щоб сайт не перетворився на звичайний магазин. Він мав виглядати як дорогий, технологічний ресурс для професіоналів, де магазин є лише допоміжним інструментом.
Наше рішення – архітектура інтерфейсу:
– Зонування головного екрана: ми відмовилися від стандартних банерів. Натомість реалізували інтерактивну схему: центральна, найбільша зона віддана під інженерні «Профільні системи» (корпоративна частина), а праворуч розміщено вертикальний сайдбар «Фурнітура» (вхід у магазин). Це одразу розводить потоки відвідувачів.
– Дизайн довіри: мінімалістична стилістика, якісна типографіка та акцент на фотографіях реалізованих об'єктів формують образ надійного B2B-партнера, а не простого продавця.

Виклик №2: навігація для експертів та робота з технічними даними

Аудиторія сайту – архітектори та конструктори – потребує швидкого доступу до специфікацій, креслень та документації. Маркетингові тексти тут не працюють.
Наше рішення – професійна структура даних:
– Сегментація аудиторії: блок «Для кого підходять наші системи» дозволяє кожному типу спеціаліста (від архітектора до виробника вікон) в один клік отримати релевантну технічну інформацію.
– Інженерний каталог: картки систем містять не просто опис, а детальні технічні характеристики, галереї перерізів та вузлів.
– Центр документації: ми інтегрували можливість перегляду та завантаження PDF-каталогів безпосередньо зі сторінок систем, а також через спеціальний віджет «Каталоги», який завжди доступний користувачеві.

Виклик №3: зручний інтернет-магазин для закупівель

Для розділу «Фурнітура» та комплектуючих була потрібна зовсім інша логіка – швидкий пошук, вибір та замовлення. Інженерна складність тут мала поступитися місцем юзабіліті.
Наше рішення – повноцінний функціонал магазину:
Попри те, що магазин є частиною корпоративного сайту, він має повний набір функцій для комфортних покупок:
– Спеціалізована фільтрація: реалізовано фільтри за технічними параметрами, що дозволяє менеджерам із закупівель швидко знаходити сумісні комплектуючі (ручки, петлі, ущільнювачі).
– Повний цикл покупки: користувач може додавати товари в кошик, оформлювати замовлення, обирати способи доставки та оплати, як у звичному інтернет-магазині.
– Особистий кабінет: для постійних клієнтів передбачено історію замовлень та можливість формувати списки «обраного» для повторних закупівель.

Результат: єдина екосистема для будівництва

Сайт «ПРОФІНВЕСТ» успішно вирішує подвійну задачу. Для архітектора це – детальна база знань та джерело натхнення. Для менеджера із закупівель – швидкий та зручний магазин. А для бізнесу – це керований інструмент, що транслює експертність та генерує продажі у двох напрямках одночасно.
Що ми зробили
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_3
UI/UX, дизайн
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_4
Програмування
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_5
Верстка
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_6
Наповнення
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_7
Тестування
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_8
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_9
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_10
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_11
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_12
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_13
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_14
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_15
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_16
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_17
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_18
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_19
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_20
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_21
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_22
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_23
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_24
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_25
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_26
Затрачено часу
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_27
Промо-сайт ПРОФІНВЕСТ На ноутбуці
Промо-сайт ПРОФІНВЕСТ На планшеті
Головна сторінка
™ Глянець, студія веб-дизайну — Промо-сайт ПРОФІНВЕСТ_28
Інструменти і технології
які ми використали в роботі над сайтом
Drupal 10
SASS
CSS3
HTML5
JavaScript
PhpStorm
PHP
MySQL
JQuery
AJAX
Symfony
Twig
Composer
Git
Figma
Adobe Photoshop
ChatGPT
Промо-сайт ПРОФІНВЕСТ
Внутрішні сторінки
Налаштування доступності
Налаштування контрасту
Розмір шрифту
Міжбуквенний інтервал
Міжрядковий інтервал
Зображення
Шрифт
Скинути налаштування