Почему в дизайне
всё кривое

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

В итоге дизайн превращается в такую геометрическую задачку, в которой нужно правильно рассчитать все расстояния, чтобы всё получилось ровно и аккуратно. Ирония в том, что если полагаться только на цифры, то многие элементы будут выглядеть криво. Так получается, потому что наше зрительное восприятие работает иначе.

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

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

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

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

Но если мы проведём направляющие, то увидим, что у иконок разная высота и ширина:

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

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

Треугольник слева выглядит визуально в центре круга, а треугольник справа как будто бы смещён влево от центра. Но если посмотреть отступы в числах, то окажется, что именно у правого треугольника одинаковые отступы.

В этом случае всё-таки можно добиться идеального выравнивания с помощью чисел. Достаточно вписать треугольник в круг и выровнять этот круг по центру с большим кругом.

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

Такое встречается даже в тексте, когда кавычки «ёлочки» находятся в начале строки. Визуально они могут быть легче основного текста, поэтому иногда их выносят за общую линию написания текста.

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

У элементов разного цвета тоже будет разный оптический вес. Тёмные цвета тяжелее светлых, тёплые цвета тяжелее холодных, а насыщенные цвета тяжелее менее насыщенных. Поэтому для оптического баланса иногда используют немного разные оттенки цвета (или разную прозрачность) для крупных и мелких элементов.

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