Главная страница сайта — это его лицо, обложка, фирменный стиль, одёжка и квинтэссенция. Главная страница объясняет суть, знакомит с возможностями, определяет сценарий и задаёт тон. Главная страница — не просто функциональная точка входа. У главной страницы есть — должно быть — своё особое ощущение.
Вместе с тем, дизайн главной страницы подчиняется общим принципам сборки страниц, что мы рассмотрели ранее:
Структура главных страниц сайтов очень разнообразна. Но часто встречаются характерные виды: «лента», «плитка», «фоторама»
Лента
Лента состоит из типовых модулей — ссылок, сообщений или новостей. Эти модули образуют поток информации, чаще всего в хронологическом порядке, где новое сверху.
Термин «лента» пришёл из традиционных информагентств, подписчики которых получали новости на бесконечную бумажную ленту по телеграфу, телетайпу, телексу и, по мере прогресса, по интернету.
В самом интернете ленты прижились не только на новостных сайтах, но и в социальных сетях:
Общий принцип устройства их главных страниц — бесконечная средняя часть.
По принципу ленты устроены многие автоматически обновляемые сайты, например советы и Стековерфлоу.
Плитка
Плитка представляет собой кладку из типовых прямоугольников. В основе плитки та же линейная последовательность, что у ленты, только модули расположены не друг под другом, а плотно упакованы по рядам — слева направо, сверху вниз:
Если модули плитки выровнены по высоте, глаз уверенно считывает линейную последовательность в привычном направлении.
Если же высота модулей плавает, как у Пинтереса, то через несколько рядов они полностью теряют горизонтальное выравнивание, и направление чтения сбивается. Последовательность модулей технически остаётся линейной, но глаз уже не воспринимает эту линейность.
Плитка с выравниванием по высоте или ширине уже привычна, но встречаются интересные эксперименты:
На сайте дизайнера Евгения Арутюнова модули плитки отличаются по ширине и высоте, но так же плотно упакованы. Это придаёт странице интересную нерегулярную структуру, и её интересно разглядывать.
На сайте «Лук эт ми» модули плитки не монолитны, а состоят из нескольких новостей с иллюстрациями и без.
Фоторама
Доминирующая фоторафия
Листалка «фоторамы» должна быть информативной — с подписями или миниатюрными картинками. Кнопок‑стрелок или безымянных круглых точек, представляющих другие иллюстрации, недостаточно. Исключение составляют однородные циклы картинок на заданную тему — тогда точки получают индульгенцию.
Рубрикатор
Рубрикатор напоминает японскую коробочку для ланча — в аккуратных ячейках разложены блюда из разделов сайта.
Большинство главных страниц сайтов представляют собой рубрикатор:
Как правило, содержание модулей рубрикатора определяется автоматически, но их состав и порядок на странице продуман дизайнером заранее. Дизайнер получает максимальный контроль — что главное, что второстепенное, и как подаётся.
Рубрикатор чаще всего имеет фиксированный макет (иногда с небольшими вариациями) и устроен по принципу «бутерброда», чтобы дизайн не сломался при изменении содержания.
Но с развитием веб‑дизайна и технологий обязательно появятся алгоритмы адаптации вёрстки страниц к содержанию. При автоматическом обновлении сайты будут выглядеть разнообразно, как редакционные выпуски газет. Динамизация — непреложный закон развития технических систем.
P. S. Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.