Офіційний сайт державної політики «Зроблено в Україні»
Чи знаєте ви, який бренд у країні зараз на піку популярності? Мова не про моду (хоча купувати українське справді стало модним), а про економічний бренд «Зроблено в Україні». Впевнені, що не просто знаєте, а й свідомо вибираєте українське щодня. Це значить, що державна політика працює не завдяки, а всупереч. Офіційно зареєстрований на початку 2024 року бренд «Зроблено в Україні» насправді завоював наші серця ще 3 роки тому, після початку повномасштабного вторгнення. Ба більше, демонструє стійкість української економіки та якість товарів «Made in Ukraine» усьому світу.
Крім стимулювання попиту на українські товари, зокрема через програму «Національний кешбек», держава сприяє розвитку внутрішнього виробництва шляхом інвестицій і пільг, підтримки експортерів, мікро- та малого бізнесу. Про весь комплекс програм, охоплених політикою «Зроблено в Україні», можна дізнатися на сайті, який було «Зроблено в Webnauts».
Як відбувався процес розробки сайту, що став не просто візитівкою державної політики, а потужним інструментом для розвитку національного бренду? Читайте в нашому кейсі.
- Про державний проєкт «Зроблено в Україні»
- Завдання на шляху до розробки всеукраїнської економічної платформи Made in Ukraine
- Верстка сайту з двома точками входу — «Зроблено в Україні» та «Національний кешбек»
- Програмування сайту державної політики Made in Ukraine
- «Зроблено в Україні»: новий сайт для нової економіки
Про державний проєкт «Зроблено в Україні»
Просування сильного бренду та позитивного іміджу країни критично важливі для здобуття світової підтримки й омріяної перемоги. Україна продемонструвала м’яку силу міжнародних комунікацій, аби тримати твердий удар і фокус уваги на військовій допомозі. Так, наступниками наймасштабнішої за роки незалежності програми розвитку міжнародного іміджу країни Ukraine NOW стали нові кампанії — Brave.uа та United24, що відповідають викликам воєнного часу та просувають сміливість як національний бренд.
Разом з тим підтримувати позитивне сприйняття країни лише крізь призму негативних асоціацій неможливо. Вони не дають Україні повністю розкрити свій потенціал, а світу — побачити, що наша країна — не лише жертва російської агресії, а потужний гравець світового ринку. Поряд з єдністю та незламним характером Україна має все, щоб стати для світу lovemark і ще дужче закохати в себе. Це самобутня й інноваційна культура, туристичні ресурси та передусім талановиті люди, які не лише долають виклики війни, а й створюють унікальні можливості для розвитку сучасної країни. Словом, будують сильний національний бренд, який гарантує підтримку світу, залучає інвестиції в повоєнне відновлення, формує додану вартість української продукції та зрештою посилює економіку країни.
Саме на підтримку діяльних українців, які прагнуть розвивати власне виробництво, і направлена державна політика «Зроблено в Україні». Місцеві виробники, експортери та підприємці мають змогу скористатися фінансовими, грантовими та кредитними програмами підтримки, а також просувати свою продукцію під торгівельною маркою «Зроблено в Україні». Своєю чергою кожен українець, який підтримує національних виробників, повертає 10% від вартості товарів у свій гаманець за програмою «Національний кешбек» і до 40% — назад до бюджету країни, з якого фінансується армія.
Так, комплексна державна політика Made in Ukraine покликана підтримувати розвиток українського виробництва, стимулювати внутрішній попит і відтак популяризувати локальні товари на зовнішні ринки. Бо саме український споживач є найпершим амбасадором бренду Made in Ukraine у світі, здатним поставити в один ряд з бельгійським шоколадом, французьким парфумом і швейцарським годинником українські вина, відеоігри та дрони.
Та будь-який бренд, а національний — і поготів, потребує сучасного сайту, який би став не лише ефективним інструментом для просування Made in Ukraine, а й справжнім навігатором українців у світі можливостей для розвитку власного бізнесу.
Завдання на шляху до розробки всеукраїнської економічної платформи Made in Ukraine
Не новина, що за Україною закріпився бренд-атрибут високотехнологічної країни, що вже само собою зміцнює імідж і сприяє комунікації з громадянами держави та світу. Тому сайт політики Made in Ukraine, ініційованої Президентом України та Міністерством економіки, мав відповідати не лише репутації прогресивної країни, а й очікуванням українців, які звикли до високого рівня цифрових послуг. Так, перед командою Webnauts постало завдання реалізувати сучасний, зручний і зрозумілий офіційний сайт, який би не просто інформував про можливості та результати політики «Зроблено в Україні», а й викликав позитивний досвід взаємодії з інтерфейсом і державою.
Сучасний дизайн, який нам належало втілити в код і перетворити на дієвий сайт, вдало узгоджується з іншими державними ресурсами завдяки синьому кольору та шрифту e-Ukraine. Згідно з макетами нова економічна платформа мала забезпечити чітку сегментацію користувачів за запитами, спрямовуючи виробників на інструменти державної підтримки «Зроблено в Україні», а споживачів — на програму соціальної підтримки «Національний кешбек»:
Запуск сайту мав відбутися вчасно до дня його офіційної презентації громадськості. До цього часу державна політика «Зроблено в Україні» здійснювалася через мережу фізичних відділень у великих містах, які функціонують на базі центрів зайнятості. Між іншим, офіси, кількість яких має сягнути за сто вже до кінця 2024 року, теж належало відобразити на головній сторінці подібно до зручної інтерактивної мапи. Також у рамках державного проєкту нам належало забезпечити технічну підтримку та безперебійну роботу сайту.
Верстка сайту з двома точками входу — «Зроблено в Україні» та «Національний кешбек»
Місія з перетворення дизайну на «живий» і функціональний сайт була покладена на фронтенд-розробників Webnauts. Кожен піксель мав бути вивіреним, а кожен перехід — бездоганним, адже йшлося про довгоочікувану репрезентацію державного бренду в онлайн-просторі. Для створення інтерактивного та чуйного сайту, що миттєво реагує на дії користувачів і різні розміри екранів, були використані сучасні технології на базі трьох мов: HTML5, CSS (SCSS) і JavaScript.
Для верстки сайту ми вибрали семантичний підхід, що передбачає розмітку структури сайту з використанням HTML-тегів, зокрема описових і атрибутів aria-*. Це дозволило нам оптимізувати код і прискорити завантаження сторінок, що впливає не лише на досвід користувачів, а й SEO, себто позиції майбутнього сайту в результатах пошуку Google.
Аби готова розмітка однаково добре відображалася на всіх пристроях, ми підключили CSS-інструменти, що оптимізують розташування елементів інтерфейсу залежно від розміру дисплея — модулі Flexbox і Grid Layout. Аби спростити та структурувати код, ми використали SCSS — синтаксис препроцесора CSS SASS, а саме розбили стилі на модулі та змінні, що дозволило керувати відступами, кольорами та шрифтами.
Плавна анімація для сайту та незабутнього досвіду користувачів
Вся анімація для сайту була реалізована на чистому CSS і нативному JavaScript без використання сторонніх бібліотек, які не просто збільшують залежність від додаткових інструментів, а й вагу вебсторінок. Для керування станами елементів (hover, active, focus і disabled) ми застосували кастомні CSS-змінні та створили плавний ховер-ефект за допомогою CSS-властивості transition.
Під час реалізації слайдерів ми застосували CSS-властивості scroll-snap-type і scroll-snap-align для плавних переходів між слайдами, а також transform — для «розкриття» картки.
Мовою JavaScript були написані користувальницькі скрипти для обробки подій на сайті, зокрема для керування прокруткою слайдів. Так, властивість click дозволяє керувати зміною слайдів за допомогою кнопок «вперед» і «назад», а scrollLeft — переміщувати контейнер слайда за допомогою тачпаду на ноутбуці, дотика — на сенсорному екрані смартфона чи комбінації клавіші Shift + прокрутка коліщатка миші — на комп’ютері. У підсумку вийшов простий і функціональний слайдер, адаптований під різні пристрої без використання будь-яких сторонніх рішень.
Інтерактивні елементи на сайті були також реалізовані за допомогою JavaScript, зокрема цікавий ефект паралакса в розділі сайту «Національний кешбек»:
На чистому JavaScript з дрібкою мови стилізації CSS були реалізовані поп-апи типу лайтбоксу — спливні вікна, що з’являються поверх основної вебсторінки програми «Національний кешбек». Оверлей активується після кліка на кнопку «Приєднатися» та містить в собі підказки щодо того, як долучитися до державної програми споживачам і виробникам. Також інтерактивний оверлей містить зручний перемикач «Cпоживачу / Бізнесу», що надає миттєвий доступ до відповідних інструкцій кожній категорії користувачів:
Онлайн-чат для сайту «Національний кешбек»
Для кращої комунікації з учасниками програми «Національний кешбек» ми встановили віджет онлайн-чату. За допомогою файлу .env ми сконфігурували та зв’язали змінні оточення системи з хедером сайту «Національний кешбек». Відтепер можна легко керувати відображенням чату на різних сторінках сайту — для цього достатньо просто ввімкнути чи вимкнути віджет у файлі налаштувань:
Інтерактивна мапа України з офісами «Зроблено в Україні»
Одним з найцікавіших завдань стала реалізація кастомної мапи країни, що наочно демонструє розташування всіх офісів, які здійснюють консультаційну підтримку підприємців за державною програмою «Зроблено в Україні». Кількість офісів тільки зростатиме, тому ми завбачливо реалізували можливість легко додавати на мапу нові регіони та точки без допомоги розробників.
Отже, для створення інтерактивної мапи ми використали її дизайн-макет у форматі svg і «підписали» кожен регіон України згідно зі стандартом ISO 3166-1, який містить кодові позначення держав і адміністративно-територіальних одиниць. Ми визначили положення кожного офісу на мапі за двовимірною системою координат, пов’язали з потрібними областями та перенесли на сайт:
Області, де розташовані офіси, мають синій колір, а під час наведення курсора трохи світлішають і створюють ефект легкого світіння. Така ховер-анімація, як і досі, була створена за допомогою CSS, а клік на область, який викликає поп-ап з клікабельними контактами офісів — завдяки JavaScript-фреймворку Vue.js. Всередині карток, які містять декілька контактів, ми реалізували кастомну смугу прокрутки в стилі CSS без втрати продуктивності завдяки JavaScript-бібліотеки SimpleBar.
Також ми потурбувалися про те, щоб нанесення на мапу нових областей та офісів не складало для адміністратора сайту жодних труднощів. Аби легко додавати локації та спливні вікна, а також оновлювати та редагувати контактні дані шляхом простого заповнення відповідних полів, ми зв’язали інтерактивну мапу з адмін-панеллю сайту:
Програмування сайту державної політики Made in Ukraine
Актуальність контенту на сайті важлива для будь-якого сайту, а державних онлайн-ресурсів — і поготів. Адже саме завдяки своєчасно оновлюваним даним і вичерпним відповідям на актуальні питання бізнесу сайт політики «Зроблено в Україні» стане дієвим інструментом комунікації між державою та громадянами.
Ми врахували потребу в простому керуванні контентом і реалізували унікальний кастомний конструктор усередині панелі адміністратора. З ним легко не просто наповнювати, а створювати сторінки сайту без спеціальних навичок і залучення розробників. З огляду на динамічний розвиток політики Made in Ukraine і постійний пошук інструментів підтримки бізнесу, можливість легко додавати сторінки під нові державні програми вкрай важлива.
Адмін-панель як конструктор: новий рівень зручності керування контентом
Ми кастомізували адмін-панель сайту за допомогою Laravel. Це потужний і водночас елегантний PHP-фреймворк, який ідеально підходить для нестандартних і масштабних проєктів. У поєднанні з іншими технологіями нам вдалося перетворили адмінку сайту Laravel Nova на зручний конструктор, який дозволяє легко збирати сторінки з готових блоків, наче Lego. Схожу кастомну панель для адміністрування сайту на Laravel ми реалізували для IT-компанії Softwarium.
Дізнатися більше:
Сайт IT-компаніїАби досягти високого рівня кастомізації та задовольнити вимоги державного проєкту Made in Ukraine, ми використали ще декілька технологій, як-то:
- nova-flexible-content — бібліотека для створення гнучких полів в адмін-панелі сайту.
- Docker — платформа для створення, налагодження та розгортання контейнерних програм.
- MySQL — система керування реляційними базами даних, яка використовує SQL для виконання складних операцій із даними на запити користувачів.
- phpMyAdmin — додаток, який дозволяє керувати базами даних MySQL через браузер, а саме запускати запити SQL, створювати та редагувати вміст таблиць, обробляти помилки тощо.
Конструктор сайту був створений у тісній взаємодії програміста та фронтенд-розробника. Всі заздалегідь створені на бекенді блоки, з яких будуються сторінки, ми зверстали за допомогою прогресивного JavaScript-фреймворку останньої версії Vue.js. Ось так виглядає процес верстання блоків конструктора очима розробника. Як бачимо, рівень вкладеності сторінки на фронтенді дорівнює трьом, що відповідає правилу трьох кліків: аби потрапити на бажану сторінку, користувач має здійснити не більше 3-х натискань. Така мінімалістична структура позитивно впливає не лише на юзабіліті, а й пошукову оптимізацію сайту.
Також для розробки конструктора сайту ми пустили в дію такі технології:
- мову програмування TypeScript — для опису всіх блоків адмінки-конструктора,
- фреймворк Nuxt.js — для створення Vue-компонентів, які дозволяють розділити інтерфейс користувача на незалежні частини,
- бібліотеку Pinia — для зберігання даних.
Масштабна база даних для сайту «Національний кешбек»
Обробка великих обсягів даних стала одним з ключових викликів проєкту «Зроблено в Україні». Ми мали справу з колосальними масивами інформації та завантажили на сервер дані з CSV-файлів, які містили понад півмільйона рядків. Це виробники, магазини та товари торгової марки «Зроблено в Україні», список яких у майбутньому тільки зростатиме. Тепер кожен користувач може швидко перевірити, на які товари нараховується національний кешбек, або знайти магазини, де можна їх придбати.
Інтеграція серверної та клієнтської частини сайту
Для організації API-викликів у Nuxt.js ми використали Repositor pattern, який відокремлює логіку для отримання та збереження даних у виділених класах сховища. Це дозволило нам забезпечити чисту архітектуру та оптимізувати доступ до даних, аби гарантувати швидкодію сайту навіть у періоди пікового навантаження. Крім того, державний онлайн-ресурс, який постійно вдосконалюється та оновлюється, легко підтримувати та масштабувати в майбутньому.
Отже, завдяки прогресивним фреймворкам Laravel і Vue.js ми створили швидкий і функціональний онлайн-ресурс, однаково зручний як для користувачів, так і для адміністраторів. Унікальний конструктор адмінки Laravel Nova дозволяє не просто редагувати контент, а легко створювати нові сторінки — ба більше, кардинально перебудувати структуру сайту. Схожий приклад гнучкої кастомізації можна побачити в кейсі криптобанку CoinPay, або впровадити й адаптувати для власного бізнесу.
Читайте також:
Сайт криптобанку«Зроблено в Україні»: новий сайт для нової економіки
Офіційний сайт політики «Зроблено в Україні», створений на замовлення Міністерства економіки, був презентований на найгучнішій діловій події осені 2024 року — однойменному бізнес-форумі в Києві. Перепустити його через свої руки було для команди Webnauts і великою честю, і чималою відповідальністю.
Ми розуміли, що створюємо не просто сайт, а потужний інструмент для просування торгівельної марки Made in Ukraine. Аби відповідати високим очікуванням українців, які звикли до зручних цифрових послуг у смартфоні, ми пустили в дію чисті мови CSS, JavaScript і TypeScript, а також прогресивні фреймворки Laravel, Vue.js і Nuxt.js. У підсумку вийшов адаптивний, швидкий і функціональний онлайн-ресурс з інтерактивною мапою офісів і плавними анімаційними ефектами.
Взаємодіяти з інтерфейсом сайту так само легко, як і з адмін-панеллю, що має вбудований конструктор сторінок. Унікальне кастомізоване рішення дає змогу не лише легко керувати контентом, а й створювати нові сторінки сайту з готових блоків, які повністю відповідають фірмовому дизайну. Все це — за лічені хвилини та без жодних навичок програмування.
Ми віримо, що нова платформа відкриє виробникам широкі можливості для розвитку бізнесу, споживачам — якісні товари національного бренду, а країні — нові перспективи для відновлення, переорієнтації та зростання економіки. Просування державного бренду сьогодні — це не лише завдання маркетингу, а й питання національної безпеки. Купувати та просувати українське в умовах війни — значить посилювати економіку й армію країни. Та зрештою побачити власну принадність, утвердити конкурентну ідентичність і відчути національну гордість за продукцію, що, попри війну, було «Зроблено в Україні».
Комментарии