Задача любого дизайна в том, чтобы все важные акценты были расставлены правильно, и наш взгляд по всему дизайну скользил как масло по сковородке, а важные смыслы считывались легко. Необходимо уметь правильно выстраивать композицию и систематизировать пространство. А что для этого нужно? Разберём четыре важных правила.
Иерархия расстояний в композиции
Во-первых, это иерархия расстояний. Существует теория близости, Артемий Лебедев сформулировал ее так: «объекты расположенные близко друг к другу воспринимаются связано». Из этого вытекает следующее правило — правило «внутреннего и внешнего».
Внутренние расстояния и элементы должны быть меньше внешних.
На фото вы можете увидеть то, что расстояние между буквами в слове самое маленькое, далее идет расстояние в предложении между словами, оно чуть больше, чем расстояние между буквами. Следующее, это расстояние между словами сверху и снизу. Потом идет расстояние красной строки, она разделяется одной строкой, потому что так читать гораздо удобнее, это такое правило цифрового этикета. Следующий пункт отделяется заголовок от основного текста, он идет еще больше, чем красная строка. Таким образом, мы придерживаемся правила внутреннего и внешнего.
Опять же, если вы бунтари и не любите подчиняться правилам, стоит знать, что есть правила, которым все же стоит подчиняться, иначе получится что-то подобное.
Что хотел сказать человек, который дизайнил это? Чтобы таких ситуаций у нас не происходило, мы придерживаемся важных правил. Те правила, которые существуют, их можно нарушать, но когда вы профессионал.
Визуальная иерархия и контраст
Второе, это визуально иерархия и контраст в композиции. Самые важные объекты должны бросаться в глаза сразу. Вот мой любимый пример, который вы, скорее всего, видели в интернете.
Почему оно так работает? Сейчас мы с вами и поговорим. Каким образом мы можем выделить самые важные объекты?
Во-первых, это контрастом по размеру. Во-вторых, это контрастом по цвету. В-третьих, это контрастом по форме. Четвертое, это с помощью расстояния, то есть отделить один объект от других. Пятое, это отдельным объектом.
Давайте разберем контраст подробнее.
Контраст по форме
Когда сравниваем форму, мы должны понимать, что есть близкие к друг другу формы. Например, прямоугольник это производная от квадрата, это растянутый по горизонтали или по вертикали квадрат. Эллипс это деформированный круг. Таким образом, мы сравниваем геометрический вид элементов.
Контраст по размеру
Когда сравниваем их размеры. Здесь все понятно: большое, малое. Усиливаете, но в пределах разумного.
Контраст по расположению
Сравниваем их расположение. Кучно в пустоте, верху, внизу и так далее.
Контраст по цвету
Отдельно поговорим о цвете, его применение для контрастов и нюансов. Использования хроматических и ахроматических цветов, напомню, ахроматические – белый, черный и все градации серого, к серым смело добавляйте яркие, особенно теплые цвета.
Теплохолодность. Здесь обратимся к цветовому кругу и будем говорить естественно только о хроматических, цветных цветах. Контрастные цвета лежат напротив друг друга, так напротив желтого, находится фиолетовый, напротив синего — оранжевый, противолежащий красному – зеленый.
Эти пары мы называем контрастными и гармоничными, конечно же. Они усиливают звучание друг друга. Самая контрастная пара – желтый и фиолетовый, потому что эти цвета контрастные по тону сами по себе. Желтый самый светлый, фиолетовый самый темный. Пара зеленый и красный наименее контрастная пара, которую нужно применять в работах очень внимательно и аккуратно.
Можно затемнить зеленые оттенки, высветлить красный и наоборот. Не стоит забывать про занимаемую площадь, много одного цвета, мало другого.
Родственные цвета, расположенной в одной четверти цветового круга, будут нюансными. Например, красные и красно-оранжевые оттенки. Среди холодных оттенков, отлично будет выделяться теплый элемент и наоборот.
Конечно же, в одной работе мы можем сравнивать ни одно свойство, а несколько. В примере ниже, центр композиции выделяется не только формой и размером элемента, но и цветом.
Контраст типографики
У нас есть типографика, конечно же, куда же без неё. В типографике контраст обычно используется для создания иерархии структуры. Существуют, конечно же, много способов для создания и подчёркивания контрастов типографии, а именно с помощью выравнивания объектов, с помощью семейства шрифта, можно добавлять контраст, либо с помощью самого размера или начертания и так далее. Поэтому важно выбирать шрифт правильно.
Здесь мы можем просто заметить более выраженный контраст. В соседнем примере разные размеры, начертания, выравнивания и все это создает определенную композицию.
Выше пример с плохим контрастом и доступностью. Согласно стандартам, у нас есть три уровня доступности:
- Уровень А — самый низкий.
- Уровень АА — средний уровень и мы должны к нему стремиться в первую очередь.
- Уровень ААА — самый высокий.
Высчитываются эти уровни автоматические. Самое важное это просто помнить, что коэффициент контрастности должен быть не менее чем 4,5 к одному, чтобы соответствовать среднему уровню доступности. Для крупного текста, например заголовка, контрастность должна быть три к одному.
Что нам это дает? Наверно, тебя эти цифры уже немножко путают. Вот решение!
Есть сайт whocanuse.com и там как раз таки можно проверить контраст онлайн. Необходимо выбрать цвет фона и текста, а также выбрать размер и начертание шрифта. Все показатели рассчитаются режиме реального времени.
Свободное пространство в композиции
Следующее правило это свободное пространство. Чем меньше свободного пространства в дизайне, тем тяжелее воспринимается композиция. Я специально нашла такой сайт, из топа худших сайтов, на которые заходишь и у тебя начинает болеть голова.
Это все потому что, во-первых тут слишком много яркого, всяких цветов и элементов, которые бросаются в глаза, а ещё всё это скомкано. В общем это очень тяжело воспринимается, нету свободного пространства, нет вот этого воздуха.
Чтобы взгляд действительно скользил по нашему дизайну, важно, чтобы все объекты в нём «дышали». Но это должно быть без перебора, потому как, когда воздуха слишком много, может очень тяжело восприниматься дизайн.
Чёткая структура и последовательность в композиции
И завершающее правило — структура и последовательность. Когда они отсутствуют, взгляд начинает перепрыгивать с одного места на другое в хаотичном порядке. Это очень сильно утомляет. Из-за нарушения этого правила дизайн может приносить головную боль, а не легкость в прочтении.
Наша задача сделать дизайн легким понятным и удобным в прочтении, а для этого нужна правильно выстроенная логика, как между объектами, так и в тексте.
Заключение
Цель дизайнера и иллюстратора создать выразительную гармоничную композицию. То, о чем я рассказала в этой статье, относится к любой работе: и к макетам полиграфии, иллюстрации для сайта и к шапкам или баннерам социальных сетей, так как правила и законы едины. Композиция должна быть уравновешенной и гармоничной. Мы должны уметь выделить главное – центр композиции и опустить второстепенное.
Поделиться записью:
СВЯЖИТЕСЬ СО МНОЙ!
