В последнее время дизайнеры стали часто оправдывать неряшливость своих работ заявлениями о творческом замысле и авторской задумке. При этом они забывают о том, что дизайнер – это далеко не художник, поэтому для того, чтобы создаваемый проект пришелся по вкусу целевой аудитории, при его создании необходимо придерживаться ряда разработанных специалистами правил.
Информация в сети, наружная реклама, типографика, печатные издания – способ визуализации и донесения информации до пользователя в более понятном и доступном виде. Сайты и вывески помогают потенциальным клиентам купить понравившийся продукт, связаться с производителем, определиться, как пройти к тому или иному объекту на улице.
Перед сдачей дизайнерского проекта важно не только навести красоту, но и сделать так, чтобы информация действительно была донесена до конечного потребителя. Сегодня мы поговорим о принципах восприятия информации и о правилах, которые помогут улучшить дизайнерский проект.
Теоретические основы
Главным принципом при разработке любого дизайна, будь то типографика или рекламный проспект, является принцип близости, согласно которому любые расположенные рядом друг с другом объекты воспринимаются как единое целое.
На картинке продемонстрирован принцип близости в действии. Вся правая часть рисунка воспринимается нашим мозгом, как три столбика, стоящих отдельно.
Закон близости применим не только к картинкам, но и к текстовой информации. Несоблюдение правил близости провоцирует возникновение нелепых ситуаций.
Осталось рассмотреть теоретическую часть на практике и понять, как расстояние между объектами влияет на общее восприятие дизайна.
Буквы и слова
В качестве примера будем использовать слово AIRPORT. В данном слове внутренним считается пространство внутри букв, а внешним – пространство между буквами всего слова. Когда буквы стоят слишком тесно друг к другу, правило близости нарушается и все слово смотрится слишком громоздко. При этом центральная «О» больше схожа на дырку. Простое увеличение расстояния между отдельными буквами позволяет предотвратить продырявливание.
Допишем еще два слова, при этом расстояние, и внешнее, и внутренне, оставим неизменным.
Мозг начинает воспринимать написанное, как единое слово, которое и читается, и воспринимается слишком сложно. Действуем по правилу близости и увеличиваем внешнее расстояние (в данном случае между словами). В итоге получаем следующий результат:
На первый взгляд вполне неплохо, однако куда выгоднее будет смотреться, если буквы будут более вытянутыми. После замены шрифта обращаем внимание на то, что расстояние между буквами в словах можно немного уменьшить. Конечный результат делает фразу более компактной, привлекательной и легкой для восприятия.
Для сравнения покажем две фотографии из сети:
В первом случае нарушены все правила близости, слова и буквы сливаются, читать фразу сложно. На втором фото надпись оформлена с соблюдением всех данных выше рекомендаций.
Блок с текстом и заголовками
В текстовом блоке за внешнее расстояние принимается интервал между текстом и заголовком, за внутренний — между строками. В представленном ниже блоке расстояние между объектами блока равно. В итоге текст не только смотрится некрасиво, но и читать его не совсем удобно.
Изначально увеличиваем внешнее расстояние. Далее немного увеличиваем интервал между строчками текста, но помним о том, что ширина между строками всегда меньше, чем между заголовком и текстом. В итоге получаем следующий результат:
Картинка, заголовок и текст
На указанном скриншоте имеются логотипы и блоки с заголовками. При этом автором дизайна сайта допущена существенная ошибка – заголовки более связаны с логотипами, чем с написанной текстовой информацией, при этом блок с текстом болтается сам по себе. В данном случае применим принцип схожести. Согласно данному правилу, схожие элементы воспринимаются, как единое целое.
Начинаем переработку дизайна со сближения заголовка с текстом. Далее соблюдаем правило близости: между заголовком и текстом делаем небольшой интервал, немного увеличиваем ширину и между строками самого текстового блока. Самым большим должен быть интервал между логотипом и заголовком.
Еще один небольшой пример.
Действуем по уже знакомому принципу близости. Отодвигаем текст от заголовка, увеличиваем пространство между строчками и убираем лишнюю кнопку «Подробнее». Вместо нее ссылку на полную статью переносим на сам заголовок. В итоге получаем:
Вывод из всего вышесказанного крайне прост – при разработке дизайна помните о принципе близости, правильно выставляйте внешнее и внутреннее расстояние между объектами.
По материалам: www.webdesguru.com
