Применение правила близости при разработке дизайна

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

Информация в сети, наружная реклама, типографика, печатные издания – способ визуализации и донесения информации до пользователя в более понятном и доступном виде. Сайты и вывески помогают потенциальным клиентам купить понравившийся продукт, связаться с производителем, определиться, как пройти к тому или иному объекту на улице.

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

Теоретические основы

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

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

Закон близости применим не только к картинкам, но и к текстовой информации. Несоблюдение правил близости провоцирует возникновение нелепых ситуаций.

Осталось рассмотреть теоретическую часть на практике и понять, как расстояние между объектами влияет на общее восприятие дизайна.

Буквы и слова

В качестве примера будем использовать слово AIRPORT. В данном слове внутренним считается пространство внутри букв, а внешним – пространство между буквами всего слова. Когда буквы стоят слишком тесно друг к другу, правило близости нарушается и все слово смотрится слишком громоздко. При этом центральная «О» больше схожа на дырку. Простое увеличение расстояния между отдельными буквами позволяет предотвратить продырявливание.

Допишем еще два слова, при этом расстояние, и внешнее, и внутренне, оставим неизменным.

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

На первый взгляд вполне неплохо, однако куда выгоднее будет смотреться, если буквы будут более вытянутыми. После замены шрифта обращаем внимание на то, что расстояние между буквами в словах можно немного уменьшить. Конечный результат делает фразу более компактной, привлекательной и легкой для восприятия.

Для сравнения покажем две фотографии из сети:

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

Блок с текстом и заголовками

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

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

Картинка, заголовок и текст

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

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

Еще один небольшой пример.

Действуем по уже знакомому принципу близости. Отодвигаем текст от заголовка, увеличиваем пространство между строчками и убираем лишнюю кнопку «Подробнее». Вместо нее ссылку на полную статью переносим на сам заголовок. В итоге получаем:

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