Дослідження застосування «золотого перетину» у web-дизайні КИЗИМА КАТЕРИНА АНАТОЛІЇВНА, УЧЕНИЦЯ 11-Б КЛАСУ ХМЕЛЬНИЦЬКОГО ЛІЦЕЮ 17. - презентация

1 Дослідження застосування «золотого перетину» у web-дизайні КИЗИМА КАТЕРИНА АНАТОЛІЇВНА, УЧЕНИЦЯ 11-Б КЛАСУ ХМЕЛЬНИЦЬКОГО ЛІЦЕЮ 17

2 Обєкт дослідження – дослідження «золотого перетину» як математичного явища та його застосування. Предмет дослідження – дослідження можливості використання «золотого перетину» у проектуванні сайтів та веб-дизайні. Метою роботи є дослідження якісних переваг та ефективності застосування «золотого перетину» у веб-дизайні. Наукова новизна одержаних результатів. У результаті дослідження розвязано задачу побудови веб-сайту із застосуванням принципів «золотого перетину» та доведено ефективність застосування «золотого перетину» у веб-дизайні. Дослідження застосування «золотого перетину» у веб-дизайні 2

3 Явище «золотого перетину» 3

4 Дослідження застосування «золотого перетину» у веб-дизайні Створення веб-сайту із використанням «золотого перетину» вимірюється ширина контенту і розділюється на створюється базисна сітка сайту, що відповідає золотій пропорції. при ширині контенту в 1000 пікселів ширина однієї панелі складе: 1000 / = 618 пікселів. Тоді ширина іншої: = 382 пікселі. 4

5 Дослідження застосування «золотого перетину» у веб-дизайні Веб-сайти, що використовують «золотий перетин» 5

6 Дослідження застосування «золотого перетину» у веб-дизайні Веб-сайти, що використовують «золотий перетин» 6

7 Дослідження застосування «золотого перетину» у веб-дизайні Зорові центри на веб-сторінках робоча площа умовно поділяється на дві частини відповідно за золотою пропорцією по вертикалі та по горизонталі. на перетині умовних прямих знаходиться точка, яка називається «зоровим центром». 7

8 Дослідження застосування «золотого перетину» у веб-дизайні Зорові центри на веб-сторінках ключові елементи веб-сторінок повинні перебувати в районі зорових центрів загальної композиції сайту, елемента також можуть лежати на умовних діагоналях, що проходять через вказані зорові центри. 8

9 Дослідження застосування «золотого перетину» у веб-дизайні Зорові центри на веб-сторінках 9

10 Дослідження застосування «золотого перетину» у веб-дизайні Правило третини у веб-дизайні для робочої зона в 960х750 пікселів поділ здійснюється: поділ ширини на 3 ( 320 пікселів); поділ висоти сторінки на 3 (( )/2)/3285 пікселів. побудова сітки з дев'яти прямокутників, розміром 320×285 пікселів 10

11 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в дизайні емблеми ліцею 11

12 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в дизайні емблеми ліцею 12

13 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в дизайні емблеми ліцею 13

14 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в дизайні емблеми ліцею 14

15 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб-сторінок сайту початкової школи ширина контенту 990 пікселів; ширина лівої зони 606 пікселів, а бокової пікселів; поле між зонами відведено 10 пікселів 15

16 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи ширину екрану 990 пікселів; ширина контенту 606 пікселів, а бокова зона 374 пікселів; поле між зонами відведено 10 пікселів висоти зон складають 311 та 503 пікселів 16

17 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи ширину екрану 990 пікселів; ширина контенту 606 пікселів, а бокова зона 374 пікселів; поле між зонами відведено 10 пікселів висоти зон складають 503 та 311 пікселів 17

18 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи висоти заголовочної та інформаційна зон мають співвідношення 1.62, а саме 383 до 619 пікселів 18

19 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи 19

20 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи Застосування зорових центрів 20

21 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Застосування «золотого перетину» в процесі створення веб- сторінок сайту початкової школи Застосування правила третин 21

22 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Оцінка ефективності застосування «золотого перетину» у веб- дизайні сайту початкової школи Оцінка здійснена опитуванням дітей та їх батьків Критерії юзабіліті: інтуїтивність запамятовуваність помилки задоволеність 22

23 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту Рівень інтуїтивності сайту 23

24 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту Рівень запамятовуваності користувачами сайту 24

25 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту Рівень помилок користувачів при користуванні сайтом 25

26 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту Рівень задоволеності користувачів сайтом 26

27 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту 27

28 Розробка веб-сайту для початкової школи із застосуванням «золотого перетину» Результати дослідження юзабіліті веб-сайту 28

29 Висновки В результаті дослідження було: досліджено можливості використання «золотого перетину» у дизайні сучасних веб-сайтів та наведено основні методи його застосування; для доведення ефективності застосування особливостей «золотого перетину» створено дизайн веб-сайт початкової школи Хмельницького ліцею 17, який ґрунтується на принципах «золотого перетину»; з метою оцінки ефективності та переваг застосування принципів «золотого перетину» у веб-дизайні було здійснено оцінку юзабіліті створеного сайту шляхом проведення тестування сайту школярами та їх батьками. Дана оцінка дозволяє визначити такі якісні характеристики, як зручність та легкість сприйняття користувачем елементів інтерфейсу. Результати проведеного тестування дали підставу говорити про високий рівень юзабіліті сайту, дизайн якого побудовано за принципами «золотого перерізу». Результати дослідження демонструють якісні переваги, ефективність та можливість досягнення застосування гармонійного і збалансованого дизайну сайту при залученні принципів «золотого перетину» у веб-дизайні. 29

30 Дякую за увагу 30