Как спроектировать современный сайт (Вин) - страница 30

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

Давайте разделим страницу на две части: одна будет использоваться для основного содержания, а вторая – для блока рекламы и второстепенной информации. Разместив шесть юнитов на правой части страницы, мы получим колонку, в которую можно вставить рекламный блок, а слева останутся десять колонок для основного текста.

Для создания шаблона страницы выделим основные области

Мы позволим себе некоторую вольность и разместим логотип Designery.us в правом верхнем углу страницы – крайняя колонка. Столь нестандартное расположение отвечает требованию аудитории к удобному дизайну. Данный выбор дает нам бо́льшую свободу, чем размещение его на левой стороне, где необходимо место для основного заголовка и содержания каждой страницы.

Более того, такое расположение позволяет решить проблему, часто возникающую при разработке сайтов, – крайняя правая колонка нередко не воспринимается. Многие пользователи уделяют мало внимания данной части страницы и имеют на то причины: владельцы сайтов обычно используют ее как место для размещения рекламы и информации о различных акциях. Логотип Designery.us, находящийся в верхней части данной области, поможет устранить этот эффект, потому что его заметное положение может визуально активизировать пространство.

Поместим логотип в нестандартное место – верхний правый угол

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

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

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