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

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

Эффективная сетка, образованная базовыми линиями, хорошо дополняет более крупные элементы, например, заголовки и подзаголовки, но базовые линии в первую очередь предназначены для размещения основного текста на странице. Как правило, для основного текста на сайтах выбирается кегль от 11 до 14 пунктов, но могут использоваться и другие значения. Можно выбирать практически любой размер шрифта, но наш глаз лучше всего воспринимает строки длиной от 60 до 80 символов. Строки, содержащие 80 или более символов, трудно читать, поэтому старайтесь их не использовать.

Возвращаясь к колоночной сетке, можно увидеть, что самая широкая зона, предназначенная для размещения текста, находится в левой области, где 10 блоков и 9 промежутков образуют область шириной 590 пикселов. Этого места достаточно для размещения основной колонки текста в шаблоне страницы статьи – самом большом из всех шаблонов. Но даже в такой широкой колонке перед абзацами обязательно должны использоваться промежутки, упрощающие визуальное восприятие, поэтому 2 юнита и 2 промежутка мы будем использовать как свободное пространство. В результате мы получаем 8 юнитов и 7 промежутков общей шириной 470 пикселов. Даже в этом случае рекомендуется добавить дополнительные отступы внутри колонки (мы еще поговорим об этом), поэтому фактическая ширина составит около 450 пикселов.

Использование образцов помогает определить правильную длину строки и размер шрифта

Какой размер шрифта подойдет для выбранной ширины?

Можно воспользоваться калькулятором, но у шрифтов могут быть разные параметры, поэтому лучше всего использовать образец текста и оценить получившуюся картину визуально.

При использовании шрифта Georgia Regular 12 пт в строку помещаются около 80 символов, шрифта Georgia Regular 14 пт – чуть больше 60 символов. Другие дизайнеры и пользователи могут выбрать другие размеры, но мы используем Georgia Regular 13 пт. Результат составит примерно 70 символов на строку.

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

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

Размер шрифта позволяет рассчитать межстрочный интервал, на котором основывается сетка, образованная базовыми линиями. Вопросами выбора правильного интерлиньяжа занимались довольно давно, еще во времена становления традиционного книгопечатания, когда для создания промежутков между строками текста заливалось олово. За это время были выработаны несколько практических рекомендаций, но универсальных правил не существует. Более насыщенные шрифты требуют большего межстрочного интервала, чем обычные. Чем больше кегль шрифта, чем крупнее прописные буквы (особенно буквы В, С и 0), тем больше должен быть межстрочный интервал. Кроме того, необходимо учитывать множество других факторов – курсив, засечки, степень контраста между жирным и обычным шрифтом и т. д. Нужно помнить, что межстрочный интервал не должен быть меньше, чем кегль шрифта (особенно в основном тексте), то есть для текста, набранного шрифтом 13 пунктов, интерлиньяж не может быть менее 13 пунктов, а сам результат должен быть приятным глазу. Слишком маленький межстрочный интервал усложняет визуальное разделение абзаца на читаемые строки, а слишком большой – затрудняет переход со строки на строку.

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

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

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

Базовая сетка поможет выбрать параметры заголовков и подзаголовков – HTML-стилей Н1, Н2, НЗ и т. д. Заголовки Н1, как правило, имеют наибольший размер на странице, они обычно отделены от основного текста и поэтому их необязательно привязывать к базовым строкам. А заголовки Н2 и НЗ обязательно должны учитывать базовую сетку. Очевидно, что эти элементы оформления должны быть крупнее и/или более заметны, чем основной текст, но базовая сетка основана на интерлиньяже, а не на размере шрифта. Например, если мы выберем для заголовков Н2 размер 24 пт, интерлиньяж должен составить 26 пт (две базовые линии). Размер шрифта может колебаться в диапазоне от 22 до 30 пунктов, но межстрочный интервал при этом составляет 36 пунктов. Более точное значение определяется визуальной оценкой текста: попадают ли нижние выносные элементы букв (например, g и y) на расположенный ниже текст и достаточен ли интерлиньяж для удобства восприятия информации.

Не все параметры текста должны соответствовать сетке базовых строк. Здесь заголовок Н1 находится вне сетки

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

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

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

Определение областей усложняется при разной высоте страниц

Как подобрать правильную высоту этих полей? Нам поможет золотое отношение. Учтем разрешение экрана компьютера и используем золотое отношение, считая, что коэффициент приближенно равен 1,618. Разделив ширину страницы (960 пикселов) на 1,618, после округления получим 593.

Прямоугольник шириной 960 и высотой 593 пиксела почти идеально соответствует золотому отношению. Если разместить этот прямоугольник в верхней части страницы, его нижний край задаст границу поля. В нашей базовой сетке ближайшая линия находится на уровне 594 пикселов – 33-я строка сверху. И снова наши расчеты будут приближенными, так что полученное число можно использовать и считать, что горизонтальные поля будут разбивать страницу на фрагменты высотой 594 пиксела, начиная с верха страницы.

Высота полей рассчитывается с помощью золотого отношения

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

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

Конечно, можно использовать 18-точечную базовую сетку и выровнять элементы по любой из сотен базовых линий, но их слишком много. Нам нужно найти промежуточный вариант, что-то похожее на колоночную сетку.

Попробуем использовать правило третей, чтобы усовершенствовать подход к выбору размера поля. Если разделить 594 пиксела на 3, получим 198-пиксельную область, привязанную к сетке базовых линий. Используя базовую линию для задания промежутка между третями, мы получим 180-пиксельные поля по 10 базовых строк в каждом.

Вся страница разделена на поля

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

Создание шаблона страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сдвинем элементы на несколько пикселов от края колонки

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

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

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

Добавление нижнего колонтитула

Готовый шаблон страницы

Теперь добавим торговый знак Designery в нижний правый угол страницы. Это подчеркнет необычное расположение логотипа в правой колонке.

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

Проект 1. Страница статьи

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

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

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

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

Проект страницы статьи

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

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

Образец текста в левой колонке

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

Смещение текста влево на один юнит

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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