Методи та засоби створення вебсайту музею магнітного запису АТ Науково-дослідний інститут електромеханічних приладів

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ АВІАЦІЙНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ МІЖНАРОДНИХ ВІДНОСИН
КАФЕДРА КОМП’ЮТЕРНИХ МУЛЬТИМЕДІЙНИХ ТЕХНОЛОГІЙ
ДОПУСТИТИ ДО ЗАХИСТУ
Завідувач випускової кафедри
______________ О.А. Бобарчук
«____» _____________ 2022 р.
КВАЛІФІКАЦІЙНА РОБОТА
(ПОЯСНЮВАЛЬНА ЗАПИСКА)
ВИПУСКНИКА ОСВІТНЬОГО СТУПЕНЯ МАГІСТР
ЗА СПЕЦІАЛЬНІСТЮ 186 «ВИДАВНИЦТВО ТА ПОЛІГРАФІЯ»
Тема: «Методи та засоби створення вебсайту музею магнітного запису
АТ «Науково-дослідний інститут електромеханічних приладів»
Виконавець студентка групи ВП-213М Данилюк Наталія Сергіївна
(студент, група, прізвище, ім’я, по батькові)
Керівник к.т.н., доцент Бобарчук Олександр Антонович
(науковий ступінь, вчене звання, прізвище, ім’я, по батькові)
Нормоконтролер: ________________ С.М. Гальченко
(підпис) (ПІБ)
КИЇВ 2022
НАЦІОНАЛЬНИЙ АВІАЦІЙНИЙ УНІВЕРСИТЕТ
Факультет міжнародних відносин _____________________________________________________
Кафедра комп’ютерних мультимедійних технологій ________________ ______________
Спеціальність 186 «Видавництво та поліграфія»
(шифр, найменування)
ЗАТВЕРДЖУЮ
Завідувач кафедри
О.А. Бобарчук
«_____»___________2022 р.
ЗАВДАННЯ
на виконання кваліфікаційної роботи
__Данилюк Наталії Сергіївни _
(П.І.Б. випускника)
1. Тема роботи «Методи та засоби створення вебсайту музею магнітного запису
АТ «Науково-дослідний інститут електромеханічних приладів»
затверджена наказом ректора від «22» вересня 2022 р. № 1636/ст.
2. Термін виконання роботи: з 05.09.2022 р. по 30.11.2022 р.
3. Вихідні дані до роботи: текстові та графічні матеріали за тематикою дослідження,
матеріали для наповнення контенту.
4. Зміст пояснювальної записки: Особливості проєктування вебсайту музею. Засоби
та методи створення вебсайту музею. Практична реалізація вебсайту музею
магнітного запису АТ «Науково-дослідний інститут електромеханічних приладів».
5. Перелік обов’язкового ілюстративного матеріалу: презентаційний матеріал.
6. Календарний план-графік
№
пор.
Завдання Термін
виконання
Підпис
керівника
1
Ознайомитись з постановкою задачі та
здійснити аналіз предметної області.
05.09.2022
2 Дослідити специфіку вебсайтів музейних
структур.
05.09.2022-
16.09.2022
3 Провести порівняльний аналіз вебсайтів
музеїв.
19.09.2022-
23.09.2022
4 Визначити основні етапів створення
вебсайтів.
26.09.2022-
07.10.2022
5 Здійснити аналіз програмних забезпечень
для обробки графічного матеріалу у ході
проєктування вебсайту.
10.10.2022-
12.10.2022
6 Провести аналіз та вибір платформи для
створення вебсайту.
12.10.2022-
14.10.2022
7 Розробити концепцію вебсайту музею. 17.10.2022-
19.10.2022
8 Розробити структуру та дизайн вебсайту. 19.10.2022-
21.10.2022
9 Практично реалізувати вебсайт музею. 24.10.2022-
07.11.2022
10 Розробити пакет презентаційних матеріалів 07.11.2022
7. Дата видачі завдання: «05» вересня 2022 р.
Керівник кваліфікаційної роботи Бобарчук О.А.
(підпис керівника) (П.І.Б.)
Завдання прийняв до виконання Данилюк Н.С.
(підпис випускника) (П.І.Б.)
РЕФЕРАТ
Пояснювальна записка до кваліфікаційної роботи на тему «Методи та засоби
створення вебсайту музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів» складає: 85 сторінок, 34 рисунки, 4 додатки,
23 використаних джерела.
ВЕБСАЙТ, ВЕБСТОРІНКА, ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ, ВЕБДИЗАЙН,
ГРАФІЧНИЙ ДИЗАЙН, ДОМЕН, ХОСТИНГ
Метою кваліфікаційної роботи є визначення, обґрунтування підходів до
проєктування вебсайтів та розробка вебсайту музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів».
Об’єкт дослідження – вебсайт музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів».
Предмет дослідження – методи та засоби створення вебсайту музею.
Методи дослідження: теоретичні – аналіз та узагальнення, наукової й фахової
літератури з досліджуваних питань; порівняння підходів створення вебсайтів;
практичні – проєктування та розробка вебсайту.
Технічні та програмні засоби – в кваліфікаційній роботі описано процес
розробки вебсайту на платформі Wix, а також за допомогою графічних редакторів
Adobe Illustrator, Adobe Photoshop.
Практичне значення отриманих результатів: результати роботи будуть
використовуватися музеєм магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів».
Апробація отриманих результатів: матеріали за тематикою дослідження були
оприлюднені на конференції «Мультимедійні технології в освіті та інших сферах
діяльності».
ЗМІСТ
ВСТУП……………………………………………………………………………………………………………… 7
РОЗДІЛ 1. ОСОБЛИВОСТІ ПРОЄКТУВАННЯ ВЕБСАЙТУ МУЗЕЮ……………… 12
1.1. Поняття вебсайту та його класифікація…………………………………………. 12
1.2. Специфіка вебсайтів музейних структур……………………………………….. 22
1.3. Порівняльний аналіз вебсайтів музеїв …………………………………………… 26
Висновки до розділу …………………………………………………………………………… 31
РОЗДІЛ 2. ЗАСОБИ ТА МЕТОДИ СТВОРЕННЯ ВЕБСАЙТУ МУЗЕЮ…………… 33
2.1. Етапи створення вебсайту музею ………………………………………………….. 33
2.2. Аналіз програмного забезпечення для обробки графічної
інформації під час створення контенту вебсайту …………………………………. 38
2.3. Аналіз платформ для створення вебсайту……………………………………… 47
Висновки до розділу …………………………………………………………………………… 55
РОЗДІЛ 3. ПРАКТИЧНА РЕАЛІЗАЦІЯ ВЕБСАЙТУ МУЗЕЮ МАГНІТНОГО
ЗАПИСУ АТ «НАУКОВО-ДОСЛІДНИЙ ІНСТИТУТ ЕЛЕКТРОМЕХАНІЧНИХ
ПРИЛАДІВ»……………………………………………………………………………………………………. 57
3.1. Концепція вебсайту музею магнітного запису ………………………………. 57
3.2. Розробка структури та дизайну вебсайту ………………………………………. 61
3.3. Проєктування вебсайту музею магнітного запису …………………………. 68
Висновки до розділу …………………………………………………………………………… 73
ВИСНОВКИ……………………………………………………………………………………………………. 75
СПИСОК БІБЛІОГРАФІЧНИХ ПОСИЛАНЬ ВИКОРИСТАНИХ ДЖЕРЕЛ……… 79
Додаток А……………………………………………………………………………………………………….. 82
Додаток Б………………………………………………………………………………………………………… 83
Додаток В ……………………………………………………………………………………………………….. 84
Додаток Д……………………………………………………………………………………………………….. 85
5
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СКОРОЧЕНЬ, ТЕРМІНІВ
Вебсайт – це набір загальнодоступних вебсторінок, які мають спільне доменне
ім’я.
Вебсторінка – інформаційний ресурс, що є однією із складових вебсайту.
Програмне забезпечення – набір програм для системи обробки інформації та
програмні файли, необхідні для виконання цих програм.
Вебдизайн – комплекс робіт із створення Web-документів. Включає в себе
розробку основної ідеї й архітектури Web-сайту, верстання (гіпертекстову розмітку)
тексту, розміщення елементів мультімедіа, розробку власних графічних елементів та
інше [1].
Графічний дизайн – це сфера діяльності та дисципліна, діяльність якої
дозволяє проєктувати візуальні комунікації, спрямовані на донесення інформації до
соціальних груп із чіткими цілями.
Домен – засіб ідентифікації області ресурсів в мережі Інтернет [1].
Хостинг – розміщення і зберігання даних, доступних через інтернет, на сервері
провайдера. Основні предмети хостингу – веб-сайти і поштові офіси. Послуги
хостингу включають виділення діскового простору, підтримку доменного імені сайту,
виконання призначених для користувача програм (скриптів), доступ до бази даних по
SQL, доступ до електронної пошти [1].
6
7
ВСТУП
Актуальність теми. Музеї – багатофункціональні заклади соціальної
інформації, призначені для збереження культурно-історичних і природничо-наукових
цінностей, накопичення та поширення знань через вивчення і демонстрацію
унікальних пам’яток матеріальної культури [2].
Розвиток музейної сфери всесторонньо сприяє піднесенню громадського духу,
утвердженню гуманістичних цінностей, інтеграції національної спадщини та світової
соціальної культури. Як специфічний, багатофункціональний соціально-культурний
заклад, музей має на меті охорону історико-культурної спадщини народу,
дослідження історичних пам’яток, проведення широкого кола науково-
просвітницької та виставкової діяльності.
Музейна діяльність передбачає широкі контакти з громадськістю, і
комунікативна функція набуває особливої ваги у взаємозв’язках музею та
суспільства. Поряд із традиційними формами музейної комунікації, такими як
експозиційно-виставкова, просвітницько-освітня, видавнича, в умовах інформаційно-
технологічного розвитку з’являються сучасні способи взаємодії музею і суспільства,
спрямовані на розширення сфери впливу закладів культури серед громадськості [3].
Останнім часом експерти у сфері музеїв зосередилися на залученні якомога
більшої кількості відвідувачів. Враховуючи економіку розповсюдження музейної
інформації, зосередження уваги на музейних зв’язках може сприяти підвищенню ролі
музеїв у суспільному житті та посиленню їх впливу на духовну сферу нації.
Розвиток маркетингових технологій стає одним із провідних напрямків роботи
сучасних музеїв. Це викликано необхідністю позиціонування себе як установи, а
також послуг на аналогічних ринках, з метою підтримки конкурентного попиту та
інтересу з боку відвідувачів, відстеження сучасних тенденцій у музейному просторі з
метою розвитку музею.
Ефективність роботи музею залежить від правильного використання
маркетингових технологій. Синтез маркетингових та інформаційно-комунікаційних
8
технологій відкриває нові можливості надання відкритого доступу до музейних
цінностей. В даний час відбувається визначення сенсу та призначення музеїв в
електронному середовищі. При цьому практично відсутні розробки у сфері
просування музейної інформації засобами інформаційних технологій. Одним із
способів підтримки іміджу, «обличчям», є сайт музею.
Дослідники звертаються до вивчення питання створення якісних вебресурсів
для музеїв.
Вебайти музеїв можуть суттєво відрізнятися між собою. На одних представлена
загальна інформація (контактні дані, історія музею, склад колекцій, експозиції,
програми), на інших – докладний опис експонатів, інформація про екскурсії, форми
роботи музею). Найчастіше не враховується специфіка музеїв та їх профілів, сайт не
наповнений інформацією. А користувачі прагнуть отримати віддалену інформацію,
скориставшись доступними інформаційними інтернет-технологіями.
У разі розвиненого інформаційного суспільства істотна частка пізнавальної
діяльності відбувається у віртуальному середовищі. Вебсайт дає користувачеві
первинну інформацію про музей, склад його фондів і колекцій, послуги, науково-
освітню діяльність, форми роботи з відвідувачами, тим самим дозволяючи
сформувати перше враження про установу.
При виході в Інтернет-середовище музею відкриваються наступні можливості:
– музей отримує можливість краще інтегруватись в систему державних та
закордонних профільних організацій;
– особистий вебсайт відкриває перед музеєм додаткові можливості для
презентації своїх колекцій;
– інтенсивніше здійснюється процес обміну професійною інформацією
(ефективний контакт музею з іншими закладами шляхом Інтернет-технологій);
– з’являється можливість отримання недостатніх ресурсів іззовні;
– з’являється можливість привернути увагу потенційних відвідувачів;
– представлення музею в Інтернеті може скласти позитивний вплив на розвиток
самого музею і може бути використано в якості експериментальної області для
музейного проєктування, як місце розробки різноманітних музейних моделей.
9
Це не весь перелік якостей, так як сучасні інформаційні технології мають ємний
потенціал, а музейна діяльність активно розвивається. За допомогою мережі Інтернет
музеї отримали унікальну можливість забезпечувати цілодобовий доступ до великого
фонду культурної інформації, а також можливість представляти цю інформацію в
захопливому вигляді для своїх потенційних віртуальниз відвідувачів, аудиторія яких
невпинно зростає.
Очевидно, що питання якості, актуальності та наповнення музейного
електронного ресурсу набувають важливого значення: неминуче наближається той
день, коли кількість віртуальних відвідувачів музею перевищить кількість реальних.
Вебсайт музею – це більше, ніж колекція тексту та графічних файлів,
представлених суспільству віддаленим доступом. Найголовнішими можна вважати
декілька моментів:
– вебсайт музею в деяких випадках може бути єдиною можливістю отримати
вичерпну інформацію про сам музей і його колекції потенційному відвідувачу, який
в реальності не можу відвідати даний музей у зв’язку із власними об’єктивними
причинами;
– наповнення музейного вебсайту може представити вичерпну інформацію про
колекції музею, виставки та освітні заходи;
– розміщуючи на музейному ресурсі наукові статті та інші матеріали, можна
зменшити витрати на публікації;
– музейний вебсайт дає можливість відкрити доступ до нових джерел
фінансування шляхом електронної комерції;
– музейний Інтернет-ресурс може використовуватися як інструмент, яким
можна визначити успіх нової програми або виставки музею, розмістивши попередню
інформаію або провівши опитування, тим самим залучаючи аудиторію у діалог.
Узагальнюючи, можна дійти до висновку, що вебсайт може стати найціннішим
інструментом музею і в наступні десятиліття.
В українських музеях вкрай слабка матеріальна база для кращого
обслуговування туристів та надання платних послуг. Україна багата на культурні та
10
історичні пам’ятки, але велика кількість музеїв не повністю виправдовує свій
потенціал.
Державні музеї лише почали вводити нові послуги на своїх вебсайтах.
Прикладом таких послуг є віртуальні тури. Вони слугують ще одним із способів
збільшити відвідуваність вебсайту музею, пропонуючи користувачам цікаві та
унікальні онлайн-подорожі.
Отже, щоб покращити роботу музею та залучити більшу кількість відвідувачів
потрібно вводити у свою діяльність новітні технології, постійно розвиватись у даній
сфері, по-новому подавати колекціїї експонатів, оцифровувати їх, створювати моделі
експонатів у електронному вигляді, створювати та постійно онлвлювати бази даних
експонатів у відкритому доступі для широкого кола користувачів.
Об’єкт дослідження – вебсайт музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів».
Предмет дослідження – методи та засоби створення вебсайту музею.
Метою кваліфікаційної роботи є визначення, обґрунтування підходів до
проєктування вебсайтів та розробка вебсайту музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів».
Завдання:
– проаналізувати основні терміни та поняття дослідження;
– визначити особливості створення вебсайтів музеїв;
– здійснити порівняльний аналіз вебсайтів аналогічної тематики;
– визначити етапи, засоби та методи розробки вебсайтів;
– проаналізувати та обрати платформу для створення макету вебсайту;
– розробити концепцію, дизайн та практично реалізувати вебсайт музею
магнітного запису АТ «Науково-дослідний інститут електромеханічних приладів».
Методи дослідження: теоретичні – аналіз та узагальнення, наукової й фахової
літератури з досліджуваних питань; порівняння підходів створення вебсайтів;
практичні – проєктування та розробка вебсайту.
11
Технічні та програмні засоби – в кваліфікаційній роботі описано процес
розробки вебсайту на платформі Wix, а також з використанням графічних редакторів
Adobe Illustrator, Adobe Photoshop.
Практичне значення отриманих результатів: результати роботи будуть
використовуватися музеєм магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів».
Апробація отриманих результатів: матеріали за тематикою дослідження були
оприлюднені на конференції «Мультимедійні технології в освіті та інших сферах
діяльності».
Особистий внесок – проєктування та розробка вебсайту музею магнітного
запису.
12
РОЗДІЛ 1
ОСОБЛИВОСТІ ПРОЄКТУВАННЯ ВЕБСАЙТУ МУЗЕЮ
1.1. Поняття вебсайту та його класифікація
Уміння створювати якісні й цікаві вебсайти наразі стає однією з найважливіших
складових інформаційної культури людини, адже від того, як вона зможе представити
у світовому інформаційному просторі себе, коло своїх професійних та особистих
інтересів або ж реалізувати в Інтернеті той чи інший проєкт, пов’язаний із
професійною діяльністю, багато в чому залежить успішність її кар’єри [4].
Вебсайт – це набір загальнодоступних взаємопов’язаних вебсторінок, які мають
спільне доменне ім’я. Окремі особи, групи, компанії чи організації можуть
створювати та підтримувати вебсайти для власних цілей різноманітного характеру.
Усі публічні вебсайти разом у сукупності складають Всесвітню павутину.
Основна функція вебсайту – працювати як засіб інформації для людей. Завдяки
наявності вебсайту ми можемо легко здійснювати пошук, а також надавати
інформацію. Створення привабливого дизайну вебсайту також має важливе значення,
щоб відвідувачі вебсайту могли легко сприймати та розуміти інформацію чи вміст,
які вони отримують із вебсайту.
З розвитком технологій і знань нова інформація зберігається в кіберпросторі
щосекунди. За допомогою вебсайту ми можемо знайти найсвіжішу інформацію та
новини з усього світу.
Хоча основною функцією вебсайту є надання інформації, вебсайт виконує й
інші функції. Він також працює як засіб комунікації, розваг, освіти та бізнесу.
Спілкування – це процес передачі інформації, і зазвичай це двостороннє
спілкування, коли обидві сторони надсилають і отримують повідомлення одна одній.
Сайти, які служать засобами спілкування, зазвичай надають функції електронної
пошти, чатів і вікна коментарів.
13
Сайти онлайн-ігор, музичні онлайн-сайти, сайти з телевізійними трансляціями
в прямому ефірі та сайти з потоковими трансляціями фільмів – це вебсайти, які
надають вміст, який розважає своїх користувачів. Сайти, що містять комікси та інше
розважальне чтиво, також належать до цієї категорії.
Інколи інформацію, надану на вебсайті, можна використати з метою навчання
та доречно розповсюджувати, наприклад інформацію про політику, економіку, науку,
соціальну культуру тощо.
Вебсайти також можуть працювати як медіа для просування, маркетингу та
транзакцій. Вони можуть об’єднувати конкретні компанії, споживачів і спільноти.
Будь-яке підприємство також може розширити свій цільовий ринок.
Існує багато вебсайтів, і їх можна класифікувати по-різному за різними
критеріями. Відповідно до однієї з існуючих класифікацій вебсайти поділяються на
статичні та динамічні залежно від того, як сторінки наповнені матеріалом.
Статичний сайт – це сайт, вміст якого сталий і не може змінюватися під час
відвідування сайту. Він не розрахований на часті оновлення, його легко підтримувати
й одній людині, особливо за допомогою програми-редактора. Статичні сайти ще
називають сайтами-брошурами [4].
Динамічний сайт – сайт, що може змінюватися у процесі взаємодії з
відвідувачем. Зазвичай це досягається завдяки використанню програмних засобів та
наявності бази даних. Отримавши запит на отримання сторінки такого сайту,
програмне забезпечення вебсервера виконує дії відповідно до цього запиту і повертає
сторінку клієнту [4].
За візуальною класифікацією вебсайти можна поділити на текстові, графічні й
імітаційні.
Текстові сайти містять переважно текстову інформацію та відносно мало
зображень (рис. 1.1). Вони порівняно невеликі за розміром і мають простий дизайн.
Дуже часто сайти інших типів крім стандартної мають ще й текстову версію – для тих
відвідувачів, які з різних причин не хочуть завантажувати повні варіанти веб-сторінок
[4].
14
Рис. 1.1. Текстовий вебсайт
Графічні сайти (рис. 1.2) містять багато графіки на додаток до деяких текстових
матеріалів. До графічних елементів таких сайтів можна віднести спливаючі меню та
вікна, піктограми, анімації, відеографіка тощо.
Рис. 1.2. Графічний сайт
15
Імітаційні сайти запозичують ідею оформлення з реального світу. Так,
наприклад, сайт про автомобілі може містити програму, що відображає всі деталі
автомобіля на екрані та дає огляд з позиції водія у процесі руху [4].
Одним із багатьох способів визначення типів вебсайтів є знання його вмісту.
Класифікацію вебсайтів за функціями зображено на рис. 1.3.
Рис. 1.3. Класифікація за функціями
1) Презентаційний вебсайт. Як правило за замовчуванням під словом «сайт»
клієнти розуміють саме презентаційний сайт. Назва цього типу цілком відповідає
його призначенню. Завдання презентаційних сайтів – представляти компанію чи
продукт. Ще можна сказати, що презентаційний сайт – це офіційне представництво
компанії чи бренду в інтернеті [5].
16
Презентаційні сайти складаються з кількох розділів. Як правило, серед них є
розділ з інформацією про компанію, розділ з описом послуги чи продуктів компанії
та контактний розділ. На сайтах креативних компаній цей перелік доповнює
портфоліо. На презентаційних сайтах також часто трапляється розділ з новинами
компанії, в якому публікують офіційні сповіщення та пресрелізи, а в деяких
випадках – блог компанії [5].
Приклад презентаційного вебсайту будівельної компанії зображено на рис. 1.4.
Рис. 1.4. Презентаційний вебсайт
Такі сайти також називають «корпоративними», рідше «сайтами брендів».
2) Посадкові сторінки. Поширена думка, що посадкові сторінки – це
односторінкові сайти, є частково помилковою. «Посадковими» їх називають через те,
що на них «сідає» рекламний трафік. Тож насправді будь-яка сторінка, що прив’язана
до рекламної кампанії, є посадковою за визначенням. Щоб підвищити ефективність
17
продукти та послуги почали просувати за допомогою окремо створених сторінок.
Власна, часто відмінна від інших сторінок структура дозволяла описати продукт
більш якісно та з урахуванням індивідуальних особливостей цього товару та послуги
[5].
Приклад даного типу вебсайту зображено на рис. 1.5.
Рис. 1.5. Посадкова сторінка
3) Онлайн-сервіси – це сайти, які надають користувачу ті чи інші послуги
онлайн. Наприклад, Gmail – це онлайн-сервіс з отримання та відправлення
електронної пошти. Megogo – це онлайн-сервіс з перегляду відеоконтенту (а з
недавніх пір ще й для прослуховування аудіоконтенту). Google – це теж онлайн-
сервіс, він надає послуги з пошуку інформації. Часто для того, щоб якось
впорядкувати таке розмаїття іменник «сервіс» супроводжує описовий прикметник.
18
Наприклад, «стрімінговий сервіс», «файлообмінний сервіс» або «платіжний
сервіс» [5].
Прикладом такого вебсайту може бути онлайн-сервіс з пошуку квартир чи
будинків в оренду (рис. 1.6).
Рис. 1.6. Онлайн-сервіс
4) Інтернет-магазини – це теж онлайн-сервіси для продажі послуг чи товарів.
Але їх існує так багато, що здається логічним виділити такі вебсайти в окремий тип
[5].
Перші інтернет-магазини з’явились ще у дев’яності роки. Тоді вони
сприймались дещо маргінальними, адже аудиторія інтернету була набагато меншою
ніж сьогодні, а звичка купувати речі онлайн у людей ще не з’явилась. У порівнянні з
великими книжковими магазинами, що існували в реальному світі, онлайн-книгарня
Amazon, запущена у 1995 році, сприймалася як дрібна крамничка. Сьогодні ж
Amazon – одна з найдорожчих у світі компаній, що продає не лише книжки, а взагалі
19
будь-що онлайн. На додачу до цього Amazon дає можливість майже кому завгодно
продавати на своїй платформі продукти та послуги. Такий приклад – не лише
всесвітньо відома історія успіху, але й модель поступової еволюції інтернет-магазину
у торговельний майданчик. В Україні подібний шлях пройшов інтернет-магазин
Rozetka [5].
Сторінки каталогу продуктів, сторінки окремих продуктів і всі екрани,
безпосередньо пов’язані з покупками, є найважливішими з точки зору дизайну
інтернет-магазину та платформ обміну.
Приклад стильного дизайну вебсайту інтернет-магазину одягу зображено на
рис. 1.7.
Рис. 1.7. Інтернет-магазин
20
5) Медіаресурси та блоги – це вебсайти, де публікуються інформаційні
матеріали [5].
Онлайн-медіа часто є цифровим представництвом медіа з реального світу.
Журнали Vogue чи New Yorker, газети Washington Post чи Daily Mirror існували ще до
появи всесвітньої павутини. З її появою їм довелось пройти шлях оцифровування
редакцій та редакційних процесів. І здебільшого класичні медіа, хоч і через тривалий
час, адаптувались до цифрових реалій [5].
Разом із тим, із появою інтернету, з’явився новий феномен: блогінг. Це слово
походить від словосполучення «web log», яке можна перекласти як «ведення онлайн-
щоденника». Вважається, що першим почав вести такий онлайн-щоденник
Тім Бернерс Лі, засновник всесвітньої павутини. Спочатку блоги дійсно були онлайн-
щоденниками, в яких люди ділились власним досвідом. Часто якість текстів у блогах
була нижчою, ніж в професійних медіа через відсутність коректора чи редактора.
Тепер межа між сучасними онлайн-медіа та блогами поступово зникає, адже з одного
боку посеред редакційних матеріалів ЗМІ часто публікують приватні блоги, а з
іншого, сучасні блоги тяжіють до більш професійної та якісної роботи з контентом. З
точки зору дизайну в онлайн-медіа найважливішими є сторінка зі списком матеріалів
та сторінка статті [5].
6) Соцмережами називають вебсайти, в яких користувачі можуть створювати
профілі, публікувати матеріали, налагоджувати віртуальні зв’язки, об’єднуватись у
групи [5].
Концепція соціальних мереж була темою досліджень психологів та
антропологів ще задовго до появи інтернету. Вона описувала систему взаємовідносин
людей та людських груп. З цифровим продуктом соцмережі почали асоціюватись
нещодавно – у 2010-х роках. Тоді людство дійсно почало оцифровувати власні ланки
взаємозв’язків [5].
7) Форуми. До появи соціальних мереж онлайн-форуми були, мабуть, основною
формою спілкування людей в Інтернеті. Існують різні цифрові форуми, де
обговорюються різноманітні питання. Сьогодні форуми не зникли загалом, але їх
популярність значно впала.
21
8) Чати. Ще одним популярним місцем спілкування, окрім онлайн-форумів,
були чати. Якщо на форумах часто доводилося довго чекати на відповідь, то в чатах
спілкування відбувалось в режимі реального часу. Як технологія вони не зникли, а
навпаки – серйозно розвинулись. По-перше, вони еволюціонували в месенджери, такі
як telegram, facebook messenger, whats app, viber. По-друге, чати стали ефективним
інструментом технічної підтримки. По-третє, чати стали додатковим засобом
комунікації всередині цифрових продуктів – наприклад, ігор, у якості окремих
функціональних елементів [5].
Приклад використання чату для зворотнього зв’язку в інтернет-магазині
зображено на рис. 1.8.
Рис. 1.8. Чат як інструмент технічної підтримки
9) Портали. Ще один специфічний різновид вебпроєктів – так звані портали.
Часто портали – це великий вебсайт, що об’єднує низку сервісів. Або, простою
мовою, це вебсайти «про все одразу». Деякі портали могли одночасно містити пошук,
електронну пошту, агреговану стрічку новин, прогноз погоди, гороскопи,
опитування. Так працювали bigmir.net та ukr.net. З появою соціальних мереж
22
популярність таких порталів поступово згасала. Але тематичні портали продовжують
існувати та розвиватись. Наприклад, новинні медіа часто є по суті новинними
порталами [5].
Перелік описаних типів вебсайтів не є вичерпним. Він охоплює лише найбільш
типові проєкти, з якими доводиться мати справу сьогодні.
Для подальшого проєктування було обрано вебсайт музею, який можна
віднести до статичних та презентаційних вебсайтів із елементами блогу.
1.2. Специфіка вебсайтів музейних структур
Музеї є сховищем людської історії та культури, ідей та діяльності, а також
інтелектуальними центрами світу, що їх оточує.
Закон України «Про музеї і музейну справу» від 29 червня 1995 p. № 249/95-4
ВР, що регулює суспільні відносини в галузі національної музейної справи, подає такі
офіційні тлумачення основних понять музеєзнавства:
«Музеї – це культурно-освітні та науково-дослідні заклади, призначені для
вивчення, збереження та використання пам’яток природи, матеріальної і духовної
культури, прилучення громадян до надбань національної і світової історико-
культурної спадщини.
Музейна справа – це спеціальна галузь культурно-освітньої та наукової
діяльності, яка здійснюється музеями з метою комплектування, збереження, вивчення
й використання пам’яток природи, матеріальної і духовної культури» [7].
Зростаюча культурна роль музеїв та їх вплив на сучасне суспільне життя
підняли важливі питання про те, як музеї взаємодіють з відвідувачами, і змусили
музейних працівників приділяти більше уваги людям, які хочуть відвідати музей.
Починаючи з 1990-х рр., музеї засвоюють інтерактивні технології, які
пропонують відвідувачу самостійно, вільно і творчо проявляти себе і взаємодіяти у
музейному просторі, змодельованому музейниками. Інтерактивні технології
відкривають можливості креативним відеошоу, панорамним проекціям, віртуальним
реальностям, аніматроніксам тощо [8].
23
Через різноманітність сфер використання на даний момент не існує єдиного
визначення інтерактивності, яке трактується по-різному в кожній науці та сфері
людської діяльності. Інтерактивність у певному сенсі зазвичай розглядається як
здатність споживачів самостійно керувати процесом споживання. Інтерактивні
інформаційні технології дозволяють нам керувати потоком інформації.
Перш ніж прийняти рішення відвідати музей чи будь-яку іншу установу, люди
проходять через різні точки взаємодії із ними. Такими точками можна вважати пошук
інформації про музей, його історію, контакти, діяльність, перелік експонатів,
відвідування вебсайтів та сторінок в соціальних мережах тощо.
Якщо це перший візит, враження людини від інформації про музей в Інтернеті
можуть значно вплинути на подальші її дії. Вебсайт музею чи виставки є коротким
попереднім входом до самого музею, подібно до трейлера до фільму, тому дуже
важливо, щоб досвід користування та взаємодії з вебсайтом був приємним.
Перше, про що повинна турбуватися будь-яка установа, компанія чи
підприємство, це взагалі мати власний вебсайт. Інакше можна втратити значну
частину потенційної аудиторії.
Проте щоб залучити нових людей необхідно не лише мати вебсайт. Адже він
повинен бути зручний у використанні, адаптований під потреби цільової аудиторії та
містити усю необхідну інформацію.
Важливо, щоб музеї ставили собі правильні запитання, коли йдеться про
створення цифрової платформи: чи відображає вона нашу ідентичність як організації?
Чи подобається це відвідувачам? Що йому потрібно? Які тенденції слід враховувати,
а які ігнорувати? Що зробить цей сайт більш привабливим? І, звичайно, яких помилок
ми повинні намагатися уникати?
Такі фактори, як цільова аудиторія, сфера знань і місце розташування, можуть
вплинути на роботу вебсайту музею. І хоча веб-присутність кожної інституції,
безсумнівно, має виглядати свіжою та унікальною, є деякі речі, які повинен
виконувати кожен хороший музейний сайт.
Як споживачі, ми розуміємо відмінність зручного продукту від незручного
інтуїтивно. Користувачам вебсайтів чи мобільних застосунків достатньо секунд
24
взаємодії з інтерфейсом, щоб скласти про нього позитивне чи негативне враження.
Зручність – це насправді не одна якість, а сукупність якостей. В контексті інтерфейсів
і вебсайтів, ключовими з них є [6]:
– ефективність роботи;
– простота та зрозумілість (інтуїтивність);
– комфортність використання;
– візуальна привабливість;
– турбота творців сайту про користувачів.
Перша якість зручних продуктів – це ефективність роботи. В контексті
вебсайту це означає, що всі функціональні елементи мають працювати. Кожне
посилання повинно бути діючим. Кожна форма має заповнюватись та відправлятись.
Кожна кнопка повинна натискатись і призводити до очікуваного ефекту. Таку
ефективність забезпечує відсутність помилок на рівні програмування та наповнення
сайту. І мова не лише про помилки на технічному рівні. Будь-які помилки на сайті
впливають на його ефективність: помилки в текстах, у використанні невідповідних
іконок чи ілюстрацій тощо.
Друга складова зручності вебсайтів теж дуже важлива. Це зрозумілість (або ж
інтуїтивність). На зручному сайті користувач без додаткових пояснень розуміє, як
виконати потрібну йому дію.
Також важливо відзначити, що в сучасному розумінні комфортність вебсайту
неможливо забезпечити, не піклуючись про його інклюзивність. Інклюзивність – це
така організація дизайну, за якої сайт можуть коректно сприймати люди з фізичними
вадами чи обмеженнями. В контексті вебдизайну таку якість сайтів ще називають
вебдоступністю. Її забезпечує певний підхід до вибору колірних палітр, шрифтів,
візуальних прийомів і технічного втілення.
Всі перелічені вище складові зручності є вагомими. Але і його естетичність та
сучасність є не менш важливими. В основі естетичності вебсайту лежать вміння
композиційно організувати макет, навички роботи з текстами та кольором. Але так
само важливі й відчуття стилю, вміння віднаходити актуальне візуальне
представлення.
25
Можна дійти висновку, що пошук зручного рішення для вебсайта хоч і викликає
у вебдизайнерів більше клопоту та є дуже важливим етапом. Адже завдяки зручному
інтерфейсу можна залучити нову аудиторію.
Під поняттям структура сайту розуміється внутрішній устрій вебресурсу, його
основа («скелет»), розташування сторінок, розділів, підрозділів, додаткових джерел.
Структура сайту – це логічно побудована зв’язка хаотичного скупчення інформації,
поєднана єдиним веб-дизайном, посиланнями і стилем. Це також і систематизація
всієї інформації по розділах сайту під один зразок, об’єднуючим механізмом тут є
головне меню сайту, яке виступає основним навігаційним засобом Інтернет-
ресурсу [9].
Наповнення – дуже важливий момент для побудови будь-якого вебсайту, у
зв’язку із чим частіше всього виникає питання, яку інформацію потрібно буде
розмістити. Музеї по суті являють собою велике сховище культурної інформації, і
проблеми, що ж саме розміщувати на вебсайті, немає. Частіше всього з’являється
питання, який матеріал повинен бути розміщений на сайті в першу чергу. Відповідь
на це запитання можна знайти, звернувши увагу на місію музею, яка допоможе
розставити пріоритети.
Якщо музей передусім дослідна установа, тоді інформація, що надає відомості
про доступні колекції, повинна бути розміщена в першу чергу.
Якщо діяльність музею, в першу чергу, націлена на освітню і виставкову
діяльність, то цілком можливо, що в першу чергу повинні бути розміщені освітні та
інтерпретаційні матеріали.
Потенційні відвідувачі вебсайту – це представники різних вікових груп, тому
всі матеріали мають бути викладені доступною мовою, щоб ефективно охоплювати
всі частини аудиторії. Розміщення інформації різними мовами тільки підвищить
рівень вебсайту. Завдання матеріалів, які розміщені онлайн це навчити та розважити.
На окрему увагу заслуговує дитяча аудиторія. Як показує іноземна практика, на
сьогоднішній день багато музеїв створюють спеціальні музейні вебсайти, які
повністю орієнтовані на дітей, зазвичай на такі сайти можна потрапити з основного
26
музейного ресурсу. Діти, які відвідують вебсайти музею сьогодні, – це реальні і вже
зацікавлені відвідувачі завтра.
Більші музеї в колекції можуть мати величезну кількість об’єктів. Основна
частина документації цих об’єктів існує лише на папері. Для того, щоб розмістити цю
інформацію онлайн, музей має занести ці пункти до електронного каталогу.
Зрозуміло, що цей процес є дорогим та трудомістким, проте розміщення ін6формації
про найцікавіші музейні експонати повинно бути обов’язково здійснено.
Музейні вебсайти надають унікальну можливість співробітництва онлайн
(шляхом електронної пошти, веб-конференцій) з іншими науковими, культурними та
комерційними організаціями та закладами. Це може бути здійснено ,наприклад,
шляхом розміщення рекламних посилань (банерів).
Єдиних вимог з формування інформаційного контенту і структури офіційного
сайту музейної установи не існує. Разом з тим, враховуючи завдання, які ставляться
перед Інтернет-джерелом вченими і суспільством формуються певні рекомендації,
пов’язані з розробкою структури та змісту інформаційного контенту. Організація
віртуального середовища повинна бути продумана до дрібниць, кожен дюйм екрану
повинен бути заповнений цікавою, актуальною, достовірною інформацією, це дасть
можливість у перспективі виховувати у громадян культуру спілкування, навчить
аналізувати й обмірковувати різні типи джерел в мережі Інтернет [9].
1.3. Порівняльний аналіз вебсайтів музеїв
Науково-технічні музеї – це доволі різноаспектна група музеїв технократичної
профільної групи, що збирають, зберігають, вивчають, експонують та популяризують
творіння людських рук, пов’язані з історією і практикою розвитку техніки та
технологій, а також – із життям і творчим генієм визначних експериментаторів,
винахідників і вчених [10].
Науково-технічні музеї за обсягом охоплення галузей науки і техніки
поділяються на такі підтипи [10]:
а) багатопрофільні – музеї, що документують історію науки і техніки в цілому;
27
б) галузеві – музеї, присвячені окремим галузям науки, техніки і технології
промислового виробництва.
У світі й в Україні кількісно переважають музеї галузевих профілів:
вузькогалузеві та виробничі музеї при окремих підприємствах, установах та
організаціях (техніко-технологічні, сільськогосподарські, медичні, фармацевтичні,
транспортні, засобів зв’язку, військової техніки, авіації і космонавтики та ін.). Робота
в них має свою специфіку і потребує спеціальної підготовки [10].
Здійснивши аналіз ряду вебресурсів дійшли висновку що українських музеїв
аналогічної тематики не так багато і деякі із них взагалі не мають власного вебсайту.
Вебсайти науково-технічних музеїв дещо відрізняються своїм оформленням від
сайтів картинних галерей та деяких інших типів музеїв.
Вони мають менш привабливий вигляд, зазвичай старомодне оформлення та
невдале структурування інформації. Часто такі вебсайти занедбані та тривалий час не
оновлюють інформаційне наповнення.
Проаналізувавши оформлення Інтернет-ресурсів музеїв природничих наук,
дійшли висновку, що вони подібні до сайтів науково-технічних музеїв. Зовсім інше
можна сказати про музеї моди.
Було проведено аналіз наявних вебсайтів українських та іноземних музейних
структур.
1) Музей техніки Фаетон – український приватний музей техніки,
розташований у місті Запоріжжя. Музей заснований у 2001 році.
Це ідеальне місце для тих, хто захоплюється найрізноманітнішою технікою.
Влітку 2019 року у музеї було відкрито шосту, політехнічну залу музею. Там
представлена різноманітна побутова техніка, що була у вжитку починаючи ще з кінця
ХІХ століття. Крім телевізорів, магнітофонів, кіно- і фотоапаратури в залі можна
побачити телефони та побутову техніку. Це старі швейні машини, пилососи, пральні
машини, електробритви і багато іншого [11].
Станом на 2020 рік у музеї знаходиться більш ніж 250 одиниць діючої техніки.
Серед експонатів можна зустріти серійні та більш рідкісні, дослідні екземпляри авто
і мото техніки, зброю, війскову та службову техніку різних «часів і народів». Багато
28
з них беруть участь у різноманітних виставках та історичних реконструкціях,
знімаються в кіно, тощо [11].
Вебсайт музею зображено на рис. 1.9.
Рис. 1.9. Вебсайт музею Фаетон
Зовнішнє оформлення сайту виглядає дещо старомодно, скоріш за все
оновлення дизайну за останні роки не проводилось.
29
Кольорова палітра підібрана вдало, але яскраві знімки експонатів музею
виглядають дещо різко та нав’язливо для ока, відразу відтягуючи увагу користувача
від текстової інформації.
Бракує описів знімків та уваги до зображених технічних засобів, які стали б в
нагоді тим можливим клієнтам які поки що не можуть особисто відвідати музей.
Можливо допрацювання з розміром викладеного тексту та стильовим оформленням
змогли б покращити інформативність, адже музей в першу чергу має виконувати
просвітницьку функцію.
Наявна зручна горизонтальна внутрішня навігація (рис. 1.10).
Рис. 1.10. Внутрішня навігація
Загалом, для заохочення нових відвідувачів, необхідно більшу увагу приділяти
вебсайту та його наповненню. Зручної навігації для цього недостатньо.
Проаналізувавши розділ Новини даного вебсайту, було вияснено що сайт давно не
наповнювали актуальною інформацію. Ще одним недоліком є неробочі віджети, які
відразу викликають негативні враження та псують загальний вигляд сайту.
2) Технічний музей Відня (нім. Technisches Museum Wien, TMW) відноситься до
найстаріших науково-культурних закладів столиці Австрії й розташований у районі
Penzing. Основою музею є унікальна колекція імператорського-королівського
Кабінету національної фабричної продукції, створена з ініціативи імператора
Франца I у 1807 році. Технічний музей у Відні є однією з визначних пам’яток
австрійської столиці [12].
Інформаційно-комунікаційна колекція музею, включає експонати вироблені
внаслідок зростаючої індустрії споживчих товарів починаючи з 19 століття. Вони
30
входять до групи радіо і телебачення, аудіо та відео, музичні інструменти, набір і
друк, фото- та кіно, телекомунікації, поштове відділення, та обробка даних [12].
До 1930-х років австрійські й німецькі фірми, активно займалися створенням
електронних інструментів. На експозиції представлені електроні музичні
інструменти – «далекі предки» синтезаторів та електричних органів [12].
Вебсайт музею зображено на рис. 1.11.
Рис. 1.11. Вебсайт технічного музею Відня
31
Загалом, інтерфейс сайту добре продуманий та відповідає сучасним вимогам
оформлення. Цікавою особливістю є використання не тільки фотознімків експонатів,
але й ілюстративних зображень, що підвищують мультимедійність контенту.
Незначним недоліком можна вважати структуру вебсторінок яка дещо ускладнює
пошук потрібної інформації.
Доцільніше було б на головній сторінці розмістити саморекламу для заохочення
нових відвідувачів. Проте можна прослідкувати і те, що сайт постійно оновлюється
цікавою та актуальною інформацією.
Висновки до розділу
Досліджено поняття вебсайту та його класифікацію. З’ясовано, що вебсайт – це
набір загальнодоступних взаємопов’язаних вебсторінок, які мають спільне доменне
ім’я. Основна функція вебсайту – працювати як засіб інформації для людей. Завдяки
наявності вебсайту ми можемо легко здійснювати пошук, а також надавати
інформацію. Створення привабливого дизайну вебсайту також має важливе значення,
щоб відвідувачі вебсайту могли легко сприймати та розуміти інформацію чи вміст,
які вони отримують із вебсайту.
З розвитком технологій і знань нова інформація зберігається в кіберпросторі
щосекунди. За допомогою вебсайту ми можемо знайти найсвіжішу інформацію та
новини з усього світу.
Існує багато вебсайтів, і їх можна класифікувати по-різному за різними
критеріями. Відповідно до однієї з інсуючих класифікацій вебсайти поділяються на
статичні та динамічні залежно від того, як сторінки наповнені матеріалом. За
візуальною класифікацією, вебсайти бувають графічні, текстові та імітаційні. А за
функціями вебсайти можна поділилти на наступні типи: презентаційні сайти,
посадкові сторінки, вебсервіси, інтернет-магазини, медіаресурси, соцмережі, форми,
чати, портали [5].
Визначено специфіку вебсайтів музейних структур. Досліджено, що єдиних
вимог з формування інформаційного контенту і структури офіційного сайту музейної
32
установи не існує. Разом з тим, враховуючи завдання, які ставляться перед Інтернет-
джерелом вченими і суспільством формуються певні рекомендації, пов’язані з
розробкою структури та змісту інформаційного контенту. Організація віртуального
середовища повинна бути продумана до дрібниць, кожен дюйм екрану повинен бути
заповнений цікавою, актуальною, достовірною інформацією, це дасть можливість у
перспективі виховувати у громадян культуру спілкування, навчить аналізувати й
обмірковувати різні типи джерел в мережі Інтернет [9].
Здійснено порівняльний аналіз вебсайтів музеїв. Дійшли висновку що
українських музеїв аналогічної тематики не так багато і більшість із них взагалі не
мають власного вебсайту.
33
РОЗДІЛ 2
ЗАСОБИ ТА МЕТОДИ СТВОРЕННЯ ВЕБСАЙТУ МУЗЕЮ
2.1. Етапи створення вебсайту музею
Для компаній стало важливо мати високофункціональний вебсайт або
вебдодаток, щоб задовольнити цифрові потреби клієнтів. Більшість установ та
компаній, незалежно від сфери своєї діяльності, зосереджуються на створенні якісно
продуманого сайту для маркетингу своїх послуг.
Але процес веброзробки включає не лише кодування. З сотнею аспектів, які
необхідно взяти до уваги, стає обов’язковим дотримання структурованого процесу,
щоб уникнути проблем.
Веброзробка – це процес створення веб-сайтів і веб-додатків, які працюють в
Інтернеті. Від створення простого статичного односторінкового вебсайту до
кодування повномасштабної надійної веб-програми та системи керування вмістом.
Життєвий цикл розробки програмного забезпечення або вебсайту – це
методологія або стандарт, який направляє вас у правильному напрямку для створення
високоякісного рішення. Його можна назвати планом того, що потрібно зробити для
завершення проєкту. Він стосується всіх етапів створення вебсайту, від
формулювання ідеї до кодування та проектування до розгортання та підтримки. Це
стандартний або методичний крок, якого слід дотримуватися, щоб створити добре
функціонуючий вебсайт.
Перш ніж розробляти новий вебсайт, необхідно провести дослідження, яким
платформам, браузерам, технічним новинкам надається перевага, які швидкості
з’єднання використовують потенційні користувачі. Якщо переробляється існуючий
сайт, заздалегідь аналізуються реєстраційні записи на сервері, що зберігають
інформацію про використання сайту.
Запорукою якісної та успішної роботи вебсайту є дотримання основних етапів
його створення (рис. 2.1).
34
Рис. 2.1. Етапи створення вебсайту
Скільки часу займає кожен етап і що саме відбувається, залежить від багатьох
обставин: складності проекту, бізнес-міркувань, розміру команди, досвіду учасників.
Щоб процес розробки сайту не був хаотичним, слід створювати план роботи.
При цьому потрібно врахувати всі особливості створення вебсторінок певного типу,
можливі труднощі та шляхи їх подолання. Спочатку варто пошукати сайти схожих
організацій чи подібної тематики, сформувати список складових, матеріалів та
елементів дизайну, які автор хоче бачити на власному сайті [4].
План розробки вебсайту передбачає розробку стратегії всіх аспектів вебсайту ,
включаючи дизайн, технології, контент і маркетинг. На основі інформації, зібраної та
проаналізованої на останньому етапі, приймаються обґрунтовані рішення щодо
структури та функцій вебсайту.
На етапі планування формується спеціальна команда, у якій кожен член має
визначену роль і делегує чіткі завдання.
Рішення щодо структури вмісту, каркасу (схеми та приблизні проєкти), вибору
технологічного стеку та методології розробки програмного забезпечення є
важливими рішеннями, які необхідно прийняти перед створенням вебсайту.
35
Технологічний стек – це набір мов програмування, веб-фреймворків і
програмного забезпечення, які використовуються для створення будь-якої
вебпрограми.
Створення карти сайту, оцінка часових рамок , визначення кінцевих результатів
і розподіл ресурсів також є важливими частинами етапу планування. Також необхідно
визначитися з брендингом вебсайту, перш ніж переходити до етапу дизайну.
Визначившись із метою сайту і створивши план роботи над ним, можна
переходити до наступного етапу – побудови інформаційної архітектури або
структури вебресурсу. Необхідно детально продумати зміст та організацію сайту,
скласти перелік матеріалів, які вже є в електронному вигляді, а також визначити, що
ще потрібно оцифрувати. Слід продумати, на які групи можна поділити ці матеріали,
розглянути їх як єдине ціле й оцінити, чи немає у цій структурі прогалин.
На етапі дизайну потрібно розробити вигляд кожної окремої сторінки та сайту
загалом, створити чи підібрати ілюстрації, фотографії, схеми, логотипи – весь
графічний матеріал. Якщо це сайт організації, слід також врахувати, що вона вже
може мати певні традиції щодо стильового оформлення рекламних та інформаційних
матеріалів, і дизайн сайту має з ними узгоджуватись [4].
На цьому етапі також виконують роботу з текстовим наповненням сайту – його
остаточний підбір, оформлення та редагування. Готуючи матеріали для сайту, слід
пам’ятати, що в Інтернеті люди читають тексти інакше, ніж у друкованому вигляді.
Вони власне не читають вебсторінки, а переглядають їх. Більшість відвідувачів
роблять це, переглядаючи лише окремі слова чи речення, і не звертають уваги на
інший вміст. Це означає, що необхідно відповідно оформлювати тексти, призначені
для розміщення в Інтернеті: виділяти найголовніше, використовувати заголовки та
списки, чітко структурувати текст і дотримуватися тематики, а також завжди
розраховувати на у два рази менший обсяг тексту порівняно з друкованим [4].
Головна сторінка – це «обличчя» сайту, вона повинна бути яскравою і якісно
ілюстрованою. На головній сторінці будь-якого музею має бути присутня зрозуміла
навігаційна карта всієї структури ресурсу, основні розділи повинні розподілятися на
підрозділи. Має бути створена можливість пошуку по сайту за ключовими словами.
36
Ця опція дуже важлива, вона підвищує рейтинг музейного сайту. Потрапивши на
головну сторінку, користувач повинен отримати коротку, але повну інформацію про
музей в цілому [9].
Часто сайти створюються за певною структурою, розробленою автором. При
цьому зовсім не береться до уваги те, що буде цікавим для відвідувачів. Варто дати
їм певне завдання, залучити до анкетування, опитування, розгадування загадок, участі
в конкурсі – це не лише підвищить зацікавленість відвідувачів, але й дасть
можливість отримати від них певну інформацію для подальших контактів [4].
Не зважаючи на спосіб створення вебсайту – вручну або за допомогою
спеціального редактора – варто створити шаблон сторінки. Він стане основою для
розробки всіх наступних сторінок сайту. Дана підготовка забезпечить єдиний
принцип побудови сайту. Також за допомогою шаблонів легко додавати нові сторінки
в проект, а також залучати до роботи інших.
Лише після всієї підготовчої роботи можна розпочинати створення вебсторінок
із наявних матеріалів. Завдяки попереднім етапам розробки на цьому етапі непотрібно
переробляти графічні меню через те, що забули внести в структуру один із
розділів [4].
Після того як вебсайт буде скомпоновано, необхідно його
протестувати – перевірити роботу всіх гіперпосилань, відображення графічних
матеріалів, швидкодію сайту, його вигляд у вікнах різних браузерів, з різними
настроюваннями шрифтів та властивостей екрану. Лише після цього сайт можна
розміщувати в Інтернеті [4].
Узгодженість проєкту важлива для того, щоб мати добре функціонуючий сайт,
який забезпечує безперебійну взаємодію з користувачем.
Сьогодні один і той самий вебсайт може бути відкритим зі смартфона,
комп’ютера, планшета, ігрової приставки чи «розумного» телевізора. Тобто, з будь-
якого пристрою, на якому є браузер. Коректна робота сайту на всіх типах пристроїв,
з яких він може переглядатись, називається кросплатформністю.
Для забезпечення кросплатформності необхідно створювати проєкт з огляду на
величезну кількість різноманітних форматів. Це потребує не лише вміння мислити
37
гнучко в контексті композиції, але й вміти правильно вибудувати сам процес
розробки дизайну сайту. Для цього, як правило, застосовується один з двох підходів
[12]:
– реагуючий вебдизайн (responsive web design);
– адаптивний вебдизайн (adaptive web design).
Не багато сайтів розроблено спеціально для портативних пристроїв, але
оскільки їх популярність зростає, вже зараз інтереси цієї частини користувачів не
можна не враховувати.
Окрім цього, на етапі тестування вносяться невеликі доповнення, такі як
плагіни та SEO-оптимізація для забезпечення плавного розгортання. Інженери з
тестування та розробники працюють разом у циклі, доки команда контролю якості не
переконається, що остаточний варіант вебсайту готовий до публікації для
користувачів.
Рекомендовано розпочати процес тестування якомога раніше, щоб уникнути
втрати грошей і часу на наступних етапах.
Необхідно зареєструвати вебсайт у пошукових системах. А також можна
обмінюватись посиланням на сайт з іншими, для швидшого залучення аудиторії.
Після опублікування сайту в Інтернеті роботу над ним не можна вважати
завершеною. Майже кожен сервер дає змогу стежити за кількістю відвідувачів та
їхніми діями на сайті. Аналізуючи цю інформацію, можна вдосконалити сайт, зробити
його більш зручним, корисним і популярним. Крім того, розміщена на ньому
інформація потребує оновлення, уточнення, змінення чи інших дій, що змушує
постійно стежити за станом сайту. З часом можуть змінюватися дизайн сайту, його
структура і навіть призначення. Варто взяти собі за правило зберігати архівні версії
сайтів. Зазвичай їх можна створювати автоматично за допомогою спеціальних
програм, що містяться на сервері [4].
38
2.2. Аналіз програмного забезпечення для обробки графічної інформації під
час створення контенту вебсайту
Для роботи з ілюстраціями, з схемами, таблицями використовуються графічні
редактори. Графічний редактор – це комп’ютерна програма, яка надає можливість
користувачу створювати і редагувати на екрані комп’ютера зображення і зберігати їх
для подальшого використання. Деякі графічні редактори призначені для редагування
фотографій, тоді як інші – переважно для створення та редагування малюнків [13].
Найпоширеніші операції, які можна виконувати в графічних редакторах [13]:
– виділення області зображення для редагування;
– малювання ліній за допомогою пензлів різних кольорів, розмірів, форми і з
різним натиском;
– заповнення певних областей малюнка кольором, градієнтом кольору чи
текcтурою;
– вибір кольору з використанням різних колірних моделей (наприклад, RGB,
HSV, CMYK) та за допомогою колірної піпетки;
– створення написів різними шрифтами;
– видалення з фотографій подряпин, бруду, зморшок, ефекту червоних очей та
інших дефектів;
– формування зображень із використанням шарів;
– конвертація зображень у файли різних форматів;
– застосування фільтрів з метою досягнення різних ефектів.
Сучасний комп’ютер не просто замінив олівець і папір. Беручи на себе всю
складну, нерідко монотонну роботу зі створення малюнка а, він дозволяє
зосередитися на його сюжеті, надає користувачам зовсім нові, унікальні можливості
шодо техніки малювання. Одне натиснення кнопки миші може замінити три години
виснажливої праці [13].
Не варто думати, що всі графічні редактори дуже складні у вивченні та
використанні. Адже одна з головних вимог до створюваних програм – це зручність та
інтуїтивна зрозумілість інтерфейсу [13].
39
Метод кодування інформації за допомогою послідовності байтів називається
форматом.
Графічний формат – це спосіб запису графічної інформації. Усі графічні
формати можна поділити на растрові та векторні.
Растрові зображення, які іноді називають бітовими, складаються з прямокутної
сітки елементів зображення – так званих пікселів. Кожному пікселеві призначається
певне місце та значення кольору. Працюючи з такими зображеннями, ви змінюєте
пікселі, а не об’єкти чи фігури [14].
Основні області застосування. Растрові зображення – найпоширеніше
електронне середовище для зображень із неперервними тональними переходами,
таких як фотографії чи цифрові малюнки, тому що вони ефективно відтворюють тонкі
градації тіней і кольорів [14].
Поширені програмне забезпечення й типи файлів. Більшість професіоналів для
роботи з растровими зображеннями використовують Photoshop. До поширених типів
файлів, що використовуються у Photoshop для експорту, належать JPEG, GIF, PNG і
TIFF [14].
Роздільна здатність і розмір файлу. Растрові зображення залежать від
роздільної здатності, тобто вони містять стале число пікселів. Під час змінення
розміру растрове зображення втрачає пікселі або набуває їх, що призводить до
зменшення якості зображення.Растрові зображення зазвичай мають великі розміри
файлів через те, що в них зберігаюється дані пікселів, і часто їх буває потрібно
стиснути для зменшення розмірів файлів, коли вони використовуються у певних
програмах Creative Cloud [14].
Векторні зображення, які іноді називають векторною графікою, векторними
фігурами чи векторними об’єктами, складаються з геометричних (точок, ліній і
кривих) фігур, природних або довільної форми, що визначаються математичними
рівняннями відповідно до їхніх характеристик [14].
Основні області застосування. Векторні зображення є найкращим варіантом
для таких графічних зображень, як технічні ілюстрації, бланки, шрифти або логотипи,
що використовуються з різними розмірами та виводяться на різні носії. Векторну
40
графіку також використовують для друку рекламних та інших спеціальних вивісок,
комп’ютерного проектування та 3D-графіки [14].
Поширені програмне забезпечення й типи файлів. Для створення векторних
графічних зображень переважно використовується Adobe Illustrator. До поширених
форматів файлів векторної графіки належать, серед іншого, AI, EPS, SVG, CDR і
PDF [14].
Роздільна здатність і розмір файлу. Об’єкти векторної графіки можна вільно
переміщувати чи змінювати без втрати деталей і чіткості, бо вони не залежить від
роздільної здатності: чіткі краї зберігаються під час зміни розміру, друку на принтері
PostScript, записування у PDF-файл та імпорту в програми для роботи з векторною
графікою [14].
У ході створення вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів» використовувались графічні редактори як для
векторної, так і для растрової графіки. А саме Adobe Photoshop та Adobe Illustrator.
Photoshop – це програма для редагування фотографій і створення графіки,
розроблена компанією Adobe. Photoshop пропонує широкий вибір функцій
редагування зображень, а також можливість створювати складну графіку. Photoshop
став галузевим стандартом для багатьох творчих людей, оскільки він дуже
універсальний і зазвичай є однією з перших програм, якими багато хто навчається
користуватися.
Adobe Photoshop постачається з професійними інструментами, які полегшують
художникам втілення своїх ідей у життя. Однією з головних переваг використання
Adobe Photoshop є можливість створювати кілька шарів, які можна змінювати
незалежно один від одного. Постійно додаються нові інструменти та функції,
оскільки Adobe збирає відгуки художників про способи вдосконалення Photoshop.
Сьогодні Adobe Photoshop використовується різними художниками та
творчими професіоналами в галузі. Photoshop – це програмне забезпечення, яке
можна використовувати для фотографії, графічного дизайну, цифрового мистецтва
тощо.
41
Photoshop чудово підходить для створення та редагування вмісту соціальних
мереж для сторінок в Instagram, Twitter або Facebook. У зв’язку із цим існує чимало
готових PSD-макетів, які дуже зручно використовувати для якісного наповнення
свого аккаунту у соціальних мережах.
Приклад використання таких макетів у соціальній мережі Instagram зображено
на рис. 2.2.
Рис. 2.2. Дизайн макетів для соціальних мереж
Photoshop – потужний інструмент для створення реалістичних упаковок і
макетів для найрізноманітніших проєктів. Це дійсно допомагає під час роботи з
клієнтами, щоб допомогти їм зрозуміти загальну ідею. На рис. 2.3 зображено
візуалізацію дизайну упаковки, яку реалізовано за допомогою спеціального мокапу у
програмному середовищі Adobe Photoshop.
42
Рис. 2.3. Візуалізація дизайну упаковки
Навчання користуванню Adobe Photoshop може бути дуже цінним не лише для
тих, хто хоче побудувати кар’єру в творчій індустрії, а й для тих, хто цього не хоче.
Оскільки соціальні медіа та створення контенту стають такою важливою частиною
бізнесу, будь-який досвід роботи з графічними програмами, такими як
Adobe Photoshop, надає перевагу під час подання заявки на наступну велику роботу.
Коли творчі компанії публікують відкриту посаду у своїй команді, вони майже завжди
вказують досвід роботи з Adobe Photoshop як вимогу. Adobe Photoshop дуже
універсальний і дозволяє творцям виконувати з ним широкий спектр завдань.
Вивчення Photoshop може відкрити нові можливості в багатьох сферах. Хороше
розуміння Photoshop надає чудові можливості для вивчення та використання інших
програм Adobe. Деякі інструменти та ярлики дуже схожі в усіх програмах Adobe.
Adobe Photoshop містить безліч функцій, шрифтів, ефектів, а також
інструментів пензля чи пера. Найпоширенішими з них є:
43
– Пензлі – один із найпопулярніших інструментів Photoshop. Їх можна
використовувати для різних ефектів, у тому числі компонування, малювання,
стирання та ретушування зображень.
– Clone Stamp дозволяє копіювати пікселі з однієї області зображення та
вставляти їх в іншу область. Це корисно для відновлення пошкоджених або
зіпсованих зображень. Приклад використання даного інструменту зображено на
рис. 2.4.
Рис. 2.4. Приклад використання інструменту Clone Stamp
– Пензель відновлення схожий на штамп клонування, але він змішує
скопійовані пікселі з навколишніми для більш природного вигляду. Найчастіше
використовується під час ретуші шкіри на фото.
– Пензель історії дозволяє повернути зображення до попереднього стану. Це
корисно для скасування помилок або повернення до того моменту робочого процесу,
де користувач був задоволений зображенням.
– Розмиття розмиває пікселі на зображенні, роблячи їх менш чіткими. Це можна
використовувати, щоб створити м’який, мрійливий вигляд або зменшити видимість
зморшок та інших недоліків.
44
– Різкість діє протилежно до розмиття, роблячи пікселі більш чіткими. Це може
бути корисним, щоб зробити зображення більш прозорим або створити більш
драматичний ефект.
– Освітлення та затемнення використовуються для відповідних назві дій із
областями зображення. Вони зазвичай використовуються під час ретушування
фотографій, щоб зробити об’єкти більш чіткими.
– Інструмент «Губка» може поглинати або звільняти колір із зображення. Це
корисно для корекції надто світлих або надто темних кольорів.
Загалом Adobe Photoshop надає багато можливостей для роботи із
зображеннями та має дуже зручний і легкий у розумінні інтерфейс. Робочу область
програмного середовища зображено на рис. 2.5. Її також можна налаштовувати під
себе та розміщувати найбільш вживані інструменти у зручних місцях.
Рис. 2.5. Робоча область графічного редактора Adobe Photoshop
Adobe Illustrator – це потужна програма для створення векторної графіки,
запропонована корпорацією Adobe. Будь-хто, незалежно від художніх чи
комп’ютерних здібностей, може використовувати Illustrator для малювання фігур і
ліній, створення тексту або імпорту графіки та зображень. Можна використовувати
45
Illustrator, щоб зробити макет для книги (рис. 2.6), брошури, буклету чи будь-якого
іншого виду поліграфічної та цифрової продукції.
Рис. 2.6. Процес створення книги в Adobe Illustrator
Для представлення зображень у векторній графіці використовуються
геометричні примітиви, такі як точки, фігури, лінії, криві та багатокутники. Ця
векторна графіка базується на математичних виразах. Багато мультфільмів, які ми
зараз бачимо в Інтернеті чи на телебаченні, насправді є векторними зображеннями,
розробленими за допомогою Illustrator або програм, подібних до нього, наприклад
Macromedia Freehand.
Дизайнери, які працюють із різними типами медіа, покладаються на Illustrator
у своїх творчих проектах завдяки векторним можливостям Illustrator. Інструменти
малювання та ефекти роблять його незамінним майже для будь-якого дизайнера.
Дизайнери поліграфічної продукції, наприклад ті, хто створює брошури та
листівки, можуть створювати складні ілюстрації за допомогою Illustrator.
Вебдизайнери використовують його, оскільки Illustrator також дозволяє експортувати
растрові формати з мінімальним ризиком помилки.
Дизайнери відеопродукції також використовують Illustrator, оскільки він може
обробляти вектор для відеопроектів.
46
Adobe Illustrator – це насправді дуже важлива дизайнерська програма, яку в
основному використовують для розробки логотипів (рис 2.7). Ця програма дозволяє
створювати повністю власний векторний дизайн логотипу, який, як відомо, буде
єдиним у своєму роді для бренду. А векторна графіка, в свою чергу, дає змогу
змінювати розмір зображення настільки, наскільки вам заманеться, без втрати
роздільної здатності чи якості зображення. По суті, це магія графічного дизайну, і
тому одна з найкращих програм, яку потрібно використовувати для створення
дизайну логотипу.
Рис. 2.7. Процес розробки логотипу
Adobe Illustrator як і Photoshop чудово підходить для створення цифрової
продукції для соціальних мереж. Illustrator також надзвичайно спрощує створення
графіки в різних розмірах, тому легко створювати різні версії однієї графіки для
використання на кожній платформі соціальних мереж.
Також за допомогою даного програмного середовища можна з легкістю
оцифрувати тексти та малюнки. Для цього можна просто здійснити обведення
малюнку за допомогою інструмента «Перо» або ж використати інструмент
«Трасування зображення» та вказати необхідні параметри.
Приклад оцифрування малюнку зображено на рис. 2.8.
47
Рис. 2.8. Оцифрування малюнку
2.3. Аналіз платформ для створення вебсайту
Створення вебсайту стало набагато простішим і дешевшим, ніж це було раніше,
завдяки широкому спектру зручних для користувача платформ та конструкторів
вебсайтів. Існують навіть конструктори сайтів, призначені для певних цілей,
наприклад для магазинів електронної комерції та блогів. Найкращі конструктори
вебсайтів прості у використанні, доступні за ціною та дозволяють розвиватися.
Найпопулярніші варіанти включають шаблони або теми, тож у користувача є
початкова точка дизайну. Це значно полегшує додавання власних зображень або
вмісту, а потім швидку публікацію на вебсайті. Більшість конструкторів вебсайтів є
комплексними рішеннями, які включають вебхостинг, реєстрацію домену та
вбудований редактор за одну щомісячну плату.
Існує два різні типи конструкторів вебсайтів – онлайн і офлайн. Офлайн-
конструктор вебсайтів – це програмне забезпечення, яке можна завантажити для
створення вебсайту на своєму персональному комп’ютері. Онлайн-конструктори
вебсайтів є вебінтерфейсом і дозволяють створювати та редагувати сайт
безпосередньо на сервері компанії.
48
Конструктор вебсайтів перетворює команди перетягування в код. Створюваний
вебсайт може бути розміщений у компанії або підключений до хостинг-провайдера.
Більшість конструкторів вебсайтів пропонують вибір тем або шаблонів, які підходять
для різних типів вебсайтів. Наприклад, для портфоліо використовуватиметься інший
шаблон, ніж для магазину електронної комерції. Вибравши шаблон, є можливість
налаштувати безліч функцій. Залежно від конструктора вебсайтів, це включає такі
елементи, як шрифт, макет і розмір тексту та зображень. Можна також додавати
контактні форми та вставляти відео.
Хоча кодування часто не потрібне для багатьох найпопулярніших
вебконструкторів, більшість платформ дозволяють користувачам налаштовувати
HTML і CSS відповідно до своїх потреб.
Вибираючи конструктор вебсайтів, необхідно у першу чергу розглянути та
визначити, який сайт та який функціонал повинен бути у результаті.
Конструктор вебсайтів робить багато складних аспектів його роботи простими
та інтуїтивно зрозумілими. Далі наведено список деяких найпоширеніших функцій
конструкторів.
Інтерфейс перетягування. Багато конструкторів вебсайтів дозволяють
перетягувати компоненти вебсторінки, щоб створити її відповідно власних побажань.
Це може включати текст, фотографії, відео або будь-який інший компонент на
вебсторінці. Кожен конструктор вебсайтів пропонує різну гнучкість для параметрів
налаштування. Деякі компанії використовують теми, які важче налаштувати, тоді як
інші дозволяють налаштувати майже кожен аспект вебсторінки без будь-якого
кодування.
Зберігання фотографій і відео. Конструктори вебсайтів спрощують
завантаження зображень і відео. За допомогою Squarespace, наприклад, можна
отримати доступ до галереї зображень у своєму обліковому записі. Таким чином
можна редагувати та видаляти фотографії та відео з різних сторінок, але при цьому
зберігати їх і посилатися на них у майбутньому. Обсяг пам’яті зазвичай залежить від
плану передплати.
49
Хостинг і домени. Під час створення вебсайту, необхідні також два важливих
компоненти, крім дизайну: хост вебсайту та доменне ім’я (URL-адреса, яка
використовується для переходу на сайт). Багато розробників вебсайтів пропонують
усі три послуги.
Інтеграція сторонніх розробників. Конструктори вебсайтів спрощують
інтеграцію програм сторонніх розробників, таких як канали соціальних мереж або
кошики для покупок. Форми для збору потенційних клієнтів – це ще одна поширена
інтеграція, яка дозволяє потенційним клієнтам/клієнтам надавати свою інформацію
та скидати її безпосередньо до бажаної CRM або сховища даних.
Мобільна сумісність. Оскільки дуже багато людей переглядають вебсторінки зі
смартфонів, мобільна сумісність є важливою особливістю будь-якого вебсайту.
Багато розробників вебсайтів автоматично інтегрують цю функцію та дозволяють
переглядати мобільну версію вашого вебсайту під час редагування. Деякі можуть
навіть автоматично налаштовувати елементи на вашому сайті, щоб один дизайн добре
працював на кількох пристроях.
Ділова електронна пошта. Більшість конструкторів вебсайтів мають
можливість створити адресу електронної пошти з розширенням вашого доменного
імені. Деякі стягують додаткову плату за цю функцію, тоді як інші пропонують одне
або два електронні листи безкоштовно та стягують плату за кожне додаткове
повідомлення.
SEO аналітика. Хоча багато людей використовують Google Analytics для оцінки
трафіку, більшість конструкторів вебсайтів пропонують власну форму аналізу
трафіку, яку простіше використовувати звичайним людям. Це надає інформацію про
те, з яких вебсайтів надходить трафік і як глядачі знайшли вебсайт.
Сьогодні однією із найпопулярніших платформ для створення вебсайтів є
WordPress.
WordPress – це система керування вмістом із відкритим кодом, яка широко
використовується для створення вебсайтів завдяки простоті встановлення та
використання. За допомогою WordPress можна створювати все, від простих вебсайтів
до блогів, складних порталів, корпоративних вебсайтів і навіть додатків.
50
До переваг даної платформи фахівці відносять такі якості:
– популярність і затребуваність. Завдяки інтуїтивно зрозумілому інтерфейсу
(рис. 2.9) з нею може працювати навіть новачок;
– великий вибір тем для оформлення, мовного супроводу і т.д. Можна
підлаштувати сайт під себе навіть в дрібницях;
– завдяки наявності помічника, системою може користуватися навіть
звичайний користувач, який не знайомий з мовами програмування на достатньому
рівні [15].
Рис. 2.9. Інтерфейс платформи WordPress
Також користувачі відзначають зручну панель для адміністрування. Вона
дозволяє вставити текст практично з будь-якого редактора відразу на сайт. Така
функція відсутня у багатьох платних платформах, що знижує конверсію сайту та
популярність у користувачів [15].
Але навіть у такої популярної платформи є декілька суттєвих недоліків, а саме
[15]:
– необхідність підлаштовувати платформу під себе і вміння адаптувати під
ситуацію конкретні деталі сайту;
51
– новачкам без досвіду програмування не завжди вдається з першого разу
встановити платформу. Складного нічого немає, але якщо склад розуму не схильний
до таких завдань, розібратися в системі стане трохи проблематично.
За користувацьким рейтингом платформа Joomla також займає високі позиції
по кількості використань.
Дана платформа – це середня ланка між складними програмами для
професіоналів і стартовими платформами для новачків. Середній рівень дозволяє
відточити навички складання сайтів, а також покращити зовнішній вигляд і якості
більш постійного ресурсу. Завдяки такому балансу розібратися з нею може новачок,
який мав раніше досвід роботи з WordPress, але який не вважає себе професіоналом в
області сайтобудування [15].
Окрім наявності зручного і зрозумілого інтерфейсу у Джумли є ряд інших
цікавих переваг, а саме [15]:
– простота і повноцінність інструменту для розробки сайтів;
– підтримка протоколів контролю доступу;
– адмін-панель багата як можливостями управління, так і створенням
індивідуального стилю ресурсу під конкретний запит;
– відсутність базових складнощів в процесі встановлення.
Wix – це універсальний конструктор вебсайтів, який дозволяє швидко
створювати привабливі вебсайти, навіть без досвіду у дизайні чи програмуванні. Wix
популярний серед блогерів, підприємців і власників малого бізнесу.
Якщо стоїть завдання створити вебсайт без великого бюджету, варто
розглянути доступні плани Wix. Адже Wix пропонує безкоштовні та платні плани,
сотні шаблонів дизайну, вбудовану оптимізацію пошукових систем і повний набір
затребуваних функцій, які допоможуть створити функціональну та привабливу
присутність в Інтернеті.
Відгуки про Wix здебільшого позитивні, користувачі високо оцінюють простоту
використання та просте налаштування.
Переваги та недоліки використання конструктора вебсайтів Wix зображено на
рис. 2.10.
52
Рис. 2.10. Плюси та мінуси платформи Wix
Одним із найкращих атрибутів Wix є його інтерфейс перетягування, який
дозволяє легко додавати вміст і створювати вебсайт без жодного досвіду
програмування. Він поставляється з більш ніж 500 настроюваними шаблонами
(рис. 2.11).
Рис. 2.11. Шаблони Wix
53
Wix надає вбудовані інструменти SEO, які допоможуть покращити рейтинг
вебсайту на сторінках результатів пошуку. Крім того, доступно понад 300 інтеграцій
додатків, тож можна додавати розширені функції на свій вебсайт, не знаючи
програмування.
Wix також пропонує безкоштовний план, який дає вам доступ до більшості
функцій платформи, хоча цей план має чимало недоліків, про які ми розповімо нижче.
Хоча Wix пропонує багато функцій, є деякі недоліки, які слід враховувати.
Одним із недоліків є те, що Google Analytics недоступний у безкоштовних планах або
планах Combo.
Більшість планів Wix мають обмеження на обсяг пам’яті, що означає, що з часом
доводиться переходити на дорожчий план.
Безкоштовний план також матиме рекламу Wix, і вебсайт не зможе мати власне
доменне ім’я. Замість цього на сайті буде написано mysite.wix.com.
Необхідно ретельно обирати шаблон Wix, оскільки не можна змінювати
шаблони після запуску сайту. Є можливість внести деякі зміни в дизайн у своєму
існуючому шаблоні, але якщо потрібно зробити повністю редизайн вебсайту,
потрібно буде розпочинати з нуля.
Wix пропонує понад 800 шаблонів дизайну, що значно більше, ніж
альтернативні платформи, такі як Squarespace і GoDaddy Website Builder. Тим не
менш, ті, хто шукає високий ступінь гнучкості дизайну, можуть бути не повністю
задоволені обмеженнями налаштування шаблонів Wix.
Нарешті, незважаючи на те, що Wix пропонує цілодобову підтримку клієнтів за
допомогою електронної пошти та послуги зворотного дзвінка, час відповіді не завжди
швидкий.
Wix пропонує три різні редактори для створення вебсайту. Кожен із них має
певні переваги.
Редактор Wix Artificial Design Intelligence (ADI) ідеально підходить для
новачків, які не знають, з чого почати. Wix ADI задає кілька запитань, а потім за лічені
хвилини створює базовий сайт.
54
Другий редактор – стандартний редактор Wix. За допомогою цієї опції
користувач обирає шаблон і налаштовує його відповідно до своїх потреб за
допомогою стандартного редактора Wix, що використовує функцію перетягування.
Також можна розпочати із редактора ADI, а потім у будь-який час перейти до
стандартного редактора.
Третій редактор – Editor X. Він представлений у 2020 році та дозволяє
створювати повністю адаптивний вебсайт, який чудово виглядає та працює на всіх
типах пристроїв. Editor X був розроблений з урахуванням дизайнерів і має повний
набір розширених можливостей, включаючи масштабовані розміри шрифтів, макет
сітки, стек і масштаб медіа, розширене керування розміром тощо.
Ці зручні редактори дозволяють швидко додавати або видаляти вміст,
змінювати шрифт і персоналізувати вебсайт без знання мов кодування завдяки
функції перетягування.
Приклади вебсайтів створених за допомогою конструктора Wix зображено на
рис. 2.12.
Рис. 2.12. Приклади вебсайтів на платформі Wix
55
Проаналізувавши інформацію про існуючі вебконструктори для подальшої
роботи над вебсайтом музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів» було обрано Wix.
Висновки до розділу
Досліджено етапи створення вебсайту музею. Адже запорукою якісної та
успішної роботи вебсайту є дотримання основних етапів його створення, таких як:
планування, створення інформаційної архітектури, дизайн, реалізація, маркетинг і
підтримка. Незалежно від кінцевої мети вебсайту, будь то бізнес-присутність
компанії в Інтернеті чи веб-додаток, етапи їх створення відносно однакові.
Здійснено аналіз програмного забезпечення для обробки графічної іноформації
під час створення контенту вебсайту. У ході створення вебсайту музею магнітного
запису АТ «Науково-дослідний інститут електромеханічних приладів» використовувались
графічні редактори як для векторної, так і для растрової графіки. А саме Adobe Photoshop та
Adobe Illustrator.
Photoshop – це програмне забезпечення, яке можна використовувати для
фотографії, графічного дизайну, цифрового мистецтва тощо.
Adobe Illustrator – це потужна програма для створення векторної графіки,
запропонована корпорацією Adobe. Будь-хто, незалежно від художніх чи
комп’ютерних здібностей, може використовувати Illustrator для малювання фігур і
ліній, створення тексту або імпорту графіки та зображень. Можна використовувати
Illustrator, щоб зробити макет для книги, брошури, буклету чи будь-якого іншого виду
поліграфічної та цифрової продукції.
Проведено аналіз платформ для створення вебсайту. Створення вебсайту стало
набагато простішим і дешевшим, ніж це було раніше, завдяки широкому спектру
зручних для користувача платформ та конструкторів вебсайтів. Існують навіть
конструктори сайтів, призначені для певних цілей, наприклад для магазинів
електронної комерції та блогів. Найкращі конструктори вебсайтів прості у
використанні, доступні за ціною та дозволяють розвиватися.
56
Найпопулярніші варіанти включають шаблони або теми, тож у користувача є
початкова точка дизайну. Це значно полегшує додавання власних зображень або
вмісту, а потім швидку публікацію на вебсайті. Більшість конструкторів вебсайтів є
комплексними рішеннями, які включають вебхостинг, реєстрацію домену та
вбудований редактор за одну щомісячну плату.
Проаналізувавши інформацію про існуючі вебконструктори для подальшої
роботи над вебсайтом музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів» було обрано Wix.
Wix – це універсальний конструктор вебсайтів, який дозволяє швидко
створювати привабливі вебсайти, навіть без досвіду у дизайні чи програмуванні. Wix
популярний серед блогерів, підприємців і власників малого бізнесу.
Якщо стоїть завдання створити вебсайт без великого бюджету, варто
розглянути доступні плани Wix. Адже Wix пропонує безкоштовні та платні плани,
сотні шаблонів дизайну, вбудовану оптимізацію пошукових систем і повний набір
затребуваних функцій, які допоможуть створити функціональну та привабливу
присутність в Інтернеті.
57
РОЗДІЛ 3
ПРАКТИЧНА РЕАЛІЗАЦІЯ ВЕБСАЙТУ МУЗЕЮ МАГНІТНОГО ЗАПИСУ
АТ «НАУКОВО-ДОСЛІДНИЙ ІНСТИТУТ ЕЛЕКТРОМЕХАНІЧНИХ
ПРИЛАДІВ»
3.1. Концепція вебсайту музею магнітного запису
У світі філософії концепція – це розумова проекція однієї чи кількох ідей.
Поняття можна описати за допомогою певних властивостей, за допомогою яких ви
можете пов’язати його з іншими поняттями. Концепція зазвичай поєднує в собі кілька
думок. Концепція – це не одна ідея, це система взаємопов’язаних ідей. Хороша
концепція приваблює інші ідеї, викликає інші ідеї. Хороша концепція змушує речі
ставати на свої місця.
Концепції також можна знайти у світі мистецтва. У мистецтві є навіть ціла
галузь, яка називається концептуальним мистецтвом. Це мистецтво, де ідея
важливіша за естетичні, матеріальні чи технічні міркування.
Отже, концепція – це те, що можна виразити словами. Концепція – це те, що
може привести до кількох інтерпретацій дизайну.
Концепція вебсайту допомагає чітко розуміти, як розвиватись, задовольняти
потреби клієнтів та просувати бренд.
Концепція сайту – це своєрідний документ, що визначає шлях розвитку
Інтернет-проєкту. Він включає аналіз ринку, конкурентів, цільової аудиторії, товарні
пропозиції і масу інших досліджень. Спираючись на зібрані дані, створюється
технічна концепція сайту, що дозволяє сформувати єдиний образ та бачення проєкту.
У такому випадку Інтернет-ресурс створюється з урахуванням усіх вимог, і повністю
орієнтований на цільову аудиторію [16].
Розробка концепції потрібна щоб у подальшому підготувати технічне завдання,
створення дизайну і написання коду. Фахівці, спираючись на концепцію, чітко
58
розуміють свої завдання, оскільки є явне уявлення, як має виглядати сайт, який
функціонал буде і таке інше [16].
Концепція сайту складається з кількох етапів. Головне її завдання полягає у
формуванні загального бачення проекту. Насправді, це докладний опис майбутнього
вебсайту. На фінальній стадії можна буде порівняти реальні результати із закладеною
концепцією. Звичайно, вони повинні повністю збігатися [16].
Маркетингова концепція сайту передбачає повний аналіз, а також вибір
необхідних інструментів. Чим докладніше описується майбутній проект, тим менше
буде правок та неточностей [16].
Існує кілька етапів створення концепції. Що входить у розробку: створення
брифів, докладне вивчення цільової аудиторії, розробка мудборду. І лише потім
створюється візуальна частина та продумується графічна концепція сайту. На
кожному етапі збираються необхідні дані, формується загальне бачення
позиціонування бренду і все формується в єдину концепцію [16].
Спочатку потрібно обговорити із замовником усі деталі та зрозуміти, як він
бачить свій майбутній вебсайт. І тому створюється бриф – технічна документація,
своєрідна анкета, у якій прописуються все важливі аспекти. Якщо компанія має
брендбук, його варто вивчити в ході складання брифа. В такому випадку сайт буде
оформлений у фірмовому стилі з дотриманням усіх вимог. У ході розробки брифа
ставляться основні цілі та завдання [16].
Маркетингова концепція сайту є важливою складовою створення ефективного
веб-ресурсу. Вивчення цільової аудиторії – «кит», на якому стоїть весь маркетинг.
Необхідно зібрати всю інформацію про клієнтів, конкурентів, детально вивчити
ринок. Цільова аудиторія – це основний ресурс, який бренд монетизує. Але тільки в
тому випадку, якщо ЦА правильно підібрано [16].
Мудборд – це добірка графічних елементів, різних зображень, кольорів,
референсів та інших елементів, що допомагають дизайнеру сформувати візуальний
вигляд. По суті проводиться розробка креативної концепції сайту. Дизайнери
використовують різноманітні інструменти для підбору елементів. У тому числі
спираючись на конкурентів, цільову аудиторію та інші зібрані дані. Мудборд
59
допомагає замовнику чітко побачити, як виглядатиме його майбутній сайт, а також
сформуватиме концепцію [16].
На цьому етапі, коли зібрано всі дані, створено мудборд, у дизайнера
формується бачення цілісної картини. Якщо вже є готовий зразок, можна відразу на
ньому показати майбутню стилістику та концепцію. Якщо її немає, він обов’язково
створюється після створення концепції. Після затвердження до роботи приступають
програмісти, а дизайнер із нарисів та загального бачення починає формувати робочий
сайт [16].
Після чітко сформульованої концепції сайту, узгодження кожного етапу з боку
компанії формуються технічні завдання. Це детальний план робіт із докладними та
чіткими інструкціями, які використовують фахівці. Технічне завдання формується,
спираючись на розроблену концепцію веб проекту. Це допомагає не тільки швидше
та якісніше скласти ТЗ, але й виключити помилки, непорозуміння та скоротити
кількість правок. У результаті зберігається час, гроші та нерви [16].
Крім технічної складової візуального оформлення сайту, необхідно продумати
план просування. Ще на етапі створення проєкту потрібно ретельно продумати, які
інструменти будуть використовуватись для розвитку компанії, підвищення
впізнаваності та популярності. Маркетингова концепція сайту передбачає
опрацювання стратегії просування, оскільки частину інструментів необхідно
інтегрувати на сайті [16].
Концепція музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів».
Цілі та завдання сайту: підвищення впізнаваності серед аудиторії, залучення
нової потенційної аудиторії та відвідувачів музею. Візуальна демонстрація своїм
відвідувачам, що вони можуть очікувати під час свого візиту.
Потенційна аудиторія сайту: зацікавлені люди, необмежений вік та дохід.
Функціонал сайту: інформаційне наповнення і структура вебсайта повинна
насамперед задовольняти потреби «зовнішніх» користувачів, формуючи
інформаційний образ. Необхідно прагнути до ілюстрування основного (текстового)
60
інформаційного наповнення різними мультимедійними вставками там, де це можливо
і доцільно [18].
Надайте своїм відвідувачам різні варіанти зв’язку з вами. Деякі люди можуть
віддати перевагу швидкому телефонному дзвінку, тоді як інші можуть вибрати стару
добру форму.
Музеї часто зобов’язані обслуговувати широку аудиторію, включаючи людей з
обмеженими можливостями. Це дороге, виснажливе завдання, але також дуже
корисне. Тому при створенні вебсайту можна скористатись принципами
інклюзивності.
Розділ «Експозиція» повинен містити не тільки загальну історичну довідку по
пам’ятці, а також стати повноцінним джерелом для огляду і дослідження. Користувач,
який входить в цей розділ повинен мати зручний пошуковий механізм розробленого
електронного каталогу музейних предметів, щоб можна було знайти експонат, який
зацікавив відвідувача за певними особливостями – періодом, видом, авторами. Цей
розділ сайту повинен бути детально продуманим в простоті використання його
користувачами [9].
Вимоги до контенту: важлива інформація, така як музейні колекції, події, що
відбуваються, розташування та напрямок, ресурси для викладачів, має бути
легкодоступною. Фото та відео повинні бути в хорошій якості.
Створюючи вміст для вебсайту, важливо дотримуватися передових практик
копірайтингу, таких як:
– відсутність орфографічних або граматичних помилок;
– коротко і лаконічно (без зайвих вигадок);
– надавати практичні поради;
– використовувати синоніми, щоб уникнути надмірності;
– використовуйте емоційні тригери, гачки та обриви.
Плани та можливості розвитку: пошукова оптимізація є одним із найбільш
економічно ефективних способів залучення нових клієнтів. При правильному
виконанні стратегія оптимізації пошукових систем може допомогти залучити
потенційних клієнтів, не витрачаючи коштів.
61
Після створення нового вебсайту важливо додати домен до облікового запису
Google Search Console, де можна надсилати запити на індексування, контролювати
ефективність і виправляти будь-які проблеми, пов’язані з пошуком.
Дослідження ключових слів допомагає визначити, на які ключові слова чи теми
слід орієнтуватися, окрім назви установи.
Те, як виглядає вебсайт і як люди з ним взаємодіють, може мати великий вплив
на SEO.
Ось чому ваш вебсайт повинен надавати:
– швидке завантаження сторінок;
– інтуїтивно зрозумілий дизайн і навігація;
– розбірливий текст;
– зображення та медіа, що привертають увагу;
– зручний мобільний інтерфейс.
Для більшості компаній найпопулярнішими та ефективними платними
рекламними каналами є Google Ads і реклама в соціальних мережах, таких як
Facebook.
Google Ads має три основні типи оголошень: текстові оголошення , медійні
оголошення та відеореклама.
3.2. Розробка структури та дизайну вебсайту
Чітка та логічна структура – це перше, про що потрібно пам’ятати, перш ніж
почати роботу над вебсайтом. Правильна структура вебсайту позитивно впливає на
рейтинг у пошуковій системі та на сприйняття вебсайту користувачами.
Структура вебсайту, яку також називають архітектурою сайту, стосується того,
як сторінки сайту та його вміст структуровані по відношенню до іншого вмісту на
сторінці та між сторінками. Структура сайту зосереджена на тому, як вміст
пов’язаний один з одним, як він згрупований і як відвідувачі сприймають вміст. Це
також впливає на те, як сканери пошукової системи взаємодіють із вебсайтом [23].
62
Хороша структура сайту може покращити взаємодію з користувачем вебсайту,
оскільки вона допомагає надавати відвідувачам необхідну інформацію, полегшуючи
їм навігацію до інших відповідних сторінок.
Створення впорядкованої структури сайту полегшує відстеження сторінок
сайту. Це допоможе легше знайти повторюваний вміст і визначити важливі сторінки,
які можуть бути відсутні на сайті.
Структура сайту зазвичай починається з того, як основні сторінки
взаємопов’язані. У більшості випадків основна навігація базується на ієрархічній
структурі. Ієрархічна структура створює деревоподібну форму при витягуванні. На
рис. 3.1. зображено приклад ієрархічної структури вебсайту.
Рис. 3.1. Ієрархічна структура вебсайту
Ієрархічна структура вебсайту вважається найкращою практикою для SEO, але
також використовуються деякі інші структури вебсайту, зокрема послідовна
структура, структура бази даних і матрична структура. Проте вони є не такими
поширеними.
Одним із головних елементів у структурі вебсайту є його головна сторінка.
Вона має діяти як центр навігації для відвідувачів. Це означає, що необхідно
посилатися на найважливіші сторінки з головної сторінки вебсайту. Роблячи це
63
відвідувачі, швидше за все, потраплять на ті сторінки, на які установа хоче, щоб вони
потрапили.
Окрім добре структурованої домашньої сторінки, важливо також створити
чіткий шлях навігації на вашому сайті. Навігація по всьому сайту складається з двох
основних елементів: меню та навігаційних шляхів.
Меню вебсайту є найпоширенішим допоміжним засобом для навігації. Існує
чотири основних його типів.
Верхнє або головне меню – це основна навігаційна панель вебсайту,
розташована у верхній частині кожного веб-сайту. Як правило, логотип розташований
ліворуч і посилається на домашню сторінку, тоді як решта навігації розташована
праворуч. У деяких випадках головне меню розташоване збоку вебсайту; однак
більшість людей очікує знайти його у верхньому правому куті, що є ідеальним місцем
з точки зору взаємодії з користувачем.
Другий тип – це меню нижнього колонтитула. На деяких вебсайтах є детальне
меню нижнього колонтитула, тоді як на інших воно просте, лише з кількома
доречними посиланнями. Жоден підхід за своєю суттю не є правильним чи
неправильним; оптимальне рішення залежить від цілей і складності вебсайту.
У більшості випадків вважається хорошою практикою включати в меню
нижнього колонтитула посилання на найважливіші сторінки сайту. Деякі люди
прокручують весь шлях до меню нижнього колонтитула, якщо їм важко знайти те, що
вони шукають, у верхньому меню або в самому вмісті сторінки. Меню нижнього
колонтитула вебсайту повинно містити принаймні посилання на юридичні сторінки
та спосіб зв’язатися з власником сайту.
Третій тип, який часто зустрічається на сайтах електронної комерції та інших
сайтах із великим вмістом, – це бічна панель. Як випливає з назви, бічні панелі
розташовані ліворуч або праворуч на сторінці. Знайомим прикладом навігації на
бічній панелі є класичний макет блогу, де вміст знаходиться ліворуч, а бічна панель –
праворуч. У цьому прикладі бічна панель зазвичай займає приблизно 1/4 ширини
сторінки.
64
Бічні панелі зазвичай використовуються для категоризації вмісту, наприклад
статей або дописів у блогах. Важливі посилання на сторінки верхнього рівня краще
розташовувати у верхньому та нижньому меню, де вони більш помітні порівняно з
боковою панеллю.
Четвертий тип навігації вебсайту – це ієрархічні посилання, які показують, як
сторінки вкладені одна в одну. Такий тип зазвичай можна побачити в блогах і на
сайтах електронної комерції. Вони корисні, оскільки допомагають користувачам
орієнтуватися в певній категорії інтересів.
У більшості випадків у контексті взаємодії з користувачем простота є
ключовою. Особливо це стосується навігації вебсайтів. Безладна або надто складна
навігація може викликати плутанину або невизначеність; у гіршому випадку
користувач повністю вийде з сайту, якщо не зможе швидко знайти те, що шукає.
Вважається, що найкраще обмежити головне меню навігації не більше ніж сімома
посиланнями.
Проаналізувавши інформацію про навігаційну систему вебсайтів, було
прийнято рішення створити горизонтальне меню для вебсайту музею.
На рис. 3.2. зображено структуру вебсайту музею магнітного запису АТ
«Науково-дослідний інститут електромеханічних приладів».
Рис. 3.2. Структура вебсайту
65
Ще одним дуже важливим етапом створення вебсайту є дизайн. На цьому етапі
важливо обрати хороший шрифт із оптимальним розміром для заголовків та текстової
інформаціїї, а також якісно підібрати палітру кольорів.
Колір – це унікальна ідентичність: колір сам по собі є мовою. Колірна схема
вебсайту може викликати низку реакцій – змінити уявлення користувачів про
компанію чи установу, привернути їхню увагу, спонукати виконати певне завдання,
зацікавити їх вмістом або викликати ряд інших емоцій.
Контраст є найважливішим аспектом, пов’язаним із читабельністю тексту.
Колір фону вебсайту та колір тексту повинні мати різкий контраст, щоб глядачі могли
краще читати вміст сайту. Найкраща стратегія – використовувати світлий фон із
темним текстом або навпаки.
Для створення вебсайту музею було обрано палітру кольорів зображену на
рис. 3.3.
Рис. 3.3. Палітра кольорів
Основним акцентуючим кольором вебсайту є помаранчевий. Помаранчевий
колір має дуже цікаве психологічне значення, оскільки він поєднує в собі силу та
енергію червоного з дружелюбністю та веселістю жовтого. Помаранчевий також
відомий як колір мотивації, що приносить позитивне ставлення та загальний інтерес
до життя.
66
Помаранчевий колір пов’язаний із соціальною комунікацією, стимулюючи
двосторонні розмови. Це теплий і приємний колір, який стимулює як фізично, так і
розумово, тому спонукає людей думати та говорити [22].
Так як візуальні елементи мають помітну колірну палітру, для фону було
використоно білий колір.
Хоча використання більш світлого фону може здатися передбачуваним, це
універсальний вибір, який підходить для більшості типів вебсайтів.
Наступним важливим кроком у дизайні вебсайту є підбір правильних шрифтів.
Типографіка та вибір шрифту не можуть і не повинні залишатися поза думкою
під час проєктування та розробки веб-сайту. Вони мають далекосяжний вплив на
дуже багато важливих елементів, включаючи досвід користувача, сприйняття
користувача, читабельність і навіть настрій.
Вибираючи шрифти для вебсайту, безумовно, необхідно дотримуватися
балансу. Якщо уся текстова інформація однакова, важко відрізнити розділи вмісту
або привернути увагу до чогось конкретного [21].
Але якщо у використано занадто багато шрифтів, вебсайт може стати надто
нагромандженим і відволікаючим.
Шрифти без засічок стали більш поширеними для тексту, що відображається в
Інтернеті, оскільки дрібні деталі, як-от засічки, можуть зникати або виглядати занадто
великими на дисплеях із низькою роздільною здатністю. Тим не менш, шрифт із
засічками у деяких випадках може бути більш доцільним.
Розмір тексту також відіграє важливу роль у визначенні взаємодії з
користувачем. Працюючи за комп’ютером або ноутбуком, люди сидять на відстані
приблизно 20-22 дюймів від своїх екранів. Це слід мати на увазі, вирішуючи
типографічний дизайн вебсайту. Текст, який використовується на вебсайті, має бути
розбірливим і достатньо великим, щоб його було чітко читати. Якщо використані
шрифти нерозбірливі або дрібні, і користувачеві доводиться масштабувати, щоб
прочитати вміст, це, безперечно, матиме негативний вплив на взаємодію з
користувачем.
67
Поряд з розміром тексту також важливий інтервал між рядками та словами.
Дотримання точної відстані між символами та словами матиме величезний вплив на
вигляд вмісту на вебсайті та його читабельність. Додатковий проміжок між літерами
чи словами спростить читання, але зробить вміст занадто довгим для читання, що
заважає читачам читати далі.
Вирівнювання тексту на сторінці сайту також є орієнтиром для читачів.
Вирівняний текст легше читати та слідувати. Вирівнювання тексту вирішить, як
глядач пройде веб-сайт і чи продовжить він читати, чи залишить сторінку.
Вирівняний текст, який доповнює структуру та потік вмісту, допомагає забезпечити
чудову взаємодію з користувачем.
Під час створення вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів» для заголовків та основного тексту було
обрано шрифт Open Sans. Проте із різною товщиною накреслення.
Open Sans (рис. 3.4) – це гуманістичний шрифт без зарубок, розроблений
Стівом Меттесоном, директором з типів Ascender Corp. Ця версія містить повний
набір символів 897, який включає стандартні набори символів ISO Latin 1, Latin CE,
грецькі та кириличні символи. Open Sans був розроблений з вертикальним акцентом,
відкритими формами та нейтральним, але дружнім виглядом. Він був оптимізований
для друку, Інтернету та мобільних інтерфейсів і має чудові характеристики
розбірливості своїх літер [17].
Рис. 3.4. Шрифт Open Sans
68
3.3. Проєктування вебсайту музею магнітного запису
Для створення вебсайту музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів» скористались обраною платформою Wix. Для початку
роботи було здійснено авторизацію та створено новий сайт.
Платформа Wix дозволяє працювати із вже існуючими шаблонами, що значно
спрощує процес створення вебсайтів. Інсує безліч безкоштовних та платних
можливостей.
Для роботи було обрано існуючий шаблон, який дозволяє розміщувати на
вебсайті найрізноманітніший вміст, використовуючи будь-які доступні розділи та
блоки (рис. 3.5).
Рис. 3.5. Шаблонні розділи
Далі було здійснено основні налаштування зовнішнього вигляду вебсайту. Було
введено назву майбутнього вебсайту, задано основні та другорядні кольори, колір
фону та шрифт, які було обрано на етапі планування дизайну (рис. 3.6).
69
Рис. 3.6. Налаштування дизайну сайту
Після цього було здійснено оцифрування логотипу музею, який був наданий
лише у растровому форматі. Для якісного використання, без спотворень і втрат, його
було переведено у векторний формат за допомогою програмного середовища
Adobe Illustrator (рис. 3.7).
Рис. 3.7. Оцифрування логотипу
Щоб спростити роботу відвідувачів на вебсайті, потрібно спростити навігацію.
Коли користувачі заходять на сайт, вони шукають інформацію про музей, і дуже
важливо, щоб вони могли легко переходити до ключових сторінок [19].
Тому було додано не велику кількість нових сторінок (рис. 3.8) та розміщено їх
у горизонтальному меню.
70
Рис. 3.8. Сторінки вебсайту
Наступний етап – створення дизайну головної сторінки. Було додано візуальні
елементи, щоб зробити вебсайт музею більш привабливим.
Є два основні візуальні елементи, які можна використовувати на вебсайті, щоб
зацікавити: фотографії та відео.
Фотографії є найпоширенішими візуальними елементами, які можна побачити
на вебсайті музею, і вони дають потенційним відвідувачам можливість побачити
об’єкт зсередини.
Щоб створити ефектний вебдизайн необхідно інвестувати у візуальні елементи.
Вони зроблять сайт популярним і допоможуть зберегти більше трафіку на ньому.
У верхій частині головної сторінки вебсайту музею було розміщено фонове
відео та назву, щоб відвідувач відразу розумів, де він знаходиться, адже у навігації
вказана лише абревіатура (рис. 3.9).
71
Рис. 3.9. Оформлення головної сторінки
Було додано декілька блоків шаблону та заповнено їх текстовою та графічною
інформацією.
Було створено дизайн нижньої частини вебсайту, в якій розміщено основні
контактні дані.
Результат створення головної сторінки вебсайту наведено у дод. А.
Таким ж чином та використовуючи схожі елементи, щоб досягти відчуття
єдності дизайну, було створено і наступні сторінки вебсайту, які наведено у дод. Б-Г.
Варто відмітити, що у ході виконання кваліфікаційної роботи розроблено лише
скелет вебсайту, який наповнено загальною інформацію. Після закінчення роботи
його обов’язково необхідно наповнювати новим актуальним контентом.
Дуже важливо підтримувати зворотній зв’язок із відвідувачами, враховувати
їхні побажання та думки. Тому з метою отримання повідомлень від користувачів було
створено контактну форму (рис. 3.10).
Рис. 3.10. Контактна форма для зворотнього зв’язку
72
Швидкість реагування вебдизайну підвищує зручність вебсайту для
користувачів і може полегшити людям роботу з сайтом та пошуком необхідної
інформації. Тому дизайн вебсайту повинен бути адаптованим під будь-який пристрій.
Адаптивний вебсайт змінює макет, щоб запропонувати досвід роботи на основі
пристрою, що використовується, особливо ідеальний для перегляду з мобільного [20].
Адаптивний мобільний вебсайт включає такі елементи дизайну, як:
– читабельний текст без збільшення;
– достатній простір для активних елементів;
– немає горизонтальної прокрутки.
Важливість адаптивного вебдизайну полягає в тому, що він пропонує
оптимізований досвід перегляду.
Платформа Wix дозволяє з легкістю керувати оформленям як комп’ютерної, так
і мобільної версії вебсайту.
На рис. 3.11 зображено мобільну версію вебсайту музею магнітного запису
АТ «Науково-дослідний інститут електромеханічних приладів».
Рис. 3.11. Мобільна версія вебсайту
73
Висновки до розділу
Розроблено концепцію, структуру, дизайн та створено макет вебсайту музею
магнітного запису АТ «Науково-дослідний інститут електромеханічних приладів».
З’ясовано, що концепція сайту – це своєрідний документ, що визначає шлях
розвитку Інтернет-проєкту. Він включає аналіз ринку, конкурентів, цільової
аудиторії, товарні пропозиції і масу інших досліджень. Спираючись на зібрані дані,
створюється технічна концепція сайту, що дозволяє сформувати єдиний образ та
бачення проєкту. У такому випадку Інтернет-ресурс створюється з урахуванням усіх
вимог, і повністю орієнтований на цільову аудиторію [16].
Розробка концепції потрібна щоб у подальшому підготувати технічне завдання,
створення дизайну і написання коду. Фахівці, спираючись на концепцію, чітко
розуміють свої завдання, оскільки є явне уявлення, як має виглядати сайт, який
функціонал буде і таке інше [16].
Довели, що чітка та логічна структура – це перше, про що потрібно пам’ятати,
перш ніж почати роботу над вебсайтом. Правильна структура вебсайту позитивно
впливає на рейтинг у пошуковій системі та на сприйняття вебсайту користувачами.
Переконавшись, що сайт має гарну структуру, можна оптимізувати взаємодію з
користувачем, полегшивши навігацію. Також можна покращити ефективність SEO,
підвищивши контекстну релевантність сторінок, структуру внутрішніх посилань і
можливість сканування сайту.
Ще одним дуже важливим етапом створення вебсайту є дизайн. На цьому етапі
було обрано хороший шрифт із оптимальним розміром для заголовків та текстової
інформаціїї, а також якісно підібрано палітру кольорів.
Під час створення вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів» перевагу було надано шрифту Open Sans, як
для основного тексту, так і для заголовків. Проте із різною товщиною накреслення.
Адже ті самі шрифти, лише виділені там, де потрібно, роблять вміст чистішим і
зручнішим для читання.
74
Було практично реалізовано вебсайт музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів». Для роботи було обрано існуючий
шаблон, який дозволяє розміщувати на вебсайті найрізноманітніший вміст,
використовуючи будь-які доступні розділи та блоки. Платформа Wix дозволяє
працювати із вже існуючими шаблонами, що значно спрощує процес створення
вебсайтів. Інсує безліч безкоштовних та платних можливостей.
Було створено адаптивний дизайн вебсайту, який буде зручно переглядати із
будь-якого пристрою. Важливість адаптивного вебдизайну полягає в тому, що він
пропонує оптимізований досвід перегляду.
75
ВИСНОВКИ
1. Проаналізовано основні терміни та поняття дослідження. З’ясовано, що
вебсайт – це набір загальнодоступних взаємопов’язаних вебсторінок, які мають
спільне доменне ім’я.
2. Визначено особливості створення вебсайтів музеїв. Досліджено, що єдиних
вимог з формування інформаційного контенту і структури офіційного сайту музейної
установи не існує. Разом з тим, враховуючи завдання, які ставляться перед Інтернет-
джерелом вченими і суспільством формуються певні рекомендації, пов’язані з
розробкою структури та змісту інформаційного контенту. Організація віртуального
середовища повинна бути продумана до дрібниць, кожен дюйм екрану повинен бути
заповнений цікавою, актуальною, достовірною інформацією, це дасть можливість у
перспективі виховувати у громадян культуру спілкування, навчить аналізувати й
обмірковувати різні типи джерел в мережі Інтернет [9].
3. Здійснено аналіз вебсайтів музеїв. Здійснивши аналіз ряду вебресурсів
дійшли висновку, що українських музеїв аналогічної тематики не так багато і деякі із
них взагалі не мають власного вебсайту.
Вебсайти науково-технічних музеїв дещо відрізняються своїм оформленням від
сайтів картинних галерей та деяких інших типів музеїв.
Вони мають менш привабливий вигляд, зазвичай старомодне оформлення та
невдале структурування інформації. Часто такі вебсайти занедбані та тривалий час не
оновлюють інформаційне наповнення.
4. Визначено основні етапи створення вебсайту музею. Адже запорукою якісної
та успішної роботи вебсайту є дотримання основних етапів його створення, таких як:
планування, створення інформаційної архітектури, дизайн, реалізація, маркетинг і
підтримка. Незалежно від кінцевої мети вебсайту, будь то бізнес-присутність
компанії в Інтернеті чи веб-додаток, етапи їх створення відносно однакові.
Здійснено аналіз програмного забезпечення для обробки графічної іноформації
під час створення контенту вебсайту. У ході створення вебсайту музею магнітного
76
запису АТ «Науково-дослідний інститут електромеханічних приладів» використовувались
графічні редактори як для векторної, так і для растрової графіки. А саме Adobe Photoshop та
Adobe Illustrator.
Photoshop – це програмне забезпечення, яке можна використовувати для
фотографії, графічного дизайну, цифрового мистецтва тощо.
Adobe Illustrator – це потужна програма для створення векторної графіки,
запропонована корпорацією Adobe. Будь-хто, незалежно від художніх чи
комп’ютерних здібностей, може використовувати Illustrator для малювання фігур і
ліній, створення тексту або імпорту графіки та зображень. Можна використовувати
Illustrator, щоб зробити макет для книги, брошури, буклету чи будь-якого іншого виду
поліграфічної та цифрової продукції.
Проведено аналіз платформ для створення вебсайту. Створення вебсайту стало
набагато простішим і дешевшим, ніж це було раніше, завдяки широкому спектру
зручних для користувача платформ та конструкторів вебсайтів. Існують навіть
конструктори сайтів, призначені для певних цілей, наприклад для магазинів
електронної комерції та блогів. Найкращі конструктори вебсайтів прості у
використанні, доступні за ціною та дозволяють розвиватися.
Найпопулярніші варіанти включають шаблони або теми, тож у користувача є
початкова точка дизайну. Це значно полегшує додавання власних зображень або
вмісту, а потім швидку публікацію на вебсайті. Більшість конструкторів вебсайтів є
комплексними рішеннями, які включають вебхостинг, реєстрацію домену та
вбудований редактор за одну щомісячну плату.
Проаналізувавши інформацію про існуючі вебконструктори для подальшої
роботи над вебсайтом музею магнітного запису АТ «Науково-дослідний інститут
електромеханічних приладів» було обрано Wix.
Wix – це універсальний конструктор вебсайтів, який дозволяє швидко
створювати привабливі вебсайти, навіть без досвіду у дизайні чи програмуванні. Wix
популярний серед блогерів, підприємців і власників малого бізнесу.
Якщо стоїть завдання створити вебсайт без великого бюджету, варто
розглянути доступні плани Wix. Адже Wix пропонує безкоштовні та платні плани,
77
сотні шаблонів дизайну, вбудовану оптимізацію пошукових систем і повний набір
затребуваних функцій, які допоможуть створити функціональну та привабливу
присутність в Інтернеті.
5. Розроблено концепцію, дизайн та практично реалізовано вебсайт музею
магнітного запису АТ «Науково-дослідний інститут електромеханічних приладів».
З’ясовано, що концепція сайту – це своєрідний документ, що визначає шлях
розвитку Інтернет-проєкту. Він включає аналіз ринку, конкурентів, цільової
аудиторії, товарні пропозиції і масу інших досліджень. Спираючись на зібрані дані,
створюється технічна концепція сайту, що дозволяє сформувати єдиний образ та
бачення проєкту. У такому випадку Інтернет-ресурс створюється з урахуванням усіх
вимог, і повністю орієнтований на цільову аудиторію [16].
Розробка концепції потрібна щоб у подальшому підготувати технічне завдання,
створення дизайну і написання коду. Фахівці, спираючись на концепцію, чітко
розуміють свої завдання, оскільки є явне уявлення, як має виглядати сайт, який
функціонал буде і таке інше [16].
Довели, що чітка та логічна структура – це перше, про що потрібно пам’ятати,
перш ніж почати роботу над вебсайтом. Правильна структура вебсайту позитивно
впливає на рейтинг у пошуковій системі та на сприйняття вебсайту користувачами.
Переконавшись, що сайт має гарну структуру, можна оптимізувати взаємодію з
користувачем, полегшивши навігацію. Також можна покращити ефективність SEO,
підвищивши контекстну релевантність сторінок, структуру внутрішніх посилань і
можливість сканування сайту.
З’ясували, що ще одним дуже важливим етапом створення вебсайту є дизайн.
На цьому етапі було обрано хороший шрифт із оптимальним розміром для заголовків
та текстової інформаціїї, а також якісно підібрано палітру кольорів.
Під час створення вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів» перевагу було надано шрифту Open Sans, як
для основного тексту, так і для заголовків. Проте із різною товщиною накреслення.
Адже ті самі шрифти, лише виділені там, де потрібно, роблять вміст чистішим і
зручнішим для читання.
78
Було практично реалізовано вебсайт музею магнітного запису АТ «Науково-
дослідний інститут електромеханічних приладів». Для роботи було обрано існуючий
шаблон, який дозволяє розміщувати на вебсайті найрізноманітніший вміст,
використовуючи будь-які доступні розділи та блоки. Платформа Wix дозволяє
працювати із вже існуючими шаблонами, що значно спрощує процес створення
вебсайтів. Інсує безліч безкоштовних та платних можливостей.
Було створено адаптивний дизайн вебсайту, який буде зручно переглядати із
будь-якого пристрою. Важливість адаптивного вебдизайну полягає в тому, що він
пропонує оптимізований досвід перегляду.
79
СПИСОК БІБЛІОГРАФІЧНИХ ПОСИЛАНЬ ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Базові поняття і терміни веб-технологій / [А.В. Кільченко, О.І. Поповський,
О-р. В. Тебенко, О-й. В. Тебенко, Н.М. Матросова]; Упорядник: Кільченко А.В. – К.:
ІІТЗН НАПН України, 2014. – 49 с.
2. Роль музеїв у культурному та соціально-економічному розвитку країни:
зарубіжний досвід. Аналітична записка [Електронний ресурс] // Національний
інститут стратегічних досліджень. – Режим доступу до ресурсу:
https://niss.gov.ua/doslidzhennya/gumanitarniy-rozvitok/rol-muzeiv-u-kulturnomu-ta￾socialno-ekonomichnomu-rozvitku (дата звернення 04.09.2022). – Назва з екрана.
3. Маньковська Р.В. Сучасні музейні комунікації та перспективи розвитку / Р.
В. Маньковська. // Краєзнавство. – 2013. – №3. – С. 75–83.
4. Пасічник О.Г. Основи веб-дизайну / О.Г. Пасічник, О.В. Пасічник,
І.В. Стеценко: [Навч. посіб.]. – К.: Вид. група BHV. – 2009. – 336 с.
5. Класифікація вебсайтів [Електронний ресурс] // CASES. – Режим доступу до
ресурсу: https://cases.media/article/klasifikaciya-vebsaitiv (дата звернення 11.09.2022).
6. Головне про зручність вебсайтів вебсайтів [Електронний ресурс] // CASES. –
Режим доступу до ресурсу: https://cases.media/creativepractice/article/golovne-pro￾zruchnist-vebsaitu (дата звернення 11.09.2022). – Назва з екрана.
7. Закон України «Про музеї і музейну справу» від 29 червня 1995 p. № 249/95-
4 ВР.
8. Матт Г.. Культура і гроші. Музей – підприємницька діяльність. Практичний
порадник / Матт Г., Флатц Т., Льодерер Ю. – К., 2009. – 173 с.
9. Куценко С. Сучасні тенденції в розробці структури, контенту та веб-дизайну
музейних сайтів [Електронний ресурс] – Режим доступу до ресурсу:
http://usj.udpu.edu.ua/article/view/146749 (дата звернення 15.09.2022). – Назва з
екрана.
80
10. Науково-технічні музеї [Електронний ресурс] // Музеєзнавство. – Режим
доступу до ресурсу: https://pidru4niki.com/12281128/kulturologiya/naukovo￾tehnichni_muzeyi (дата звернення 16.09.2022). – Назва з екрана.
11. Фаетон – музей техніки [Електронний ресурс] Режим доступу до ресурсу:
https://faeton.zp.ua/ (дата звернення 16.09.2022). – Назва з екрана.
12. Кросплатформність: реагуючий та адаптивний вебдизайн [Електронний
ресурс] // CASES. – Режим доступу до ресурсу:
https://cases.media/article/krosplatformnist-reaguyuchii-ta-adaptivnii-vebdizain (дата
звернення 20.09.2022). – Назва з екрана.
13. Програми для редагування зображень [Електронний ресурс] // The Gurand. –
Режим доступу до ресурсу: https://sites.google.com/site/thegurand/-i (дата звернення
20.09.2022). – Назва з екрана.
14. Робота з растровими й векторними зображеннями [Електронний ресурс] //
Adobe. – Режим доступу до ресурсу: https://helpx.adobe.com/ua/photoshop/using/image￾essentials.html (дата звернення 20.09.2022). – Назва з екрана.
15. Кращі безкоштовні платформи для сайтів [Електронний ресурс] //
PROjectSEO. – Режим доступу до ресурсу: https://project-seo.net/uk/blog-uk/krashchi￾bezkoshtovni-platformy-dlya-sajtiv/ (дата звернення 02.10.2022). – Назва з екрана.
16. Розробка концепції сайту [Електронний ресурс] // Wezom. – Режим доступу
до ресурсу: https://wezom.com.ua/ua/blog/razrabotka-kontseptsii-sajta (дата звернення
10.10.2022). – Назва з екрана.
17. Open Sans [Електронний ресурс] // Google Fonts. – Режим доступу до
ресурсу: https://fonts.google.com/specimen/Open+Sans/about (дата звернення
12.10.2022). – Назва з екрана.
18. Березко О.Л. Концепція створення веб-сайта Національного університету
«Львівська політехніка» / А.М. Пелещишин, П.І. Жежнич. [Електронний
ресурс] – Режим доступу до ресурсу: https://science.lpnu.ua/sites/default/files/journal￾paper/2017/jun/3146/12-berezko-57-65.pdf (дата звернення 29.10.2022). – Назва з
екрана.
81
19. Website Design for Museums With Eric Holter [Електронний ресурс] // Creative
Boost. – Режим доступу до ресурсу: https://creative-boost.com/designing-websites-for￾museums/ (дата звернення 12.10.2022). – Назва з екрана.
20. 7 Business Advantages of Responsive Web Design [Електронний ресурс] //
Byte9. – Режим доступу до ресурсу: https://www.thebyte9.com/responsive-web-design￾what-can-it-do-for-your-business (дата звернення 12.10.2022). – Назва з екрана.
21. Що потрібно знати про вибір потрібного шрифту? [Електронний ресурс]. –
2019. – Режим доступу до ресурсу: https://www.imena.ua/blog/suitable-font/ (дата
звернення 20.10.2022). – Назва з екрана.
22. Psychology of the colour orange [Електронний ресурс] // TheColor. – Режим
доступу до ресурсу: https://thecolor.blog/psychology-of-the-colour-orange/ (дата
звернення 20.10.2022). – Назва з екрана.
23. Site structure: the ultimate guide [Електронний ресурс] // Youast. – Режим
доступу до ресурсу: https://yoast.com/site-structure-the-ultimate-guide/ (дата звернення
20.10.2022). – Назва з екрана.
24. Р. В. Маньковська. Міжнародна рада музеїв // Енциклопедія історії України:
у 10 т. / редкол.: В. А. Смолій (голова) та ін. ; Інститут історії України НАН України. –
К. : Наукова думка, 2009. – С. 709-784.
25. Лобода С.М. Стандартизація та управління якістю. Конспект лекцій для
студентів спеціальності 186 «Видавництво та поліграфія» ОПП «Технології
електронних мультимедійних видань». / Лобода С.М – К.: НАУ, 2020. – 92 с.
26. Денисенко С.М. Теорія кольору. Навчальний посібник. [Електронне
видання]. К.: Вид-во Нац. Авіац.ун-ту «НАУ-друк», 2021. – 154 с.
27. Основи типографіки: лабораторний практикум: [Електронне видання] /
уклад.: Денисенко С.М. – К.: НАУ, 2021. – 38 с.
82
Додаток А
Головна сторінка вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів»
Рис. А.1. Дизайн головної сторінки
83
Додаток Б
Розділ «Відео» вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів»
Рис. Б.1. Дизайн сторінки із відеоматеріалами
84
Додаток В
Розділ «Статті» вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів»
Рис. В.1. Дизайн сторінки із статтями
85
Додаток Д
Фрагменти сторінок вебсайту музею магнітного запису АТ «Науково-дослідний
інститут електромеханічних приладів»
Рис. Д.1. Фрагмент сторінки «Історія музею»
Рис. Д.2. Фрагмент сторінки «Експонати»