Дизайн веб-сайтів

Содержание

Слайд 2

1. Типи сайтів та їх особливості За однією з класифікацій веб-сайти

1. Типи сайтів та їх особливості

За однією з класифікацій веб-сайти поділяють

на статичні та динамічні :
Статичний сайт — це сайт, вміст якого сталий і не може змінюватися під час відвідування сайту.
Динамічний сайт — сайт, що може змінюватися у процесі взаємодії з відвідувачем.
Слайд 3

Типи сайтів та їх особливості Тематична класифікація: Блог Бізнес-сайт Сайт електронної

Типи сайтів та їх особливості

Тематична класифікація:
Блог
Бізнес-сайт
Сайт електронної комерції
Громадський сайт
База даних
Каталог
Сайт матеріалів


Сайт працевлаштування
Ігровий сайт
Гумористичний сайт
Інформаційний сайт
Сайт новин
Сайт відгуків
ПоОсобистий сайт
шуковий сайт
Веб-портал
Вікі-сайт
Слайд 4

Типи сайтів та їх особливості Візуальна класифікація: Текстові сайти містять переважно

Типи сайтів та їх особливості

Візуальна класифікація:
Текстові сайти містять переважно текстову інформацію

та відносно мало зображень.
Графічні сайти окрім певних текстових матеріалів містять багато графіки: спливаючі меню, піктограми, анімаційні зображення тощо.
Імітаційні сайти запозичують ідею оформлення з реального світу.
Слайд 5

2. Планування веб-сайту та етапи роботи над ним Процес розробки веб-сайту

2. Планування веб-сайту та етапи роботи над ним

Процес розробки веб-сайту складається

з шести етапів:
1. Планування.
2. Створення інформаційної архітектури.
3. Дизайн.
4. Реалізація.
5. Маркетинг.
6. Оцінювання і підтримка.
Слайд 6

3. Веб-дизайн у контексті художнього дизайну Дизайн — це художнє конструювання

3. Веб-дизайн у контексті художнього дизайну

Дизайн — це художнє конструювання предметного

світу, розробка зразків раціональної побудови предметного середовища; це творча діяльність, спрямована на зовнішній вигляд предметів, а також на їх структурні та функціональні взаємозв'язки, які роблять їх цілісними. Термін веб-дизайн означає розроблення та конструювання ресурсів Інтернету.
Слайд 7

Основні поняття дизайну Основними образотворчими засобами дизайну є точка, лінія, фактура, текстура, колір, форма, пропорція тощо.

Основні поняття дизайну

Основними образотворчими засобами дизайну є
точка,
лінія,
фактура,


текстура,
колір,
форма,
пропорція тощо.
Слайд 8

Основні поняття дизайну Композиція — це об'єднання різних частин (елементів) у

Основні поняття дизайну

Композиція — це об'єднання різних частин (елементів) у

єдине ціле відповідно до певної ідеї.
Основні принципи композиці — симетрія, асиметрія, рівновага, ритм та динаміка.
Симетрія — таке розташування об'єктів, за якого вони розміщуються дзеркально відносно центральної осі веб-сторінки.
Асиметрія — довільне розташування об'єктів, за якого ліва та права частини художнього витвору стають неврівноваженими.
Рівновага — стан композиції, за якого всі елементи збалансовані між собою.
Динаміка — ілюзія руху, створена за допомогою статичних зображень спеціальними засобами.
Ритм — чергування різних елементів, яке додає композиці ї чіткості, стрункості, особливої виразності, динамічності .
Слайд 9

У дизайні використовують ще й такі поняття, як гармонія, контраст, колорит,

У дизайні використовують ще й такі поняття, як гармонія, контраст, колорит,

перспектива, центр мас.
Гармонія — співмірність всіх частин цілого.
Контраст — різка відмінність елементів композиції, наприклад, протиставлення темного і світлого, високого та низького, легкого та важкого, тонкого та товстого, ліній та плям.
Колорит — гармонійне поєднання, взаємозв'язок, тональне об'єднання різних кольорів.
Перспектива — спосіб зображення тривимірного простору на площині відповідно до видимих змін розмірів та чіткості об'єктів.
Центр мас — візуальний центр зображення, що міститься дещо вище від його геометричного центру.

Основні поняття дизайну

Слайд 10

Ергономіка Ергономіка (від гр. ergon — робота та nomos закон) —

Ергономіка

Ергономіка (від гр. ergon — робота та nomos закон) —

наука, яка вивчає робочі процеси з метою створення оптимальних умов праці , що сприяють підвищенню її продуктивності, а також зберігають сили, здоров'я та працездатність людини.
Слайд 11

Ергономіка Основні елементи ергономічного візуального інтерфейсу: По-перше, він відображається на екрані

Ергономіка

Основні елементи ергономічного візуального інтерфейсу:
По-перше, він відображається на екрані монітора

і складається з ділянок, частина яких є найактивнішими, тобто відразу стають помітними, виділяючи найважливіші елементи сторінки.
По-друге, колірна схема елементів інтерфейсу має бути побудована на основі психофізіології кольору.
По-третє, гарнітуру шрифту, його розмір, накреслення, а також варіанти розташування текстових блоків на сторінці необхідно вибирати відповідно до ступеня їхньої важливості для цільової аудиторії.
Система навігації має бути зручною та інтуїтивно зрозумілою.
Інтерфейс повинен адекватно моделювати реальні життєві ситуації, що виникають у тій чи іншій прикладній галузі. Інтерфейс має бути непомітним настільки, щоб відвідувач зосереджував свою увагу на вмісті веб-сторінки, а не на способі її подання.
Слайд 12

Основні складові веб-дизайну Можна виділити п'ять основних складових поняття веб-дизайну. •

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

Можна виділити п'ять основних складових поняття веб-дизайну.
• Зміст

— форма подання та спосіб організації наповнення сайту.
• Оформлення — загальний вигляд сайту, що визначається зокрема графічними елементами для прикраси та навігації.
• Технології — це засоби форматування веб-сторінок та надання їм інтерактивності.
• Подання — швидкість та надійність відображення сайту в мережі Інтернет.
• Мета — причина створення сайту, а також результати, яких він дозволить досягти.
Слайд 13

Веб-майстрові необхідно знайти хиткий баланс між: власними можливостями та потребами користувачів;

Веб-майстрові необхідно знайти хиткий баланс між:

власними можливостями та потребами користувачів;


формою та функціями веб-сайту;
усталеними правилами та творчими рішеннями;
якістю оформлення веб-сайту і часом на його створення.
Слайд 14

4. Проектування структури сайту Інформаційна архітектура сайту — це сукупність методів

4. Проектування структури сайту

Інформаційна архітектура сайту — це сукупність методів та

способів створення структури з веб-сторінок.
Можна виділити такі різновиди інформаційних архітектур сайту:
Все в одному,
Однорівнева модель,
Індекс,
Чітка ієрархія,
Багатовимірна ієрархія,
Пошукова система.
Слайд 15

5. Просторовий дизайн веб-сторінок. Важливо, щоб основна інформація була зосереджена на

5. Просторовий дизайн веб-сторінок.

Важливо, щоб основна інформація була зосереджена на

початку сторінки, а для виділення важливої інформації та привернення уваги відвідувача слід використовувати заголовки, списки та поділ тексту на абзаци.
Слайд 16

6. Інформаційне наповнення веб-сторінки. Основні правила написання текстів для Інтернету такі:

6. Інформаційне наповнення веб-сторінки.

Основні правила написання текстів для Інтернету такі:
Писати

менше.
Використовувати принцип «оберненої піраміди».
Викладати найважливішу інформацію на початку сторінки.
Продумати заголовки.
Слайд 17

7. Графічне оформлення веб-сторінки. Форма об'єкта пызнаэться незалежно від його розмірів,

7. Графічне оформлення веб-сторінки.

Форма об'єкта пызнаэться незалежно від його розмірів, кольору

і розташування;
Гострий кут сприймається першим;
Прямі контури і кути сприймаються раніше ніж кола/круги.
Слайд 18

8. Типові помилки дизайнерів-початківців На «правильних» веб-сторінках кольорова гама сторінки має

8. Типові помилки дизайнерів-початківців

На «правильних» веб-сторінках
кольорова гама сторінки має складатися

з одного-двох кольорів;
меню не повинно бути більше семи пунктів;
логотип повинен міститися внизу праворуч чи вгорі ліворуч і мати просту та лаконічну форму;
дизайн має бути простим, а текст — коротким;
горизонтальне прокручування вікна неприпустиме.
Слайд 19

Незручності для відвідувачів Повільне завантаження. Ненадійність інформації. Ілюстрації повинні бути підібрані

Незручності для відвідувачів

Повільне завантаження.
Ненадійність інформації.
Ілюстрації повинні бути підібрані вдало

і виправдано.
Суцільний текст, який важко переглядати.
Навігаційні помилки.
Нестандартне оформлення гіперпосилань.
Нові вікна браузера не можуть відкриватися без попередньої згоди відвідувача чи хоча б попередження.
Слайд 20

Незручності для відвідувачів Фіксована ширина сторінки чи елементів на ній. Недоречне

Незручності для відвідувачів
Фіксована ширина сторінки чи елементів на ній.
Недоречне використання форм.
Невдалі

заголовки.
Ігнорування загальноприйнятих правил, нестандартний інтерфейс.
Реклама і все, що подібне їй.
Несумісність із браузерами.
Гіперпосилання зі сторінки на саму себе є малофункціо-
нальними.