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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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