среда, 22 апреля 2009 г.

Гид по дизайну в стиле Web 2.0. Часть 3: Шапка и границы контента

Часть 1: Обзор. Простота
Часть 2: Центрирование и количество колонок

Шапка

Шапка сайта должна выделяться и содержать в себе брэнд сайта, а также навигационные элементы.

Вы можете возразить, дескать, во все времена у сайтов были шапки и брэнды. Но сейчас, более, чем когда-либо, шапка сайта очень сильно отличается от остального контента.

Шапка сайта сигнализирует пользователю: "Это верх страницы". Она должна быть оформлена броско и выразительно: большие символы, яркие иллюстрации, лаконичные слоганы, - в стиле "web 2.0".

Где и когда использовать выразительную шапку

На любом сайте, как брэндинг, так и навигация должны быть чёткими и бросающимися в глаза.

Для этого всегда позиционируйте логотип вашего сайта в шапке. А навигацию рекомендуется размещать сразу после логотипа. И хорошим тоном считается отделить визуально шапку сайта от остального (информационного) содержимого. Например, типичный приём для этого - использовать другой цвет для фона контейнера шапки.

Есть и другие приёмы отделения шапки от контента.

Использование разделительной линии:

Стилизация под колонтитулы:

Границы контента

После того, как мы выделили шапку, стоит подумать об остальных элементах страницы. И к ним относятся:

  • Навигация
  • Фон и поля
  • Основное содержимое
  • "Подвал"
  • Кросс-линки

Границы остального контента можно сделать контрастными по сравнению с шапкой. Контраст в данном случае подразумевается цветовой.

Но использование слишком ярких цветов для фона может привести к тому, что зритель будет постоянно отвлекаться от содержимого страницы. Поэтому простой белый цвет тоже может быть эффективен: он прост в использовании для дизайнера, а посетитель сайта чувствует себя более расслабленно при навигации.

(...Продолжение следует...)