Поясни за композицию
Основы композиции для UX-дизайнера. Законы, средства, элементы, применение.
Каждый интеллигентный человек должен задаваться вопросами:
С какого я района? Почему я такой дерзкий? Золотое сечение или правило третей?
Помнишь, когда покупал новый телефон с хорошей камерой, думал: вот теперь у меня будет самый крутой инстаграм? Ты делал сотни снимков, экспериментировал с ракурсами и фоном. Но снимки получались ужаснее характера твоей бывшей.
Если проблема не в освещенности и с четкостью всё хорошо, то прими мои поздравления — твоё чувство композиции ушло в глубокий запой и не собирается возвращаться оттуда.
Этот пост предназначен для тех, кто хочет научиться видеть прекрасное в самом заурядном, но не знает, как подступиться. Я постараюсь минимально пройтись по теории и уделить больше внимания примерам, которые помогут разобраться, что к чему.
Законы композиции
Как вся вселенная подчиняется гравитации, так же и композиция не может существовать без законов. Существует три главных закона: единство, соподчинение и равновесие. Это три кита, на которых стоит любая композиция, начиная от живописи и графики, заканчивая дизайном и архитектурой. В любых правилах есть исключения, но эти три закона лучше не нарушать.
Элементы композиции в искусстве используются для расположения или организации визуальных составляющих таким образом, чтобы радовать художника и, если повезет, зрителя. Они помогают придать структуру изображению и способу представления предмета. Они также могут подтолкнуть погулять взглядом по всей картине.
Единство
Каждый элемент: точка, линия, пятно взаимодействуют друг с другом, дополняя и уравновешивая картину целиком. Единства невозможно добиться без второго (соподчинения). Соподчинение — это выделение центра композиции (доминанты), которому подчиняются все остальные элементы (причем, не просто подчиняются, а усиливают его значимость), т. е. в композиции возникает иерархия.
Соподчинение (композиционный центр)
Самая главная штука на картинке. Босс-точка, мега линия, архипятно. Всё что угодно, но с главной функцией — доминировать и властвовать.
Центр композиции — это твой бро. Вокруг него вертится всё. Это самый “тяжелый” элемент композиции и всегда выделяется степенью проработки, контрастным цветом, фактурой, контуром. Вообще, чем угодно.
Не смотря на название, композиционный центр редко совпадает с геометрическим центром изображения. В живописи, графике или фотографии центр композиции как правило располагается по линии золотого сечения.
На центре композиции фокусируется наш взгляд, поэтому его нужно проработать более детально, чем все остальное. Чтобы лучше понять, как это работает, проведи эксперимент. Сконцентрируй взгляд на чашке кофе или что там у тебя в чашке. Хорошо ли ты различаешь то, что находится на заднем плане? Всё будто в тумане, но чашка… её видно чОтко, ярко и объемно.
Равновесие
Это такое заполнение пространства композиции, при котором ни одна ее часть не перевешивает другую. Это ощущение, что картина “чувствует себя правильно”, а не тяжелее с одной стороны. Симметричное расположение добавляет ощущение покоя, в то время как асимметричное создает более динамичное ощущение. Несбалансированная картина создает ощущение неловкости.
Выразительные средства композиции
Выразительные средства композиции
Восприятие художественного произведения напрямую зависит от его композиции, поэтому важно уметь ее выстраивать, пользуясь художественными средствами: линией, штриховкой, тональными и цветовыми пятнами, перспективой и светотенью. Они помогают не только распределить предметы в пространстве, установить соотношения объемов, света и тени, но и точно передать задумку автора.
В живописи отдельные композиционные приемы позволяют достичь наибольшей выразительности картины, раскрыть многогранность содержания. Это может быть ритмическое построение, где все элементы произведения упорядочены, согласованы и подчинены четкому ритму, заданному художником. В выстраивании композиции изображения задействованы различные изобразительные средства, такие как формат холста и размер изображения, фокусная точка, обрамление, температура цветовых сочетаний, глубина и ракурс, контрасты и ритм.
Расположив изобразительные элементы на картине определенным образом, можно наиболее полно передать замысел, привлечь внимание зрителя. Для этого необходимо выстроить композицию так, чтобы все объекты были переданы наиболее выразительно. Отбросив все лишние детали, оставить только самое необходимое. Подчеркнуть внутреннее содержание всем образным строем картины.
Контраст
Черный и белый, Северная и Южная Корея, Моника Белуччи и Ольга Бузова. Короче, противопоставление одного другому.
Статика
Это чистый дзен. Состояние уравновешенности и покоя, выраженное в симметричности предметов и расположении их в определенном порядке.
Динамика
Семки, взгляд, искра, буря. Композиция с ярко выраженным центром тяжести и асимметрией. Это то, что заставляет сопереживать изображенным персонажам или явлениям.
Ритм
Мы часто говорим, что композиция — это расположение элементов относительно друг друга. Но бывает ли расположение правильным и неправильным? Не совсем, но есть один момент — иногда определенное расположение элементов приобретает для нас значение.
Ритм — это зрительное сокращение, которое совершает наш мозг. Если несколько элементов следуют ритму, нам не нужно смотреть на них по одному — ряд стоящих досок — это забор, «облако» из листьев — это крона дерева и т. д. Но мы также воспринимаем и более тонкие подсказки, отделяя естественные объекты («как должно быть») от неестественных («будто бы кто-то их сделал»).
Но дело тут не только в контрасте. Ритм заставляет нас увидеть что-то, что на деле не рисовали. Если камни лежат в ряд, это значит, что кто-то их так положил. «Облако» листьев на дереве означает, что все они относятся к тому же растению. Если элементы движутся в одном направлении — это означает, что это происходит благодаря одной и той же силе (будь то ветер или страх).
Это добавляет информацию рисунку, и эта информация не должна быть случайной, так как она влияет на композицию.
Ритм (или его нарушение) не должен быть случайным. Он имеет определенный смысл — так не позволяйте этому смыслу рушить ваши идеи.
Элементы композиции
Точка
Может взять на себя роль акцента, т.е. главную, наиболее важную, сильную, эффектную часть композиции. У точки отсутствует какое-либо направление, но зато она имеет вес, а поэтому может быть центром притяжения взгляда. Такой точкой в аранжировке может быть пучок травы или кусок декоративного материала, красивый цветок (или их группа), особо привлекательный своей формой, окраской, но может быть и какой-либо примечательный крупный лист, необычное сочетание растений по фактуре, форме и цвету.
Линия
От этого элемента зависит форма композиции, так как именно линией она отграничивается от всего окружающего мира. Линия, в отличии от точки, имеет направление, поэтому кажется, что она течет, движется и живет. У человека при виде линии возникают различные чувства.
Горизонтальная линия в аранжировке дает ощущение спокойствия, фундамента, земли, выражает плоскость и холод.
Вертикальная линия как бы восходит к свету, выражает высоту и тепло, поэтому чаще воздействует празднично и радостно. Наклонные линии могут действовать различно. Те из них, которые поднимаются слева направо и вверх, вызывают активность, сообщают настроение подъема, взлета.
Спускающиеся вниз слева направо выражают пассивность, вызывают чувство печали, скорби. С помощью линий можно выразить динамичность аранжировки и даже задать ей определенную скорость.
Вертикальная падающая линия дает ощущение ускорения, поднимающаяся — замедления. Движение ее слева направо всегда будет казаться более быстры, чем в обратном направлении. Линия может быть легкой и весело взвивающейся, извилистой и волнообразной, зажатой и напряженной, нервной и жесткой. Это необходимо учитывать, если аранжировке придается определенный характер.
Наклонные линии, выходящие под разными углами из одной точки, прозвучат громко и дадут ощущение остроты, а они же, будучи одинаковой длины, как бы замкнутые в круге, выразят мягкость.
Расположение
Построение композиции (геометрическое) может быть основано на двух принципах построения живой природы — симметрии или асимметрии.
Форма
Форму объекта определяют его назначением. Она может быть круглой, овальной, вертикальной, S- и L-образной, треугольной, серповидной. Но самая крутая — 3 наклонных полосы :)
Объем
Необходимо следить, чтобы объекты и элементы не стояли в одной плоскости, а создавали бы впечатление объемности, многоплановости.
Поверхность
Структура поверхности объектов воспринимается человеком как жесткая и мягкая, блестящая или матовая, гладкая или шероховатая и т.п. Поверхность одних напоминает человеку шелк, парчу или бархат, других — металл, стекло или фарфор.
Работа с пропорциями
Золотое сечение
Все наверняка слышали об этой магической штуке, о какой-то там вселенской пропорции, которая является идеалом красоты, гармонии и самой лучшей и удачной пропорцией. Выражена она вот в такой золотой спиральке (другое название — спираль Архимеда), смысл которой средним умом не понять.
«Ага! Я сейчас на свои фотки наложу такую спираль и случайной вероятностью найду там золотое сечение» — скажешь ты! И вполне вероятно! Это же спираль вселенской гармонии, она заложена в человеке на подсознательном уровне. И факт остается фактом: даже стада овец разбегаются по спирали, которая соответствует вот этой спирали Архимеда. Я не буду усложнять всеми аспектами этой спирали. Для того, чтобы компоновать предметы, стоит усвоить лишь основной ее смысл, который заложен именно в пропорциональном соотношении.
Золотое сечение, конечно, не очень удобный способ компоновать предметы. Не будешь же сидеть над работой с линейкой или вот с этой спиралькой, вырезанной, не знаю, каким образом, и искать, где же мне тут что расположить. Просто нужно усвоить на глаз, запомнить, какое соотношение: один отрезок чуть больше половины, другой — чуть меньше половины.
Правило третей
Это самый простой и популярный способ компоновать предметы. Его очень любят фотографы(не зря на фотоаппаратах и телефонах часто есть функция разбивки на девять клеточек, как раз чтобы искать композиционный центр). По правилу третей идеальное расположение композиционного центра на пересечении этих линий или прямо на них.
Применение в дизайне
Есть пять основных принципов, которые могут помочь преобразить работу и заострить взгляд на дизайне. Держи их в уме, а лучше добавь эту статью в закладки и чекни перед началом следующего проекта.
1.
Используй визуальное пространство для отображения отношений в контенте. На практике это довольно просто: все, что нужно сделать, это убедиться, что связанные элементы сгруппированы вместе (например, текстовые блоки или графические элементы)
Группы, которые НЕ связаны друг с другом, должны быть разделены, чтобы не было ни намека на какую-либо связь. В целом, это делает работу более понятной с первого взгляда, будь то чистый текст или что-то более графичное.
2.
Белое пространство — важная часть любой композиции. Это не значит буквально “белое пространство”, а просто отрицательное пространство, как, например, пространства между линиями и даже внешними полями.
Пустое пространство помогает определить и разделить области. Оно дает контенту возможность дышать. Если твоя работа когда-нибудь начнет чувствовать себя загроможденной или неудобной, маленькое белое пространство может быть именно тем, что доктор прописал.
3.
Выравнивание — это то, с чем ты постоянно имеешь дело, даже если ты этого не понимаешь. Всякий раз, даже когда печатаешь электронное письмо или создаёшь документ, текст выравнивается автоматически.
При самостоятельном выравнивании объектов (например, изображений или отдельных текстовых блоков) может возникнуть сложность. Самое главное — быть последовательным.
Именно это внимание к деталям облегчает навигацию по композиции. Без последовательного выравнивания работа будет смотреться раздробленной.
4.
Контраст. Для создания контраста используется несколько стилей текста, объекты разного размера, выделение цветом наиболее важных элементов. Это делает дизайн более динамичным и, следовательно, более эффективным в передаче смысла.
5.
Контраст также тесно связан с иерархией, которая является визуальной техникой, помогающей зрителю ориентироваться в работе. Другими словами, она показывает, с чего начать и куда идти дальше, используя различные уровни акцентирования.
Установить иерархию очень просто: сначала реши, какие элементы ты хочешь, чтобы читатель заметил, а затем выдели их. Высокоуровневые или важные элементы, как правило, больше, смелее или привлекательнее в каком-то смысле.
Подводя итог
Можно сказать, что макет и композиция — твои Бро в мире дизайна. Легко не заметить их роль, но они — часть всего, что ты делаешь.
Принципы, описанные в этой телеге, помогут тебе прокачать любой проект на новый уровень. Все, что нужно, это немного внимания к деталям и уважение пацанов обеспечено.
P.S. Подписка на мой инстаграм дает +10 к скилам :)
