Для точной передачи замысла дизайн страницы должен иметь визуальную иерархию.
Один из способов задать иерархию — это создать фокус. Фокус притягивает внимание пользователя тем, что он доминирует на странице. Он обращает на себя внимание: «Смотри сюда! Это самая важная вещь на странице!». Фокус создается при помощи контрастов — размеров, цвета, текстуры, разнообразия форм.
Заголовки играют важную роль при построении визуальной иерархии. В XHTML есть шесть различных типов заголовков, использовать их — это один из способов создать визуальную иерархию: hi более важен в визуальной иерархии, чем h2.
Заголовки должны прямо указывать на соответствующий текст. Робин Уильямс (Robin Williams) в своей замечательной книге «The Non-Designer’s Design Book» (книга указана в списке ресурсов в конце главы), называет эту идею «proximity» (соседство). Элементы, которые связаны между собой, должны находиться очень близко друг от друга. Взгляд переводится от одного элемента к другому (с которым тот связан), визуальная иерархия не рассыпается на фрагменты, а смысл страницы остается ясным. Кажется, что заголовок относится к элементу под ним, хотя на самом деле заголовок принадлежит тексту, который расположен правее.
Недостаточно просто расположить заголовок над текстом. Нужно показать связь между ними.
Более подробно о контрастах сайта
Контрасты также используются в Web-страницах для создания эффекта «rollover» и для индикации активной страницы , которая является важным аспектом визуальной иерархии, так как помогает пользователям всегда точно знать свое нынешнее местоположение и направления возможных переходов.
Контрасты можно создавать при помощи формы и вида — противоположности рождают контрасты. Простое изменение цвета одной из ссылок можно считать удачным контрастом, указывающим, какая страница сейчас активна .
Надо продумывать контрасты еще тогда, когда выбираете цветовую схему сайта. Очень важно, чтобы различие между цветом фона и цветом текста на переднем плане было заметным даже для пользователей с плохим зрением.
Если вы используете фоновые изображения, различие между любыми цветами, рисунками или текстурами на заднем фоне и цветом текста на переднем должно быть существенным, иначе текст будет тяжело увидеть.
Заголовки, конечно, должны отличаться по размеру от основного текста. Еще контраст можно получить, подбирая шрифты и гарнитуры. На рис. веселый шрифт заголовка контрастирует с серьезным шрифтом (sans-serif) остального текста на странице.
Не увлекайтесь гарнитурами, не используйте их в большом количестве на одной странице. Помните, что на станице все должно быть последовательно, и многое может быть достигнуто путем повторений.