Официальный сайт государственной политики «Сделано в Украине»
Знаете ли вы, какой бренд в стране сейчас на пике популярности? Речь не о моде (хотя покупать украинское действительно стало модным), а об экономическом бренде «Сделано в Украине». Уверены, что не просто знаете, но и сознательно выбираете украинское каждый день. Это значит, что государственная политика работает не благодаря, а вопреки. Официально зарегистрированный в начале 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 были реализованы поп-апы типа лайтбокса — всплывающие окна, которые появляются поверх основной веб-страницы программы «Национальный кэшбэк». Оверлей активируется после клика на кнопку «Присоединиться» и содержит в себе подсказки о том, как присоединиться к государственной программе потребителям и производителям. Также интерактивный оверлей содержит удобный переключатель «Потребителю / Бизнесу», предоставляющий мгновенный доступ к соответствующим инструкциям каждой категории пользователей:
Онлайн-чат для сайта «Национальный кэшбек»
Для лучшей коммуникации с участниками программы «Национальный кэшбек» мы установили виджет онлайн-чата. С помощью файла .env мы сконфигурировали и связали переменные окружения системы с хедером сайта «Национальный кэшбек». Теперь можно легко управлять отображением чата на разных страницах сайта — для этого достаточно просто включить или выключить виджет в файле настроек:
Интерактивная карта Украины с офисами «Сделано в Украине»
Одной из интереснейших задач стала реализация кастомной карты страны, которая наглядно демонстрирует расположение всех офисов, осуществляющих консультационную поддержку предпринимателей по государственной программе «Сделано в Украине».
Количество офисов будет только расти, поэтому мы предусмотрительно реализовали возможность легко добавлять на карту новые регионы и точки без помощи разработчиков:
Итак, для создания интерактивной карты мы использовали её дизайн-макет в формате svg и «подписали» каждый регион Украины согласно стандарту ISO 3166-1, который содержит кодовые обозначения государств и административно-территориальных единиц. Мы определили положение каждого офиса на карте по двумерной системе координат, связали с нужными областями и перенесли на сайт:
Программирование сайта государственной политики 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. В результате получился адаптивный, быстрый и функциональный онлайн-ресурс с интерактивной картой офисов и плавными анимационными эффектами.
Взаимодействовать с интерфейсом сайта так же легко, как и с админ-панелью, имеющей встроенный конструктор страниц. Уникальное кастомизированное решение позволяет не только легко управлять контентом, но и создавать новые страницы сайта из готовых блоков, которые полностью соответствуют фирменному дизайну. Все это — в считанные минуты и без каких-либо навыков программирования.
Мы верим, что новая платформа откроет производителям широкие возможности для развития бизнеса, потребителям — качественные товары национального бренда, а стране — новые перспективы для восстановления, переориентации и роста экономики. Продвижение государственного бренда сегодня – это не только задача маркетинга, но и вопрос национальной безопасности. Покупать и продвигать украинское в условиях войны — значит усиливать экономику и армию страны. И наконец увидеть собственную притягательность, утвердить конкурентную идентичность и почувствовать национальную гордость за продукцию, которую, вопреки войне, было «Сделано в Украине».
Комментарии