1
00:05:29,200 --> 00:05:33,200
а потім тут виводиться основний контент, 
або наприклад зона верхня

2
00:05:33,300 --> 00:05:38,100
або зона меню, або зона якихось виборів, 
ну і тут виводиться основна інформація

3
00:05:38,200 --> 00:05:43,000
є двоподілкові, є наприклад

4
00:05:43,100 --> 00:05:47,900
зона окремих статей і основний матеріал, 
є так само зони

5
00:05:48,000 --> 00:05:52,800
верхнього поділу інформації, бокові

6
00:05:52,900 --> 00:05:57,700
тобто для різних складностей інформації ми 
можемо робити різні форматування

7
00:05:57,800 --> 00:06:02,600
і різні розкадровки по наших сторінках

8
00:06:02,700 --> 00:06:07,500
щоб легше вмістити зони важливої інформації

9
00:06:07,600 --> 00:06:12,400
зони основної роботи, зони навігації, зони 
якоїсь прокрутки

10
00:06:12,500 --> 00:06:17,300
і перегляду допоміжних елементів, ну і відповідно

11
00:06:17,400 --> 00:06:22,200
йдуть або фрейми, або панелі, на яких вже 
розміщуються кнопки або картинки

12
00:06:22,300 --> 00:06:27,100
емм

13
00:06:27,200 --> 00:06:32,000
підвисло воно

14
00:06:32,100 --> 00:06:36,900
так, розберемо такий ось слайд

15
00:06:37,000 --> 00:06:41,800
це так само ви бачите типові схеми розміщення

16
00:06:41,900 --> 00:06:46,700
найбільш вживаних елементів по сторінках, 
ось тут наприклад

17
00:06:46,800 --> 00:06:51,600
верхній ряд, це от пропонується, яким чином 
можна організувати

18
00:06:51,700 --> 00:06:56,500
стартову сторінку для якогось сайту, тобто 
може бути

19
00:06:56,600 --> 00:07:01,400
зона опису, зона одноколонкова, двоколонкова, 
трьохколонкова

20
00:07:01,500 --> 00:07:06,300
або наприклад акцентування уваги на основні 
якби розділи

21
00:07:06,400 --> 00:07:11,200
тобто є розділ, є якась прев'ю, ще один розділ, 
ще одна прев'ю і тд

22
00:07:11,300 --> 00:07:16,100
знову ж таки, може воно просто містити звичайний 
текст або

23
00:07:16,200 --> 00:07:21,000
текст разом з якимось переходом, з якоюсь 
картинкою, яка

24
00:07:21,100 --> 00:07:25,900
наприклад потім розтягнеться по всій сторінці, 
оце само є

25
00:07:26,000 --> 00:07:30,800
типові кілька шаблонів, які описують

26
00:07:30,900 --> 00:07:35,700
різноманітну інформацію про компанію, про 
команду

27
00:07:35,800 --> 00:07:40,600
про контактну інформацію, наприклад

28
00:07:40,700 --> 00:07:45,500
основні події, які відбувались в компанії, 
хто саме там працює

29
00:07:45,600 --> 00:07:50,400
детальна інформація, дійові особи

30
00:07:50,500 --> 00:07:55,300
перелік людей, які працюють в команді, відповідно 
геолокація і яким чином зв'язатись

31
00:07:55,400 --> 00:08:00,200
і форма зворотнього зв'язку, якщо наприклад 
брати

32
00:08:00,300 --> 00:08:05,100
новосні сторінки, знову ж таки є картинки, 
є заголовки

33
00:08:05,200 --> 00:08:10,000
є описи, які ж надалі можна роздивитись

34
00:08:10,100 --> 00:08:14,900
якщо ми беремо якийсь блок сформованих, каталогізованих 
документів або файлів

35
00:08:15,000 --> 00:08:19,800
або файлів для скачування, або шаблоних документів, 
відповідно вони

36
00:08:19,900 --> 00:08:24,700
як правило оформляються у вигляді сітки і 
вказуються

37
00:08:24,800 --> 00:08:29,600
у вигляді іконок, який контент всередині 
знаходиться кожних наших файлів

38
00:08:29,700 --> 00:08:34,500
або є сітковий спосіб представлення, або

39
00:08:34,600 --> 00:08:39,400
стрічковий спосіб задання, знову ж таки каталогізація 
по

40
00:08:39,500 --> 00:08:44,300
різних каталогах, ну і відповідно галерея 
фотографій або картинок

41
00:08:44,400 --> 00:08:49,200
вона зразу містить прев'ю для

42
00:08:49,300 --> 00:08:54,100
кожної картинки, так само як іконки вмісту 
документів

43
00:08:54,200 --> 00:08:59,000
ну ми вот таким чином з вами зараз і лабораторні 
онлайн здаємо

44
00:08:59,100 --> 00:09:03,900
через гугл докси і через гугл драйв, відповідно

45
00:09:04,000 --> 00:09:08,800
живі реалізації ви теж знаєте

46
00:09:08,900 --> 00:09:13,700
як правило ще коли роблять сторінки то формують 
кілька видів шаблонів

47
00:09:13,800 --> 00:09:18,600
з різними колірними палітрами, тобто тут 
ви бачите

48
00:09:18,700 --> 00:09:23,500
взяли такі кофейно-бежеві кольори, або сині 
кольори роблять, або зелені

49
00:09:23,600 --> 00:09:28,400
тобто якийсь домінуючий колір буде в нашій 
сторінці, тут ви теж бачите

50
00:09:28,500 --> 00:09:33,300
зони карусельних прокруток, зони статей, 
зони картинок

51
00:09:33,400 --> 00:09:38,200
зони різних додаткових описів, наприклад

52
00:09:38,300 --> 00:09:43,100
певні тарифні елементи різних видів послуг

53
00:09:43,200 --> 00:09:48,000
або товарів, або тарифних підписок

54
00:09:48,100 --> 00:09:52,900
так само зона чату або коментування і опису, 
хто це зробив

55
00:09:53,000 --> 00:09:57,800
тобто користувачів, які заносяться, зона 
чату як правило теж формується з лівої сторони

56
00:09:57,900 --> 00:10:02,700
одна особа з правої сторони, друга особа.. 
тобто є закономірність часових переходів

57
00:10:02,800 --> 00:10:07,600
так само як формується наприклад слайдова 
зона

58
00:10:07,700 --> 00:10:12,500
теж є у нас карусельний елемент, який дає 
можливість нам

59
00:10:12,600 --> 00:10:17,400
вправо вліво якісь картинки,або статті, або 
ще щось

60
00:10:17,500 --> 00:10:22,300
знову ж таки способи оформлення описів

61
00:10:22,400 --> 00:10:27,200
може бути просто фотографія людини і де людина 
працювала

62
00:10:27,300 --> 00:10:32,100
чим займалась, або може бути ще заголовок

63
00:10:32,200 --> 00:10:37,000
у вигляді фонового зображення будинку, підприємства, 
логотипу

64
00:10:37,100 --> 00:10:41,900
Ну і відповідно є ще типовий спосіб

65
00:10:42,000 --> 00:10:46,800
організації переліку товарів, переліку послуг 
у вигляді такої

66
00:10:46,900 --> 00:10:51,700
сіткової каруселі, де можна прогортати потрібні 
вам елементи

67
00:10:51,800 --> 00:10:56,600
вот тут так само є приклади організації

68
00:10:56,700 --> 00:11:01,500
розміщені компоновки для характеристики якогось 
документа

69
00:11:01,600 --> 00:11:06,400
його властивості, коли документ був створений, 
кількість сторінок, кількість слів порахованих

70
00:11:06,500 --> 00:11:11,300
ну якщо брати за основу вордівський документ, 
тобто всі

71
00:11:11,400 --> 00:11:16,200
технічні характеристики, ким було створено, 
коли було створено

72
00:11:16,300 --> 00:11:21,100
коли останній раз модифікації відбувались, 
коли останній раз резервна копія робилась

73
00:11:21,200 --> 00:11:26,000
або наприклад інформація про типовий продукт, 
типовий товар, основна фотографія

74
00:11:26,100 --> 00:11:30,900
допоміжні фотографії, можливість придбати 
або зарезервувати, і якийсь короткий опис

75
00:11:31,000 --> 00:11:35,800
знову ж таки типовий спосіб організації

76
00:11:35,900 --> 00:11:40,700
кошика для покупки, тобто є товари

77
00:11:40,800 --> 00:11:45,600
є їх короткий опис, можливо кількість якась, 
є можливість добавити кількість

78
00:11:45,700 --> 00:11:50,500
знищити кількість, тобто робота з кошиком 
покупки

79
00:11:50,600 --> 00:11:55,400
ну відповідно типова форма для здійснення 
оплати, це є банківські реквізити

80
00:11:55,500 --> 00:12:00,300
якісь реквізити для доставки, яким способом 
оплати ми збираємось оце здійснити

81
00:12:00,400 --> 00:12:05,200
чи онлайнівським, чи пейпалом, чи веб мані

82
00:12:05,300 --> 00:12:10,100
або іншими сервісами, відповідно є ще один 
з варіантів

83
00:12:10,200 --> 00:12:15,000
організації медіа сторінки, там де є

84
00:12:15,100 --> 00:12:19,900
наприклад або відео кліпи, або звукові кліпи, 
там де є можливість

85
00:12:20,000 --> 00:12:24,800
керування по черзі звуковими відтвореннями, 
ходити по плейлистах

86
00:12:24,900 --> 00:12:29,700
є можливо якісь картинки з виконавцями

87
00:12:29,800 --> 00:12:34,600
або можливо якісь кадри з відеокліпа, відповідно 
є доріжка

88
00:12:34,700 --> 00:12:39,500
і вказується тайм-час скільки вже звукових 
хвилин

89
00:12:39,600 --> 00:12:44,400
ви прослухали і скільки вам ще залишилось

90
00:12:44,500 --> 00:12:49,300
також типові сторінки по організації аналітичних 
даних, як правило

91
00:12:49,400 --> 00:12:54,200
перше завжди вказують картинку з діаграмами, 
з графіками, для того, щоб відразу акцентувати 
увагу

92
00:12:54,300 --> 00:12:59,100
на якби згруповану інформацію, у вас зараз 
є такий предмет

93
00:12:59,200 --> 00:13:04,000
візуалізація даних, якраз там ви розглядаєте 
ці способи

94
00:13:04,100 --> 00:13:08,900
групування даних і їхніх візуальних представлень, 
як правило потім вказується

95
00:13:09,000 --> 00:13:13,800
вже решта числових статистичних даних якимось 
списком

96
00:13:13,900 --> 00:13:18,700
де вже можна детальніше роздивитись ці пікові

97
00:13:18,800 --> 00:13:23,600
або провали в графіках, знову ж таки дуже 
часто використовуються

98
00:13:23,700 --> 00:13:28,500
способи організації інфографіки, там де у 
нас формуються

99
00:13:28,600 --> 00:13:33,400
різні діаграми, процентні співвідношення 
і описуються назви

100
00:13:33,500 --> 00:13:38,300
що саме зі статистичного співвідношення використовується

101
00:13:38,400 --> 00:13:43,200
тут ви бачите одразу акцент іде на діаграми, 
тут є і діаграми

102
00:13:43,300 --> 00:13:48,100
і короткі описи йдуть, чимось оці дві сторінки 
так само є

103
00:13:48,200 --> 00:13:53,000
можливість описувати якісь властивості об'єкта

104
00:13:53,100 --> 00:13:57,900
який ми розглядаємо з картинками, з описами, 
або наприклад

105
00:13:58,000 --> 00:14:02,800
двоколонкові організації списків, наприклад 
різні

106
00:14:02,900 --> 00:14:07,700
способи голосування за якийсь товар, тобто

107
00:14:07,800 --> 00:14:12,600
або вибираєш один варіант, або другий варіант, 
і по черзі в такій каруселі йде прокрутка

108
00:14:12,700 --> 00:14:17,500
оцих голосувань, і по черзі можна зробити 
статистичний аналіз

109
00:14:17,600 --> 00:14:22,400
що саме людина вибирає на екрані, знову ж 
таки відео галерея

110
00:14:22,500 --> 00:14:27,300
чимось вона нагадує звукову галерею

111
00:14:27,400 --> 00:14:32,200
є способи організації просто у вигляді сіткового

112
00:14:32,300 --> 00:14:37,100
або наприклад основне відео як в ютубі завжди 
показується, а потім є додаткові відео

113
00:14:37,200 --> 00:14:42,000
які ви можете так само розглянути, тобто 
такі рецепти

114
00:14:42,100 --> 00:14:46,900
організації вони якби провірені вже часом, 
багато досліджень

115
00:14:47,000 --> 00:14:51,800
було проведено чому саме розміщується з лівої 
сторони, з правої сторони, де є фокус уваги 
людини

116
00:14:51,900 --> 00:14:56,700
які габарити оцих елементів мусять бути в 
пропорції до висоти-ширини

117
00:14:56,800 --> 00:15:01,600
наприклад вашого екрану

118
00:15:01,700 --> 00:15:06,500
і відповідно такий спосіб організації в часі 
вже сформувався

119
00:15:06,600 --> 00:15:11,400
і його варто використовувати як рецепт для 
наступних створень

120
00:15:11,500 --> 00:15:16,300
отут ви теж бачите способи

121
00:15:16,400 --> 00:15:21,200
організації сторінки для якогось виконавця

122
00:15:21,300 --> 00:15:26,100
тобто якийсь альбом, альбом як правило має 
обкладинку

123
00:15:26,200 --> 00:15:31,000
яка потім на дисках або медіа заставках іде

124
00:15:31,100 --> 00:15:35,900
є кадри з кліпів і є звукові

125
00:15:36,000 --> 00:15:40,800
способи організації наприклад картографічної 
інформації

126
00:15:40,900 --> 00:15:45,700
сіткові елементи з каруселями для організації 
портфоліо

127
00:15:45,800 --> 00:15:50,600
наприклад дизайнера або послуг різноманітних

128
00:15:50,700 --> 00:15:55,500
або виконаних проектів, як правило календарі

129
00:15:55,600 --> 00:16:00,400
є стандартизовані елементи, яким чином формується 
календарна розбивка

130
00:16:00,500 --> 00:16:05,300
по місяцях, по кварталах, по тижнях

131
00:16:05,400 --> 00:16:10,200
щоденні календарі, тобто усі ці сіткові елементи 
вони як правило

132
00:16:10,300 --> 00:16:15,100
уже є достатньо добре пророблені

133
00:16:15,200 --> 00:16:20,000
вже зроблені пропорції, підсвітки, кольори, 
шрифти, нам треба ці шаблони

134
00:16:20,100 --> 00:16:24,900
вставляти в наші реалізації, і наприклад 
типовий елемент

135
00:16:25,000 --> 00:16:29,800
опису, що нам треба робити під час якоїсь 
події

136
00:16:29,900 --> 00:16:34,700
як правило є якесь чітке розуміння, яка це 
є дата

137
00:16:34,800 --> 00:16:39,600
який день тиждень, а потім йде опис що нам 
треба робити

138
00:16:39,700 --> 00:16:44,500
так само є типовий елемент, який показує 
так звану хмару ключових слів

139
00:16:44,600 --> 00:16:49,400
де ми можемо робити розбивку по групах

140
00:16:49,500 --> 00:16:54,300
і до кожного з елементів робити хмару ключових 
слів

141
00:16:54,400 --> 00:16:59,200
типова сторінка організації

142
00:16:59,300 --> 00:17:04,100
наприклад пошукової інформації, тобто мусить 
бути поле вводу

143
00:17:04,200 --> 00:17:09,000
мусить бути якась кнопка або параметри для 
фільтрації в межах

144
00:17:09,100 --> 00:17:13,900
введеної інформації, і як правило є списковий 
спосіб організація

145
00:17:14,000 --> 00:17:18,800
для виведення знайдених результатів плюс 
є

146
00:17:18,900 --> 00:17:23,700
елемент пейджинейшин сторінковості, щоб ми 
могли

147
00:17:23,800 --> 00:17:28,600
дальше і дальше вибирати оці сторінки, знову 
ж таки це є

148
00:17:28,700 --> 00:17:33,500
приклад організації відеохостингу і є ще 
такі цікаві сторінки

149
00:17:33,600 --> 00:17:38,400
як часто задані питання, тобто є якесь питання

150
00:17:38,500 --> 00:17:43,300
є якась відповідь, питання-відповідь, питання-відповідь 
і знову ж таки є елемент сторіновості

151
00:17:43,400 --> 00:17:48,200
для добавляння елементі плюс медіа тег

152
00:17:48,300 --> 00:17:53,100
ось тут на цьому слайді ви так само бачите 
деякі

153
00:17:53,200 --> 00:17:58,000
так звані модальні вікна, які

154
00:17:58,100 --> 00:18:02,900
якби є другорядними в більшості програмних 
продуктів і на сайтах

155
00:18:03,000 --> 00:18:07,800
це наприклад типове підтвердження якоїсь 
дії користувача

156
00:18:07,900 --> 00:18:12,700
тобто є опис короткий, що саме відбулось, 
що саме людина намагалась зробити

157
00:18:12,800 --> 00:18:17,600
і чи відбулось воно вдало чи невдало

158
00:18:17,700 --> 00:18:22,500
тобто є якась емблема, що одразу характеризує, 
що дія виконалась

159
00:18:22,600 --> 00:18:27,400
і аналогічно є навпаки, коли якась дія не 
виконалась

