Главная страница сайта — это его лицо, обложка, фирменный стиль, одёжка и квинтэссенция. Главная страница объясняет суть, знакомит с возможностями, определяет сценарий и задаёт тон. Главная страница — не просто функциональная точка входа. У главной страницы есть — должно быть — своё особое ощущение.

Вместе с тем, дизайн главной страницы подчиняется общим принципам сборки страниц, что мы рассмотрели ранее:

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

Лента

Лента состоит из типовых модулей — ссылок, сообщений или новостей. Эти модули образуют поток информации, чаще всего в хронологическом порядке, где новое сверху.

Термин «лента» пришёл из традиционных информагентств, подписчики которых получали новости на бесконечную бумажную ленту по телеграфу, телетайпу, телексу и, по мере прогресса, по интернету.

В самом интернете ленты прижились не только на новостных сайтах, но и в социальных сетях:

Общий принцип устройства их главных страниц — бесконечная средняя часть.

По принципу ленты устроены многие автоматически обновляемые сайты, например советы и Стековерфлоу.

Плитка

Плитка представляет собой кладку из типовых прямоугольников. В основе плитки та же линейная последовательность, что у ленты, только модули расположены не друг под другом, а плотно упакованы по рядам — слева направо, сверху вниз:

Если модули плитки выровнены по высоте, глаз уверенно считывает линейную последовательность в привычном направлении.

Если же высота модулей плавает, как у Пинтереса, то через несколько рядов они полностью теряют горизонтальное выравнивание, и направление чтения сбивается. Последовательность модулей технически остаётся линейной, но глаз уже не воспринимает эту линейность.

Плитка с выравниванием по высоте или ширине уже привычна, но встречаются интересные эксперименты:

На сайте дизайнера Евгения Арутюнова модули плитки отличаются по ширине и высоте, но так же плотно упакованы. Это придаёт странице интересную нерегулярную структуру, и её интересно разглядывать.

На сайте «Лук эт ми» модули плитки не монолитны, а состоят из нескольких новостей с иллюстрациями и без.

Фоторама

Доминирующая фоторафия в «фотораме» занимает всю главную страницу или её важную часть:

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

Рубрикатор

Рубрикатор напоминает японскую коробочку для ланча — в аккуратных ячейках разложены блюда из разделов сайта.

Большинство главных страниц сайтов представляют собой рубрикатор:

Как правило, содержание модулей рубрикатора определяется автоматически, но их состав и порядок на странице продуман дизайнером заранее. Дизайнер получает максимальный контроль — что главное, что второстепенное, и как подаётся.

Рубрикатор чаще всего имеет фиксированный макет (иногда с небольшими вариациями) и устроен по принципу «бутерброда», чтобы дизайн не сломался при изменении содержания.

Но с развитием веб‑дизайна и технологий обязательно появятся алгоритмы адаптации вёрстки страниц к содержанию. При автоматическом обновлении сайты будут выглядеть разнообразно, как редакционные выпуски газет. Динамизация — непреложный закон развития технических систем.

P. S. Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.
Типографика в вебеМодульная вёрсткаДинамизация
Отправить
Поделиться
Запинить

Рекомендуем другие советы