Web Dessign Essentials Beregsassi Stepan (Ukrainian)
-
Upload
beregszaszi-istvan -
Category
Technology
-
view
173 -
download
2
Transcript of Web Dessign Essentials Beregsassi Stepan (Ukrainian)
![Page 1: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/1.jpg)
«Принципи Web-дизайну. «Принципи Web-дизайну. Критерії оцінки WeКритерії оцінки Webb-сайтів»-сайтів»
Берегсасі Степан Степанович,Берегсасі Степан Степанович, викладач кафедри математики Закарпатського викладач кафедри математики Закарпатського
Угорського інститутуУгорського інститутуім. Ференца Ракоці ІІ.ім. Ференца Ракоці ІІ.
Київ - 201Київ - 20155
![Page 2: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/2.jpg)
Зміст роботиЗміст роботи
1.1. Методологічні основи веб-дизайну Методологічні основи веб-дизайну
2.2. Теоретичні засади веб-дизайну та Теоретичні засади веб-дизайну та критеріїв оцінювання веб-сторінок критеріїв оцінювання веб-сторінок
3.3. Практичні основи використання Практичні основи використання веб-дизайну та критеріїв веб-дизайну та критеріїв оцінювання веб-сторінокоцінювання веб-сторінок
![Page 3: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/3.jpg)
Веб-дизайнВеб-дизайн
Це фактично веб-проектування Це фактично веб-проектування зорієнтоване на кінцевого зорієнтоване на кінцевого
користувача веб-ресурсу, він поєднує користувача веб-ресурсу, він поєднує елементи художніх, технологічних, елементи художніх, технологічних,
комерційних та інформаційних комерційних та інформаційних напрямків. Веб-дизайн означає напрямків. Веб-дизайн означає
проектування для Інтернету веб-проектування для Інтернету веб-сайтів, веб-порталів та веб-додатків.сайтів, веб-порталів та веб-додатків.
![Page 4: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/4.jpg)
Основні складові веб-дизайнуОсновні складові веб-дизайну
O ЗмістЗмістO ОформленняОформленняO ТехнологіїТехнологіїO ПоданняПоданняO МетаМетаO СупроводженняСупроводження
![Page 5: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/5.jpg)
З історії веб-дизайнуЗ історії веб-дизайну
![Page 6: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/6.jpg)
Зароджнення веб-дизайну Зароджнення веб-дизайну (1989)(1989)
Текстовий режим відображення контентуТекстовий режим відображення контенту
![Page 7: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/7.jpg)
Таблиці (1995)Таблиці (1995)
Розміщення контенту за допомогою таблиціРозміщення контенту за допомогою таблиці
![Page 8: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/8.jpg)
Javascript (1995)Javascript (1995)
Застосування керуючої логіки на сайтіЗастосування керуючої логіки на сайті
![Page 9: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/9.jpg)
Flash (1996)Flash (1996)
Яскравість, анімація та інтерактивність через плагін ФлешЯскравість, анімація та інтерактивність через плагін Флеш
![Page 10: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/10.jpg)
CSS (1998)CSS (1998)
Каскадні стилі – розміщення оформлення поза контентомКаскадні стилі – розміщення оформлення поза контентом
![Page 11: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/11.jpg)
МобілМобільнийьний зміст:зміст: сітки і сітки і фреймворки (2007)фреймворки (2007)
Поділ інформації з вирівнюванням по стовпчикамПоділ інформації з вирівнюванням по стовпчикам
![Page 12: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/12.jpg)
Адаптивний веб-дизайн (2010)Адаптивний веб-дизайн (2010)
Різні макети для різних пристроїв при однаковому контентіРізні макети для різних пристроїв при однаковому контенті
![Page 13: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/13.jpg)
Спрощення (2010)Спрощення (2010)
Плоский дизайн: якісні фото, кольори, шрифти, макетиПлоский дизайн: якісні фото, кольори, шрифти, макети
![Page 14: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/14.jpg)
Майбутнє веб-дизайну (2014Майбутнє веб-дизайну (2014 -)-)
Юніти Юніти vh, vw, FlexBox, vh, vw, FlexBox, веб-компонентивеб-компоненти
![Page 15: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/15.jpg)
Основні розділи веб-дизайнуОсновні розділи веб-дизайну
ТипографіяТипографія
КольориКольори
ВерсткаВерстка
![Page 16: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/16.jpg)
ТипографіяТипографія
O Обмежений вибір шрифтівОбмежений вибір шрифтів O Перенесення слівПеренесення слів O КернінгКернінг O Відсутність контролюВідсутність контролю O Вибір набору шрифтівВибір набору шрифтів O Довжина рядкаДовжина рядка O Висота рядкаВисота рядка O Типографічно-правильна пунктуаціяТипографічно-правильна пунктуація O ВрізкиВрізки
Times New RomanGeorgiaVerdanaArial / Arial BlackCourier/Courier NewTrebuchet MSComic SansImpact
h1{
font-family: 'Shift', sans-serif;}
![Page 17: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/17.jpg)
КольориКольори
O Кольори, відтінки і тіні Кольори, відтінки і тіні
O Однотонні (монохроматичні) колірні Однотонні (монохроматичні) колірні схеми схеми
O Додаткові колірні схеми Додаткові колірні схеми
O Теплі кольори проти холодних Теплі кольори проти холодних
O Триадичні колірні схеми Триадичні колірні схеми
O Тетрадичні колірні схеми Тетрадичні колірні схеми
O Paletton, Color Scheme Designer
![Page 18: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/18.jpg)
Верстка Верстка
O Логотип Логотип O Навігація Навігація O Структурна ієрархіяСтруктурна ієрархіяO СіткаСіткаO Основний контентОсновний контентO Другорядний контентДругорядний контентO Нижній колонтитулНижній колонтитулO ПроміжкиПроміжкиO Симетрія і балансСиметрія і баланс
![Page 19: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/19.jpg)
Критерії оцінювання веб-сайтівКритерії оцінювання веб-сайтів
O Комфортність Комфортність O Навігація Навігація O ДизайнДизайнO КонтентКонтентO БезпекаБезпекаO Інші технічні фактори (швидкість і т.п.)Інші технічні фактори (швидкість і т.п.)O Інші маркетингові факториІнші маркетингові факториO Матеріал, що використовується на Матеріал, що використовується на
законних законних підставах/Гарантії/Легітимізаціяпідставах/Гарантії/Легітимізація
![Page 20: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/20.jpg)
Макет дизайну веб-сайтуМакет дизайну веб-сайту
![Page 21: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/21.jpg)
Адаптивний веб-дизайн сайтуАдаптивний веб-дизайн сайту
![Page 22: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/22.jpg)
ВисновкиВисновкиO Ергономіка: зістаріли фрейми, є веб-Ергономіка: зістаріли фрейми, є веб-
шрифтишрифтиO Існує друкована та існує веб-типографія Існує друкована та існує веб-типографія O Колірні схеми слідують певним правиламКолірні схеми слідують певним правиламO Основні колірні схеми: монохроматична, Основні колірні схеми: монохроматична,
додаткова, триадична і тетрадичнадодаткова, триадична і тетрадична O Шрифт і колір компонуються гармонійноШрифт і колір компонуються гармонійноO Макет має бути сумісний із браузерамиМакет має бути сумісний із браузерамиO Потрібно підтримувати мобільні пристроїПотрібно підтримувати мобільні пристроїO Зручність користування першочерговаЗручність користування першочергова
![Page 23: Web Dessign Essentials Beregsassi Stepan (Ukrainian)](https://reader036.fdocuments.net/reader036/viewer/2022062523/58f187f41a28ab2a778b4591/html5/thumbnails/23.jpg)
?Питання?