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

Работа с дизайном и оптической компенсацией

Работа с дизайном и оптической компенсацией

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

Но подчинение к простым алгоритмам работы в мире всего ровного и эстетического не всегда очень просто. Как известно, дизайн складывается из мелочей и если за ними не следить, то проект обречён на плохой дизайн. Для этого и существуют и применяют так называемые «оптические компинсации», проверить правильность которых можно мудрейшим способом — прищурив глаза и расфокусироваться. Ну или отойти от монитора на пару шагов и присмотреться...

Компенсация выравниванием

На картинке справа видно, что треугольник в круге хоть и находится по середине, но визуально это смотрится как будто он смещён влево. И небольшое смещение треугольника вправо визуально компенсирует этот недостаток.

Компенсация масштабом

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

Компенсация кеглем

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

Компенсация цветом

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

Комаинсация правилом

Существуют правила компенсации текста для типографской вёрстки европейских шрифтов. Например — «висячая пунктуация». Это касается кавычек, запятых, точек и т.п. — все эти символы должны находится «вне строки» или выходить за текстовое поле. В сайтах, такое правило использовать сложно, но, если есть такая необходимость — всё возможно. В программе InDesign висячая пунктуация представлена еще более извращенным видом, когда каждая буква выступает за строчку согласно оптической компенсации её массы.

Компенсация золотым сечением

Многие относятся к этому не очень хорошо, но золотое сечение существует и отрицать это не имеет смысла. Золотое сечение (золотая пропорция, деление в крайнем и среднем отношении, гармоническое деление) — соотношение двух величин a и b, b > a, когда справедливо b/a ≈ 1,62. Такое деление наиболее благоприятно для нашего глаза, подробнее вы можете прочитать на Википедии. Многие крупные компании используют этот принцип при проектировании своих логотипов.

Компинсация отступом

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

Компенсация контрастом

Часто, например, для заголовков, используют одинаковые цветовые значения вне зависимости от цвета фона. Если бы все было так просто… на деле, в цвете объекта должно быть смешивание с цветом фона или с цветом соседнего объекта. В реальности, когда мы находимся в помещении с тёплыми оттенками, все цвета смешиваются и становятся теплыми, а операторы и фотографы часто следят за таким показателем как «баланс белого».


Вверх
Войти на сайт
или

Восстановить пароль Регистрация