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

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

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

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


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


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


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


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


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


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


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

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

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

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

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


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


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

Перейти на страницу:

Похожие книги

3ds Max 2008
3ds Max 2008

Одни уверены, что нет лучшего способа обучения 3ds Мах, чем прочитать хорошую книгу. Другие склоняются к тому, что эффективнее учиться у преподавателя, который показывает, что и как нужно делать. Данное издание объединяет оба подхода. Его цель – сделать освоение 3ds Мах 2008 максимально быстрым и результативным. Часто после изучения книги у читателя возникают вопросы, почему не получился тот или иной пример. Видеокурс – это гарантия, что такие вопросы не возникнут: ведь автор не только рассказывает, но и показывает, как нужно работать в 3ds Мах.В отличие от большинства интерактивных курсов, где работа в 3ds Мах иллюстрируется на кубиках-шариках, данный видеокурс полностью практический. Все приемы работы с инструментами 3ds Мах 2008 показаны на конкретных примерах, благодаря чему после просмотра курса читатель сможет самостоятельно выполнять даже сложные проекты.

Владимир Антонович Верстак , Владимир Верстак

Программирование, программы, базы данных / Программное обеспечение / Книги по IT
Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript
Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript

Данная книга посвящена программированию игр с помощью ActionScript. Здесь вы найдете подробные указания, необходимые для создания самых разных игр – аркад, головоломок, загадок и даже игровых автоматов. В тексте приведены исходные коды программ и детальные, доступно изложенные инструкции. Базовые принципы программирования ActionScript рассматриваются на примере игр, однако вы без труда сможете применить полученные знания и для разработки неигровых проектов, таких как Web-дизайн и реклама. Рекомендации Гэри Розенцвейга помогут вам не только придумывать занимательные игры и размещать их на Web-сайте, но и оптимизировать скорость их работы, а также защищать свои творения от несанкционированного копирования. Представленный в книге код несложно изменить для использования в других программах.Книга предназначена для широкого круга читателей – создателей анимационных роликов, художников-оформителей, программистов и разработчиков Web-сайтов. Издание может также выступать в качестве практического пособия по изучению ActionScript.

Гэри Розенцвейг

Программирование, программы, базы данных / Программирование / Книги по IT