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

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

Основная область разбивается на три колонки

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

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

Разместим аннотации статей в двух левых колонках

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

Добавление аннотаций в нижнюю часть левой колонки

Это краткие аннотации, поэтому их расположение внизу колонки логически обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы. Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.

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

Элементы, созданные для других страниц, например, форма для подписки на рассылку и список пользователей с фотографиями, будут располагаться в средней колонке

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

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

Добавление материалов в крайнюю правую колонку

Как и на странице со статьями, пользователи должны иметь возможность перейти по ссылке к другим материалам того же типа. Одной из целей домашней страницы является обзор материалов, доступных на сайте Designery.us. Поэтому возьмем оформление ссылки More Articles… и используем его для списка пользователей и проектов внизу второй и третьей колонки. Кажется, что страница упорядочена по простому принципу: статьи в левой колонке, пользователи в середине, а проекты справа. С одной стороны, это не совсем верно – материал все-таки более разнообразен. Но с другой стороны, это так – ведь форма подачи материала имеет упорядоченный вид. Во многих случаях этого достаточно.

Готовая домашняя страница

Дополнительные страницы

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

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

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

СТРАНИЦА АВТОРА

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

СТРАНИЦА ABOUT US

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

СТРАНИЦА АРХИВА

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

СТРАНИЦА ПРОЕКТА

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

СТРАНИЦА НАСТРОЕК

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

ШАБЛОН РАССЫЛКИ Обратите внимание, что наша сетка может применяться не только для сайтов. Ее также можно успешно использовать и в других областях. Проведенная нами работа поможет оформить информационную рассылку Designery.us, на которую подписываются пользователи.

«Резиновая» верстка

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