Внутреннее и внешнее, как сделать нормальные расстояния — #базис #ui

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

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

Такое разделение фрактально. То, что здесь внутреннее, на большем масштабе уже внешнее.

Интерлиньяж/высота строки
Высота строки должна быть меньше параграфного расстояния

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

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

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

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

Спасибо за просмотр
Еще больше о дизайне в Телеграм канале: t.me/design_logovo

Подробнее по теме в этой статье от Горбунова