Сообщение композиция в дизайне
Обновлено: 20.05.2024
Законы композиции используется людьми во многих сферах деятельности, основные — живопись, музыка, литература, архитектура. Но, как вы уже догадались из названия темы, речь пойдет о композиции и её законах для дизайна интерфейсов.
За всё время я прочитал много информации на данную тему, но долго так и не мог однозначно себе ответить на ряд, как мне кажется, важных вопросов:
- Зачем вообще использовать законы композиции?
- На каком этапе проектирования интерфейса необходимо держать фокус на законах композиции?
- В каких случаях ими можно пренебречь? Ведь законы композиции — не догма.
- Как их правильно применять при проектировании интерфейсов?
Обалдеть, как интересно! Всё это далеко от проектирования сложных интерфейсов.
В дальнейшем я открыл для себя существование статической и динамической композиции. Статическая — это устойчивость, баланс, спокойствие.
Если спроецировать это на дизайн интерфейсов, получается, что в статической композиции есть одно ключевое действие, на которое мы хотим обратить внимание пользователя, и вся композиция строится вокруг этого ключевого действия.
Примеры статической композиции.
Динамическая композиция — это, конечно, движение. С ней всё гораздо сложнее, здесь необходимо выделить наиболее важные элементы, затем второстепенные. Важно соблюсти иерархию элементов интерфейса: если этого не сделать, вы рискуете посеять хаос и получить негативный опыт использования вашего интерфейса.
Примеры динамической композиции.
Google говорит, что композиция (лат. compositio — составление, связывание, сложение, соединение) — составление целого из частей. Взаимодействие частей с целью передать смысл.
Интерпретировав вышеописанное на нашу тему, можно постараться ответить на вопрос, зачем нужны законы композиции. Композиция — это взаимодействие элементов интерфейса с целью передать смысл этого самого интерфейса. Дать возможность пользователю легко понять, как с помощью интерфейса можно удовлетворить потребность.
Далее я сформулировал две основные задачи, которые помогает решить композиция:
Управление вниманием пользователей. Используя законы композиции, мы проектируем интерфейс, осознавая, что пользователь сперва обратит внимание на этот блок, затем на этот. Тогда восприятие пользователя представляет собой своеобразную тропу, по которой он продвигается по интерфейсу, изучая его визуальную составляющую. Пользователь будет следовать по маршруту, который для него здесь протоптан.
Cохранение внимания пользователя. Человек так устроен, что ему проще воспринимать структурированную информацию, на её усвоение тратится меньше усилий, и, как следствие, пользователь получает удовольствие от использования вашего интерфейса.
Я не буду говорить о многим и так известных F- и Z-паттернах восприятия контента пользователями, вместо этого поделюсь одной интересной и в то же время простой вещью, которая произвела на меня огромное впечатление. Посмотрите на текст ниже и ответьте на вопрос, куда стремится вектор вашего внимания.
А как изменится направление вектора вашего внимания, если тот же самый текст немного изменить?
Интересно, правда? Контент тот же, но направление вектора внимания в одном случае — вправо, а в другом случае — вниз.
Взгляд человека можно сравнить с направлением вектора, который выделяет из общего контента узловые точки и движется линейно от одной точки к другой.
В последнем примере слово “Hello” иерархически выделяется от основного текста и взгляд на него падает в первую очередь, так как еще одной особенностью людей является то, что мы сначала обращаем внимание на выделяющиеся объекты, или элементы дизайна, имеющие больший визуальный вес.
Существует несколько способов выделить информацию и тем самым добавить ей визуального веса:
- Размер.
- Цвет.
- Форма.
- Негативное пространство.
Но не стоит стремиться сразу выделить все элементы дизайна, иначе вы посеете хаос, о котором я уже упоминал.
Когда дизайнер размещает на экране или на листе бумаги текст с иллюстрацией, он начинает строить композицию. Один объект — это тоже композиция, в которой важна работа с расположением объекта, самим листом, его ориентацией и свободным пространством. В основе композиции лежит четыре понятия: баланс, композиционный центр, ритм и контраст. Рассказываем, что это такое и как дизайнеру грамотно использовать эти принципы.
Баланс
Оптически тяжелые объекты в композиции работают по принципу магнита и заставляют обращать на себя внимание.
Например, у нас стоит задача уравновесить левую и правую части экрана или листа. В одной части будет массивный объект с условным весом 100 кг, который мы уравновешиваем двумя объектами по 70 и 30 кг. Тогда получится визуально устойчивая, сбалансированная композиция:
Схема сбалансированной композиции Читайте по теме
Схема несбалансированной композиции
Фундаментальный курс для полного погружения в профессию за 18 месяцев
На оптический вес влияют определенные характеристики объекта:
- Размер. Если взять для сравнения два квадрата черного цвета, то чем больше квадрат, тем он тяжелее, и на него мы обратим внимание в первую очередь:
- Тон. Чем светлее объект, тем легче он оптически. Из двух квадратов одинакового размера больше внимания будет привлекать тот, тон которого темнее:
- Цвет. Более активный по цвету объект будет притягивать к себе больше внимания. Например, розовый квадрат на фоне темно-серого смотрится активнее:
- Расположение. Наше подсознание не может игнорировать законы реального мира, поэтому объекты внизу композиции мы подсознательно воспринимаем, как более тяжелые, а объекты наверху — как легкие и наполненные воздухом:
- Форма. Более сложные формы с большим количеством деталей, которые привлекают внимание, будут оптически тяжелее:
На первый взгляд кажется, что верхняя часть картины должна визуально перевешивать и мы имеем дело с несбалансированной композицией. Но ощущение гармонии создается из-за расположения объектов на холсте. Массивный квадрат находится сверху, что придает ему легкости, а более мелкие, но тоже активные по цвету синий и желтый объекты как бы придавлены гравитацией вниз.
Концепция приложения для музея изобразительных искусств. Источник Верстка сайта с отсылкой к работам Мондриана. Источник
Композиционный центр
Композиционный центр не обязательно находится в центре листа или экрана. Это точка притяжения внимания в дизайне, на которую дизайнер хочет обратить внимание пользователя. Например, на схематичном первом экране лендинга четко выделяется розовый элемент — кнопка. Она будет основным элементом и композиционным центром, так как весь экран создан для того, чтобы пользователь кликнул на нее:
Если говорить о простом геометрическом центре этой схемы, то там будет находиться подзаголовок. Но кнопка выделяется за счет цвета и смещает композиционный центр вниз. Мышление пользователя так устроено, что интуитивно он обращает внимание на определенные области экрана, в которых и стоит размещать важные элементы. В этом дизайнеру помогает правило третей.
Правило третей — это один из старейших принципов композиции, которым пользовались художники и Средневековья, и Античности. Чтобы понять, как работает правило, нужно визуально разделить рабочую область на три равных части по вертикали и три равных части по горизонтали и получить сетку.
На пересечении линий будет 4 точки, на которые зритель обращает внимание в первую очередь. Расположив элемент в этих областях, дизайнер привлекает к нему дополнительное внимание. В примере ниже на одной точке пересечения находится кнопка, на другой – заголовок, а на оставшихся двух точках расположена иллюстрация:
Но так не всегда должно быть, особенно если это противоречит дизайн-концепции или здравому смыслу. В другом примере видно, что кнопка смещена влево, так как все объекты выровнены по левой стороне. Поставить ее на точку пересечения было бы странно, так как тогда она окажется где-то посередине текста.
Освойте востребованные инструменты и навыки для решения дизайн-задач за 18 месяцев
Ритм — это расположение элементов в дизайне с учетом расстояния между ними, а также повторения элементов. Даже если располагаете один объект на пустом листе, вы уже заявляете определенный ритм.
Чтобы уловить ритм в верстке страницы сайта, можно упростить ее до схематичного изображения. Так мы увидим, что на странице есть два типа объектов: последовательность изображений разного размера и крупная типографика в заголовках. Вместе они создают ритмическую последовательность повторяющихся элементов при скроллинге.
Концепция сайта, в которой ритм задают типографика и векторные элементы. Источник
Ритм создает правила подачи контента. Когда мы заходим на сайт, то сразу понимаем, по каким принципам подается контент. Двигаясь по сайту, мы видим повторение этих принципов и понимаем, как нам читать текст, на что обращать внимание. Это некие правила движения по сайту.
Если дизайнер хочет на что-то обратить внимание, достаточно нарушить заданные ритмические правила. Например, один из сильнейших атрибутов объекта — это цвет. Если в основном ритме страницы заданы приглушенные, серые и пастельные цвета, то яркий цветовой акцент разобьет этот ритм и обратит на себя внимание.
Контраст
Контраст — это использование противоположностей. Он воспринимается зрителем в первую очередь потому, что помогает не напрягаясь считывать контент. Есть несколько видов контраста:
В одном макете может сочетаться несколько видов контраста, но все же хорошим решением обычно считается то, которое можно описать в нескольких словах, например, четкая геометрия квадратов и изящные шрифты.
Однако не стоит зацикливаться на конкретных правилах. Дизайн — это дисциплина, в которой есть правила, но также существует интерпретация правил и их нарушение. Например, не обязательно в каждой работе использовать правило третей и строить дизайн исходя из него. Набор принципов композиции должен помогать в создании убедительного визуального опыта. Если вы хотите по-другому скомпоновать объекты и считаете решение удачным, то некоторыми правилами можно пренебречь.
Графический дизайнер с нуля до PRO
Станьте универсальным специалистом, способным выполнять и ставить задачи в любом направлении digital дизайна
6 инструментов: Photoshop, Illustrator, InDesign, Figma, After Effects и Cinema 4D
погружение в 5 ключевых направлений дизайна: Айдентика, Упаковка, Веб-сайты, Motion и 3D
более 18 работ в портфолио
диплом установленного образца
6 инструментов: Photoshop, Illustrator, InDesign, Figma, After Effects и Cinema 4D
погружение в 5 ключевых направлений дизайна: Айдентика, Упаковка, Веб-сайты, Motion и 3D
Первое, о чем стоит позаботиться – композиционный центр. Это объект, на который мы в первую очередь обращаем внимание, входя в комнату. Он выделяется из всего дизайна формой, цветом, текстурой или размером.
Центр композиции не обязательно должен находиться в центре комнаты. Его можно отодвинуть к стене или расположить в углу. Важно, чтобы он уравновешивал композицию интерьера.
Располагайте остальные предметы мебели и декора относительно композиционного центра, они должны гармонично сочетаться с ним и между собой. В качестве композиционного центра используйте:
Основные принципы композиционного построения:
Симметрия
Симметричным называется равномерное расположение предметов вокруг композиционного центра. Это могут быть два дивана напротив друг друга, две одинаковые тумбочки возле кровати, напольные торшеры рядом с камином или стеллажи по обе стороны от окна. Так создается симметрия дизайна в горизонтальной плоскости.
Вертикальную, когда высота потолков больше стандартной, уравновешивайте длинной люстрой. При этом на стенах, на уровне глаз, должны быть картины или другой декор.
Асимметрия
Противоположный способ построения композиции в дизайне – асимметричный. Здесь важно, чтобы в интерьере не создавалась дисгармония, не было лишних предметов и неуместных пустот.
Часто при таком оформлении используют принцип равнобедренного треугольника: 2/3 площади заставлены разными предметами мебели и декора, а 1/3 остается для одного массивного объекта, например, зеркала, камина, панно, стола или шкафа-купе. Такое сложное построение поможет внести разнообразие в дизайн интерьера, главное, соблюдать баланс и не перенасытить комнату предметами.
Статика
Динамика
Динамичная композиция в дизайне подойдет для современных стилей. Движение в таких интерьерах создает асимметричная расстановка мебели, диагональные направления, вертикальные линии. Здесь может быть много свободного пространства, которое будет уравновешивает обилие сложных конструкций и элементов.
В любом виде искусства ключевую роль играет правильное расположение элементов произведения, позволяющее наиболее точно передать идею этого произведения. То есть выделить ключевые сюжетные линии, передать необходимое настроение и соблюсти при этом гармонию. Композиция (от латинского compositio) и является соединением (сочетанием) этих элементов в единое целое. Так же композицией можно назвать само произведение.
Интуитивное понятие о композиции в различной степени присутствует у каждого. Иначе в ней не было бы никакого смысла. То есть люди имеют схожее представление о гармонии, целостности, единстве …
Композиция в дизайне, композиция в рисунке, композиция в живописи, композиция в фотографии - понятия не разделимые. Композиция в музыке и композиция в литературе так же имеют много общего с вышеперечисленными, однако средства ее достижения другие.
Деятели искусства уделяют особое внимание поиску наиболее выразительных композиционных схем. На протяжении долгих столетий создавались произведения с различными композиционными решениями, в том числе и произведения изобразительного искусства. Однако в этой статье об основах композиции мы не будем рассматривать сложные художественные произведения.
Любой объект с легкостью можно вписать в одну из трех основных фигур: прямоугольник, треугольник, эллипс. Так что оперировать мы будем именно этими фигурами.
А саму композицию рассмотрим как правильное расположение элементов изображения, основанное на предметном изучении восприятия человеком зрительной информации.
Речь пойдет об основах композиции в дизайне, изобразительном искусстве и фотографии.
Геометрический и композиционный центры, средства выделения композиционного центра, плановость в композиции
Мы строим композицию на плоскости. Будь то фотография, лист бумаги или монитор компьютера. Если через эту плоскость провести две диагональные линии, точка их пересечения укажет на геометрический центр нашей будущей композиции.
Любой предмет, вписанный в этот центр, будет чувствовать себя вполне уверенно.
Композиционный центр служит для фокусировки внимания зрителя на деталях композиции. В фотографии, живописи и рисунке, как правило, выделяются сюжетно-композиционные центры. То есть, в композиционном центре находится основной сюжет произведения. В рекламе выделение композиционного центра может пригодиться для привлечения внимания потенциального покупателя к интересной ему информации. Это может быть текст или изображение.
Композиционный центр и геометрический центр композиции могут не совпадать.
Композиционных центров в композиции может быть несколько, в то время, как геометрический центр один.
Композиционный центр может быть выделен:
контрастом света и тени
контрастом цвета
В классической живописи, как правило, сюжетно-композиционный центр изображают на втором плане. Передний план служит как бы вступлением, приглашением взглянуть на основное событие. На втором плане находится весь сюжет произведения, а третий служит продолжеием картины, фоном, на котором разворачивается действие.
Читайте также: