Как спроектировать современный сайт (Вин) - страница 44
По базовой сетке видно, что логотип и заголовок выровнены по верхнему краю
Теперь перейдем к основной части страницы. В нашем эскизе использовались три колонки. Мы уже знаем, что в сетке можно реализовать не меньше двух трехколоночных схем: симметричную схему, созданную для информационной страницы, и асимметричную схему страницы профиля, которая имеет множество вариантов. В этом случае симметричная схема будет нецелесообразной из-за размера рекламного блока, расположенного справа, поэтому обратимся к трехколоночной структуре, использованной на странице профиля. Попробуем доработать ее – изменим размеры двух колонок, чтобы первая колонка стала шире и привлекала больше внимания. Это повысит удобочитаемость страницы. На содержательных сайтах самые важные материалы стремятся расположить в верхней левой части основной области. Как правило, эти элементы являются самыми крупными на странице.
Основная область разбивается на три колонки
Будем придерживаться этого принципа, определяя формат для представления аннотаций статей. Аннотация главной статьи, находящаяся в верхней части левой колонки, должна быть самой крупной, она содержит изображение, ширина которого соответствует ширине колонки. Далее следует расположить аннотации не столь важных статей с мини-изображениями, ширина которых составляет два юнита.
Стиль аннотаций «второго уровня» можно использовать и во второй колонке, оставив те же параметры для текста и пиктограмм, но учитывая более узкую колонку. В результате мы получим оформление в едином стиле. Когда пользователь ищет интересные материалы на странице, однородность дизайна упрощает восприятие и сводит к минимуму ощущение хаоса.
Разместим аннотации статей в двух левых колонках
Будем считать, что показанные аннотации соответствуют материалам, недавно опубликованным на сайте Designery.us. Для их отображения требуется много места на экране, поэтому неплохо было бы уменьшить их размер. В нижней части первой колонки можно разместить заголовки статей третьего уровня значимости (без аннотации), которые занимают меньше места. Эти заголовки будут сопровождаться такими же пиктограммами в два юнита шириной, что и аннотации «второго уровня», но располагаться они будут по три в ряд.
Добавление аннотаций в нижнюю часть левой колонки
Это краткие аннотации, поэтому их расположение внизу колонки логически обоснованно. Наша цель – показать, что на сайте есть и другие аналогичные материалы. Реализуем эту мысль, добавив ссылку More Articles… в самый низ колонки.
В проекте присутствуют несколько элементов, которые мы использовали в других шаблонах. В средней колонке разместим форму для подписки на рассылку (как на странице статьи) и список пользователей (как на странице профиля).