Работа с композицией на примере переверстки

22 апреля 2017 года

В предыдущей статье «Сначала назад, и только потом — в будущее» был рассмотрен пример переделки макета «с нуля». Ключевая мысль той статьи: для создания хорошего дизайна вернитесь к началу, изучите историю вопроса.

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

Шаг первый

Есть макет, который заказчик уже утвердил. Да, в целом с макетом все хорошо: правильный текст, интересный визуальный ряд. Но, что-то здесь не так.

Работа с композицией на примере переверстки

Дизайнер заложил в макет явную динамику: самолет летит в одну сторону, птицы — в другую, ящик приземляется на парашюте. Но композиционно эту динамику не задал. Такая верстка «по центру» статична по своей сути, а квадратный формат лишь усиливает это ощущение.

Стартовый макет и его структура

Работа с композицией на примере переверстки
Работа с композицией на примере переверстки

Шаг второй

Сначала разберемся с заголовком. Он трехэтажный, тяжелый, монотонный, без ритма (прямо как это предложение). Существует простое правило грамотной верстки — не повторяйте ритм на соседних этажах. Воспользуемся им и перестроим заголовок (здесь и далее нажимайте на картинку для перехода к следующей или свайп на смартфоне).

Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки

С одной стороны первый этаж заголовка стал крупнее, с другой — заголовок в целом стал компактнее. Появился ритм: разный размер шрифта и различная длина на строки на соседних этажах.

Шаг третий

Раз уж у нас заголовок центрирован, разделим информацию в подвале на две колонки. Заодно пересадим левый подснежник (долой симметрию!), а слишком ровную и гладкую линию земли превратим в сугробы.

Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки

Обратите внимание, как вынос на передний план правого подснежника и ящика с парашютом добавляет многоплановости центральной сцене.

Шаг четвертый

Немного разведем в стороны элементы центральной композиции, дооформим текст в подвале и зажжем недостающие звезды на небе. Готово!

Работа с композицией на примере переверстки Работа с композицией на примере переверстки

Теперь посмотрим, что у нас в итоге получилось.

Финал

От скучной верстки не осталось и следа: ритмичные заголовок и подвал, динамичные сугробы, многоплановость центральной композиции.

Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки

Сравним между собой компоновку «до» и «после»:

Структуры стартового и финального макетов

Работа с композицией на примере переверстки
Работа с композицией на примере переверстки

Центрированность в верхней половине финального макета компенсируется ритмом по этажам, а у «прямоугольника» в нижней половине заняты все ключевые углы (см. правило якорных объектов в совете Артема Горбунова).

Еще раз весь путь от начала до конца:

Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки Работа с композицией на примере переверстки

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