Говоря о дизайне в различных сферах, включая веб-дизайн и графический дизайн, начинающие специалисты сталкиваются с такой, казалось бы, не значительной проблемой как центрирование элементов относительно рабочей области или друг друга.
Но дьявол кроется в деталях и неверно принятое решение в таком незначительном вопросе может сильно испортить всю работу. Фактически все современные инструменты разработки (Adobe Photoshop, Adobe Illustrator, Adobe InDesign) имеют возможности по автоматическому выравниванию элементов. Но слепое доверие программе, может дорого обойтись.
Касательно меня, когда я вижу логотип где знак и надпись «по идее» должны быть выровнены относительно друг друга, но визуально нет этого ощущения, меня сильно отвлекают, заставляя думать «Почему создатель не мог их выровнять?».
В пример: логотип Lacoste. Слева оригинальный логотип марки, крокодил центрирован автоматическим путем но из за визуально перегруза левой части рисунка относительно правой кажется что знак не по центру от надписи. Мой вариант по центру. Сдвиг относительно оригинала на правом рисунке.В пример: логотип Lacoste. Слева оригинальный логотип марки, крокодил центрирован автоматическим путем но из за визуально перегруза левой части рисунка относительно правой кажется что знак не по центру от надписи. Мой вариант по центру. Сдвиг относительно оригинала на правом рисунке.
Визуальный диссонанс происходит из—за того, что не всегда визуальный центр изображения совпадает с его фактическим центром.
«Вес» элементовТакое происходит в случаях, когда в одной части изображения расположено больше элементов чем в другой.
Слева: автоматически отцентрированный круг; Справа: отцентрированный ручным способом.Возьмем круг и поместим в него несколько геометрических фигур различной величины и цвета. Разместим их в произвольном порядке и попробуем отцентрировать получившуюся композицию автоматическим способом. Мы увидим, что визуально композиция не будет ощущаться, как находящаяся в центре круга, хотя технически это так. Дело в том что выходящие вниз линии делают всю площадь, занимаемую геометрическими фигурами заметно больше, однако площадь, которую они покрывают, очень малое. Из—за этого создается ощущение «пустоты».
Отцентрируем композицию ручным способом, разместив геометрические фигуры внутри круга так, чтобы «основной вес» приходился на центр круга (область сосредоточения элементов).
Черная окружность определяет примерный центр сосредоточения основного веса композиции.Отцентрированное в ручном режиме изображение визуально кажется более приятным.
Цвет элементовЦвет элементов при центрировании оказывает большое влияние на конечный результат.
На обоих изображениях, элементы стоят абсолютно одинаково, но из—за разницы в цветовой гамме правая композиция внутри круга визуально кажется не отцентрированной.Дело в том, что более темные оттенки, в особенности, окруженные светлыми, перетягивают баланс композиции на себя.
Пути решения:
1.Сбалансированное распределение цветов, где темные участки более равномерно расположены по всей площади и компенсируют друг друга.
2.Выравнивание с использованием визуального центра изображения, а не фактического.
3.Использованием близких по тональности цветов.
Размеры элементовСоотношение размеров элементов в одной композиции очень сильно влияет на смещение визуального центра от фактического.
Из—за подавляющего размера квадрата визуальный центр смещается настолько сильно, что при ручном центрировании приходится пренебрегать положением мелких элементов.Фактически, соотношение размеров это частный случай неравномерного распределения элементов, ведь более мелкие элементы закрывают меньше площади изображения и следовательно оставляют больше пустого места.
ПослесловиеПриведенные выше примеры, это не более чем способ более наглядно иллюстрировать описание. В реальной работе эти принципы менее наглядны и только опыт и внутренние чувства дизайнера могут подсказать ему как сделать выравнивание объектов более «правильным».
Частым случаем разницы в размерах элементов бывает заглавная буква в логотипе. Она, хоть и не много, но оттягивает на себя внимание и необходимо предусмотреть «противовес» на другой стороне, чтобы сбалансировать общую композицию.
Также, часто сами знак в логотипе имеет элементы (как хвост в примере с логотипом Lacoste) которые смещают визуальный центр.
Помните, что визуальное выравнивание элементов, не смотря на существенные затраты времени, может существенно повысить качество ваших работ и улучшить восприятие конечного результата, стоит уделить этой проблеме своё внимание.
P.S. Публикация данной статьи вызвала много жарких споров. Для более объективной оценки статьи можно прочитать ее
здесьP.P.S. В следующих статьях я постараюсь раскрыть особенности изготовления интерфейсов для промышленных устройств на примере своих работ.
Разработка интерфейсов промышленных устройств, довольно сложная работа, требующая от дизайнера мастерства и опыта. Такие интерфейсы ставят большие ограничительные рамки и успеха можно добиться только сотрудничая с профессионалами других областей. Об этом и многом другом вы узнаете совсем скоро.
и выберите
и выберите
