Чередование ритма — довольно короткая, но очень важная тема. Мы с вами поговорили о вёрстке доминирующих и вспомогательных иллюстраций. Мы говорили о том, что хорошо следить, чтобы в вашей композиции был доминанта и вспомогательные фотографии, элементы. Чтобы не было скучной матрицы.
Также важно следить за чередованием. Вот перед нами газета, которую сделал гениальный Массимо Виньелли. Она безумно прекрасно выглядит, очень эстетично, дизайнерский глаз радуется:
Но, к сожалению, эту газету совершенно невозможно читать, потому что дизайнер упоролся по сетке. Выровнял всё, что только можно, со всем, чем только можно. В результате, чтобы разобраться, что к чему относится, нужно прочитать каждый заголовок, каждый текст. И всё равно будет постоянное ощущение, что я что‑то понял не так. Например, на первой полосе справа какой‑то заголовок про Москву очень явно склеивается с текстом, который находится над ним, несмотря на то, что есть какие‑то линейки.
Вот ещё пример. Это тоже газета, посмотрите, как здесь всё связывается:
Блок с заголовком The jobless in Germany will be more than 2 million особенно убивает. Я вообще не понимаю, что здесь происходит. Заголовок относится к двум колонкам под ним? А может быть, он как‑то связан с двумя коротенькими колоночками над ним? Вообще непонятно. Я, наверное, никогда не узнаю, потому что здесь надо зазумиться и прочитать, а картинка недостаточного разрешения, и я не смогу прочитать, что там за текст.
Чтобы такого не возникало и чтобы ваши макеты выглядели интереснее, надо использовать чередование ритма.
Покажу на примере. Вот картинка, которую мне прислали в советы:
Извините, опять про нижнее бельё. Какая‑то компания делает комплект трусиков и сделала про них сайт. Здесь можно поговорить о том, что сайт выглядит невзрачно, есть проблемы с нарушением внутреннего и внешнего. Видите, как заголовок висит между краем плашки и текстом, текст тоже висит как‑то посередине. Всё это не очень хорошо выглядит, но главная проблема — это всё выглядит чрезвычайно однообразно. Я просто листаю одни трусы за другими, и всё.
Минимальное движение, которое можно сделать, — просто начать чередовать ритм. Понятное дело, я бы здесь ещё что‑то улучшил. Но главное изменение — я сделал так, чтобы женские тела были то с одной стороны, то с другой стороны. И изучать страницу сразу стало гораздо интереснее:
Ещё пример — обложка, по‑моему, даже полоса какого‑то журнала:
Посмотрите, насколько она богато и разнообразно выглядит и насколько хорошо здесь этажи отделены друг от друга. Даже если бы здесь не было этих разделительных белых линеек, я бы ни за что не подумал, что вот эти блоки между собой как‑то связаны. Потому что ритм очень хорошо чередуется: большая картинка слева, текст справа, ниже наоборот. В центре этаж вообще по ритму принципиально отличается ото всех остальных. Здесь куча маленьких колонок и маленьких картинок. А ниже опять большая картинка и крупный блок текста. Всё очень хорошо чередуется.
У меня на эту тему есть две страницы.
Страничка Коворкафе на сайте бюро:
Давайте проанализируем. Во‑первых, шапка очень плотная, плоский лёгкий этаж — текст с маленькими иконками:
После шапки идёт большой тяжёлый этаж с фотографиями. Чередуется что‑то лёгкое и плоское с чем‑то большим, тяжёлым и цветным.
После этажа с фотографиями идёт лёгкий текстовый этаж и тяжёлый этаж с меню:
Чередуется тяжёлое и лёгкое. Здесь ещё добавилась сочная картинка про апельсиновый лимонад.
А после тяжёлого этажа — оп, опять что‑то лёгкое:
При этом этот лёгкий этаж высокий, а после него стоит ещё один лёгкий этаж, но очень плоский.
То есть мы из этажа в этаж чередуем тяжёлое и лёгкое, а также ритм колонок и высоту этажа. В результате получается приятное для глаза разнообразие. Пока я листаю эту страницу, я на ней не заскучаю.
Чтобы далеко не ходить, можно посмотреть почти любую страницу «Эпла». Давайте даже про Айпад. Не помню, что там увижу, но почти уверен, что все принципы будут соблюдены.
Заходим на страницу Айпада, перед нами большая картина Айпада:
Я листаю дальше. Она сменяется суперлёгкой картинкой Айпада и суперлёгким заголовком «Айпад Про»:
После идёт гораздо более мелкий текст, описывающий, что это такое, куда я попал:
После лёгкого этажа с текстом идёт какой‑то тяжёлый этаж, описывающий преимущество этого дисплея:
Тут, конечно, куча всяких анимаций. Они тоже добавляют интереса. Но в первую очередь работает вот это изменение, то есть чередование всех вещей, которые я описал.
Всё чередуется, чередуется, меняется. Обратите внимание, как сначала показывается Айпад в общем, довольно маленький:
А потом он прилетает суперкрупно, чтобы я мог рассмотреть скругление каждого угла, каждой кнопочки:
Мелкий план сменяется крупным. Хороший приём. «Эпл» совершенно спокойно мог бы не делать все эти анимации, раньше они столько анимаций не делали. Если бы они просто эти картинки аккуратно чередовали друг за другом, это всё равно выглядело бы очень интересно. Хотелось бы разглядывать.
Тут белый, белый:
А потом — дыщь, тёмный!
Опять возбуждаем интерес читателя. И дальше это продолжается.
Здесь у них вообще какая‑то магия, если вы вдруг ещё эту страницу не смотрели, то зайдите как‑нибудь на сайт «Эпла», посмотрите. То, что тут «Эпл» натворили и с точки зрения эффектов, и с точки зрения режиссуры, — это прямо новый шаг во всяких промостраницах.