Визуальная компенсация или как можно получить красивую форму?

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

Это некое базовое знание, с которого часто начинаются любые курсы по дизайну.

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

                                                                             поле и кнопка в одну строку

Но бывают и другие варианты развития ситуации. Например, как поступить в том случае, когда требуется применение данного принципа шире? То есть, где ничего круглого нет, однако какой-то из элементов также может потерять вес по сравнению с равноценным ему элементом. Это может быть, к примеру, форма. Не смотря на то, что формы бывают разнообразные, их составляющие всегда одинаковы по важности. Форма включает в себя поля и блоки с действием. Простейшая форма – одно поле, которое имеет кнопку. Важно отметить, что у кнопки и поля одинаковая высота, они обладают одинаковым весом и отлично взаимодействуют друг с другом. Форма бывает вертикальной, а в ее состав могут входить несколько полей и кнопок. Например, как на авторизации. Таким образом, и здесь мы получаем одинаковый размер и отличную работу.

                                                                          два поля и кнопка в столбик

Однако, чем больше увеличивается набор полей, тем сильнее этот же набор «забирает» вес у блока с действием. И если в случае небольшой форме вес кнопки обычно приравнивался к набору полей в целом, то в большой форме ее вес одинаков с отдельно взятым полем. Именно поэтому кнопка как кульминация формы будет восприниматься слабо.

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

                                                                                размер кнопок в библиотеке элементов

В случаях, когда у проекта имеется библиотека элементов, достаточным вариантом будет просто взять оттуда кнопку, которая будет больше всего на один размер. Например, в форме поля, размер которых S, значит, кнопку необходимо взять размером М, ну а если размер полей М, соответственно размер кнопки необходимо взять L. Данный принцип очень прост.

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

Разница размеров по высоте может варьировать от 8 до шестнадцати пикселей -  все зависит от вашего усмотрения.