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

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

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

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

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

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

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

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

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

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

Небольшой эскиз новой страницы

Информация так же сгруппирована в три колонки, но разделение между ними выражено не так сильно, как при соотношении областей 2:1, использованному на странице статьи. Мы хотим заставить колонки работать как единый объект, даже если они будут отделены друг от друга.

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

Проводя линию под элементами аккаунта, мы формируем область с другой динамикой

На нашем эскизе пиктограммам проектов отведена достаточно широкая средняя область – две колонки, расположенные рядом. Чтобы создать эту область, можно объединить 8 юнитов в 16-юнитной сетке, тогда с обеих сторон останутся по 4 юнита.

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