?

Log in

No account? Create an account

nobelfaik


Блог Игоря Штанга

light gray is the new white, dark gray is the new black


Previous Entry Поделиться Next Entry
Колоночность и этажность
nobelfaik
Собираете вы, например, макет, а он у вас никак не собирается. Элементы друг к другу не клеятся, кругом дыры:

01.jpg
Фото: getolympus / flickr


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

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

01.jpg


Этажным его тоже не назовешь. Пересечений между этажами нет, но блоки не закрыты. Что значит «не закрыты» и как их закрывать — отдельная тема, сейчас не об этом. В двух словах: этажная конструкция видна только на моей схеме. Если убрать желтые прямоугольники, никаких этажей не останется:

01.jpg


Итак, нужно определиться, как лучше разделить макет, на колонки или этажи. Это зависит от формата и от материала. Формат удобнее делить поперек: вертикальный — на этажи, горизонтальный — на колонки. Удобнее, потому что пропорции внутренних блоков получаются не слишком вытянутыми:




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

Затем можно делить дальше: этажи на колонки, колонки на этажи, но при этом держать в голове базовую конструкцию, чтобы в процессе она не поломалась:




То, что в итоге получится, будет модульной схемой макета (не путать с сеткой).

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





Можно, например, развернуть заголовок и фото, но именно с этими элементами получается не очень:




В таких случаях, чтобы добиться приемлемого результата, приходится насиловать материал. Заголовок я поставил вертикально, картинку сильно кадрировал. Ничего страшного в этом нет, просто где-то так получится сделать, а где-то не получится. Вариант неуниверсальный и непростой:




Удобнее разделить на этажи:




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




Так еще ритмичнее:




Модульная схема:




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




Еще про модульность:
Три способа закрыть прямоугольник
Переверстка №9. Инфографика для YouMagic

Записи из этого журнала по тегу «статья»

  • Отступы в списках

    На курсе я рассказываю про верстку списков, и меня часто спрашивают, нужно ли прижимать первый пункт к верхнему абзацу. Вот так: Ответ: не нужно.…

  • Колонки разной ширины

    Продолжаю рассказывать про неудачные приемы верстки. В прошлых выпусках: горки текста и ноги текста. Сегодня про ширину колонок (метафоричного…

  • Подружить текст с картинкой

    Верстка в широком смысле — это составление целого из различных частей. Сложность в том, что элементы, которые на макете должны жить вместе,…


  • 1
Спасибо, очень интересно:)

Мне больше всего третий вариант с конца понравился

и последний тоже хорош, но красный шарик без лучей кажется лучше смотрелся:)

  • 1