Розробка сайту каталогу для бренду побутової хімії iGel

Робота розпочалася з формування візуальної мови бренду. Разом із клієнтом ми провели серію офлайн-зустрічей, аналізували різні напрямки дизайну, переглядали референси, тестували композиції та сценарії взаємодії. Проєкт розвивався ітеративно: після кожного обговорення ми поверталися до макетів і вдосконалювали їх. Така тісна співпраця сформувала сильну синергію між командами — згодом багато рішень ухвалювалися буквально з півслова, що значно прискорило роботу. У певний момент стало зрозуміло, що початкова концепція недостатньо передає характер iGel, тому ми свідомо її переробили. Новий напрямок побудували навколо фірмового зеленого кольору, який став головним елементом айдентики сайту й об'єднав усі сторінки, анімації та 3D-сцени в єдину систему.

Найбільший виклик проєкту полягав у створенні продукції без фізичних зразків. Ми працювали лише з 2D-рендерами, етикетками та технічними матеріалами, тому кожну модель створювали з нуля. Детально відтворили геометрію пляшок, текстуру матеріалів, прозорість пластику, рівень рідини, форму ковпачків, особливості етикеток і дрібні конструктивні деталі. Частина упаковки мала складну індивідуальну форму, яку було важливо передати максимально точно, тому над окремими елементами ми працювали особливо ретельно. Після цього моделі проходили кілька циклів доопрацювання, щоб однаково реалістично виглядати під різними кутами огляду та коректно працювати в майбутніх анімаціях. Саме цей етап став основою всього візуального стилю проєкту.

Після завершення роботи над моделями ми перейшли до створення інтерфейсу та анімаційної логіки. Основна ідея полягала в тому, щоб користувач не переглядав окремі блоки сайту, а проходив єдиний сценарій знайомства з брендом. Для цього ми розробили систему безшовних переходів, де кожна сцена природно продовжує попередню без кнопок запуску чи різких перемикань. Для кожного продукту створено власний сценарій анімації, який демонструє форму упаковки, конструкцію, матеріали та ключові переваги, поступово розкриваючи особливості продукції. Анімації виконують не лише естетичну роль — вони наочно показують, як працює продукт і чим він відрізняється від звичних рішень на ринку. Користувач одразу бачить, як відкривається упаковка, як працює механізм дозування та які переваги має кожен засіб, що робить знайомство з продукцією наочним і зрозумілим.

Після затвердження дизайну команда перейшла до технічної реалізації. Ми виконали розробку сайту каталогу на WordPress із використанням Elementor, побудували структуру каталогу за категоріями та створили окремі сторінки для кожного продукту. Також реалізували розділи «Інновації», «Про нас», «Новини», «Контакти» та службові сторінки. Особливу увагу приділили оптимізації швидкодії, щоб складні анімації й інтерактивна 3D-презентація продукції працювали плавно без втрати якості як на великих екранах, так і на мобільних пристроях. Окремим завданням було забезпечити стабільну роботу важких 3D-сцен, не жертвуючи швидкістю завантаження сторінок.

Фінальним етапом стала підготовка контенту та комплексне тестування проєкту. Ми написали тексти для всіх сторінок, оформили графічні матеріали, підготували службові документи й реалізували політику конфіденційності для форми звернення. Перед запуском окремо перевірили швидкість завантаження, адаптивність, роботу інтерактивних елементів, анімацій і користувацьких сценаріїв. Лише після повної перевірки всіх компонентів сайт був опублікований, забезпечивши стабільну роботу та однаково якісний досвід взаємодії незалежно від пристрою чи розміру екрана.