Трьохколонна структура

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

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

Для прикладу розглянемо головну сторінку певного сайту.

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

Якщо представити основні блоки сторінки у вигляді однотонних прямокутників, то отримаємо наочну модульну сітку, з якої відразу видно як складено сторінку.

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

Контрольні питання

1. Як розподіляється інформація на макеті сторінки ?

2. Що собою представляє інформаційна архітектура сайту?

3. Назвіть різновиди інформаційних архітектур сайту. Іх відмінності.

4. Назвіть засоби навігації сайту.

5. Назвіть види модульних сіток (найбільш поширені структури).

ДЛЯ ОБЩЕГО РАЗВИТИЯ

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

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

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

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

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

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

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

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

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

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