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

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

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

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

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

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

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

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

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

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

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

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

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

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

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