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

Обратите внимание, что информация разделена на две небольшие колонки. Обе они привязаны к колоночной сетке, а текст выровнен по базовой сетке. Аватар также выровнен по базовой сетке.

Естественно, нельзя разместить в дальнем правом углу все важнейшие элементы. Учитывая, что логотип находится справа, навигационные элементы следует разместить в левой части страницы. Давайте расположим элементы навигации вдоль верхнего края страницы – там, где пользователи легко заметят их.

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

Элементы аккаунта выровнены по сетке

Размещение элементов навигации вверху страницы

Данная область сетки состоит из 10 блоков, которые можно объединить в 5 колонок по 2 юнита в каждом. Ширина каждой колонки 110 пикселов, этого достаточно для размещения кнопок навигации. В нашей модели используются только 3 элемента навигации: Home, Articles и Browse (Profile теперь находится в правом дальнем углу). Учитывая важность ссылки на страницу About Designery, которая изначально находилась в нижнем колонтитуле, ее можно переместить на уровень элементов навигации. Теперь мы имеем 4 элемента. Одна из колонок до сих пор не используется и ее можно назначить для ссылки Ноте, самой важной из навигационных ссылок (теперь она занимает 4 юнита, 230 пикселов). Такой выбор сделает ссылку Ноте особенно заметной даже без дополнительных выделений.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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