Размещение элементов навигации вверху страницы
Данная область сетки состоит из 10 блоков, которые можно объединить в 5 колонок по 2 юнита в каждом. Ширина каждой колонки 110 пикселов, этого достаточно для размещения кнопок навигации. В нашей модели используются только 3 элемента навигации: Home, Articles и Browse (Profile теперь находится в правом дальнем углу). Учитывая важность ссылки на страницу About Designery, которая изначально находилась в нижнем колонтитуле, ее можно переместить на уровень элементов навигации. Теперь мы имеем 4 элемента. Одна из колонок до сих пор не используется и ее можно назначить для ссылки Ноте, самой важной из навигационных ссылок (теперь она занимает 4 юнита, 230 пикселов). Такой выбор сделает ссылку Ноте особенно заметной даже без дополнительных выделений.
Обратите внимание, что навигационные ссылки не выровнены по базовой линии. Выбранный шрифт не помещается между базовыми линиями, для него требуется немного больше места. Сделаем высоту кнопок навигации (область, которую занимает вся ссылка) равной двум базовым строкам (36 пикселов), а текст будем выравнивать по высоте относительно данной области. Подчеркнем высоту этой зоны с помощью вертикальных разделителей.
Использование базовой сетки для расчета высоты навигационных элементов поможет установить их ролловер-состояние. При наведении указателя мыши на эти элементы будет изменяться фоновый цвет, подчеркивая их "кликабельность".
Текст на элементах навигации не выровнен по базовой сетке
Ролловер-состояние элементов навигации
Настал момент напомнить о важности промежутков в дизайне на основе сетки. Обратите внимание, как навигационные ссылки соотносятся елевым краем колонок.
По сути, ни один текстовый блок не попадает на левый край соответствующей колонки. Весь текст расположен на небольшом расстоянии – 5 пикселов – от края.
Это сделано потому, что нужно учитывать поведение блоков текста. В печатных изданиях элементы часто прижаты к краям колонок, но их положение и состояние почти никогда не меняются.
С эстетической точки зрения данный подход является примером безупречной компоновки, но при этом не учитываются ролловер-состояния, характерные для функциональных элементов или текстов ссылок, используемых в Интернете.
Текст, попадающий на край колонки, смотрится нормально
В этом и заключается фундаментальное отличие интерактивного дизайна от дизайна печатных изданий – веб-дизайнеры должны учитывать эффекты.
В обычном состоянии ссылка или текстовая кнопка, находящиеся на веб-странице, могут выглядеть как обычный текст на простом фоне, но они могут обладать дополнительными эффектами. Например, при наведении на них указателя мыши может изменяться фоновый цвет.
Проблемы возникают при создании различных эффектов
Как видно из приведенного примера, текст не должен прижиматься к краям колонки. При ролловере текст прилипнет к левому краю. Чтобы улучшить его внешний вид и учесть данный эффект, достаточно сместить текст на несколько пикселов вправо от края колонки. Вне зависимости от того, работает или нет ролловер-эффект, текст должен оставаться на одном месте, особенно это важно, если пользователи будут переходить со страницы на страницу по ссылкам.
Поэтому лучше всего выбрать положение текста в обычном состоянии таким же, как и в ролловер-состоянии.
Естественно, что не только ссылки, но и любой другой текст следует размещать отступив несколько пикселов от края колонки. Ведь наличие двух возможных расположений – у края колонки и на некотором расстоянии от него – создаст визуальный беспорядок. Кроме того, неизвестно, какой текст будет содержать ссылки, а какой – нет, поэтому давайте считать, что у любого текста в некоторый момент времени могут появиться дополнительные эффекты.
Сдвинем элементы на несколько пикселов от края колонки
Вернемся к шаблону страницы и добавим поле поиска на ту же линию, что и навигационные ссылки. Поиск – это разновидность навигации, и его расположение рядом с элементами навигации весьма логично, хотя мы и разместили поле поиска в крайней правой области над логотипом Designery. Используем творческий подход при создании поля поиска, пусть оно будет несколько необычным – в виде пустой строки, а не прямоугольника. 
Добавление над логотипом поля поиска
Наконец, пора добавить в шаблон нижний колонтитул. Специалисты по веб-дизайну не имеют единой точки зрения по поводу внешнего вида колонтитулов. Одни считают, что колонтитулы должны быть простыми и маленькими, а другие уверены, что сложными и информационными. Обе точки зрения верны, но в нашем случае больше подходит простой колонтитул. Используя выравнивание по сетке, можно разместить слева информацию об авторских правах и, отступив четыре юнита, несколько вспомогательных навигационных ссылок. Хотя расположение этих элементов связано с позицией ссылки Ноте и других ссылок, их необязательно привязывать к колонкам основной части страницы. Достаточно выровнять элементы колонтитула по элементам сетки. 
Добавление нижнего колонтитула
Готовый шаблон страницы
Теперь добавим торговый знак Designery в нижний правый угол страницы. Это подчеркнет необычное расположение логотипа в правой колонке. Основной шаблон завершен. Он содержит стандартный набор элементов, которые будут использованы для всего сайта, но любой элемент можно изменить, чтобы сделать сайт максимально удобным для пользователя. В следующих проектах мы увидим, когда и где следует вносить такие изменения.
Проект 1. Страница статьи
Дизайн многих веб-сайтов начинается с шаблона домашней страницы – логической отправной точки, – потому что она во многом определяет эстетический облик сайта. Однако домашняя страница часто может быть настолько нетипичной, что мы не сможем достичь более важной цели. Начиная работать над дизайном, мы хотим заранее решить как можно больше серьезных задач.
Считается, что домашняя страница – это наиболее важная страница сайта, лицо и проводник, обеспечивающий доступ к содержанию остальных страниц. Это абсолютно верное утверждение, но в мире Интернета значительно важнее само содержание, а не путь к нему. Домашняя страница, в конце концов, – всего лишь оглавление сайта.
С другой стороны, страницы, содержащие конкретный материал, – например, каталог продукции на сайте магазина или статья на информационном сайте, – чаще всего индексируются, ссылки на них пересылаются по электронной почте и обсуждаются в социальных сетях.
Поэтому сначала мы используем разработанный основной шаблон для создания страницы статьи. Естественно, наш дизайн должен учитывать требования, содержащиеся в изначальном задании.