Сайт Миколаївського обласного краєзнавчого музею
Це якраз той випадок, коли тішить сама назва проєкту, що говорить про неймовірну стійкість української культури перед обличчям війни. З почуттям невимовної гордості до жителів прифронтового Миколаєва представляємо новий сайт одного з найбільших обласних краєзнавчих музеїв України.
Розташований на території пам’ятки архітектури національного значення «Старофлотські казарми», музей неодноразово піддавався ракетному терору, внаслідок якого було пошкоджено 15 виставкових залів. Після річної перерви музей почав не просто відновлювати експозицію, а й організовувати нові виставки, зацифровувати експонати та створювати айдентику, що згодом була відтворена на сторінках нового сайту, до розробки якого доклала руки команда Webnauts.
Верстка сайту за фірмовим дизайном
Тепер обласний краєзнавчий музей можуть відвідати не тільки жителі та гості Миколаєва, а й кожен спраглий до культури та історії українець. Для цього достатньо вбити в пошук адресу https://museum.mk.ua/ та ознайомитися з філіями, колекціями, подіями та новинами музею.
Новий дизайн сайту, натхненний кольорами природи та стародавніх артефактів Миколаївщини, ми втілили за допомогою сучасних технологій:
- мови розмітки HTML5, аби відобразити структуру та контент сайту в браузері,
- мови стилізації CSS і препроцесора SCSS, аби відтворити дизайн сторінок точнісінько з макетами,
- мови програмування JavaScript, аби додати дрібку ненав’язливих анімацій.
Згідно з новою айдентикою музею, головну скрипку в мінімалістичному дизайні грають масивні типографіка та фото експонатів. Попри насиченість контентом сторінки виглядають акуратними, структурованими та виразними завдяки вільному простору та лініям сітки, застосованим до кольорових карток.
Анімації на сайті
Зверстані сторінки ми приправили мікроанімацією, покликану не відвертати увагу від основного контенту, а зосереджувати її на головних елементах інтерфейсу, з якими взаємодіє користувач. Це класичні ховер-ефекти, написані нативною мовою JavaScript, як-от підкреслювання посилань і заливка кнопок кольором:
Ефект зміни слайдів на головному екрані сайту ми реалізували за допомогою бібліотеки Swiper.js.
Кросбраузерність і адаптивність сайту
Автоматизувати рутинний процес розробки та збирання сайту нам допоміг інструмент Gulp.js, а досягти коректного запуску сайту в усіх, навіть застарілих, браузерах — транскомпілятор Babel.js, який перетворює сучасний код на пізніший стандарт JavaScript.
Аби сайт Миколаївського музею чудово відображався та працював на всіх пристроях — від смартфона до стаціонарного комп’ютера, ми зверстали адаптивний інтерфейс. Як наслідок, сайт автоматично «підлаштовується» під формат і роздільну здатність того дисплея, з якого він переглядається.
Розробка сайту на WordPress
Коли дизайн перетворений на код, час «натягувати» його на CMS WordPress, тобто встановлювати на платформу. Так народжуються сайти з унікальним зовнішнім виглядом, зручною адмін-панеллю для керування контентом і потрібним функціоналом. У разі з музеєм — це двомовність і система продажу квитків.
Аби розширити функціональність сайту, ми обійшлися 9 плагінами, завдяки чому зберегли оптимальну швидкість завантаження сторінок:
Адміністрування сайту без програміста
Кожен сайт має бути зручним не тільки для відвідувачів, а й адміністраторів, які дбають про актуальний контент.
Аби співробітникам музею було просто керувати сайтом, ми побудували зручний інтерфейс адмін-панелі за допомогою плагіна Advanced Custom Fields (ACF) PRO. Цей інструмент дозволяє не тільки легко редагувати контент, а й додавати поля в адмінці без допомоги розробника.
Події музею:
Виставки музею:
Новини музею:
Мультимовність сайту
Якщо інтернет-магазин потребує мультимовний сайт, аби залучити покупців на міжнародному ринку, то сайт музею має бути готовим самому «приймати» іноземних відвідувачів.
Сподіваємося, що Україні скоро запанує мир, і Миколаїв знову стане туристичним магнітом. З вірою в перемогу та відновлення туризму ми забезпечили функціонування сайту двома мовами — українською та англійською. Перемикач мови доступний у звичному для користувачів меню навігації сайту.
Мультимовність була досягнута за допомогою WordPress плагіну Polylang, який дозволяє перекладати інтерфейс адмін-панелі та сторінок сайту.
Система продажу квитків на сайті музею
На перспективу ми заклали можливість продажу квитків на музейні виставки, експозиції, екскурсії та інші події. Сайт готовий до інтеграції з платіжним сервісом і під’єднання функції оплати квитків у будь-який момент.
Результат
Миколаївський обласний краєзнавчий музей розвивається не заради, а всупереч, і завдяки сучасним вебтехнологіям став до українців іще ближчим. У 2023 році музей відновив роботу, відсвяткував своє 110-річчя та оновив айдентику, візуальним елементам якої підкоряється новоспечений сайт на WordPress.
Наша команда рада бути причетною до відродження миколаївської культури в найскладніший для країни час, і вдало репрезентувати музей в онлайні саме тоді, коли це надміру важливо. Тепер скарбничка Миколаївського музею, що зберігає понад 400 тис. артефактів з часів палеоліту, поповнилася сучасним мінімалістичним сайтом.
На своїх сторінках, виконаних у дусі швейцарського стилю, музей знайомить користувачів з популярними експонатами й новинами, запрошує на виставки й екскурсії, а також пропонує придбати лімітовану лінійку сувенірів — аби популяризувати культурну спадщину та зібрати кошти на відновлення музейного приміщення й облаштування бомбосховища для дітей.