Для тих, хто хоче знати більше

Класифікуючи дизайн сайтів за принципом використання графіки, можна виділити такі групи стилів:

· чистий – стиль сайтів, на яких графічні елементи є частиною інформаційного наповнення, а не використовуються для оформлення. Чистий стиль використовують на сторінках Інтернет-магазинів, де кожне зображення є ілюстрацією того чи іншого виду товару;

· стандартний – стиль сайтів, на яких деякі графічні елементи використовують лише з метою оформлення сторінки, як правило, у заголовку сайту;

· художній – стиль сайтів, на яких графіка є декорацією до змісту й основним елементом дизайну.

За розміщенням контенту у стилях дизайну сайтів вирізняють:

· мінімалістичний – на сторінках сайтів цього стилю візуально виділяється один головний об’єкт, який займає більшу частину площі сторінки;

· у дві колонки та у три колонки – найбільш розповсюджені стилі дизайну, при використанні яких можна досягти зручного подання основного та додаткового інформаційного матеріалу, системи навігації, інтерактивних елементів сторінки тощо;

· складний– стиль дизайну з великою кількістю інформаційних блоків, розміщених на сторінці, що мають різний розмір. Такий стиль дизайну часто використовують на головних сторінках порталів для надання користувачам відомостей про різні види сервісів, доступні на порталі.

Найбільшою є класифікація стилів дизайну за тематичною ознакою. Наведемо кілька прикладів стилів дизайну цієї класифікації:

· стиль «Ретро» – у оздобленні сторінок використовують елементи декору, предмети інтер’єру та інші атрибути, притаманні минулим десятиліттям;

· стиль «Гранж»(амер. розмов. grunge – дещо неприємне)– асиметричне розміщення елементів на сторінці складає враження хаотичної композиції, виконаної начебто недбало (рис. 4.74);

· футуристичний стиль– у оформленні сторінки використовують графічні елементи, що є атрибутами передбачуваного майбутнього: роботи, високотехнологічні механізми тощо;

· журнальний стиль– веб-сторінки оформлені за принципами дизайну глянцевих журналів: великі заголовки, крупні високоякісні фотографії та ін.;

· мультяшний стиль– оформлення сторінок стилізовано під мультфільми та комікси.

За тематичною ознакою стилів дизайну є набагато більше, оскільки різноманітною є тематика інформаційних матеріалів і кожна тема може знайти своє відображення у дизайні.

Рис. 4.74. Приклад сайту стиля «Гранж»

Особливе значення при виборі дизайну відіграє призначення веб-сайту, а не лише його естетичне сприйняття. Будь-який відвідувач сайту завдяки дизайну повинен швидко зрозуміти, чому присвячений сайт, легко знайти корисні для себе інформаційні матеріали, інтуїтивно зорієнтуватися у навігації сторінками сайту. Аналіз найбільш популярних веб-сайтів доводить, що чим простіший дизайн, тим легше користувачу орієнтуватися на сайті. Велика кількість графічних елементів може відволікати увагу від дійсно корисних матеріалів, заради яких відвідувач потрапив на ваш сайт.

З огляду на ці та інші фактори, можна запропонувати такі правила оформлення веб-сторінок:

· Оберіть кольорову гаму для вашого сайту, враховуючи ваші вподобання, тематику сайту та вподобання потенційних відвідувачів. Використайте для оформлення не більше 2-3 кольорів.

· При визначенні кольорової гами сторінки вибирайте контрастні кольори для тексту та фону, щоб текст легше читався.

· Розбивайте текст на абзаци, між якими зробіть збільшені відступи.

· Виберіть розмір шрифту, при якому текст буде сприйматися комфортно – не занадто дрібний та в міру крупний. Шрифт на заголовках зробіть крупнішим від шрифту основного тексту. Вид шрифту зробіть однаковим на всіх сторінках.

· Вирівняйте заголовки по центру, а основний текст – по ширині.

· Для структурування тексту використовуйте таблиці. Розміщуючи фрагменти тексту та графічні зображення у таблицях, можна створити цікаві композиційні рішення на веб-сторінках.

· Не зловживайте флеш-анімацією, відео, музичними та графічними елементами. Вони можуть відволікати увагу від корисних матеріалів та уповільнювати завантаження сторінок.

· Зробіть гіперпосилання для переходу між сторінками сайту, але не розміщуйте на сторінках занадто багато гіперпосилань. Виділяйте гіперпосилання кольором, щоб користувач бачив, що це посилання і які з них він вже відвідував.

· Зробіть логотип сайту, зображення або текст у заголовку гіперпосиланням на головну сторінку сайту.

· Створіть для відвідувачів мапу сайту для спрощення переходу на сторінки з потрібними матеріалами.

Перевірте себе

1. º Назвіть етапи розробки веб-сайту.

2. · У чому полягає етап постановки завдання при розробці веб-сайту?

3. · Що таке внутрішня структура веб-сайту?

4. · Які складові зовнішньої структури сайту?

5. º Значення властивостей яких об’єктів вибирають на етапі розробки дизайн-макету сторінок сайту?

6. º Що таке верстка? Що є результатом верстки сайту?

7. · Чому при розміщенні на сайті мультимедійних файлів потрібно використовувати формати, що передбачають стиснення даних?

8. · Що таке хостинг? Кого називають хостинг-провайдерами?

9. · У чому полягає етап популяризації та підтримки сайту?

10. · Назвіть базові елементи дизайну та особливості їх використання.

11. · Поясніть схему класифікацій стилів дизайну (рис. 4.72).

12. * Поясніть, чому при розробці дизайну сайту важливо враховувати основну аудиторію потенційних відвідувачів.

13. · Назвіть відомі вам правила оформлення веб-сторінок.

Виконайте завдання

1. · (ДЗ) Перегляньте веб-сайти з указаними адресами: http://pets.uz.ua, http://palace.dp.ua, http://www.odnoklasnyk.org.ua, http://smakuje.livejournal.com.Дайте відповіді на запитання.

1. З якою метою створений сайт?

2. Яка тематика сайту?

3. Який тип сайту?

4. Що є оригінального у сайті?

5. Хто є потенційними відвідувачами сайту?

6. Які сервіси запропоновані на сайті?

7. Які ідеї переглянутого сайту ви могли б використати при розробці власного сайту?

2. º Перегляньте веб-сайти з указаними адресами: http://www.kazka.in.ua, http://www.npblog.com.ua, http://maque.org.ua, http://neyrat.net. Відкрийте мапу сайтів та порівняйте форму її подання. Визначте, чи на кожному сайті представлена мапа сайту, чи надає вона додаткові зручності відвідувачам сайту.

3. · Перегляньте веб-сайти з указаними адресами: http://platfor.ma, http://starodub.org.ua, http://molode.com.ua, http://www.4uth.gov.ua, http://osobystist.com. Порівняйте схему зовнішньої структури сторінок сайтів. Визначте, чи на всіх сайтах використані блоки заголовку, інформаційний, підвал, як розміщений блок меню.

4. * Виберіть одну з запропонованих тем для веб-сайту: Небезпечні тварини, Космічні дослідження, Колекція рекордів, Наукові відкриття, Художній салон.

1. Виберіть тип для сайту цієї тематики.

2. Створіть у текстовому редакторі схему внутрішньої структури сайту. Збережіть її у власній папці у файлі з іменем завдання 4.8.4.docx.

3. Розробіть у графічному редакторі схему зовнішньої структури сторінок сайту. Збережіть її у власній папці у файлі з іменем завдання 4.8.4.bmp.

5. · Перегляньте веб-сайт дизайн-студії ArtPoint (http://artpoint.com.ua). Проаналізуйте зразки робіт, розробки елементів корпоративного стилю. Зверніть увагу на дотримання тематики та кольорової гами. Визначте, використання яких елементів могло б підкреслити єдність стилю сторінок вашого сайту.

6. (ДЗ) º Перегляньте веб-сторінку сайту Файнохост (http://www.faynohost.com.ua/design-templates.html) із зразками шаблонів оформлення сайтів. Зверніть увагу на схему зовнішньої структури шаблонів сторінок. Визначте, яку схему ви могли б використати для власного сайту.

7. · Перегляньте веб-сайти з указаними URL-адресами та визначте, до якої групи класифікації відноситься стиль дизайну кожного з них:

8. (ДЗ) * Знайдіть в Інтернеті 3-4 сайти, тематика яких збігається з вибраною вами темою у завданні № 4. Оцініть, чи дотримані на цих сайтах правила оформлення веб-сторінок. Запишіть, які ідеї переглянутих сайтів ви могли б використати при розробці вашого сайту.