1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Магістр
  4. 022 Дизайн (за видами)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8863
Title: ДИЗАЙН МОБІЛЬНОГО ДОДАТКУ ДО САЙТУ: ХУДОЖНЬО-ЕСТЕТИЧНІ ОСОБЛИВОСТІ
Authors: Храмова-Баранова, Олена Леонідівна
Запорожець, Алла Геннадіївна
Keywords: графічний дизайн;мобільний додаток;дизайн реклами;сайт
Issue Date: Jan-2023
Abstract: ДИЗАЙН МОБІЛЬНОГО ДОДАТКУ ДО САЙТУ: ХУДОЖНЬО-ЕСТЕТИЧНІ ОСОБЛИВОСТІ. Метою роботи є вивчення, аналіз та узагальнення відомостей про виникнення та розвиток мобільних додатків, дизайну та художніх засобів мобільних додатків до сайту, що дають студентам знання про історію і значення закладу освіти. Розкрити сутність та переваги, унікальні властивості мобільного додатку як сучасного комунікаційного засобу.
URI: https://er.chdtu.edu.ua/handle/ChSTU/8863
Appears in Collections:022 Дизайн (за видами)

Files in This Item:
File Description SizeFormat 
магзаписка_Запорожець2023.pdf
  Restricted Access		2.27 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
 
сЧЕРКАСЬКИЙ  CHERKASSY 
ДЕРЖАВНИЙ STATE 
ТЕХНОЛОГІЧНИЙ TECHNOLOGICAL 
УНІВЕРСИТЕТ UNIVERSITY 
 
 
Ф акультет гуманітарних 
технологій  
Кафедра дизайну 
 
 Освітня програма другого рівня 
вищої освіти ступеня «магістр» 
Спеціальність 022 «Дизайн» (за видами) Графічний дизайн 
 
 
 
 КВАЛІФІКАЦІЙНА РОБОТА МАГІСТРА 
 
на тему: «ДИЗАЙН МОБІЛЬНОГО ДОДАТКУ ДО САЙТУ: 
ХУДОЖНЬО-ЕСТЕТИЧНІ ОСОБЛИВОСТІ» 
 
 
 
 
Студент групи МДЗ-71                   А.Г.Запорожець 
Керівник, д.і.н., професор      О.Л.Храмова-Баранова 
  
 
 
«Допуск до захисту» 
Завідувач кафедри дизайну 
  Інна ЯКОВЕЦЬ 
      2022 рік 
 
 
Черкаси 2022 
 
 
            Черкаський державний технологічний університет   
(назва вузу) 
Кафедра дизайну 
Факультет гуманітарних технологій    
Спеціальність 022-Дизайн( за видами) Графічний дизайн   
 
«ЗАТВЕРДЖУЮ» 
Завідувач кафедри 
дизайну              Інна ЯКОВЕЦЬ 
„___________”                 2022 р. 
 
 
 
ЗАВДАННЯ 
на виконання випускної роботи магістра 
 
___________________Запорожець Алли Геннадіївни__________________ 
(прізвище, ім’я, по батькові) 
 
1. Тема роботи «Дизайн мобільного додатку до сайту: художньо-естетичні 
особливості» затверджена наказом по університету від  «_________»_____р. 
№____________ 
2. Термін здачі студентом магістратури закінченої роботи_______________ 
  
 
3. Вихідні дані: Визначення мобільного додатку до сайту, як окремого 
художнього твору в графічному дизайні для популяризації сайтів вищих 
навчальних закладів в Україні завдяки художньо-естетичним засобам. 
Впровадження мобільного додатку у навчання.  
 
4. Зміст випускної роботи⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ 
(перелік питань, що їх належить розробити) 
Вступ. Розділ 1. Формування проблеми стану предмета і джерельна база 
дослідження. 1.1. Визначення проблем та стану дослідження, історіографія. 
1.2. Джерельна база дослідження. 1.3. Методи дослідження, 
характеристика. Висновки до першого розділу. Розділ 2. Художньо-естетичні 
засоби дизайну мобільного додатку до сайту. 2.1. Історія виникнення, 
розвиток та класифікація мобільних додатків 2.2. Характеристики мобільних 
 
 
додатків. Етапи становлення мобільних додатків до сайтів. 2.3. Художньо-
естетичні особливості ілюстрацій і шрифту в мобільному додатку для сайту 
2.4. Дизайн сайтів і їх розвиток. Характеристика графіки, тексту, анімації 
для сайтів. Висновки до другого розділу. Розділ 3. Розробка проєктної 
пропозиції. 3.1. Визначення концепції проєктної пропозиції. 3.2. Пошук та 
аналіз аналогів. Ескізний пошук. 3.3. Етапи розробки дизайну мобільного 
додатку для сайту Черкаського державного технологічного університету. 
3.4. Рекламна продукція, характеристика. 3.5. Анімаційний ролик-презентація 
мобільного додатку. Висновки до третього розділу. Висновки. Список 
використаних джерел. Додатки. 
5. Перелік графічного матеріалу 8 плакатів формату А1:  
Титульний лист; Зміст наукового дослідження; Класифікація сайтів; Види 
комп’ютерної графіки; Авторський дизайн вирішення мобільного додатку до 
сайту; Рекламний плакат; Анімаційний ролик-презентація до мобільного 
додатку.  
 
6. Консультанти з наукової дипломної роботи із зазначенням розділів, що їх 
стосуються 
 
  Підпис, дата 
Розд Консультант завданн завдання 
іл я прийняв 
видав 
Графічна частина Храмова-Баранова О.Л.   
Наукове дослідження Храмова-Баранова О.Л.   
Загальне керівництво Храмова-Баранова О.Л.   
Авторська пропозиція Кудревич В.В.   
 
7. Дата видача завдання: _____________________________________________ 
 
 
 
 
 
 
 
 
 
 
 
КАЛЕНДАРНИЙ ПЛАН 
 
Термін виконання 
№ Назва етапів дипломного проекту 
етапів проекту Примітка 
з/п (роботу) 
(роботи) 
1. Затвердження теми роботи, 10.09.2021  
керівника. 
2. Робота з аналогами, збір 09.02.2022  
інформації. 
3. Заслуховування про виконання  21.06.2022  
 першого етапу роботи.   
4. Звіт про перші два розділи 20.09.2022  
 магістерської роботи.   
5. Затвердження ідеї 11.10.2022  
 дизайнерського рішення проекту    
 та кінцевого варіанту планів.   
6. Попередній захист випускної  15.11.2022  
 роботи магістра.   
7. Захист випускної роботи   
 магістра.   
    
 
Керівник:              ⠀⠀⠀⠀⠀Храмова-Баранова О.Л. ⠀⠀⠀⠀ 
                                                                                      (підпис) 
 
Завдання прийняв 
До виконання:        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ 
                                                                                      (підпис) 
 
 
 
 
 
 
 
ЗМІСТ 
ВСТУП 5 
РОЗДІЛ 1. Формування проблеми стану предмета і джерельна база 8 
дослідження  
1.1. Визначення проблем та стану дослідження, історіографія 8 
1.2. Джерельна база дослідження 10 
1.3. Методи дослідження, характеристика 12 
Висновки до першого розділу 13 
РОЗДІЛ 2. Художньо-естетичні засоби дизайну мобільного додатку 15 
до сайту 
2.1. Історія виникнення, розвиток та класифікація мобільних додатків 15 
2.2. Характеристики мобільних додатків.  19 
Етапи становлення мобільних додатків до сайтів 
2.3. Художньо-естетичні особливості ілюстрацій і шрифту в 22 
мобільному додатку для сайту 
2.4. Дизайн сайтів і їх розвиток. Характеристика графіки, тексту, 26 
анімації для сайтів 
Висновки до другого розділу 30 
РОЗДІЛ 3. Розробка проєктної пропозиції  31 
3.1. Визначення концепції проєктної пропозиції 31 
3.2. Пошук та аналіз аналогів. Ескізний пошук 34 
3.3. Етапи розробки дизайну мобільного додатку для сайту 37 
Черкаського державного технологічного університету 
3.4. Рекламна продукція, характеристика  42 
3.5. Анімаційний ролик-презентація мобільного додатку 43 
Висновки до третього розділу 45 
ВИСНОВКИ  46 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ  48 
ДОДАТКИ  53 
 
 
 
 
 
ВСТУП 
 
Актуальність роботи. Крім популяризації, мобільний додаток завдяки 
своїм функціям сприяє розвитку інтерактивності користувача. Електронні 
пристрої можуть відігравати важливу роль у розвитку навичок спілкування, 
читання. У необхідності популяризації освіти, заохочення громадян вивчати 
та дізнаватись більше про заклади освіти, зокрема Черкаський державний 
технологічний університет, а також залучення їх до навчання за допомогою 
методичного вивіреного та цікавого матеріалу, таблиць, пояснень, підказок та 
малюнків, які описують різні ситуації, а з іншого – у відсутності якісних 
мобільних додатків такого типу. 
Метою роботи є вивчення, аналіз та узагальнення відомостей про 
виникнення та розвиток мобільних додатків, дизайну та художніх засобів 
мобільних додатків до сайту, що дають студентам знання про історію і 
значення закладу освіти. Розкрити сутність та переваги, унікальні властивості 
мобільного додатку як сучасного комунікаційного засобу. Відповідно до 
поставленої мети визначено такі завдання дослідження: 
• дослідити історію становлення і розвитку мобільних додатків та 
визначити проблематику і стан дослідження; 
• дослідити і проаналізувати класифікацію і типологію мобільних 
додатків; 
• визначити і проаналізувати художньо-естетичні засоби в дизайні 
мобільних додатків; 
• запропонувати авторське бачення мобільного додатку для сайту 
Черкаського державного технологічного університету (ЧДТУ) і 
обґрунтувати основні підходи до створення мобільного додатку. 
Предмет дослідження: художньо-естетичні особливості в дизайні  
мобільного додатку. 
Об’єкт дослідження: дизайн мобільного додатку.  
 
 
Наукова новизна даного дослідження полягає у ретельному аналізі та 
визначенні художньо-естетичних особливостей використання засобів у 
створенні мобільного додатку та використання мобільного додатку у навчанні. 
Практична цінність роботи: За допомогою використання художніх 
засобів у створенні мобільного додатку можна розвивати та вдосконалювати 
це направлення в освіті в Україні. Результати досліджень та обґрунтовані 
висновки також можуть бути використані графічними дизайнерами для 
просування мобільних додатків та покращення їх естетичного вигляду. 
Практичне значення роботи полягає у можливості застосування її положень: у 
вузівській практиці при читанні лекцій студентам дизайну, а також при 
проведенні занять з проєктування. 
Публікації: Основні положення та результати  дослідження відображені 
у тезах V-ої Всеукраїнської науково-практичної конференції (з міжнародною 
участю) «Культурно-історична спадщина України: перспективи дослідження 
та традиції збереження», 20-21 жовтня 2022 р. – ЧДТУ. 
Структура та обсяг роботи: Робота складається із вступу, трьох розділів, 
висновків, списку використаних джерел і додатків. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
РОЗДІЛ 1 
ФОРМУВАННЯ ПРОБЛЕМИ СТАНУ ПРЕДМЕТА  
І ДЖЕРЕЛЬНА БАЗА ДОСЛІДЖЕННЯ 
 
1.1. Визначення проблем та стану дослідження, історіографія 
Мобільний додаток – це додаток, який можна встановити або 
завантажити безкоштовно або за плату. В сучасному середовищі вагомим 
спрямуванням інформатизації регіонів є піднесення інформаційного ринку. 
Технічний та технологічний поступ вимагає від суспільства покращення 
комунікативних властивостей мобільних пристроїв [1]. Це визначає появу 
інформаційних продуктів, що впливають на поліпшення якості життя, можуть 
вирішувати різноманітні завдання в певних сферах життєдіяльності. 
Найперспективнішим серед цих продуктів є мобільні додатки (mobile apps), 
які є окремим програмним забезпеченням для відповідної операційної системи 
мобільного пристрою. Нині мобільні додатки забрали на себе величезну 
частину роботи з комп’ютера. Користувачі досить часто використовують 
телефони для роботи з документами, поштою, вирішують певні задачі, і 
найбільш часто ці функції використовують студенти, підприємці та ін. З таким 
високим ступенем використання смартфонів та планшетів зростає і 
асортимент мобільних додатків до них. Тому досить важливо з’ясувати суть 
мобільних додатків, їх види та перспективи застосування в навчанні, бізнесі, 
охарактеризувати проблеми пов’язані з оцінкою та відображенням в обліку 
даних мобільних додатків.  
В результаті комп’ютеризації традиційних процесів створення 
різноманітних документів виникли електронні сайти, які почалися з появою 
масових комп’ютерів (1950 р.), але теоретичний розквіт сайтів розпочався у 
1970 р. Завдяки підвищенню ефективності комп’ютерів ЕОМ, яке призвело до 
виникнення в 1990 р. нових технологій (анімація, відео, взаємодія в реальному 
часі, звук, програмовані компоненти), що набагато розширило функціональні 
можливості сайтів [2]. 
 
 
Деякі аспекти проблематики були розглянуті в роботі Джесса Гарретта 
«Елементи досвіду взаємодії: веб-дизайн». В цій праці йдеться про розробку 
сайтів, які повинні бути ефективними і слугувати стратегічним цілям, 
розглядається тема веб-дизайну, де за допомогою зрозумілих пояснень і чітких 
ілюстрацій треба досягати поставлених задач.  Джессі Гарретт є одним із 
засновників компанії Adaptive Path (UX-консультації), яка знаходиться в Сан-
Франциско (США) [3]. Він працював в інтернет-індустрії з 1995 р. і визнається 
вагомим спеціалістом в інформаційній архітектурі. Він висловив думку, що 
необхідно брати до уваги всі можливості, кожну дію, яку виконує користувач 
і розуміти очікування користувача на кожному кроці всього процесу. Це є 
складною задачею, але Гарретт допомагає нам думати про широке коло 
питань, які впливають на досвід взаємодії, при цьому ділить процес 
створення мобільного додатку на п’ять рівнів, а саме: 
1. Стратегія (цілі і потреби користувача); 
2. Набір можливостей (функціональні специфікації); 
3. Структура (дизайн взаємодії, інформаційна архітектура); 
4. Компоновка (дизайн інтерфейса, інформаційний дизайн); 
5. Поверхність (візуальний дизайн) [3]. 
В книзі Брайяна і Джеффрі Айзенберга «Додайте в корзину. Ключові 
принципи підвищення конверсії веб-сайтів» аналізуються основні принципи 
підвищення популярності веб-сайтів. Брати Айзенберг – розробники 
ефективної методики підвищення рівня конверсії, визнані авторитети 
інтернет-маркетинга, засновники компаній Future Now, Inc., клієнти якої є  
Dell, Volvo тощо. Автори виділяють такі етапи створення архітектури сайта:  
1. Розкриття інформації; 
2. Створення каркасу; 
3. Розробка макету; 
4. Підготовка прототипу; 
5. Програмування; 
6. Оптимізація [4]. 
 
 
В своєму дисертаційному дослідженні «Дизайн мультимедійних 
презентацій: стильові напрямки і засоби формування візуально-образної 
мови», М.Опалєв вказує, що стильові напрямки образної мови в дизайні 
мультимедійних презентацій і виявлені основні принципи обов’язково 
застосовуються і ми теж використали ці принципи в своєму дослідженні [5]. 
В статті Р.Горбатюк і Ю.Тулашвілі «Мобільне навчання як нова 
технологія вищої освіти» де структурується процес навчання завдяки 
мобільним додаткам і вказуються позитивні і негативні характеристики цієї 
технології багато психологічних аспектів, які ми теж використали при 
розробці мобільного додатку іменно для вищої школи [6]. 
В статті М.Шаплеса  аналізується створення дизайну мобільних додатків 
і яким чином мобільний додаток впливає на результати навчання, що теж 
важливо при розробці мобільного додатку для сайту [7]. 
Модель мобільного навчання описується в статті І.Теплицького з 
характеристикою деяких аспектів і пропозиціями моделей таких додатків з їх 
характеристикою. [8]. Деякі аспекти мобільних інформаційних технологій для 
студентів вищих навчальних закладів проаналізувала в своїй науковій роботі 
Н.Рашевська [9]. Застосування мобільних додатків в бізнесі описав і надав 
характеристику Т.Корпанюк. Ці дослідження розкривають деякі аспекти 
становлення мобільних додатків і надають нам фундамент для подальшого 
розгляду поставлених в магістерській роботі задач, а також допомагають у 
досягненні поставленої мети. 
 
1.2. Джерельна база дослідження 
Вирішення проблеми дизайну мобільних додатків для сайтів в сучасних 
умовах розвитку інформаційного суспільства ще не до кінця розглянуто і не 
стало предметом конкретних досліджень. Зрозуміло, що реалізація потенціалу 
мобільних додатків в Україні потребує наукового переосмислення та 
оновлення моделей проектування до сучасних вимог. Щоб вирішити 
проблему, ми також можемо заохочувати іноземні компанії виходити на 
 
 
український ринок. Розвиток та процвітання технологічної платформи для 
мобільних додатків необхідна з акцентом на національні самобутності в 
Україні. 
Ринок мобільних додатків розвивається швидкими темпами і за 
прогнозами провідних компаній зростання буде збільшуватися. З’являється 
все більше розробників, компаній і самих додатків. Зростає конкуренція і 
серед сервісів з однаковими функціями – хтось бере дизайном, хтось додає 
нові фічі, а хтось розкручується рекламою. Аналіз ринку мобільних додатків 
показує, що у 2020 р. доходи від додатків досягли 189 мільярдів доларів. 
Очікується, що до 2027 року обсяг світового ринку програмного забезпечення 
для управління продуктивністю досягне 102,98 млрд доларів США, згідно з 
новим звітом Grand View Research, Inc., який буде рости із середньорічним 
темпом зростання 13,4%. за прогнозний період [10]. 
Джерельною базою дослідження є широке коло різноманітних джерел. 
Насамперед, це наукові вісники, дисертації, автореферати, статті, підручники, 
посібники тощо. У своїй сукупності використані джерела становлять комплекс 
взаємопов’язаних і взаємодоповнюючих документів, які дозволяють 
різнобічно висвітлити проблематику, історіографію. В цілому, сучасний стан 
джерельної бази можна визначити як репрезентативний.  
Дослідженням інтерактивних технологій навчання займалися наступні 
фахівці: Джессі Гарретт, М.Опалєв, Н.Рашевська, І.Теплицький, М.Шаплес, 
Р.Горбатюк і Ю.Тулашвілі та інші. Але вказані праці не мали предметом свого 
дослідження художньо-естетичні особливості в дизайні  мобільного додатку. 
Дослідження джерельної бази вказує на необхідність подальшого 
аналізу і характеристики заданої проблематики. 
 
 
 
 
 
 
 
1.3. Методи дослідження, характеристика 
Науково-теоретичний пошук матеріалів по темі дослідження 
здійснювалися за дворівневою методологією:  
А) емпіричний, на якому відбувається процес накопичення фактів;  
Б) теоретичний - досягнення синтезу знань (у формі наукової теорії) [11].  
Дослідження літературних джерел було проведено за допомогою таких 
методів як історичний, соціокультурний і мистецький підходів та методів 
порівняння, абстрагування, аналізу, синтезу, експертних оцінок. 
Історичний підхід дозволяє хронологічно досліджувати витоки, 
формування та розвиток процесів і подій з метою виявлення внутрішніх і 
зовнішніх зв’язків, закономірностей і протиріч. В рамках історичного підходу 
були використані порівняльно-історичні методи, які дозволили розкрити 
процеси створення та вирішення дизайну мобільного додатку на різних етапах 
розвитку проектної діяльності. 
Соціокультурний підхід базується на наукових досягненнях культури, 
педагогіки, соціології, психології. За допомогою соціокультурного підходу ми 
можемо досліджувати процес і вплив вивчення нового матеріалу за допомогою 
інтерактивних технологій на формування особистості. 
Мистецький підхід дає змогу враховувати графічні засоби виразності 
при оформленні художньої образності мобільних додатків. Цей підхід полягає 
у всебічному дослідженні складних об’єктів, таких як дизайн мобільних 
додатків для сайтів, як єдиного цілого з узгодженою функцією всіх елементів 
і частин. 
Абстракція – це відхід від мислення у виділенні несуттєвих 
властивостей, контекстів, відношень об’єктів, множинних ознак, що цікавлять 
дослідника. Процес абстракції складається з двох кроків. Перший – виділення  
основних і встановлення незалежності досліджуваного явища від певних 
факторів. Другий – створення можливостей абстракції, що є більш простим, 
при якому один об’єкт перетворюється на інший і служить «моделлю» для 
першого. У логічній системі мислення процес абстракції тісно пов'язаний з 
 
 
методами аналізу і синтезу. Процес аналізу дозволяє розбити тему на частини 
для подальшого вивчення структури та властивостей елементів конструкції 
[11]. 
Метод синтезу полягає в подальшому розгляді загальних властивостей 
об’єкта шляхом об’єднання частин або ознак об’єкта в єдине ціле. За 
допомогою аналітичних і синтетичних методів досліджуються естетичні, 
структурні та функціональні властивості аналогів, а також теоретичний 
матеріал з даної тематики. 
Метод експертної оцінки полягає в опитуванні групи експертів з метою 
формулювання конкретних параметрів, необхідних для оцінки досліджуваних 
суб’єктів. Ми оцінюємо плюси та мінуси проєкту мобільного додатку за 
допомогою методу експертної оцінки. 
Основою магістерської роботи є комплексно-аналітичний підхід до 
вивчення художніх особливостей у створенні дизайну мобільних додатків, 
обумовлений  джерельною базою та методами дослідження. 
 
Висновки до першого розділу 
 
В першому розділі було досліджено історіографію становлення і 
розвитку мобільного додатку та узагальнено результати дослідження наукових 
розробок в області додатків та сайтів, також розкрита методологія 
дослідження.  
 Мобільні додатки набирають популярність, адже це є додатковим 
засобом передачі інформації, зараз за допомогою нових технологій та 
прийомам графіки, вона стає грою, за допомогою якої можна швидше 
запам’ятовувати матеріал.   
 При вивченні проблематики, було визначено, що питання розвитку 
мобільного додатку потребує подальшого вивчення і опрацювання. 
Теоретичні розробки з означеної проблематики в більшості належать 
західноєвропейським дослідникам та дослідникам США,  а у вітчизняній науці 
 
 
цій проблематиці приділяється недостатньо уваги і здебільшого це аналіз вже 
існуючих матеріалів.  
В розділі обґрунтовано використання таких методів дослідження, як 
системний метод, комплексно-аналітичний підхід для розгляду об’єкта в 
контексті історико-культурних процесів і технологічних умов, абстрагування, 
класифікація аналогів у рамках існуючих основних напрямів й комплексно-
аналітичний підхід до вивчення художніх засобів в дизайні мобільного 
додатку для сайту. 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
РОЗДІЛ 2 
ХУДОЖНЬО-ЕСТЕТИЧНІ ЗАСОБИ ДИЗАЙНУ 
МОБІЛЬНОГО ДОДАТКУ ДО САЙТУ 
 
2.1. Історія виникнення, розвиток та класифікація мобільних 
додатків 
Мобільний додаток – це додаток, який можна встановити або 
завантажити. Кожна програма має певну функціональну спрямованість і 
завантажується користувачами в залежності від їх професійної діяльності, їх 
способу життя і вільного часу, їх переваг. Можливість зберігання великої 
кількості додатків була швидко затребувана. У цей момент телефон виглядав 
як телефонна книга. Розробники мобільних додатків також шукають спосіб 
додати функції, які відрізняють їх пристрої від інших [12]. Крім списку 
контактів, на телефоні вже встановлені перші додатки. У той час як 
розробники працюють над поліпшенням технічних характеристик пристрою, 
стільникові телефони часто включають одне проведення часу. Перші мобільні 
пристрої також включали калькулятори, контакти та календарі. Перший крок 
в розробці мобільних аксесуарів був в 1998 р., коли була розроблена 
технологія WAP (Wireless Application Protocol). Nokia 7100 отримав перший 
телефон від WAP-браузера. Nokia 7100 був випущений в 1999 р. У той же час 
з’явилися мобільні компанії-розробники. WAP пропонує можливість читати 
мобільні повідомлення, використовувати електронну пошту, завантажувати 
карти і навіть бронювати квитки. Для цього були створені WAP-сайти зі 
спеціальним маркуванням для мобільних екранів. Це були прості сторінки з 
текстом і посиланнями, майже без картинок. Технологія WAP дозволяє 
завантажувати прості сторінки з користувальницьких сайтів WAP. Недоліком 
WAP була низька швидкість передачі даних і фіксований протокол даних, який 
обмежував вхідні дзвінки під час завантаження. Плата за WAP-з’єднання була 
досить високою [13]. 
 
 
Ще однією віхою в історії розробки мобільних додатків є створення 
операційної системи Symbian і додатків Java. Symbian був розроблений в 2001 
р. Однак Nokia, Sony Ericsson, Motorola, Samsung не вкоренилися на ринку 
[14]. Це сталося через несумісність додатків з новими версіями операційної 
системи, тому кожен додаток необхідно було перевірити. Програмне 
забезпечення платформи Java було розроблено Sun Microsystems. Мобільний 
телефон з підтримкою Java пропонує кілька додатків – годинник, календар і 
дві або три гри. Інші користувачі можуть завантажувати додатки для 
персоналізації мобільних пристроїв. Java використовується в різних 
комп’ютерних платформах, від об’єктів і мобільних телефонів до 
корпоративних серверів і суперкомп’ютерів в сегменті вищого класу. У 2008 
р. Apple запустила App Store, який став локомотивом індустрії мобільних 
додатків. У день запуску App Store на ринку з’явилося 500 додатків. В App 
Store було більше 800 нативних додатків, з яких понад 200 безкоштовні, а 
більше 90% коштують менше 10 доларів (Brave, Kashka, 2019). Google 
запустив Google у відповідь на тенденцію 2008 р. Android Market для 
завантаження програм та ігор для нової операційної системи Android. У 
Marketplace додана підтримка платних додатків в 2009 р. в США і 
Великобританії. У 2012 р. Google об’єднав розробку (Android Market, 
Google Music, Google Books) з платформою Google Play. Всі покупки в Google 
Play засновані на хмарі, тому користувачам не потрібно турбуватися про 
втрату завантаженого файлу. Коли в березні 2012 р. був запущений Google 
Play, на платформу було завантажено 450 000 додатків та ігор для Android 
(від Android Market до Google Play). Google Play Store для власників Android 
тепер є ключовим ринком. У той час як інші сторонні платформи (наприклад, 
Amazon Appstore) також доступні для Android, жодна з них не містить стільки 
контенту, скільки Google Play (платформа Intelligence Tower Store). Всі 
Android-смартфони та планшети мають доступ до Google Play. Крім того, інші 
платформи і продукти, такі як Android Wear Clock, Android Auto і Android TV, 
використовують версії Google Play. Розробка мобільних додатків від 
 
 
стандартного браузера WAP до платформ App Store і Google Play перетворила 
їх на потужний бізнес. Це твердження підтверджується кількістю завантажень 
мобільних додатків: у 2017 р. було завантажено 178 100 000 000 мобільних 
додатків; 2018 р. – 205,4 млрд одиниць. Цей прогноз досягнутий в 2022 р. – до 
258,2 млрд завантажень (Hrabar, Kashka, 2019b: 85) [15]. 
В даний час мобільний додаток – це програмне забезпечення, спеціально 
розроблене для функціональності гаджетів. Призначення програмного 
забезпечення може бути дуже різноманітним: послуги, магазини, розваги, 
онлайн-помічники тощо. Ці додатки завантажуються і встановлюються 
користувачем через мобільні торгові майданчики. Найбільші сайти – це 
AppStore, Google Play. Технічно кажучи, всі програми створюються для 
конкретної платформи мобільного гаджета. Найпопулярнішими операційними 
системами є iOS, Android, Windows Phone [14]. 
Оскільки європейці – ті ще гедоністи, вони не можуть відмовити собі в 
розвагах, фізичній активності та саморозвитку. У березні 2020 р., по всьому 
світі, на 28% зріс попит на розважальні програми (наприклад, Netflix, Disney + 
і Twitch), якщо порівнювати з лютневим періодом, а це 132 млн. завантажень. 
Швидко зростаючими категоріями також стали: новини (завантаження зросли 
на 66%), Health & Fitness (завантаження зросли на 46%) і продуктивність 
(завантаження зросли на 38%) [15].  
Мобільні додатки можна розділити по такі категорії, класифікацію [16]: 
1. РОЗВАГИ 
Ігри. Змагання, головоломки тощо, переводить результати в соціальних 
мережах на сторінку і фірмові ігрові елементи. Запит квитків в кіно, театр і на 
виставку. Швидкий і простий спосіб покупки, огляду, оцінки і збільшення 
продажів відповідно. 
Додатки для дітей. Все, що може зацікавити дитину: ігри, книги, 
мультфільми, музика, головоломки та інші розваги. 
Нічне життя та розваги. Вечірки, дати, танці, фотографії, відеоролики з 
заходами – все  це може бути цікаво відвідувачам і рекламодавцям. 
 
 
2.ПОДОРОЖІ  
Бронювання готелів і багато іншого. Оренда вілли або автомобіля, 
бронювання номерів у готелях та авіаквитки. Путівник. Вони можуть 
допомогти вам знайти ресторан, магазин або заправну станцію, розповісти 
цікаві факти про визначні пам’ятки і знайти зручний маршрут. 
3.БІЗНЕС 
Додатки для фінансових установ та банків. Вони включають в себе ряд 
професійних функцій: форекс відносини, індекси, торговельні індекси і багато 
іншого. Торгівля нерухомістю. Програми включають карти для продажу або 
оренди з докладною інформацією про кожну карті. Інтернет продаж. 
Аукціони, розпродажі, групові покупки абсолютно будь-якого предмета – від  
прикрас до автомобілів. Додатки для міста. Вони допомагають вам 
орієнтуватися в мегаполісі, знаходити відповідну нерухомість, прокладати 
маршрути, паркуватися і багато іншого. Пошук роботи. Розміщуйте резюме, 
переглядайте пропозиції про роботу, надсилайте заявки та отримуйте 
повідомлення. Ці програми зазвичай працюють спільно з веб-сайтом. 
4.СОЦІАЛЬНІ ДОПОВНЕННЯ 
Соціальні мережі для швидкого спілкування і обміну інформацією, 
відображення повідомлень. Існують додатки для глобальних мереж, а також 
для мереж, близьких і пов’язаних з брендом, таких як соціальні мережі BMW 
і Adidas. 
5.ЇЖА 
Замовлення і доставка їжі. За допомогою швидких і практичних додатків 
ви можете замовити, оцінити продукти. Визначте геолокацію закладу: за 
допомогою програми ви легко зможете знайти потрібний ресторан. Рецепти 
додатків з покроковими інструкції для фотографій і відео для страв, 
можливістю розміщувати фотографії своїх кулінарних шедеврів, залишати 
коментарі та брати участь в конкурсах. 
 
 
 
 
6.СПОРТ 
Новини спорту, статистика, анонси, думки експертів, спілкування з 
фанатами і друзями. Купівля квитків. Купити онлайн для кожної події. Ігри. 
Стати гравцем своєї улюбленої футбольної команди, участь в стрибку – все  це 
доступно в ігрових додатках. 
7.ОСВІТА 
Вчити дітей, студентів. Вивчати всі теми в цікавій формі. 
Навички навчання. ПДР, управління яхтами, дресирування домашніх тварин 
або в’язання – можливості для інтерактивних курсів. 
8.НОВИНИ 
Газети, журнали та інші ЗМІ. Ці додатки практичні і значно розширюють 
аудиторію публікацій. Новини та коментарі можуть передаватися в соціальну 
мережу або підсумовуватися. 
 
2.2. Характеристики мобільних додатків. Етапи становлення 
мобільних додатків до сайтів. 
Мобільний додаток – це окремий інструмент, функціональність якого не 
є необхідним для дублювання сайту, а навіть навпаки, для розширення 
навичок користувача, пропонування індивідуальних бонусів та рекомендацій 
та взаємодії з клієнтом більш особистим чином, на більш вузькому рівні [12]. 
Мобільний додаток – це розроблена програма для планшетів та смартфонів, 
яка встановлюється на певній платформі і має специфічний функціонал. 
Простіше кажучи, він виконує певні дії і вирішує ряд проблем. Останнім часом 
мобільні додатки – в більшості ігри. Однак підприємці незабаром зрозуміли, 
що ця програма може допомогти бізнесу, а освітяни – науці і освіті. І стати 
потужним інструментом, який може підвищити поінформованість та довіру до 
вашого сайту, бренду, проводити рекламні кампанії та спрощувати зворотній 
зв’язок. 
 
 
Для типів оновлення для мобільних пристроїв ви можете отримати 
доступ до нативних оновлень та мобільних гаджетів [17].  
Нативні додатки 
Ці додатки називають нативними тому, що вони написані рідною (з англ. 
Native – рідна) для певної платформи мовою програмування. Для Android цією 
мовою є Java, тоді як для iOS - objective-С або Swift. 
Позитивні риси нативних додатків: 
• швидкість роботи і продуктивність; 
• високий ступінь безпеки; 
• розширений інтерфейс; 
• максимально можлива функціональність; 
• здатність працювати без Інтернету; 
• зручність для кінцевого користувача. 
Негативні риси нативних додатків: 
• охоплення платформ; 
• тривалі терміни розробки; 
• відносно висока вартість розробки; 
• необхідність випускати оновлення в косметичних цілях [18]. 
Мобільні веб-програми – це не програмне забезпечення. Насправді 
додаток насправді є оптимізованим веб-сайтом для всіх. А щоб скористатися 
нею, потрібно мати на своєму пристрої браузер і знати адресу та бути 
підключеним до Інтернету (така інформація про додатки буде оновлена). 
Коли ви запускаєте мобільний веб-додаток, користувачі можуть 
встановити на робочому столі, виконавши всі кроки, які виконуються під час 
перегляду веб-сайту та створення сторінки закладок для веб-сайту. 
Веб-додаток працює між платформним, незалежно від платформи пристрою. 
Перевага полягає в тому, що в ньому не використовується програмне 
забезпечення. І це мобільна версія розширеного веб-сайту, тому веб-додаток. 
По мірі розвитку HMTL5 по мірі поширення веб-додатків зрозуміли, що 
 
 
просто вхід на веб-сайт через звичайний браузер дає доступ до багатьох 
функцій основної програми. Сьогодні, оскільки HTML5 покращує свою 
функціональність і все більше веб-сайтів використовують її, важко точно 
сказати, де знаходиться межа між веб-додатком та звичайним веб-сайтом. 
Веб-додаток було розроблено за допомогою існуючих інструментів та рамок. 
Крім того, процес розвитку значно прискорився за останні роки. Експерти з 
розвитку, всього іншого достатньо. А середня ефективність має середній 
рівень недоліків порівняно з іншими. Це також залежить від підключення до 
Інтернету постачальника послуг [2]. 
Плюси мобільних веб-додатків: 
• повне охоплення платформ; 
• простий і швидкий процес розробки; 
• кількість компетентних розробників; 
• відсутність необхідності завантаження з магазину додатків. 
Мінуси мобільних веб-додатків: 
• обов'язкове підключення до Інтернету; 
• убогий інтерфейс програми; 
• неможливість відправити push-повідомлення; 
• продуктивність і швидкість роботи; 
• незадовільний рівень безпеки. 
Гібридні програми – це поєднання локальних та веб-додатків. Зокрема, 
використання та доступ до кросплатформних функцій смартфона. Ці програми 
можна завантажувати лише з таких ринків, як Google Play та App Store. Однак 
вони мають можливість оновлювати інформацію в Інтернеті і для їх роботи 
потрібне підключення до Інтернету. Без останнього веб-функції просто не 
працюють. Найпоширеніший вибір для багатьох компаній – це розробка 
гібридної програми. Це пояснюється тим, що гібридні програми можуть 
поєднувати перевагу носіїв мови з технологічною актуальністю, яку 
пропонують новітні веб-технології [19]. Розробка гібридного додатку також є 
перспективною, оскільки його потрібно будувати на двох платформах. Це 
 
 
усуває проблеми з розробкою окремої програми для кожної операційної 
системи. Слід зазначити, серед іншого, що якість та продуктивність гібридних 
програм багато в чому залежать від рамок, якими користується розробник. 
Фактори, що становлять гібридні програми в контексті інших, потрібно 
враховувати. Тому варто розробити, якщо вам потрібно заощадити на 
бюджетному плані, потрібно створити порівняно просту програму з простою 
анімацією, завдання – швидко розробити програму як мінімум на 2 платформи. 
  
2.3. Художньо-естетичні особливості ілюстрацій і шрифту в 
мобільному додатку для сайту 
Процес читання є складним розумовим процесом, який включає не 
тільки процеси аналітичного та логічного мислення, а й зорове сприйняття 
тексту, концентрацію уваги, уяви та пам’яті. Ілюстрації є своєрідним 
прискорювачем цього процесу і невід’ємною частиною додатку. Термін 
«ілюстрація» походить від латини (illustration – малюнок) і описує тип графіки, 
що служить для візуального доповнення та пояснення тексту книги [20]. 
Розрізняють три види комп’ютерної графіки: 
1) Растрове зображення – це набір пікселів, кольорових точок, 
розташованих на сітці. Джерелом растрових є також спеціальні пристрої 
введення: сканери, відеокамери, цифрові фотоапарати. 
2) Векторна, у цій графіці базовим елементом є лінія. Основні графічні 
примітиви: лінії, еліпси, кола, многокутники тощо. Перевагою такої графіки є 
те що об’єкти можна легко трансформувати. Редагування векторного об’єкта 
дозволяє змінювати властивості ліній, які складають зображення. 
3) Фрактальна графіка – нерегулярна, самоподібна структура. В 
широкому розумінні фрактал означає фігуру, малі частини якої в довільному 
збільшенні є подібними до неї самої [21].  
Ці типи відрізняються за принципом формування зображення при 
виведенні на екран монітора або друку на папері. 
Правомірна і інша класифікація комп’ютерної графіки: 
 
 
1) Двомірна графіка – це зображення, яке має два вимірювання, тобто 
яке лежить на площині. Цей вид графіки є основою комп’ютерної графіки, в 
тому числі і трьохмірної (Додаток А, рис. А) [22]. 
2) Тримірна (3D) графіка використовує спеціальні програми для 
призначення текстур, кольорів, прозорості та непрозорості спеціальним 
моделям, забезпечує камеру, яка умовно переміщається у кіберпросторі, і 
створює просторову модель на комп’ютері з простих і складних геометричних 
фігур, які розміщуються в цьому просторі. Цей вид комп’ютерної графіки 
використовується для створення комп’ютерних ігор, реклами тощо (додаток 
А, рис. А2) [23]. 
Технічні засоби роботи з комп’ютерною графікою: засоби для введення 
інформації – графічний планшет, сканер, цифрова фотокамера, та засоби для 
виведення інформації – монітор, дисплей та принтер. 
При створенні комп’ютерної графіки – технічні засоби, такі як графічні 
редактори, які дозволяють користувачам створювати та редагувати 
зображення на екрані комп’ютера та зберігати їх для подальшого 
використання. Деякі графічні редактори використовуються лише для 
редагування готових зображень, таких як фотографії, тоді як інші в основному 
використовуються для редагування з можливістю редагування зображень. 
Існує безліч графічних редакторів, які можна використовувати для роботи з 
різноманітною графікою, включаючи векторну, растрову та 3D-графіку. Raster 
Graphics Editor – спеціальна програма для створення і редагування растрових 
зображень, використовується ілюстраторами для підготовки зображень до 
роботи, друку або публікації в Інтернеті. Найвідоміші растрові редактори: 
Adobe Photoshop, Adobe Fireworks, Corel Photo-Paint, Corel Painter, GIMP, 
Microsoft Paint, Microsoft Photo Editor, Krita, Artweaver, Tux Paint, Paint.NET, 
PhotoFiltre, PaintTool SAI. [24].  
Найвідоміші векторні редактори: CorelDRAW, Adobe Illustrator, Xara 
Xtreme, Adobe Fireworks, Inkscape, Alchemy, SK1 [25].   
 
 
Нові технічні концепції створення ілюстрацій стали основою для 
мультимедійних та інтерактивних видань. Останнім часом активно 
розвивається комп’ютерна анімація для створення об’єктів за допомогою 
комп’ютерних технологій (3D-анімація, 2D-анімація). 
Анімація з латини (anima - душа, animatio - натхнення, реанімація) – 
серія малюнків, кольорових плям, спосіб зміни форми предмета для імітації 
руху або для відображення послідовних зображень. Анімація займає 
центральне місце в оформленні мобільних додатків, а головна роль аніматора 
– розробляти анімацію, яка спонукає до нормального розвитку та виховує 
любов до природи, краси та чистоти [26]. 
Шрифти відіграють важливу роль у дизайні. Він створює настрій, 
викликає емоції та допомагає розпізнавати зображення перед прочитанням 
тексту. Це складові візуальної комунікації, які працюють з підсвідомістю 
глядача, такі як [27]: 
1. Насиченість, яка впливає на рівень примусу до дотику: від тонкої 
делікатності (Thin) до грубої наполегливості (Black) (Додаток А, рис. 
А3). 
2. Ширина, яка може вплинути на терміновість повідомлення: від 
кричущих заголовків (Extra-Condensed) до довгоочікуваних примар на 
горизонті (Extra-Expanded) (Додаток А, рис. А4). 
3. Контраст регулює рівень артистизму висловлювання: від автоматичних 
синтезаторів мовлення (Нульовий контраст) до солістів великої опери 
(Максимальний контраст) (Додаток А, рис. А5). 
4. Висота рядкових пов’язана з бажанням справити враження на глядачів: 
від любовних листів (дрібні рядкові) до байдужої таблички "Перерва" 
(великі рядкові) (Додаток А, рис. А6). 
5. Округлення кутів впливає на рівень ніжності: від сплячих маленьких 
дітей (Сильне округлення) до шумних підлітків (Загострення) (Додаток 
А, рис. А7). 
 
 
6. Зарубки та бруски створюють культурний контекст: від класичного 
ідеалізму (Зарубки) до прагматизму заводського штампування (Бруски) 
(Додаток А, рис. А8). 
7. Курсив та нахил хоче привернути до себе уваги: щоб ввічливо уточнити 
(Italic) або терміново повідомити (Oblique) (Додаток А, рис. А9). 
8. Геометрія відображає цінність життя: від поваги до людських якостей 
(Гуманістичні шрифти) через естетичні експерименти (Геометричні 
шрифти) і до захоплення машинами майбутнього (Модульні шрифти) 
(Додаток А, рис. А10). 
9. Статика і динаміка передають індивідуальність та багатство 
внутрішнього світу: від нейтральної Гельветики (Статичні шрифти) до 
старостиних антикв (Динамічні шрифти) (Додаток А, рис. А11). 
10. Відкритість впливає на комунікабельність і прогресивність: від 
ліберального екстраверта (Відкриті шрифти) до консервативного 
прикордонника (Закриті шрифти) (Додаток А, рис. А12) [27]. 
При оцінці шрифту необхідно визначити гарнітуру та його розміри 
(висота, товщина штрихів тощо). Основними вимогами до шрифтового 
малюнка для видання підручників, особливо для дітей раннього віку, які 
забезпечують зручність читання шрифту, є: 
• простота контуру букв, чіткість, що визначається індивідуальною 
виразністю букв і достатнім розміром внутрішньолітерних проміжків, 
що створює наближення форми букви до квадрата (для дітей старшого 
шкільного віку можна дозволити співвідношення ширини літери до 
висоти 1: 1,5 і 1: 1,75); 
• помірний контраст між основними (вертикальними і сполучними 
(горизонтальним і похилим) штрихами). 
 
 
 
 
 
2.4. Дизайн сайтів і їх розвиток. Характеристика графіки, тексту, 
анімації для сайтів  
Дистанційна освіта набула широкого поширення в епоху високих 
технологій. Це забезпечив простий і доступний спосіб отримати інформацію з 
епохи сучасних технологій. Сьогодні обмін інформацією є важливою 
частиною життя кожного. А такі пристрої, як телефони, планшети та 
смартфони стають основою цифрового життя. У міру розвитку технологій 
електронні пристрої використовують все більше процесорів, щоб вони могли 
виконувати складніші завдання та обробляти більше потоку інформації. В 
даний час майже кожен вік від 6 років має мобільний пристрій. Тому мобільні 
додатки завжди важливі. Більшість користувачів не повністю використовують 
свої пристрої та не показують, що розробники вкладають кошти в їхні 
пристрої. Це означає, що студенти не знайомі з функціональністю смартфонів 
та інших смарт-плагінів. Багато досліджень показують, що більшість молодих 
людей знайомі лише з ігровим аспектом життя комп’ютера. Немає факту, що 
мобільні додатки, смартфони та інші смарт-плагіни використовуються для 
отримання додаткової інформації у сфері навчальної мотивації. Дослідження 
науковців за допомогою мобільних додатків – порівняно новий метод, який 
набув популярності. Наразі недостатньо підстав для створення нової системи 
навчання на основі додатків. У зв’язку з вищезазначеним має сенс 
використовувати мобільні додатки як допоміжні елементи в системі освіти. 
Студенти все більше віддають перевагу мобільній технології та регулярно її 
використовують у особистому житті [28]. Тому не дивно, що сучасній молоді 
не важко використовувати мобільні пристрої для навчання та не обмежується 
певними потребами. Протягом тривалого часу студенти прагнули самостійно 
користуватися мобільними пристроями під час читання: 
Однією з переваг використання мобільних технологій у навчальному 
процесі є можливість контролювати інформацію, яку отримують студенти. 
Окрім свободи вибору серед великої кількості наявної інформації, студентам 
надаються необмежені можливості для свободи навчання та самостійності. На 
 
 
відміну від традиційних навчальних матеріалів та завдань, мобільне навчання 
використовує інноваційні технології, що трансформують навчальну програму. 
Сучасні сервіси, такі як соціальні мережі, хмарне зберігання даних та хостинг 
мультимедіа, використовуються для надання певних типів інформації, а 
останнім часом деякі викладачі почали використовувати соціальні мережі для 
надсилання корисної інформації. Для задоволення освітніх потреб сучасних 
людей неминуче необхідно знайти нові та відповідні методи для існуючих та 
методів передачі знань.  
Зміни відбулися завдяки розвитку мобільних додатків. Успішне 
впровадження модернізованої системи навчання вимагає відмінного 
навчального середовища та вміння працювати з кількома користувачами. 
Існують плюси і мінуси використання мобільного навчання в навчальній 
програмі. Цей вид навчання фактично використовується в успішних додатках 
у фазі формування. Дослідники ЮНЕСКО виділяють багато переваг 
мобільного навчання ліквідність.  
Сучасні розумні інструменти дозволяють організувати та оптимізувати 
процес навчання незалежно від місця та часу. Цей тип мобільності має два 
аспекти. По-перше, можливість реалізувати навчальну програму, незважаючи 
на те, що вона є кваліфікованим фахівцем. По-друге, ви можете легко 
отримати доступ до нього з різних пристроїв за допомогою хмарної системи 
зберігання даних. Якщо ви перемикаєте телефони, студенти мають доступ до 
всієї наявної раніше інформації. 
Оскільки власники мобільних пристроїв часто є, вони роблять процес 
навчання безперервним: тому вони можуть виконувати завдання, які їм 
підходять у будь-який час, а вчителі можуть брати пасивну частину навчання 
поза аудиторія. Мобільні додатки дозволяють здійснювати постійні навчання 
в місцях військових конфліктів і навіть у районах катастроф, що є ще одним 
свідченням наступності. 
 
 
Адаптувати навчання. Мобільний додаток дозволяє студентам додавати 
та вибирати статті незалежно від їх інтересів чи завдань. Можливість 
змінювати вміст учнів може регулярно оновлювати додаток, а процес 
редагування вмісту стає цікавішим, оскільки він має кілька банальних кроків, 
наприклад: написати статтю, шукати фотографії, зв’язатися з дизайнерами 
іншого відділу, розробити нові ілюстрації (якщо потрібно), додати відео 
контент, завантажити статті та спроектувати їх, щоб додати до програми . 
Можливість отримати інформацію, таку як читання, прослуховування статті 
чи перегляд відео, робить навчання унікальним для кожного користувача, а 
отже, робить частку засвоєння інформації студентами більш ефективною. 
Незважаючи на переваги, є й деякі недоліки [29]: 
• Труднощі з вільним доступом до Інтернету в деяких регіонах, які 
вимагають практичної роботи з використанням додатка гаджетів; 
• фінансові витрати на запуск мобільного додатку високої якості; 
• якщо ви не працюєте з технічним обладнанням, виникнуть інші 
труднощі в навчанні та засвоєнні матеріалу. 
Незважаючи на ці недоліки, деякі або всі їх можна усунути. Наприклад, 
ви можете покращити зручність використання за допомогою покрокових 
інструкцій. 
Мобільні додатки сьогодні складають близько 1,5 мільярдів одиниць, що 
майже втричі перевищує кількість настільних ПК. І не можна ігнорувати такий 
фактор, як відповідність веб-сайтів мобільним додаткам. Тому що набагато 
зручніше отримати доступ до різних типів інформації. Часто студенти 
використовують розумні пристрої, комунікації та планшети не лише для ігор, 
але й для навчальних цілей. Іншими словами, робота з мобільним пристроєм 
підвищує технічну компетентність студента та послаблює його можливості 
для комунікативної компетентності. 
 
 
Державний університет Арізони щорічно навчається 70 000 студентів, 
що є високим рівнем зарахування серед навчальних закладів США. Майкл 
Кроу, президент університету, назвав свою школу "новим університетом 
Америки" та обрав стратегію активного впровадження технологічних 
інновацій у галузі мобільного та електронного навчання. У 2011 році було 
запроваджено експеримент із адаптивного навчання за участю Кнеутон та її 
партнера Пірсона, гіганта платних освітніх послуг. Попередні результати 
експерименту показали, що результати покращилися на 18% [30]. 
Ця серія програм дозволяє студентам переглядати відео та переносити 
лекції на своїх смартфонах та планшетах та слухати їх так часто, як їм 
подобається, у будь-який час та в будь-якому місці. 
Переваги застосованих програм:  • інтуїтивний інтерфейс; • 
практична бібліотека з навчальним матеріалом; • миттєвий доступ до 
улюблених тем; • Відображення офлайн-статей. 
Розгортання мобільних додатків у процесі навчання доступно для ряду 
функцій (голос, обмін повідомленнями, обмін відео та аудіо тощо). 
Цей формат навчання зараз використовується та пропонує сучасні 
інформаційні матеріали. Мобільна освіта створюється, з одного боку, 
взаємною співпрацею, з іншого - лише шляхом створення освітньої спільноти. 
Запропонований підхід до організації навчання студентів через мобільні 
пристрої розширює умовні рамки, використовуючи нові функції для 
мобільних платформ. Це розширює та виходить за рамки навчального 
середовища. Досвід використання освітніх технологій показав, що вони є 
здійсненними та ефективними в сучасній навчальній практиці. Використання 
таких нововведень у системі освіти сприяє успішному розвитку предмета. 
 
 
 
 
Висновки до другого розділу 
У другому розділі було проаналізовано стан і розвиток мобільних 
додатків в світі і Україні, також досліджено характеристику мобільних 
додатків їх класифікацію. Наголошено, що у Західній Європі та США мобільні 
додатки вже набули популярності, а українські заклади освіти тільки 
віднедавна розпочали цікавитися такою продукцією для студентської 
аудиторії.  
Зазначається, що популярність мобільних додатків обумовлена не тільки 
простотою їх використання, а й одночасним використанням інформаційного 
контенту, аудіо- та відеоматеріалу, можна збільшити пам’ять поданого 
матеріалу на 40-50% . Використання мультимедійного матеріалу скорочує час 
навчання та зменшує запам’ятовування на 30-40%. За останні роки в Україні 
з’явилися нові перспективні напрямки цієї галузі. 
Також було розглянуто художні засоби в дизайні  мобільного додатку  
(шрифт, ілюстрація, анімація), означено їх особливості у використанні для  
дизайну мобільного додатку, а також проаналізовано і класифіковано технічні 
засоби в створенні дизайну мобільного додатку.  
Встановлено, що для розробки мобільних додатків існує безліч 
інструментальних засобів та сервісів, є редактори розроблені спеціально для 
дизайнерів, що є альтернативою створення додатків. Створення мобільного 
додатку технологічно є складним процесом і потребує залучення до процесу 
аніматорів, програмістів тощо. 
 
 
  
 
 
 
 
 
 
 
РОЗДІЛ 3 
РОЗРОБКА ПРОЄКТНОЇ ПРОПОЗИЦІЇ 
 
Термін „дизайн” походить від англійського „design” – проєктувати, і 
означає вид художньої діяльності, що пов’язаний із проєктуванням  
предметного світу [31].  
 
3.1. Визначення концепції проєктної пропозиції 
Концепція (лат. Сonceptio – розуміння) – система поглядів, розуміння 
явищ і процесів; єдиний, визначальний задум. Концепція додатку задум 
авторського твору, на якому базується видання, характер і зміст вимог читача, 
типові ознаки додатку. Концепція визначає всю подальшу творчу та практичну 
роботу над додатком. Створення концепції означає проєктування, 
знаходження та обґрунтування параметрів майбутніх додатків як за 
типологічними ознаками, так і за оформленням — художнім, технічним тощо. 
Концепція дослідження – система початкових теоретичних положень, яка є 
основою дослідницького пошуку [31]. 
Концепція містить у собі: 
 1. Методологія дослідження, тобто система принципів 
дослідження на основі діалектичного методу та системного підходу. 
 2. Сукупність методів дослідження, які є методами збору, обробки 
та аналізу даних. 
 3. Принципи організації процесу дослідження. 
Метою рецензованого мобільного додатку є розвиток та зміцнення 
навичок спілкування щодо сайту ЧДТУ. Мовний та ілюстративний матеріал 
додатку  базується на комунікативному підході. Кожна з частин має продумане 
графічне та художнє оформлення. 
Усі деталі та ілюстрації розроблені в стилістики «плоский» дизайн або 
«Flat-design». Він є дуже простим у своєму виконанні і тому дуже добре 
 
 
сприймається. Сам цей стиль є дуже популярний у веб-дизайні як і у розробці 
сайтів,  так і у розробці мобільних додатків.  
Розроблені яскраві, емоційно-виразні персонажі які залишаються 
пізнавальними для студентів та цікавими для сприйняття. Доповнюючи 
елементи такі як  стрілки, плашки, кнопки та клавіатура також виконанні у 
стилі «плоский» дизайн. Вони дуже чітко контрастують з текстом і не 
відволікають нашу увагу.  
Під час розробки мобільного додатку дуже важливим є врахування 
впливу кольорової гами та шрифтових рішень на сприйняття споживачем 
образу сайту і додатку в цілому. 
Психологи давно виявили, що колір здатний чинити певний вплив на 
психіку людини. Причому виявляється це дуже різним чином. Іноді він 
стимулює розвиток деяких реакцій, які сприяють прийняттю рішень. Колір 
може заспокоювати або акцентувати увагу. Наприклад, коли за вікном 
похмуро, настрій починає погіршуватися. А при сонячній погоді воно навпаки 
поліпшується. Основні кольори що використовуються для розробки дизайну 
мобільного додатку є : білий і синій як фірмові кольори ЧДТУ (Додаток Б, рис 
Б1) [32]., а також акценти жовтого, зеленого і червоного кольорів. 
Психологія основних кольорів для мобільного додатку [33]: 
Синій / блакитний: 
У психології синій розглядається як колір цілеспрямованих і упевнених 
в собі людей. А правильний відтінок синього може принести приємне спокій 
вашим відвідувачам. Темно-синій вважається діловим, професійним і 
авторитетним - не дивно, що ділові люди люблять його так сильно. Синій часто 
використовується на веб-сайтах, пов’язаних з технологіями, тому що він 
створює відчуття надійності і довіри. У поєднанні з білим, зеленим, бежевим. 
Переваги: Це заспокійливий колір, сприяє фізичному розслабленню, 
створює атмосферу безпеки і довіри. Синій – це колір творчості. 
Недолік: Холод, який відволікає від нього, на відміну від теплих 
кольорів червоного і жовтого, відразу привертає загальну увагу. 
 
 
Зелений: 
Це колір гармонії і внутрішнього щастя, сміливо використовується 
дизайнерами для прикраси веб-сайтів. Поєднується органічно з білими, світло-
зеленими, коричневими, помаранчевими, чорними і сірими тонами. 
Переваги: Освіжає і розслабляє, і люди відчувають себе натхненними 
означає баланс і гармонію в дизайні як в природі. 
Недоліки: Кандинський справедливо коментує: «Абсолютний зелений - 
самий спокійний колір з доступних. Він нікуди не рухається і не чує ні радості, 
ні смутку, ні пристрасті. Він не вимагає нічого, нікуди не дзвонить. Це 
нерухомий, самовдоволений, обмежений в просторі елемент». [33] 
Жовтий: 
Мабуть, універсальний колір палітри в поєднанні зі щастям, сонцем, 
ентузіазмом, архаїзмом (в його більш темних, спокійних тонах). Жовтий 
заряджає енергією, але ніжно і в той же час створює відчуття комфорту. 
Темно-жовті і золоті тони викликають цікавість, дають користувачеві відчуття 
старовини, стабільності, мудрості і дають впевненість в авторитеті і 
професіоналізмі компанії. Цей універсальний колір підходить для різних тем і 
підсилює кожне конкретне повідомлення. [34] 
Вибір вище наведених кольорів є заспокійливими для роботи, вони не 
відволікають увагу від роботи, а також допомагають заповнити та 
сконцентруватися на вивченні матеріалу.  
Основними фірмовим шрифтом для мобільного додатку є гарнітура Inter 
(Light, Regular, Medium, Bold). Шрифтовий блок: чіткий, читабельний, 
простий, має контраст з тлом; композиційна цілісність побудови (Додаток  Б, 
рис.Б2). 
Даний шрифт є дуже лаконічний та простий , у ньому є різні товщини 
які допомагають виділяти та позначати важливі моменти тексту. Дуже добре 
сприймається вивчений матеріал. 
Фірмові кольори та шрифти надають чіткість та простоту у вивченні 
матеріалу мобільного додатку.    
 
 
3.2. Пошук та аналіз аналогів. Ескізний пошук 
Для того, щоб створити абсолютно унікальне зображення, яке не є 
аналогом будь-якої іншої картинки, необхідно реалізувати повний цикл 
дизайну, тобто аналіз уже реалізованих проєктів і вибір прототипу для 
майбутніх графічних листів, оформлення стіни та розробки дизайну 
мобільного додатку. Цей етап допомагає нам виявити переваги та недоліки 
певного зображення. При цьому суттю дизайнерської діяльності у графічному 
дизайні є комплекс знань і навичок, який використовується в подальшому для 
створення певного дизайн-проєкту. Аналог – це  вже реалізовані проєкти, 
подібні до того, який ви плануєте створити. У цих проєктах ви знаходите ті 
ознаки, які вам подобаються і які ви б хотіли в підсумку спостерігати і в 
вашому проєкті. Це може бути якесь конкретне дизайнерське рішення, 
стилістика проєкту в цілому або якийсь вдалий елемент [35]. 
На етапі досліджень було розглянуто та проаналізовано аналоги для 
того, щоб обрати найбільш вдалий прототип для створення майбутніх 
графічних листів, оформлення стіни та дизайну мобільного застосунку. 
Прикладом таких аналогів є: 
1. Перший додаток – це Google Календар. Цей сервіс створений для 
планування зустрічей і подій. Версія додатку вийшла в 2006 р., а офіційний 
був у 2009 р. Ця програма створена для платформ iOS і macOS. Вона дозволяє 
задавати час зустрічі, створювати повторювані заходи, встановлювати 
нагадування, а також запрошувати інших учасників з повідомленням по 
електронній пошті [36].  
Інтерфейс Google Календар виконаний в стилі Material Design (Додаток 
Б. рис. Б3.). Загальний дизайн виглядає зрозумілим за рахунок упорядкування 
простору і колірних акцентів. Візуальний елемент дати і дня тижня виділений 
за рахунок збільшення розміру. Панель інструментів знаходиться нагорі, а 
рядок пошуку представлений піктограмою  
 
 
 
 
2.Другий аналог: «Moва: ДНК нації» 
Головний герой програми - Лепетун. В примітках «Синоніми», 
«Фразеологізми», «енциклопедії» та ін. Він навчає вас, які слова - калька, 
пояснює написання слів і фраз, пояснює, коли вживаються правильні 
синоніми, і дає тест для перевірки ваших знань. Матеріал у заявці подавали у 
вигляді ілюстрацій із прикладами та короткими поясненнями. Тому 
користуватися цим додатком зручно і цікаво. (Додаток Б, рис. Б4) [37]. 
3.Третій аналог: – Інтерфейс Any.do 
Any.do – програмний продукт, призначений для управління нотатками і 
нагадуваннями. Концепція Any.do практично не розмежовує ці сутності. 
Згідно з концепцією програми відмінність між нагадуванням і заміткою лише 
одне – нагадування має час оповіщення. Всі інші атрибути однакові. (Додаток 
Б., рис.Б5). Додаток має чистий і простий в навігації інтерфейс з безліччю 
корисних функцій для створення, організації та, що особливо важливо, 
фактичного просування по всім типам списків [38]. 
4. Четвертий аналог : додаток під назвою Tappsk було створено в 2018 р. 
Це щоденник і планувальник завдань, який підтримується тільки для 
платформи iOS. Цей додаток об'єднує в собі інструменти для планування 
завдань з щоденником і трекером звичок. В даному додатку максимально 
інтерактивний інтерфейс (Додаток Б рис. Б6), проста фіксація завдань. 
Дизайнери цікаво оформили звички елементами, що нагадують «Історії» в 
Instagram. Основна функціональність – це список завдань. Є можливість 
розбивати їх на етапи і керувати повідомленнями [39].  
5. П’ятий аналог Notes – настільний і мобільний додаток 
Notes – настільний і мобільний додаток операційних систем iOS і macOS 
[40]. За допомогою програми «Notes» користувач може записувати свої ідеї, 
створювати замальовки, списки і додавати в них відразу ж фотографії, а також 
виконувати інші дії (Додаток Б, рис.Б7). 
 
 
 
 
6.Шостий аналог Lingualeo. 
Lingualeo більш відомий серед європейських глядачів. У нього більше 
різноманітних уроків: реальні тексти, відео, багато видів тестових завдань. 
Деякі вправи (наприклад, аудіювання) і курси граматики вимагають підписки 
на преміум-аккаунт. Існує також Гейміфікація: виконуючи вправи, ви 
заробляєте фрикадельки, якими годуєте лева (Додаток Б, рис. Б8) [41]. 
7. Сьомий аналог Мобільний додаток до посібника «Welcome to 
Ukraine» Представлено дизайн мобільного додатку до посібника «Welcome to 
Ukraine», який розроблено В.Кудревич в магістерській роботі 2021 р. Додаток 
в майбутньому може полегшити навчальний процес студентів, та заохотити їх 
до навчання та вивченню мови. Кольорова гама стримана, базується на 
блакитному і жовтому кольорах, представлено позитивного корпоративного 
героя. (Додаток Б, рис.Б9) [42].  
 На основі аналогів були створені пошукові ескізі для ілюстративного 
матеріалу, який використовується на сайті, як показано на рис.3.1. 
 
 
Рис. 3.1. Ескізний пошук для ілюстративного матеріалу 
 
 
 
 
 
 
3.3. Етапи розробки дизайну мобільного додатку для сайту 
Черкаського державного технологічного університету 
Етап 1. Отримання завдання. 
Розробка мобільного додатку почалась з вивчення і аналізу фірмового 
стилю ЧДТУ, знаку, герба, прапора тощо. Завдання включало в себе розробити 
простий та лаконічний дизайн мобільного додатку, який буде легкий у 
застосуванні будь-де, а також буде доповненням для сайту ЧДТУ. (Додаток С, 
рис. С1-2) [43]. 
Етап 2. Робота з інформаційними джерелами, розробка концепції. 
Текстову інформацію було опрацьовано. В результаті було виділено 
основні частини, на які поділяється сайт: 
Основною концепцією даного мобільного додатку стало допомогти  
студентам ЧДТУ швидко і з зацікавленням осягати інформацію з сайту ЧДТУ. 
Так як мобільний додаток являється доповненням до сайту, то студент зможе 
з легкістю користуватись і тим, і іншим, а за допомогою мобільного додатку і 
актуальності такого носія ним можна користуватися у зручний час. 
Етап 3. Пошук аналогів, вибір прототипу. 
Було проаналізовано безліч аналогів і обрано сім найбільш відповідних 
даній тематиці. Аналіз матеріалів дозволив прийти до висновку, що кращим 
зразком продукції, яка підходить для графічного рішення мобільного додатку 
стали додатки «Welcome to Ukraine», Lingualeo. (Додаток Б, рис. Б6-7) 
За прототип було взято додаток ««Welcome to Ukraine».  У даному 
додатку є головний герой, який дає підказки та допомагає у вивченні 
матеріалу. Змістовна інформація для вивчення. (Додаток Б, рис. Б7) 
Етап 4. Пошуки композиційного рішення, ескізи. 
Після того як була проведена робота з інформаційними джерелами та 
виділено основні розділи та їх підрозділи, було проведено композиційний 
пошук. Було вирішено зробити спершу невелику частину з ознайомленням 
користувача з додатком.   
Етап 5. Малювання ескізів екранів (wireframes) 
 
 
Wireframes – це швидкі начерки додатку. Ескіз, схема того, де будуть 
розташовуватися зображення, ярлики, кнопки та інше. Це ескіз того, як 
додаток має працювати. Інтерфейс додатку повинен бути максимально 
інтуїтивно зрозумілий для користувача для всіх пристроїв [44]. 
Для малювання wireframes було використано  програму Adobe 
Illustration.  
Етап 6. Вибір колірної гами та шрифтове направлення. 
Основні кольори що використовуються підручнику є : блакитний, білий. 
світло-жовтий, зелений та темно синій, червоний. Шрифт обрано INTER. Такі 
кольори було і обрано для створення дизайну мобільного додатку. А також до 
основних кольорів було додано декілька допоміжних кольорів (рис.3.2.).  
 
 
Рис.3.2. Основні та допоміжні кольори у мобільному додатку, шрифт 
 
Етап 7. Створення і подача дизайну (mock-ups) 
Створюємо дизайн всіх екранів майбутньої програми і промальовуємо 
різні стани всіх сценаріїв користування. Всі елементи графічного інтерфейсу 
повинні бути в єдиному стилі, який вже використовувався на сайті. Створенні 
дизайн-рішення повинні бути ергономічними та дозволяти користувачеві 
ефективно вирішувати свої завдання. 
 
 
Було створено перший екран, де нам потрібно авторизуватися з 
запропонованих та усім знайомих додатків, де буде створено ваш обліковий 
запис. Користувач вони перенести свої особисті данні з таких додатків, як: 
фейсбук, інстаграм або обліковий запис у гугл (рис.3.3.) 
 
 
 
 
 
Рис.3.3. Авторизація 
 
На другому екрані користувач вибирає з запропонованих йому мову ту 
якою він володіє. На даному етапі це такі мови, як: українська, англійська, 
французька, німецька, китайська. (рис.3.4.) 
 
 
 
Рис.3.4. Вибір мови 
Після того як було обрано мову ви можете побачити коротке 
повідомлення що нас чекає у додатку. Після всіх необхідних заповнень 
інформації перед нами з’являється головні герої цього додатку. І допоможе 
користувачеві з проходженням матеріалу, а також буде давати певні підказки. 
Викликати помічника можна за допомогою іконки знаку питання (рис.3.5.) 
              
 
Рис.3.5. Головні герої 
 
 
 
На далі обирається тема з запропонованих. Дана частина 
супроводжується цікавою інформацію та ілюстраціями які показують нам той 
чи інший випадок.  
Бокове меню йде з посиланнями на акаунт, освітянські моменти,  
клавіатура тощо. (рис.3.6.) 
 
 
 
Рис.3.6. Бокове меню 
 
Наприкінці вивчення курсу користувач може послухати запропоновані 
пісні українською мову, продивитися культурні події в ЧДТУ або ж 
повернутися на початкове меню. Подача проєкту дизайну мобільного додатку 
для сайту ЧДТУ (рис.3.7.) 
 
 
Рис.3.7. Подача проєкту 
 
 
3.4. Рекламна продукція, характеристика 
Рекламна продукція – це рекламні матеріали, які створюються для 
просування та розповсюдження товарів і послуг, а також для залучення нових 
клієнтів. До рекламної продукції розробленого проєкту входять рекламні 
плакати [45]. 
Після закінчення дизайну мобільного додатку, створюється робочий 
варіант. Згідно з погодженим варіантом складається технічне завдання для 
програмістів, які будуть розробляти мобільний додаток.  
Вибирається операційна система під яку буде розроблено додаток. Під 
кожну мобільну платформу розробляється свій окремий додаток тому у кожної 
платформи своя незалежна операційна система (ОС). 
На даний момент є 3 основні платформи: 
• Платформа Apple. iOS (iPhone, iPad), WatchOS для розумних годин і 
tvOS для телевізорів. 
• Платформа Google. Основні їх ОС це: Android (смартфони, планшети), 
Android Wear (розумні годинник) Android TV (телевізори і 
мультимедійні приставки). 
• Платформа Microsoft. Їх основна і універсальна ОС - UWP (Universal 
Windows Platform). Це програми, і працюють на всіх типах пристроїв, на 
яких встановлена Windows 10, тобто - Mobile, PC, Surface, xBox і навіть 
Holographic. 
Плакати – це великі зображення з текстовими повідомленнями, 
розроблені для рекламних, інформаційних та освітніх цілей. Лаконічність, 
простота та ефективність рекламного плаката надають рекламі особливу 
виразну силу.  
Плакати повинні бути помітні зблизька і здалеку. Створюючи плакат, ви 
повинні ретельно подумати про аудиторію, на яку націлений ваш плакат. Текст 
на плакаті повинен бути коротким і зрозумілим. Розмір і шрифт повинні бути 
 
 
розбірливими і відповідати жанру майбутнього плакату.  
В процесі створення рекламного плакату для мобільного додатку 
визначено центральну мету сайту, те що необхідно прорекламувати. Було 
визначено цільову аудиторію – викладачі, студенти тощо. Плакат виконаний в 
стилістиці самого додатку, таким чином він доповнює додаток і сайт.  
Рекламний плакат для мобільного додатку містить в собі основну 
інформацію сайту (Рис.3.8) (Додаток С., рис.С3).   
 
 
 
Рис. 3.8. Рекламний плакат до мобільного додатку 
 
3.5. Анімаційний ролик-презентація мобільного додатку 
Відеореклама – форма реклами, яка розміщується в Інтернеті та на 
телебаченні для створення іміджу компанії, просування послуг чи продуктів 
або надання інформації для збільшення попиту. 
Відео є найбільш привабливим з усіх видів реклами. Це тому, що 
рекламні відео впливають як на перегляд, так і на слух одночасно. Звук, рух, 
емоційна гра, спецефекти, текст – усе це змушує підсвідомість глядача 
реагувати першим. І відео, і постер мають бути стислими, простими та 
зрозумілими. Текст повинен бути коротким і зрозумілим.  
Види відеороликів: 
• Бліц-ролик триває в середньому 15-20 секунд. У ньому, як правило, 
 
 
подаються назва і товарний знак. Основне завдання бліц-ролика – 
постійне нагадування. 
• Розгорнутий ролик триває 30 і більше секунд. У ньому, крім тих 
відомостей, що наводяться у бліц-ролику, подається опис і 
характеристика товарів чи послуг, умови. Більш ретельно прообляються 
сюжет і сценарій. 
• Рекламно-демонстраційні ролики. Це всілякі «телемагазини» і 
«магазини на дивані», де протягом 5-10 хвилин розповідають про переваги і 
якості товару чи послуг, показують його у дії і пропонують придбати його, 
зателефонувавши за вказаними телефонами. 
Рекламний ролик мобільного додатку для сайту ЧДТУ має більш 
розширену функцію, а ніж плакат. Відеоролик крім того що рекламує сам 
додаток і сайт, він також показує інформаційну насиченість, його художнє 
оформлення і інтерактивність. У відео показано всі інтерактивні елементи в 
дії, також як потрібно користуватися додатком, його переваги і зручність 
використання. Тривалість відеоролика приблизно 30 секунд. Відеоролик було 
створено за допомогою програмного забезпечення, а саме Аfter Еffects, Vegas 
Pro (рис.3.9-3.10). 
   
 
Рис.3.9. Кадр ролика 
 
 
 
 
Рис.3.10. Кадр ролика 
Висновки до третього розділу 
Дизайн-проєкт мобільного додатку  для сайту Черкаського державного 
технологічного університету базується на основі практичного застосування 
теоретичних відомостей, набутих під час наукового дослідження. Для 
ілюстративного матеріалу мобільного додатку було розглянуто структуру 
обраних додатків та їх дизайн і визначено напрямки, відповідно до яких 
розвивався дизайн власної авторської пропозиції. 
Головні вимоги художнього оформлення проєкту, які було дотримано – 
це створення: 
а) ряду зображень, здатних заохочувати переглядати додаток, а саме: 
сприяти розвитку образного й логічного мислення, сенсорних здібностей, 
концентрації уваги, пам’яті та уяви; 
б) художніх образів, здатних активізувати усвідомлення людини при 
використанні додатку та запам’ятовуванні інформації. 
 
 
 
 
 
 
 
 
 
 
 
ВИСНОВКИ 
 
Створення мобільного додатку для сайту є складним процесом. 
Необхідно зрозуміти призначення цього додатку та особливості використання 
елементів. У рамках дослідження було проаналізовано властивості структури 
тексту, шрифтових виділень, графічного матеріалу та колірного оформлення 
мобільного додатку. Основними інтерактивними елементами, що 
використовуються у додатку стали текстові посилання, елементи навігації, 
кнопки перемикання.  
В роботі досліджено можливості особливостей художніх засобів в 
дизайні мобільного додатку та впроваджено отримані результати щодо 
поставленої мети на практиці в дизайні мобільного додатку для сайту 
Черкаського державного технологічного університету. Досліджено такі 
питання як: історія розвитку мобільних додатків, проблематика та стан 
дослідження, становлення додатків у світі й Україні, класифікація  мобільних 
додатків, художні особливості в дизайні мобільного додатку. Отримані 
результати дослідження підтверджуються висновками:  
1. Зроблено ґрунтовний аналіз стану предмету дослідження та 
історіографії проблематики. Визначено актуальність, мету, предмет, об’єкт та 
завдання, які виконано для досягнення поставленої мети. Означено і 
проаналізовано джерельну базу дослідження, яка представляє собою широке 
коло різноманітних видів і категорій джерел. Означені методи для 
дослідження художніх засобів в дизайні мобільних додатків, а саме: метод 
порівняння, аналізу додатків, внеску науковців, митців, дизайнерів та 
художників в розвиток і становлення дизайну додатку; науковий метод, що 
передбачає сукупність методів встановлення параметрів, структури, інших 
характеристик досліджуваного предмету і об’єкту. 
2. Досліджено еволюцію розвитку мобільних додатків та визначено 
періоди становлення і розвитку цього процесу. Проаналізовано становлення 
додатків в Україні в світовому контексті. Розглядаючи тему, виявлено, що 
 
 
проблема перспектив мобільних додатків потребує подальшого вивчення та 
опрацювання. Хоча більшість теоретичних досягнень з цієї теми належить 
дослідникам із Західної Європи та Сполучених Штатів, вітчизняні дослідники 
написали відносно невелику кількість статей, в основному аналізуючи наявні 
дані. Виявлено, що популярність додатків обумовлюється застосуванням 
художніх засобів в дизайні додатку, що дозволяє розширити інформаційну 
насиченість, покращити естетику.  
3. Визначено і проаналізовано художні засоби в дизайні мобільного 
додатку. Образотворчий рівень додатку втілюється через графічно-
зображальну інформацію (ілюстрація, шрифт, декоративні елементи).  
Запропоновано авторське бачення мобільного додатку, проєктної пропозиції, 
яка полягає у використанні мобільного додатку у інформативності і у навчанні 
студентів тощо. Розроблений додаток є доповнюваним матеріалом для сайту 
ЧДТУ. Дизайн проєкт мобільного додатку базується на основі практичного 
застосування теоретичних і практичних відомостей, набутих під час наукового 
дослідження.  
Представлено дипломний проєкт освітньо-кваліфікаційного рівня 
«магістр», присвячений дослідженню художніх особливостей мобільного 
додатку в розробці дизайну мобільного додатку для сайту ЧДТУ, який в 
майбутньому може полегшити навчальний процес студентів, та заохотити їх 
до навчання. 
В ході роботи було досліджено етапи створення мобільного додатку. А 
саме: пошук аналогів, вибір прототипу, розробка власної концепції та вибір 
стилістичного вирішення проекту. Систематизація наданого матеріалу та 
розробка дизайну додатка. 
 
 
 
 
 
 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Мобільний сайт або мобільний додаток? / [Електронний ресурс]: стаття 
-Електронні дані [2009-2019] / Режим доступу / :  
https://punicapp.com/blog/pages/507/mobilnyj-sajt-ili-mobilnoe-prilozhenie/(дата 
звернення: 30.10.2022). 
2. Jesse James Garrett. The elements of user experience : user-centered design 
for the web. – 2003, USA. – 192 p. 
3. Брайян, Джеффрі Айзенберг. Додайте в корзину. Ключові принципи 
підвищення конверсії веб-сайтів. Переклад з англ. К, 2009. – 214 с. 
4. Опалєв М.Л. Дизайн мультимедійних презентацій: стильові напрямки і 
засоби формування візуально-образної мови. Дис... канд. наук: 17.00.07 – 2010, 
Харків. – 231 с. 
5. Горбатюк Р., Тулашвілі Ю. Мобільне навчання як нова технологія вищої 
освіти // Науковий вісник Ужгородського національного університету. Серія : 
Педагогіка. Соціальна робота. - 2013. - Вип. 27. - С. 31-34. 
6. Sharples M. The design and implementation of a mobile learning // Personal 
and Ubiquitous Computing. – 2002. – Vol. 6. – P. 220-234. 
7. Теплицький І. О. Модель мобільного навчання в середній та вищій школі 
// Комп’ютерне моделювання в освіті : матеріали ІІІ Всеукраїнського науково-
методичного семінару. – Кривий Ріг, 24 квітня 2008 р. – Кривий Ріг : КДПУ, 
2008. – С. 45-46. 
8. Рашевська Н. В. Мобільні інформаційно-комунікаційні технології 
навчання вищої математики студентів вищих технічних навчальних закладів : 
дис. ... канд. пед. наук : 13.00.10 / Рашевська Наталя Василівна. – К., 2011. – 
305 с. 
9.  Історія розвитку мобільних додатків та їх взаємозв’язок із туристичною 
індустрією / [Електронний ресурс]: стаття / Режим доступу / : 
https://dspace.uzhnu.edu.ua/jspui/bitstream/lib/25531/1/176709-390072-1-SM.pdf/ 
(дата звернення: 30.10.2022). 
 
 
10.  Коломийцев В. Ф. Методология истории : от источника к исследованию. 
– Харків, 2001. – 191 с. 
11.   Mobile Application Market Size, Share & Trends Analysis Report By Store 
Type (Google Store, Apple Store), By Application (Gaming, Music & 
Entertainment, Health & Fitness), By Region, And Segment Forecasts, 2020. URL: 
https://www.grandviewresearch.com/industry-analysis/mobile-
applicationmarket?utm_source=prnewswire&utm_medium=referral&utm_campaig
n=ict_21- sep-20&utm_term=mobile-application-market&utm_content=rd (дата 
звернення: 30.10.2022).  
12.   Типи мобільних додатків / [Електронний ресурс]: стаття / Режим 
доступу / : https://training.qatestlab.com/blog/technical-articles/types-of-mobile-
applications/ (дата звернення: 30.10.2022). 
13. Двомірна графіка http://kunitska.blogspot.com/2014/04/2d.html 
14. Тримірна графіка https://easy3dprint.com.ua/uk/trivimirna-grafika-3d-
modelyuvannya/ 
15. Анімація [електронний ресурс]: стаття / режим доступу: 
http://uk.wikipedia.org/wiki/Анімація(дата звернення 30.10.2022). 
16.  10 якостей шрифтів та їх застосування у дизайні [електронний ресурс]: 
стаття / режим доступу: https://rentafont.livejournal.com/7628.html /(дата 
звернення 30.10.2022). 
17.  Гнатієнко Г.М., Снитюк В.Є. Експертні технології прийняття рішень: 
Монографія / К.: ТОВ «Маклаут», 2008. 444 с. 
18.   Human Interface Guidelines. URL: https://developer.apple.com/design/ 
human-interface-guidelines/ios/overview/themes/ (дата звернення: 30.10.2022). 
19.  Сайт ЧДТУ https://chdtu.edu.ua/ 
20.   5 основних кольорів в веб-дизайні дизайна / [Електронний ресурс]: 
стаття-Електронні дані [2020]  / Режим доступу / https://say-hi.me/design/web-
design/5-osnovnyx-cvetov-v-veb-dizajne.html /(дата звернення: 30.10.2022). 
 
 
21. Визначення аналогу/ [Електронний ресурс]: стаття / Режим доступу / : 
http://popel-studio.com/blog/article/analogi-i-antipody.html/ (дата звернення: 
30.10.2022). 
22.   Мова зі смартфона: топ додатків для вивчення української мови -
Електронні дані [2013-2020] / Режим доступу / :  
https://vesti.ua/poleznoe/310124-mova-so-smartfona-top-prilozhenij-dlja-
izuchenija-ukrainskoho-jazyka(дата звернення: 30.10.2022). 
23. Notes. URL: https://apps.apple.com/us/app/notes/id1110145109 (дата 
звернення: 30.10.2022). 
24.  Wigdor D., Brave D.W. NUI World: Designing Natural User Interfaces for 
Touch and Gesture / Morgan Kaufmann, 2011. 264 p. 
25.  Кудревич В. (кер.Храмова-Баранова О.Л.) Проєктно-художні засоби в 
дизайні інтерактивних підручників. Магістерська робота. 2021. ЧДТУ 
26.  Символи ЧДТУ https://chdtu.edu.ua/info/symbols 
27.  Hay L. Researching UX: Analytics by / SitePoint Pty. Ltd, 2017. 106 p. 
28.  Сучасний дизайн/ [електронний ресурс]: стаття - електронні дані [2017 
- 2021]/ режим доступу:    
https://ozlib.com/1070360/sotsium/sovremennyy_dizayn 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ДОДАТКИ 
 
Додаток А  
 
 
 
Рис.А1. Двомірна графіка [Двомірна графіка 
http://kunitska.blogspot.com/2014/04/2d.html] 
 
 
 
 
Рис.А2. Тримірна графіка [Тримірна графіка 
https://easy3dprint.com.ua/uk/trivimirna-grafika-3d-modelyuvannya/] 
 
 
 
Рис. А3. Накреслення Thin, Regular, Black гарнітури Kazimir Text. 
 
 
Рис. А4. Надвузький шрифт – Reforma Grotesk Medium, шрифт нормальної 
ширини – Pragmatica Book, надширокий шрифт – Europe Extended. 
 
 
 
 
Рис. А5. Неконтрастний шрифт – Stem, шрифт з помірним контрастом – PT 
Serif, максимальний контраст – DietDidot. 
 
 
Рис. А6. Низькі рядкові – шрифт Metropol, середні рядкові – шрифт Orbi 
Sans, високі рядкові – шрифт Hermes. 
 
 
Рис. А7. Загострені кути – шрифт Acsioma, прямі кути – шрифт TT Souses, 
округлені кути – шрифт Sans R 
 
 
Рис. А8. Вогнуті зарубки – шрифт Lazurski, лінійні зарубки – шрифт 
Petersburg, брускові зарубки – шрифт Pragmatica Slabserif. 
 
 
 
 
Рис. А9. Курсивне накреслення – шрифт Kudryashev Italic, нахилене 
накреслення – шрифт Pragmatica Italic. 
 
 
 
 
Рис. А10. Гуманістичний гротеск – шрифт Leksa Sans, геометричний гротеск 
– шрифт Futura PT, модульний шрифт – Robotesqa 4f. 
Геометричні гротески у сучасних логотипах 
 
 
 
Рис. А11. Статичний шрифт Din PT, динамічний шрифт Venetian, максимум 
динаміки – шрифт Liana. 
 
 
Рис. А12. Відкритий шрифт – PT Sans, середня апертура – шрифт Textbook 
New, закритий шрифт – Helvetica 
 
 
 
 
 
 
 
 
 
 
 
 
 
Додаток Б 
 
 
 
Рис.Б1. Фірмовий стиль Черкаського державного технологічного 
університету (розробка Мусатенко А.) [Сайт ЧДТУ https://chdtu.edu.ua/]. 
 
 
Рис.Б2 Обраний шрифт 
 
 
 
 
Рис. Б3. Перший аналог: Гугл Календар мобільний додаток [Google календар 
https://www.google.com/intl/uk/calendar/about/] 
 
Рис. Б4. Другий аналог: «Moва: ДНК нації» 
 
 
 
Рис. Б5. Третій аналог [Інтерфейс Any.do https://lifehacker.ru/any-do-web-app-
populyarnejshij-menedzher-zadach-v-brauzere/] 
 
  
Рис. Б6. Четвертий аналог додаток під назвою Tappsk [Додаток Tappsk 
https://lifehacker.ru/tappsk-app/] 
 
 
 
 
Рис. Б7. notes мобільний додаток [notes мобільний додаток 
https://play.google.com/store/apps/details?id=net.malingo.notes&hl=uk&gl=US] 
 
 
 
Рис. Б8. Сьомий аналог Lingualeo 
 
 
 
 
Рис. Б9. Сьомий аналог Мобільний додаток до посібника «Welcome to 
Ukraine»(розробник Кудревич В.) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Додаток С 
 
 
 
Рис. С1. Герб ЧДТУ [Символи ЧДТУ https://chdtu.edu.ua/info/symbols] 
 
 
 
Рис. С2. Прапор ЧДТУ [Символи ЧДТУ https://chdtu.edu.ua/info/symbols] 
 
 
 
 
 
 
 
 
 
Рис. С3. Подача проєкту