«Принципи Web-дизайну. «Принципи Web-дизайну. Критерії оцінки WeКритерії оцінки Webb-сайтів»-сайтів»

Берегсасі Степан Степанович,Берегсасі Степан Степанович, викладач кафедри математики Закарпатського викладач кафедри математики Закарпатського

Угорського інститутуУгорського інститутуім. Ференца Ракоці ІІ.ім. Ференца Ракоці ІІ.

Київ - 201Київ - 20155

Зміст роботиЗміст роботи

1.1. Методологічні основи веб-дизайну Методологічні основи веб-дизайну

2.2. Теоретичні засади веб-дизайну та Теоретичні засади веб-дизайну та критеріїв оцінювання веб-сторінок критеріїв оцінювання веб-сторінок

3.3. Практичні основи використання Практичні основи використання веб-дизайну та критеріїв веб-дизайну та критеріїв оцінювання веб-сторінокоцінювання веб-сторінок

Веб-дизайнВеб-дизайн

Це фактично веб-проектування Це фактично веб-проектування зорієнтоване на кінцевого зорієнтоване на кінцевого

користувача веб-ресурсу, він поєднує користувача веб-ресурсу, він поєднує елементи художніх, технологічних, елементи художніх, технологічних,

комерційних та інформаційних комерційних та інформаційних напрямків. Веб-дизайн означає напрямків. Веб-дизайн означає

проектування для Інтернету веб-проектування для Інтернету веб-сайтів, веб-порталів та веб-додатків.сайтів, веб-порталів та веб-додатків.

Основні складові веб-дизайнуОсновні складові веб-дизайну

O ЗмістЗмістO ОформленняОформленняO ТехнологіїТехнологіїO ПоданняПоданняO МетаМетаO СупроводженняСупроводження

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

Зароджнення веб-дизайну Зароджнення веб-дизайну (1989)(1989)

Текстовий режим відображення контентуТекстовий режим відображення контенту

Таблиці (1995)Таблиці (1995)

Розміщення контенту за допомогою таблиціРозміщення контенту за допомогою таблиці

Javascript (1995)Javascript (1995)

Застосування керуючої логіки на сайтіЗастосування керуючої логіки на сайті

Flash (1996)Flash (1996)

Яскравість, анімація та інтерактивність через плагін ФлешЯскравість, анімація та інтерактивність через плагін Флеш

CSS (1998)CSS (1998)

Каскадні стилі – розміщення оформлення поза контентомКаскадні стилі – розміщення оформлення поза контентом

МобілМобільнийьний зміст:зміст: сітки і сітки і фреймворки (2007)фреймворки (2007)

Поділ інформації з вирівнюванням по стовпчикамПоділ інформації з вирівнюванням по стовпчикам

Адаптивний веб-дизайн (2010)Адаптивний веб-дизайн (2010)

Різні макети для різних пристроїв при однаковому контентіРізні макети для різних пристроїв при однаковому контенті

Спрощення (2010)Спрощення (2010)

Плоский дизайн: якісні фото, кольори, шрифти, макетиПлоский дизайн: якісні фото, кольори, шрифти, макети

Майбутнє веб-дизайну (2014Майбутнє веб-дизайну (2014 -)-)

Юніти Юніти vh, vw, FlexBox, vh, vw, FlexBox, веб-компонентивеб-компоненти

Основні розділи веб-дизайнуОсновні розділи веб-дизайну

ТипографіяТипографія

КольориКольори

ВерсткаВерстка

ТипографіяТипографія

O Обмежений вибір шрифтівОбмежений вибір шрифтів O Перенесення слівПеренесення слів O КернінгКернінг O Відсутність контролюВідсутність контролю O Вибір набору шрифтівВибір набору шрифтів O Довжина рядкаДовжина рядка O Висота рядкаВисота рядка O Типографічно-правильна пунктуаціяТипографічно-правильна пунктуація O ВрізкиВрізки

Times New RomanGeorgiaVerdanaArial / Arial BlackCourier/Courier NewTrebuchet MSComic SansImpact

h1{

font-family: 'Shift', sans-serif;}

КольориКольори

O Кольори, відтінки і тіні Кольори, відтінки і тіні

O Однотонні (монохроматичні) колірні Однотонні (монохроматичні) колірні схеми схеми

O Додаткові колірні схеми Додаткові колірні схеми

O Теплі кольори проти холодних Теплі кольори проти холодних

O Триадичні колірні схеми Триадичні колірні схеми

O Тетрадичні колірні схеми Тетрадичні колірні схеми

O Paletton, Color Scheme Designer

Верстка Верстка

O Логотип Логотип O Навігація Навігація O Структурна ієрархіяСтруктурна ієрархіяO СіткаСіткаO Основний контентОсновний контентO Другорядний контентДругорядний контентO Нижній колонтитулНижній колонтитулO ПроміжкиПроміжкиO Симетрія і балансСиметрія і баланс

Критерії оцінювання веб-сайтівКритерії оцінювання веб-сайтів

O Комфортність Комфортність O Навігація Навігація O ДизайнДизайнO КонтентКонтентO БезпекаБезпекаO Інші технічні фактори (швидкість і т.п.)Інші технічні фактори (швидкість і т.п.)O Інші маркетингові факториІнші маркетингові факториO Матеріал, що використовується на Матеріал, що використовується на

законних законних підставах/Гарантії/Легітимізаціяпідставах/Гарантії/Легітимізація

Макет дизайну веб-сайтуМакет дизайну веб-сайту

Адаптивний веб-дизайн сайтуАдаптивний веб-дизайн сайту

ВисновкиВисновкиO Ергономіка: зістаріли фрейми, є веб-Ергономіка: зістаріли фрейми, є веб-

шрифтишрифтиO Існує друкована та існує веб-типографія Існує друкована та існує веб-типографія O Колірні схеми слідують певним правиламКолірні схеми слідують певним правиламO Основні колірні схеми: монохроматична, Основні колірні схеми: монохроматична,

додаткова, триадична і тетрадичнадодаткова, триадична і тетрадична O Шрифт і колір компонуються гармонійноШрифт і колір компонуються гармонійноO Макет має бути сумісний із браузерамиМакет має бути сумісний із браузерамиO Потрібно підтримувати мобільні пристроїПотрібно підтримувати мобільні пристроїO Зручність користування першочерговаЗручність користування першочергова

?Питання?