x
 
Артём
10 ноября 2014

Расскажите о вёрстке главной страницы.



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

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

Лента


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

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

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

Должна ли главная страница умещаться в один-два экрана

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

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

Плитка


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

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

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

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

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

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

Фоторама


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

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

Рубрикатор


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

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

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

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

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

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

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

2 1 2




Недавно всплыло

6 Как вести себя с человеком, который Джима Кемпа не читал и вину не признаёт? 2 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1