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