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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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