OsnovyWebDis

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

Рис. 7.22. Навігаційне вирішення сайту Представництва Європейської Комісії в Україні

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

Згідно з дослідженнями користувач найбільше часу приділяє роз­ гляду F-подібної області екрана (рис. 7.23), зазвичай зосереджу­ ється на виділених світлим кольором областях і майже не звертає уваги на ті, що мають інший колір.

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

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

301

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

Рис. 7.23. Область екрана, де найбільше фокусується погляд користувача (http://www.useit.com/)

Вибір розмірів веб-сторінок

Розробляти дизайн веб-сторінки потрібно з урахуванням Ті просто­ рових розмірів. Вже було згадано про те, що необхідно уникати горизонтальних лінійок прокручування. Слід також враховува­ ти, що веб-сторінки можуть відображатися на моніторах із роз­ дільною здатністю 800x600 пікселів. Якщо відняти простір, який займають меню браузера та панелі операційної системи, то для показу сайту залишиться область приблизно 760x410 пікселів. Це безпечний розмір сторінки, у разі використання якого сторінка коректно відображатиметься на екранах комп'ютерів більшості відвідувачів.

Є різні способи визначення ширини сторінки та її елементів. Пе­ редусім можна задавати кількість пікселів, відведених для різних елементів (рис. 7.24).

Можна визначати загальну ширину елементів сторінки відносно ширини вікна, при цьому решту простору слід заповнити певним кольором. Розміри окремих елементів можна також задавати у від­ сотках відносно загальної ширини (рис. 7.25).

302	Розділ 7. Дизайн веб-сайтів

Рис. 7.24. Визначення розмірів блоків сторінки у пікселах

Рис. 7.25. Визначення розмірів блоків сторінки у відсотках

Визначати розміри блоків сторінки можна й у комбінований спо­ сіб (рис. 7.26). Якщо не задавати загальної ширини таблиці, вона займатиме все місце, доступне у відкритому вікні.

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

303

Рис. 7.26. Визначення розмірів блоків сторінки у комбінований спосіб

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

Вправа 7.3

1.Відкрийте веб-сторінку за адресою: http://www.csszengarden. com/?cssfile=201/201.css. Зменшіть розмір вікна браузера. Що відбувається з елементами сторінки? Вони змінюють ширину? Змінюється відстань між елементами сторінки? Елементи ма­ ють фіксовану ширину?

2.Перегляньте ці сторінки та проаналізуйте ширину їхніх еле­ ментів, а також поведінку під час звуження вікна браузера:

•http://www.csszengarden.com/?cssfiie=184/184.css;

•http://www.csszengarden.com/?cssfile=170/170.css;

•http://www.csszengarden.com/?cssfile=162/162.css;

•http://www.csszengarden.com/?cssfile=160/160.css.

Компонування та визначення набору сторінок сайту

Більшість головних сторінок сайтів у Інтернеті мають таке ком­ понування:

• вгорі розташовується горизонтальна панель, переважно кольо­ рова, заввишки до 100 пікселів, яку зазвичай використову-

3 0 4

Розділ 7. Дизайн веб-сайтів

ють для розміщення логотипа, навігаційної панелі та панелі пошуку;

•ліва колонка завширшки 200-250 пікселів має кольорове тло, зазвичай вона містить навігаційне меню;

•центральна частина має ширину 400-600 пікселів, біле тло, пе­ реважно одну широку колонку або дві менші, містить фото­ графії, ілюстрації, перелік новин, а також гіперпосилання на окремі розділи сайту;

•права колонка містить 200-250 пікселів уширину; зазвичай

їївикористовують для розміщення інформаційних блоків.

Кількість сторінок сайту та їх назви будуть залежати від темати­ ки, обраної інформаційної архітектури, кількості матеріалів тощо. Крім головної сторінки веб-сайту часто виділяють:

•Карту сайту. її створюють, якщо сайт є досить великим. Кар­ та містить перелік усіх розділів сайту у вигляді списку гіперпосилань.

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

•Контакти. Сайт компанії має містити контактні дані, що дасть змогу відвідувачу зв'язатися з її представниками чи розроб­ ником цього сайту. Насамперед слід подати електронну та поштову адреси. Для організації досить корисною може бути інформація про те, як дістатися до її офісу, краще з деталь­ ною картою місцевості та поясненнями.

Не можна забувати про небезпеку поширення особистої ін­ формації через Інтернет. Достатньо лише вказати на сайті електронну адресу веб-майстра. У жодному разі не можна по­ давати особисті дані (навіть якщо йдеться про ваш особистий сайт), зокрема домашню адресу чи номер телефону!

• Поширені запитання. Це сторінка, що містить запитання, які найчастіше виникають у відвідувачів сайту, та відповіді на них. Оскільки відвідувачі як правило стикаються з однаковими

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

305

проблемами, то для того, аби уникнути повторення рекоменда­ цій щодо їх вирішення, і створюють сторінки з поширеними запитаннями.

Якщо веб-розробник хоче, щоб його сайт відвідували люди з різ­ них країн, варто подбати про різномовні версії всіх матеріалів сайту або принаймні їх частини. На головній сторінці в такому разі необхідно розмістити посилання на версії відповідною мовою. Воно може мати вигляд перемикача мов, зображення прапорця країни, в якій користуються певною мовою, чи спеціального ме­ ню (рис. 7.27).

Рис. 7.27. Гіперпосилання для вибору мови у вигляді перемикача, зображення прапорців та меню

Розміщення елементів на сторінці

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

•групування — створення асоціативних зв'язків завдяки розмі­ щенню схожих елементів поряд, розмежування груп лініями або іншими графічними елементами;

•вирівнювання — вирівнювання елементів за видимими чи невидимими лініями;

•охоплення — включення одного елемента в інший; наприк­ лад, категорія «рік» охоплює 12 місяців;

•ритм — створення взаємозв'язку завдяки використанню сти­ лістично однакових виділень.

Групування схожих елементів дає змогу швидко зрозуміти струк­ туру сторінки (рис. 7.28). Людина відразу сприймає згруповані елементи як одне ціле, а елементи з-поза меж групи — як явно відмінні. Навіть на панелі інструментів браузера можна виділи-

3 0 6

Розділ 7. Дизайн веб-сайтів

ти групи елементів: перші п ять кнопок відділені від наступних трьох, що означає їхнє різне функціональне навантаження.

Рис. 7.28. Панель інструментів Internet Explorer: групування елементів

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

Вирівнювання візуально поєднує кілька елементів. Цей прийом використовують для тексту, зображень, кнопок, гіперпосилань, а також для їх комбінацій. Найсильніший вплив має вирівнюван­ ня за верхнім та лівим краєм, оскільки відповідає природному сприйняттю людини. Елементи, вирівняні за правим та нижнім краєм, видаються менш значущими. Лінії вирівнювання, що почи­ наються ближче до верхнього лівого кута екрана, є вагомішими, ніж розташовані нижче та правіше.

Розглянемо фрагмент меню із сайту www.iteach.com.ua (рис. 7.29). Основні розділи вирівняні між собою та за крайньою лівою лінією на сторінці. Гіперпосилання у підменю розміщуються дещо праві­ ше, що робить їх менш важливими.

Охоплення — ще один спосіб створення асоціативних зв'язків між елементами сторінки. Наприклад, на сторінці www.roshen.conn.ua (рис. 7.30) виділено назву категорії товарів та кілька позицій із неї. Вони не згруповані між собою, проте чітко належать до однієї групи завдяки особливому виділенню її назви вгорі.

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

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

3 0 7

Рис. 7.29. Навігаційне меню сайту www.iteach.com.ua

Рис. 7.30. Сторінка сайту www.roshen.com.ua

У прикладі на рис. 7.31 основні навігаційні гіперпосилання на сторінки з іншомовним наповненням не згруповані і не вирівняні. Проте вони чітко сприймаються як рівнозначні однорівневі кате­ горії завдяки використанню однакових виділень.

До принципів, що визначають дизайн сторінки, належать також баланс, пропорція та домінантність.

308	Розділ 7. Дизайн веб-сайтів

Рис. 7.31. Головна сторінка сайту www.wikipeclia.org

Баланс — це рівновага зображення, що досягається розташу­ ванням об'єктів з урахуванням їхньої візуальної ваги у компо­ зиції. Баланс буває двох видів — симетричний та асиметричний (рис. 7.32).

•Симетричний баланс — вага композиції рівномірно розподі­ лена відносно вертикальної та горизонтальної осей сторінки. Зазвичай це означає наявність однакових елементів по обидва боки від осі. Коли на сторінці містяться не ідентичні, а схожі об'єкти, це називають приблизною симетрією. Крім того, рівно­ вагу можна створити за рахунок радіальної (кругової) симетрії.

•Асиметричний баланс — вага композиції не розподілена рів­ номірно відносно центральних осей. Часто при цьому є один домінантний об'єкт, якому протиставлено кілька менших. Загалом асиметрично збалансовані композиції несуть більше напруження.

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

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

309

a також різні форми балансу та симетрії. Менші елементи майже непомітні, натомість більші виходять на перший план (рис. 7.33).

Рис. 7.32. Баланс: горизонтальна та вертикальна симетрія; приблизна симетрія; радіальна симетрія; асиметрія

Рис. 7.33. Пропорції у дизайні сторінки

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

•Домінантний — елемент із найбільшим візуальним значен­ ням і першочерговим наголосом, який явно виділяється на тлі композиції.

•Підпорядкований — елемент із другорядним наголосом, який міститься на тлі композиції.

•Підлеглий — об'єкт із найменшим візуальним значенням/на­ вантаженням, який зливається із тлом композиції.

На рис. 7.34 дерева є домінантним елементом, будинок — підпо­ рядкованим (вторинним), а гори — підлеглими елементами.

Рис. 7.34. Домінантність у дизайні сторінки

3 1 0

Розділ 7. Дизайн веб-сайтів