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

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

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

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

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

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

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

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

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

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

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

Проект 2. Информационная страница

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

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

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

Каркас информационной страницы

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