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

Разместим форму для подписки на рассылку поближе к верхней части страницы

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

Чтобы обеспечить переход от статьи к статье, необходимо добавить дополнительные навигационные элементы над рекламным блоком

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

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

Сетка базовых линий с шагом 18 пикселов поможет определиться с размером, если для нахождения высоты строки использовать число, кратное 18. Три базовые строки (54 пиксела) – это слишком много, поэтому используем две строки (36 пикселов). Для высоты строки 36 пикселов следует выбрать размер шрифта чуть меньше. Давайте возьмем шрифт без засечек (Arial или Helvetica) и кегль 34 пт, чтобы обеспечить гармоничное соотношение между размером и интерлиньяжем.

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

Добавим стили для оформления названия статьи, имени автора и аннотации

Такие же параметры подойдут для оформления ссылок Print, Email и Share, которые должны располагаться рядом с началом статьи. Данные элементы не должны быть большими, для них можно использовать, например, свободное пространство справа от основного текста. Расположим ссылки справа от строки с именем автора и аннотацией.

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

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

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

Добавим стили для оформления иллюстраций с подписями

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

Добавление стиля цитат в основной текст

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

Добавление стиля списка в основной текст

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

Готовый дизайн статьи

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

Давайте приступим к разработке следующего шаблона – странице со сводной информацией. На ней должны быть представлены проекты, которые можно найти в выдуманной нами социальной сети Designery.us, и их авторы. По пиктограммам, соответствующим конкретным персонам или проектам, будет легко оценить содержательную сторону сайта. Схема информационной страницы разделена на две области, ширины которых соотносятся как 2:1. На первый взгляд такой подход полностью соответствует концепции, использованной при создании страницы статьи.

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