Вертикальный ритм в дизайне?

Question

[Марти Аксенов]

Ребята, хэлп! Перечитал кучу инфы в инете, в целом понимание как работает вертикальный ритм есть, но когда захожу на высокогармоничные сайты подобия Behance / Awwards изучаю сайты и не вижу полного соблюдения Верт.ритма, но гармонии от этого меньше не становится. Как же щас дизайнеры применяют вертикальный ритм? По отношению ко всем элементам или только к определенным? и буду рад любой инфе на счет применение Верт. ритма в веб-дизайне.
Как правильно выстраивать гармонию по вертикали в макете?

Answer 1

[Андрей Федосеев]

Как правильно выстраивать гармонию по вертикали в макете?

Вертикальный ритм это такая же сетка. Только если горизонтальную сетку регулируют колонки макета (8/12/16/24) и при любой ширине экрана любые две колонки (например в шапке и в теле поста) имеют одну ширину, то вертикальный ритм регулируется вертикальными отступами, размером шрифта и интерлиньяжем. Танцуем от основного размера шрифта. Марджины и паддинги делаем кратными, интерлиньяж и размеры неосновных элементов тоже кратными. удобнее всего 8-пиксельная сетка. Тогда размеры шрифтов, отступов и интерлиньяжей будут 2/4/8/12/16/24. Почему тогда сетка называется 8-пиксельная? Потому что из набора размеров выпадают 6/10/14/20 кратные четырем пикселям. Если считать в em'ах, то отступы и интерлиньяж всегда будут 0,25/0,5/1/1,25/1,5/2 и т.д.

Можно где-то отступать от правил и делать размер шрифта элемента, например, 13 или 17. Но чтобы отступать от правил они (правила), должны быть.

Answer 2

[Дмитрий Чащинов]

Для выстраивания вертикального ритма полезна сетка, например в 8px.
Сетка облегчает создавать гармоничные компоненты, как по горизонтали, так и по вертикали.
Нужно понимать, вертикальный ритм пришел из печатного дизайна, где холст фиксирован, а в вебе, где разнообразие дисплеев и разрешений экранов вертикальный ритм не всегда будет работать.

Прикрепляю пример из своей работы, срез этапа работы с типографикой, иерархией отступов.

Почитать:
https://designpub.ru/https-medium-com-simberev-8pt...
https://designpub.ru/отступы-в-дизайне-системный-п...
https://medium.com/@kovchiy/образы-и-модели-9e4297...

Answer 3

[Артем Спиридонов]

и не вижу полного соблюдения Верт.ритма, но гармонии от этого меньше не становится.

Потому что на самом деле он там есть.

Answer 4

[xmoonlight]

Вот, сбилдил для примера.

Сетка: 12px

Comments

[dom1n1k]

И как вы оцениваете полученный результат?

[xmoonlight]

dom1n1k, Цель достигнута. Авто-сетка - работает. Дело за оформлением.

[dom1n1k]

Я имею в виду вертикальная сетка изменила верстку к лучшему или нет?

[xmoonlight]

dom1n1k, Честно? Да...
Я даже и не ожидал, но подсознание - реально фиксирует гармонию...
Но пока - надо "качаться".
Там очень много приёмов как правильно юзать под разные элементы.. (я учусь пока сам...)

[xmoonlight]

dom1n1k, но я делаю пока на пикселях, а возможно - правильнее делать другие единицы...

[dom1n1k]

А по-моему макет рассыпается, отступы и интерлиньяж очень плохи.
Слишком формально-математический подход тут не работает (увы).

[xmoonlight]

dom1n1k, согласен на все 1000%. Одна голова хорошо, а две - лучше!
Откуда брал код, делали (как я понял) для одной строки в заголовке item...
Я подправил, и вот как вышло.
PS: могу дать исходник, если интересно...

Answer 5

[Дмитрий Гурьев]

Тоже заморачивался с этой темой некоторое время назад. Точное соблюдение вертикального ритма важно для печатной продукции, где текст статьи побит на несколько колонок. В вебе это — лишнее ограничение и усложнение (т.к. в CSS нет нормальной работы с базовыми линиями), достаточно просто выбрать модуль (например, 4, 5 или 6 пикселей) и выравнивать по нему.

Answer 6

[Нерон Лордов]

Как правильно выстраивать гармонию по вертикали в макете?

Тетрадки в линеечку из школы помнишь? Принцип ровно тот же.

Answer 7

[Sofi33]

тема раскрыта в этой статье https://onlinebd.ru/blog/ui-dizain-chast-pervaya-r... . безупречно все объяснили. Можно выходить за рамки привычного ритма и играться с восприятием покупателя) кстати я применяю и делаю просчеты по золотому сечению, многие не замечают, но восприятие значительно лучше

Comments

[Johny Smith]

Золотое сечение в вертикальном ритме, это как именно?

[Sofi33]

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

[Johny Smith]

Sofi33, скиньте пожалуйста пример скриншота с наложением

[Sofi33]

Olek1, https://onlinebd.ru/blog/ui-dizain-chast-pervaya-r... это статья про ритм

[vvasilyev11]

Sofi33, зачем рекламировать это убожество когда даже в этой статье ритм отвратительный. Он там есть
но все элементы - заголовки, текст, изображения равны одному и тому же отступу. Правила ближнего-дальнего нарушены. Строки текста длиннющие, заголовки жирные, воздуха мало.

Про золотое сечение я там вообще не увидел и вообще непонятно что ты хотел этим сказать