База знаний kontora.name

Одно действие, которое улучшит твой дизайн


Отступы всему голова

В дизайне миллиард факторов, которые влияют на его восприятие. Сегодня об отступах. Если их сделать хорошо, то это сразу +80 к аккуратности. Аккуратно нужно делать потому, что это влияет на восприятие и повышает доверие. Больше доверия = больше вероятность, что человек оставит заявку на сайте.


Правило внешнего и внутреннего

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



Например, у нас на сайте есть блок вот такого вида:

image


Во-первых, блок взаимодействует с соседними блоками.

На скрине это красные полосы сверху и снизу. Расстояние 1 внутри блока должно быть самым большим — это расстояние между крайними элементами и соседними блоками.

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



Вот ещё одна иллюстрация правила:

image


Рамка под текстом — это одна сущность. А надзаголовок, заголовок, описание и кнопка — другая. Расстояние между сущностями 1 и 2 должно быть больше, чем расстояние между элементами сущности 2.



По такому принципу должны работать все объекты в макете

Расстояние между внутренними объектами одной сущности всегда должно быть меньше, чем расстояние между сущностями. Применение только этого правила сделает ваш дизайн в 2 раза опрятнее и лучше.




Как работать с правилом в любых ситуациях?


Главное — понять, к чему относится объект. К чему он относится, к тому он и должен быть ближе. Среди 3 объектов два всегда относятся друг к другу сильнее, чем третий.




Улучшайте свои макеты :)

Процессы Знания