Чои Вин - Как спроектировать современный сайт

Обратите внимание, что навигационные ссылки не выровнены по базовой линии. Выбранный шрифт не помещается между базовыми линиями, для него требуется немного больше места. Сделаем высоту кнопок навигации (область, которую занимает вся ссылка) равной двум базовым строкам (36 пикселов), а текст будем выравнивать по высоте относительно данной области. Подчеркнем высоту этой зоны с помощью вертикальных разделителей.

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

Текст на элементах навигации не выровнен по базовой сетке

Ролловер-состояние элементов навигации

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

По сути, ни один текстовый блок не попадает на левый край соответствующей колонки. Весь текст расположен на небольшом расстоянии – 5 пикселов – от края.

Это сделано потому, что нужно учитывать поведение блоков текста. В печатных изданиях элементы часто прижаты к краям колонок, но их положение и состояние почти никогда не меняются.

С эстетической точки зрения данный подход является примером безупречной компоновки, но при этом не учитываются ролловер-состояния, характерные для функциональных элементов или текстов ссылок, используемых в Интернете.

Текст, попадающий на край колонки, смотрится нормально

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

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

Проблемы возникают при создании различных эффектов

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

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

Естественно, что не только ссылки, но и любой другой текст следует размещать отступив несколько пикселов от края колонки. Ведь наличие двух возможных расположений – у края колонки и на некотором расстоянии от него – создаст визуальный беспорядок. Кроме того, неизвестно, какой текст будет содержать ссылки, а какой – нет, поэтому давайте считать, что у любого текста в некоторый момент времени могут появиться дополнительные эффекты.

Сдвинем элементы на несколько пикселов от края колонки

Вернемся к шаблону страницы и добавим поле поиска на ту же линию, что и навигационные ссылки. Поиск – это разновидность навигации, и его расположение рядом с элементами навигации весьма логично, хотя мы и разместили поле поиска в крайней правой области над логотипом Designery. Используем творческий подход при создании поля поиска, пусть оно будет несколько необычным – в виде пустой строки, а не прямоугольника.

Добавление над логотипом поля поиска

Наконец, пора добавить в шаблон нижний колонтитул. Специалисты по веб-дизайну не имеют единой точки зрения по поводу внешнего вида колонтитулов. Одни считают, что колонтитулы должны быть простыми и маленькими, а другие уверены, что сложными и информационными. Обе точки зрения верны, но в нашем случае больше подходит простой колонтитул. Используя выравнивание по сетке, можно разместить слева информацию об авторских правах и, отступив четыре юнита, несколько вспомогательных навигационных ссылок. Хотя расположение этих элементов связано с позицией ссылки Ноте и других ссылок, их необязательно привязывать к колонкам основной части страницы. Достаточно выровнять элементы колонтитула по элементам сетки.

Добавление нижнего колонтитула

Готовый шаблон страницы

Теперь добавим торговый знак Designery в нижний правый угол страницы. Это подчеркнет необычное расположение логотипа в правой колонке. Основной шаблон завершен. Он содержит стандартный набор элементов, которые будут использованы для всего сайта, но любой элемент можно изменить, чтобы сделать сайт максимально удобным для пользователя. В следующих проектах мы увидим, когда и где следует вносить такие изменения.