Volume 2 (2) 2021Professional Art Education

УДК УДК 004.92:004.73

DOI 10.34142/27091805.2021.2.02.05

РОЗРОБКА UX/UI ДИЗАЙНУ САЙТУ ФАКУЛЬТЕТУ

МИСТЕЦТВ ХНПУ ІМЕНІ Г.С.СКОВОРОДИ

доктор педагогічних наук, професор ка-

федри дизайну Харківського національ-

ного педагогічного університету імені

Г.С. Сковороди,

Харків, Україна

email: melennaznv@gmail.com

https://orcid.org/0000-0002-3083-1070

В роботі розглянуто тенденції UX/UI дизайну освітніх сайтів закладів вищої освіти в Україні.

Проаналізовано сайти факультетів мистецької освіти щодо юзабіліті та структурних елементів. Вио-

кремлено необхідні аспекти для розробки дизайну сайту факультету мистецтв Харківського національ-

ного педагогічного університету імені Г.С. Сковороди. Використовувалися такі методи дослідження, як

предметно-аналітичний для вивчення структурних та ілюстративних джерел; термінологічний прий-

ом для однозначного розуміння істотних ознак дизайну; психологічний метод вербального визначення

характеру зорового відчуття від фінальної стадії розробки дизайну сайту. Виявленні сучасних тенденцій

UX/UI дизайну у розробці сайтів мистецького спрямування. Виокремленні необхідних структурних еле-

ментів розробки сайту факультету мистецтв Харківського національного педагогічного університету

імені Г.С. Сковороди.

Результати дослідження довели, що для розробки UX/UI дизайну сайту факультету мистецтв

ХНПУ імені Г.С. Сковороди необхідно використовувати різні структурні елементи такі як: емоційний ди-

зайн (використання візуально «живих» елементів для спонукання виникнення почуттів та реакції від

користувачів); геометрична структура (використання класичних геометричних елементів для акцен-

туації); дизайн із розділеним екраном (використання умовно розділеного екрану на дві панелі контенту,

що згортається у вертикальний блок в адаптивному дизайну); збільшення змісту тексту (повернення

багаторівневих заголовків тощо); нові шрифти (уникнення класики і використання засічок, зміна розміру

від слова до слова, використання напівпрозорого шрифту із перекриттям непрозорого, додавання жирно-

го та курсивного нарису); адаптація під нові гаджети (забезпечення якісними збільшеними зображення-

ми для адаптивного дизайну); унікальна мікровзаємодія (наявність тактильних оглядів у адаптивному

дизайні, тобто можливість змінювати відтінок для різних станів програми, візуалізацію завантаження

потрібної сторінки, додавання анімації під час переходу, наявність оригінальної реакції на натискання

певних кнопок на сайті).

Ключові слова: UX/UI дизайн, тенденції UX/UI дизайну, юзабіліті, структура сайту, айдентика,

адаптивний дизайн.

Постановка проблеми та її зв’язок з важли-

вими науковими та практичними завданнями.

Пандемія COVID-19 змусила заклади освіти пере-

йти на дистанційну та змішану форму навчання.

Багато закладів вищої освіти у всьому світі запу-

стили віртуальні університети (Кембриджський,

Оксфордський та інші університети), що значно

розширило доступ до навчання абітурієнтів з

будь-якої точки світу та стрімко підвищило кон-

куренцію серед закладів освіти. Освітні послу-

ги активно пропонуються як під час прийому

абітурієнтів так і у весь період навчання і чим

зручніше, зрозуміліше та візуально комфортно

розроблено сайт університету, факультету, ка-

федри, тим вище імідж університету на загаль-

носвітовій арені, і, відповідно, більше шансів

зацікавити потрібну цільову аудиторію. Сьогод-

ні, одним із провідних завдань університетів є

підвищення їх конкурентоспроможності на рин-

ку освітніх послуг шляхом постійної роботи над

розвитком та підтримкою іміджу та бренду, що

узгоджуються зі стратегічними цілями універси-

тету. Безумовно, безпосередню профорієнтаційну

роботу, щодо залучення абітурієнтів, здійснює

факультет та його відповідні кафедри. У межах

даної статті ми опікуємось удосконаленням сайту

Professional Art Education Volume 2 (2) 2021 Scientic Journal

факультету мистецтв. Такі аспекти зумовлюють

необхідність визначення сучасних тенденцій UX/

UI дизайну сайтів освітніх закладів у зазначено-

му напрямку та удосконалення існуючого ди-

зайну сайту факультету мистецтв Харківського

національного педагогічного університету імені

Г.С. Сковороди.

Аналіз основних досліджень і публікацій.

На даний момент питання дизайну освітніх

сайтів є цікавим але недостатньо дослідженим

напрямком. Так у науковій роботі О. Забарної та

О. Соловйової (2013) досліджуються питання ак-

туальності розробки веб-сторінок освітніх сайтів

та сайт розглядається як інструмент комунікації.

У роботі Т. Пишкайло (2017) наголошено на важ-

ливості використання «айдентики» в сучасному

веб-дизайні. Дослідження О. Кунгурцевої (2017)

присвячені загальним вимогам до сайтів закладів

освіти. Л. Боднар (2019) зазначила методичні ре-

комендації щодо створення інтернет-сайту освіт-

нього закладу, розкрив особливості сайтів за при-

значенням, подано покрокові дії, а саме: розробка

структур, дизайну, макету, головної сторінки, ди-

наміки, тестування сайту. М. Рудний (2014) у своїй

роботі розглянув розробку програмного забезпе-

чення сайту кафедри програмного забезпечення.

Формулювання цілей та завдань статті.

Метою роботи є удосконалення існуючого дизай-

ну сайту факультету мистецтв Харківського на-

ціонального педагогічного університету імені Г.С.

Сковороди. Відповідно до мети було визначено

наступні завдання: 1. Проаналізувати освітні сай-

ти ЗВО України у напрямку мистецької освіти. 2.

Схарактеризувати сучасні тенденції UX/UI дизай-

ну у розробці сайтів мистецького спрямування. 3.

Виокремити необхідні структурні елементи сайту

факультету мистецтв Харківського національно-

го педагогічного університету імені Г.С. Сковоро-

ди.

Виклад основного матеріалу. Сьогодні сайт

є «візитною карткою» будь-якої установи та не-

обхідною умовою для ефективної взаємодії з ко-

ристувачами. Просування освітніх послуг у су-

часному світі здійснюється не тільки за рахунок

проведення різноманітних профорієнтаційних

заходів, але й у мережі Інтернет, де освітні устано-

ви демонструють віртуальну активність, розкри-

вають власні конкурентні переваги для потенцій-

ної аудиторії.

Дослідниця О. Кунгурцева (2017) зазначає,

що для всіх сайтів закладів освіти, наскільки б

вони не були специфічними у своїх напрямках, є

загальні вимоги:

- на сайті повинна дотримуватися грамотна

композиція тексту та картинок, щоб у відвідувача

не було відчуття дискомфорту;

- дизайн повинен відповідати останнім

тенденціям web-дизайну, з метою підтримки

іміджу вузу та створення довірливих відносин у

абітурієнтів;

- навігація повинна бути чіткою та інтуїтив-

но зрозумілою користувачеві, щоб він не «заблу-

кав» на сайті у пошуках інформації;

- якщо заклад має співпрацю з іноземними

вузами, а також до навчання запрошуються іно-

земні студенти, потрібна можливість перекладу

мови сайту;

- для можливості інклюзивного навчання

студентів сайт також повинен надати можли-

вості для зручного перегляду сайту;

- колірна палітра, шрифти повинні відповіда-

ти фірмовому стилю закладу

З метою виявлення спільних елементів про-

аналізуємо сайти ЗВО у напрямку мистецької

освіти. Сайт Львівської національної академії

мистецтв (2021) має простий дизайн та інтуїтив-

но зрозумілий інтерфейс (див. рис. 1). Містить

певні блоки, а саме: Головна, Загальна інформа-

ція про факультет, Навчання, Факультети, Твор-

чість. Графічні елементи гармонійно виконані,

дотримано єдиний стиль виконання, гармоній-

но підібрано кольорову палітра (червоно-сіра

палітра) та шрифти Noto Sans та Roboto Condensed,

які зараз є актуальними. Сайт є адаптивним, що

полегшує користування з мобільних пристроїв.

Сайт факультету мистецтв Національного

педагогічного університету імені М.П. Драгомано-

ва (2021) виглядає менш сучасно і спроектований

не у корпоративному стилі основного сайту (див.

рис. 2). Сайт дотримано у стандартній структурі,

інтерфейс є інтуїтивно зрозумілим з можливі-

стю переходу на будь-яку сторінку сайту із кож-

ного розділу. Сайт містить усі необхідні блоки:

Про факультет, Освітні послуги, Електронний

деканат, Освітні ресурси, Наука, Конкурси та фе-

стивалі. Використовується блакитно-біла кольо-

рова палітра. Однак, у дизайні сайту застосовано

шрифти Vernada та Arial Black, які є не актуаль-

ними і дуже схожими за загальним ознаками,

що робить їх поєднання не раціональним. Також,

до шрифтів додано тіні, що ускладнює читабель-

ність тексту. Іконки не мають загального стилю

дизайну. Сайт має адаптивний дизайн інтерфей-

су під різні пристрої.

Volume 2 (2) 2021Professional Art Education

Рис. 1. Сайт факультету дизайну ЛНАМ

Рис. 2. Сайт факультету мистецтв НПУ М.П. Драгоманова

Professional Art Education Volume 2 (2) 2021 Scientic Journal

Київський національний університет технологій та дизайну (2021) має не зовсім зрозумілий інтер-

фейс та навігацію по сайту, однак присутня форма пошуку (див. рис. 3). Основні блоки не достатньо чітко

виокремлено, що ускладнює пошук інформації. Іконки обрано в єдиному стилі, однак кольорова палітра

є неузгодженою, не враховано контрастність шрифту відповідно до тла, що ускладнює читабельність

тексту. У дизайні сайту використано сучасний шрифт Segoe UI. Рядок меню закріплено, що є дуже зруч-

ним при скролінгу. Сайт має адаптивний дизайн, що є зручним для доступу з мобільних пристроїв.

Рис. 3. Сайт факультету дизайну КНУТД

Сайт факультету мистецтв ХНПУ імені Г.С. Сковороди (2021) має необхідну структуру, однак вимагає

удосконалення, оскільки має певні недоліки: відсутність переходу на сторінки діючих кафедр на сторін-

ці факультету; не достатньо інформативний блок щодо керівництва факультету; блоки Абітурієнту, Ро-

бочі програми, Новини мають односторонній перехід без можливості повернення на головну сторінку

факультету; рядок меню зафіксований (зникає при скролінгу); використано стандартні для текстових

документів шрифти Times New Roman та Arial (шрифт з засічками та без), які втратили актуальність; сайт

не підтримує адаптивність; іконки не відповідають загальному стилю сайту (див. рис. 4).

Volume 2 (2) 2021Professional Art Education

Рис. 4. Сайт факультету мистецтв ХНПУ імені Г.С. Сковороди

Для виявлення необхідних структурних еле-

ментів сайту факультету мистецтв схарактеризує-

мо сучасні тенденції UX/UI дизайну у розробці сай-

тів мистецького спрямування.

1. Емоційний дизайн. Використання візу-

ально «живих» елементів для спонукання виник-

нення почуттів та реакції від користувачів.

2. Геометрична структура. Використання

класичних геометричних елементів для акценту-

ації.

3. Дизайн із розділеним екраном. Викори-

стання умовно розділеного екрану на дві панелі

контенту, що згортається у вертикальний блок в

адаптивному дизайну.

4. Більше тексту. Повернення багаторівне-

вих заголовків. Текст повинен бути вибраним

елементом, який надає користувачам більше ін-

формації з першого заходу на сторінку.

5. Нові шрифти. Уникнення класики і ви-

користання засічок, зміна розміру від слова до

слова, використання напівпрозорого шрифту із

перекриттям непрозорого. Додавання жирного та

курсивного нарису.

6. Адаптація під нові гаджети. Забезпечен-

ня якісними збільшеними зображеннями для

адаптивного дизайну.

7. Унікальна мікровзаємодія. Наявність так-

тильних оглядів у адаптивному дизайні, тобто

можливість змінювати відтінок для різних станів

програми, візуалізацію завантаження потрібної

сторінки, додавання анімації під час переходу,

наявність оригінальної реакції на натискання

певних кнопок на сайті (Webpromo, 2021).

Ураховуючи вищезазначене виокремимо не-

обхідні аспекти, які будемо ураховувати у процесі

розробки дизайну сайту факультету мистецтв

Professional Art Education Volume 2 (2) 2021 Scientic Journal

Харківського національного педагогічного універ-

ситету імені Г.С. Сковороди, а саме використання:

геометричних елементів, дизайну із розділеним

екраном, нових шрифтів, лаконічного контенту,

елементів стилізації, айдентики, адаптивного ди-

зайну, розробка чіткої композиції сайту, структу-

ри та ієрархії елементів.

Висновки. Отже, проведений аналіз сайтів

факультетів мистецького напрямку та сучасних

тенденції у розробці дизайну освітніх сайтів до-

зволив виявити спільні компоненти у дизайні,

необхідні структурні елементи та аспекти для ро-

зробки сайту факультету мистецтв Харківського

національного педагогічного університету імені

Г.С. Сковороди.

Перспективами подальших досліджень є

пошук оптимальних рішень щодо удосконалення

сайту факультету мистецтв Харківського націо-

нального педагогічного університету імені Г.С. Ско-

вороди, а саме: досягнення найвисокої швидкості

завантаження, вдосконалення структури сайту для

користувацької зручності, наповнення сторінок

цікавим та корисним контентом, згідно з вимо-

гами Гуґла та з використанням відповідних мета-

даних; розкрутка або лінкбілдінг, що базується на

побудові якісних зв’язків з іншими авторитетними

сайтами, збільшенні кількості зовнішніх посилань

на ресурс тощо.

СПИСОК ЛІТЕРАТУРИ

Dongting, J. (2021). Professional Competence as the Main Factor of Training Future Specialists in Graphic

Design. Professional Art Education, 2(1), 20–27. https://doi.org/10.34142/27091805.2021.2.01.03

Hladun, О. (2019). The preparation model of a future teacher for the upbringing of teenagers with a low

status in the student team. Scientic Issues of Vinnytsia State M. Kotsyubynskyi Pedagogical University. Section:

Pedagogics and Psychology, 216(58), 63–68. https://doi.org/10.31652/2415-7872-2019-58-63-68

Webpromo (2021). Тренди UI/UX дизайну на 2022 рік: 15 актуальних інновацій. Retrieved from: https://

web-promo.ua/blog/trendy-uxui-dizajna-na-2022-god-15-aktualnyh-innovacij

Боднар, Л. В. (2019). Методичні рекомендації щодо створення Інтернет-сайту освітнього закладу.

Retrieved from: http://dspace.pdpu.edu.ua/bitstream/123456789/2567/3/Bodnar.pdf

Забарна, Е. М., Соловьева, Е. Ю. (2013). Система та критерії маркетингового аналізу сайтів ви-

щих навчальних закладів. Ефективна економіка, 1. Retrieved from: http://www.economy.nayka.com.

ua/?op=1&z=1748

Зеленюк, О. (2019). Веб-дизайн в контексті формування візуальної культури віртуального середови-

ща. Молодий вчений, 1 (65), 23-26. https://doi.org/10.32839/2304-5809/2019-1-65-6

Кунгурцева, О.Н. (2017). Интернет-сайт учреждения высшего образования как инструмент повыше-

ния эффективности продвижения предлагаемых образовательных услуг на мировых рынках. Экспорт об-

разования, 1. 24-27.

Пышкайло, Т. С. (2017). Создание веб-сайта для мастерской деревянных изделий «Nat Wood» (випуск-

на кваліфікаційна робота бакалавра). Retrieved from: http://elib.sfu-kras.ru/handle/2311/34788

Рудний, М. М. (2014). Розробка програмного забезпечення сайту кафедри програмного забезпечен-

ня (курсовий проект). Retrieved from: http://inmad.vntu.edu.ua/portal/static/86B4CE19-2274-4422-862D-

DD2CAF2DFF4C.pdf

Сайт Львівської національної академії мистецтв (2021). Retrieved from: https://lnam.edu.ua/uk/design.

html

Сайт факультету дизайну КНУТД (2021). Retrieved from: https://knutd.edu.ua/university/faculties/design

Сайт факультету мистецтв НПУ М.П. Драгоманова (2021). Retrieved from: https://fm.npu.edu.ua

Сайт факультету мистецтв ХНПУ імені Г.С. Сковороди. (2021). Retrieved from: http://hnpu.edu.ua/

division/kafedra-dizaynu

Volume 2 (2) 2021Professional Art Education

REFERENCE

Dongting, J. (2021). Professional Competence as the Main Factor of Training Future Specialists in Graphic Design.

Professional Art Education, 2(1), 20–27. https://doi.org/10.34142/27091805.2021.2.01.03 [in Ukrainian]

Hladun, О. (2019). The preparation model of a future teacher for the upbringing of teenagers with a low status in

the student team. Scientic Issues of Vinnytsia State M. Kotsyubynskyi Pedagogical University. Section: Pedagogics and

Psychology, 216(58), 63–68. https://doi.org/10.31652/2415-7872-2019-58-63-68 [in English]

Webpromo (2021). Trendy UI/UX dyzaynu na 2022 rik: 15 aktualʹnykh innovatsiy [UI/UX design trends for 2022: 15

current innovations]. Retrieved from: https://web-promo.ua/blog/trendy-uxui-dizajna-na-2022-god-15-aktualnyh-

innovacij [in Ukrainian]

Bodnar, L. V. (2019). Metodychni rekomendatsiyi shchodo stvorennya Internet-saytu osvitnʹoho zakladu [Methodical

recommendations for creating an Internet site of an educational institution]. Retrieved from: http://dspace.pdpu.edu.ua/

bitstream/123456789/2567/3/Bodnar.pdf [in Ukrainian]

Zabarna, E. M., Solovʹeva, E. YU. (2013). Systema ta kryteriyi marketynhovoho analizu saytiv vyshchykh navchalʹnykh

zakladiv [System and criteria of marketing analysis of websites of higher educational institutions]. Efektyvna ekonomika,

Retrieved from: http://www.economy.nayka.com.ua/?op=1&z=1748 [in Ukrainian]

Zelenyuk, O. (2019). Veb-dyzayn v konteksti formuvannya vizualʹnoyi kulʹtury virtualʹnoho seredovyshcha [Web

design in the context of the formation of visual culture of the virtual environment]. Molodyy vchenyy, 1 (65), 23-26. https://

doi.org/10.32839/2304-5809/2019-1-65-6 [in Ukrainian]

Kunhurtseva, O.N. (2017). Ynternet-sayt uchrezhdenyya vyssheho obrazovanyya kak ynstrument povyshenyya

éffektyvnosty prodvyzhenyya predlahaemykh obrazovatelʹnykh usluh na myrovykh rynkakh [The Internet site of a higher

education institution as a tool for increasing the effectiveness of the promotion of offered educational services on world

markets]. Éksport obrazovanyya,1. 24-27. [in Russian]

Pyshkaylo, T. S. (2017) Sozdanye veb-sayta dlya masterskoy derevyannykh yzdelyy «Nat Wood» (vypuskna

kvalikatsiyna robota bakalavra) [Creation of a website for the workshop of wooden products «Nat Wood» (bachelor

graduation thesis)]. Retrieved from: http://elib.sfu-kras.ru/handle/2311/34788 [in Ukrainian]

Rudnyy, M. M. (2014) Rozrobka prohramnoho zabezpechennya saytu kafedry prohramnoho zabezpechennya

(kursovyy proekt) [Development of software for the website of the software department (course project)]. Retrieved from:

http://inmad.vntu.edu.ua/portal/static/86B4CE19-2274-4422-862D-DD2CAF2DFF4C.pdf [in Ukrainian]

Sayt Lʹvivsʹkoyi natsionalʹnoyi akademiyi mystetstv (2021) [The website of the Lviv National Academy of Arts].

Retrieved from: https://lnam.edu.ua/uk/design.html [in Ukrainian]

Sayt fakulʹtetu dyzaynu KNUTD (2021) [Site of the Faculty of Design of KNUTD]. Retrieved from: https://knutd.edu.ua/

university/faculties/design [in Ukrainian]

Sayt fakulʹtetu mystetstv NPU M.P. Drahomanova (2021) [The website of the Faculty of Arts of the NPU of M.P.

Drahomanova]. Retrieved from: https://fm.npu.edu.ua [in Ukrainian]

Sayt fakulʹtetu mystetstv KHNPU imeni H.S. Skovorody (2021) [The site of the Faculty of Arts in H.S. Skovoroda Kharkiv

National Pedagogical University]. Retrieved from: http://hnpu.edu.ua/division/kafedra-dizaynu [in Ukrainian]

Надійшла до редакції / Received: 01.09.21

Рекомендовано до друку / Accepted: 29.09.2021

Professional Art Education Volume 2 (2) 2021 Scientic Journal

The main aim of the article is the improvement of the existing design of the Faculty of Arts

of H.S. Skovoroda Kharkiv National Pedagogical University website.

Methods & methodology. Such research methods as subject-analytical for studying

structural and illustrative sources; a terminological technique for a clear understanding of the

essential features of design; a psychological method of verbal determination the nature of the

visual sensation from the nal stage of site design development were used.

The scientic novelty consists in the comprehensive analysis of educational sites of higher

education institutions of Ukraine in the direction of art education. Identication of modern trends in

UX/UI design in the development of artistic sites. Highlighting the necessary structural elements of

the development of the Faculty of H.S. Skovoroda Kharkiv National Pedagogical University website.

The results of the study proved that for the development of the UX/UI design of the website

of the Faculty of Arts of the H.S. Skovoroda Kharkiv National Pedagogical University it is necessary

to use various structural elements, such as: emotional design (use of visually «live» elements to

induce feelings and reactions from users); geometric structure (use of classic geometric elements for

accentuation); split-screen design (using a conditionally split-screen design (using a conditionally

split screen into two panels of content that collapses into a vertical block in responsive design);

increasing the content of the text (returning multi-level headings, etc.); new fonts (avoiding the

classics and using serifs, changing the size from word to word, using a semi-transparent font

overlapping an opaque one, adding bold and italic writing); adaptation to new gadgets (providing

high-quality enlarged images for adaptive design); unique micro-interaction (the presence of tactile

reviews in adaptive design, i.e. the ability to change the shade for different states of the program,

visualization of loading the desired page, adding animation during the transition, the presence of

an original reaction to pressing certain buttons on the site).

Keywords: UX/UI design, UX/UI design trends, usability, site structure, identity, adaptive

design.

UX/UI DEVELOPMENT OF THE WEBSITE DESIGN OF

THE FACULTY OF ARTS OF THE H.S. SKOVORODA

KHARKIV NATIONAL PEDAGOGICAL UNIVERSITY

Doctor of Pedagogical Sciences, professor of

Design Department H.S. Skovoroda Kharkiv

National Pedagogical University

Kharkiv, Ukraine

email: melennaznv@gmail.com

https://orcid.org/0000-0002-3083-1070

DOI 10.34142/27091805.2021.2.02.05