Остался один шаг
У вас есть проект для меня или вы хотите проконсультироваться? Заполните форму, расскажите о задаче. Я свяжусь с вами как только прочитаю сообщение. Среднее время ответа: 2 часа
 
Композиция

Основы композиции

Слово "Композиция" происходит от лат. compositio , что б в переводе буквально означает со-расположение. Под этим понятием понимается составление, соединение, сочетание различных частей в единое целое в соответствии с какой-либо идеей. В изобразительном искусстве композиция - это построение художественного произведения, обусловленное его содержанием, характером и назначением.
Композиция – это сложение малых частей в одно целое
Также композицию можно представить как игру. Есть два игрока: вы (создатель композиции) и наблюдатель.
Цель игры – заставить человека выполнить определенные действия или доставить ему определенную информацию.
Если у игры нет цели, вы никогда не выиграете.
Выстраивая композицию, вы задаете правила игры и управляете поведением оппонента.
Почему мы можем управлять оппонентом? Композиция – это еще и среда, в которую мы помещаем наблюдателя. А поведение любого человека напрямую зависит от его личности и среды, в которой он находится.
В = f (P, E)
  • В – поведение человека * f – знак функциональной зависимости * P – особенности личности человека * E – среда
Именно от композиции зависит, как зритель увидит произведение.
Паранюшкин отмечает, что существует три главных формальных признака композиции:
Целостность - внутреннее единство композиции. Тут важно помнить, что целостность не значит, что ваша картина должна представлять собой единый комок краски без проблесков, некий "монолит", вовсе нет. Под ней понимается тяготение частей картины друг к другу. "Целостность может быть в компоновке картины по отношению к раме, может быть как колористическое пятно всей картины по отношению к полю стены, а может быть и внутри изображения, чтобы предмет или фигура не распадались на отдельные случайные пятна", пишет Паранюшкин.


Подчиненность второстепенного главному, то есть наличие доминанты - важно сочетание "главного" элемента, который сразу привлечёт внимание и является смысловым центром композиции, и второстепенных. которые его оттеняют и выявляют. "Ни в коем случае понятие центра композиции не связано только с геометрическим центром картины. Центр, фокус композиции, ее главный элемент может быть и на ближнем плане, и на дальнем, может оказаться на периферии или в прямом смысле в середине картины — это неважно, главное, что второстепенные элементы «играют короля», они подводят взгляд к кульминации изображения, в свою очередь соподчиняясь между собой", пишет Паранюшкин.


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


Типы композиции

1) Замкнутая (закрытая) композиция

"Изображение с замкнутой композицией вписывается в раму таким образом, чтобы оно не стремилось к краям, а как бы замыкалось само на себя. Взгляд зрителя переходит от фокуса композиции к периферийным элементам, возвращается через другие периферийные элементы опять к фокусу, то есть стремится с любого места композиции к ее центру". Одна из важных черт замкнутой композиции - наличией полей. Все элементы тесно связаны между собой.

2) Открытая композиция

"Заполненность изобразительного пространства при открытой композиции может быть двоякой. Или это уходящие за пределы рамы детали, которые легко представить вне картины, или это большое открытое пространство, в которое погружается фокус композиции, дающий начало развитию, движению соподчиненных элементов. В таком случае отсутствует затягивание взгляда к центру композиции — наоборот, взгляд свободно уходит за пределы картины с некоторым домысливанием не изображенной части". Открытая композиция тяготеет к центробежности, чаще всего исходит от центра. Хотя она бывает очень сложной - единый центр в таком случае может отсутствовать, и композиция будет складываться из нескольких мини-центров.


3) Симметричная композиция

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

4) Асимметричная композиция

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

Рудольф Паранюшкин "Композиция. Теория и практика изобразительного искусства"

ПРИНЦИПЫ КОМПОЗИЦИИ В ГРАФИЧЕСКОМ И ВЕБ-ДИЗАЙНЕ

Цвет

Цвет играет важнейшую роль в композиции. От цветовой гаммы зависит, какое настроение задает дизайн, в каком свете выставляется продукт, какие ассоциации вызывает.
Если цветовая гамма яркая, она создает настроение бодрости, энергичности. Теплые тона ассоциируются со спокойствием, расслабленностью, надежностью. Холодные — с инновационностью, строгостью. Решите, какие ассоциации должен вызывать ваш сайт и продукт и, основываясь на этом, выбирайте цветовую гамму.
Особое внимание при работе над дизайном уделите контрасту. Контраст поможет подчеркнуть нужные разделы, например, кнопки заказа, формы регистрации, информацию о цене. Другие блоки можно, наоборот, затемнить: кнопку отказа, ограничения по условиям акции и т.п.
При выборе цветовой гаммы вам поможет так называемый цветовой круг — палитра всех цветов. Противоположные цвета в круге резко контрастируют, близкие цвета похожи и отлично сочетаются. Стопроцентный вариант, при котором вы точно не ошибетесь — выбрать цветовую гамму из трех цветов, расположенных на углах равнобедренного треугольника, вписанного в этот круг.
Обязательно определите основной цвет и дополнительные. Установите для каждого из них роли. Один — для интерфейса, второй — для контента, третий — для кнопок и т.д.

Модульная сетка

Эта технология пришла в веб-дизайн из полиграфии и отлично показала себя в разработке сайтов и приложений. Суть модульной сетки в том, что элементы экрана организованы по четкой структуре — сетке. В ней есть ряды и колонки, и каждый отдельный блок находится в своей ячейке: тексты, заголовки, кнопки, иллюстрации и т.д.
Однако в веб-дизайне модульные сетки претерпели изменения. В отличие от полиграфии, сайт не всегда статичен: у него открывается меню, есть выпадающие списки и другие динамические элементы, срабатывающие, когда на них нажимают или наводят курсором. Эти особенности также приходится учитывать при составлении сетки, чтобы динамические блоки не нарушили ее баланс.
Модульная сетка нужна в композиции, чтобы упорядочить информацию на экране, упростить ее восприятие для посетителя сайта и установить связь и иерархию между разными частями страницы. Сетки могут быть простыми, как таблица из нескольких строк и столбцов, а могут — сложными, с разным расстоянием между ячейками и разным размером самих ячеек.

Направление взгляда пользователя

Удачная композиция в дизайне позволяет управлять внимание человека и направлять его к нужным разделам. Здесь есть два вида композиции: Z-образная и F-образная. Считается, что именно по траектории этих букв обычно движется взгляд читателя или посетителя сайта.
В случае с Z — слева направо, затем по диагонали вниз и снова слева направо. В случае с F — сначала вертикально сверху вниз, а затем слева направо вдоль строк.
Такая траектория взгляда естественна для пользователей, и это следует учитывать при выстраивании композиции. Так, ключевые разделы можно разместить на ключевых точках траектории, чтобы взгляд останавливался именно там, где это нужно дизайнеру.
Так вы можете выстроить целый путь пользователя по сайту, основываясь, например, на маркетинговой модели AIDA: внимание, интерес, желание, действие. В начале разместите элемент, который приковывает внимание, затем контент, который заинтересует пользователя, затем основные преимущества продукта, чтобы посетитель его захотел, а в конце — кнопка для заказа или призыв к действию.
Для направления внимания читателя в композиции можно использовать и более очевидные техники. Например, никто не отменил классическую “стрелочку”, которая переходит от одного раздела к другому и ведет за собой посетителя. Другой способ — нумерация блоков. Взгляд человека в первую очередь зацепится за пункт “1” и далее пойдет по списку.
Для этой же цели подойдут и иллюстрации. Например, фотография человека с вытянутой рукой, которая указывает на форму регистрации. Это упрощенный пример, но принцип понятен.

Фокальная точка

Управлять вниманием пользователя — какая задача может быть важнее? Фокальная точка это именно то, что привлекает взгляд в первую очередь, к самому важному элементу композиции сайта. Она занимает небольшое место на видимой части макета.

Наиболее простой способ добавить фокальную точку на свой макет — это выделить предмет (допустим, ярко-зеленая кнопка или же крупный текст).

Легко выбрать место для фокальной точки, применив “правило третей”.
Мысленно деля страницу на девять частей, выполучите точки пересечения, наиболее удачные для размещения фокуса.


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

Фокальная точка может быть не одна. Вы можете добавить “два центра фокусировки”, когда один предмет имеет гораздо больший вес, чем второй. Таким образом, первым делом вы обращаете внимание пользователя на основную фокальную точку (в примере выше заголовок), а затем переключаете его на вторую (кнопку).

Что такое Z-паттерн, как он работает и почему он работает

Как и следовало ожидать, макет z-шаблона следует форме буквы Z. Дизайн z-паттерна задает маршрут, по которому человеческий глаз перемещается при просмотре страницы слева направо, сверху вниз:
  • Сначала люди просматривают сверху слева направо, формируя горизонтальную линию
  • Далее, вниз в левую часть страницы, создавая диагональную линию
  • Наконец, снова слева направо, образуя вторую горизонтальную линию
Когда глаза пользователей двигаются по этому шаблону, он образует воображаемую букву «Z»:

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

Когда его использовать

Z-паттерн встречается на страницах, которые не сосредоточены на тексте (для перегруженных текстом страниц, таких как статьи или результаты поиска, лучше использовать F-паттерн). Это делает Z-паттерн хорошим решением для простых дизайнов с минимумом текста и несколькими ключевыми элементами, которые необходимо увидеть. Минималистские или лендинг страницы, ориентированные в основном на один или два основных элемента, могут реализовать Z-шаблон, чтобы побудить пользователей следовать этому естественному методу.

Как его использовать

Прежде чем приступать к разработке макета страницы, важно найти ответы на следующие вопросы:
  • Когда посетитель попадает на вашу страницу, какую информацию вы хотите, чтобы он заметил?
  • В каком порядке вы хотите, чтобы он видел информацию?
  • А чем вы хотите его занять?
Смысл Z-шаблона на самом деле довольно прост: 
наложите букву Z на страницу
. В идеале вы хотите, чтобы люди сначала увидели вашу самую важную информацию, а затем следующую важную информацию. Таким образом, важные элементы должны быть размещены вдоль пути просмотра, и правильная информация должна быть представлена посетителям в нужное время.
Это указание пути глазам от одной части страницы к другой в нужном вам направлении. Вы создаете направление движения посредством сочетания визуального веса и визуального направления. Вот несколько лучших практик, которые следует учитывать при создании направления движения:
  • Точка #1.
  •  Отправная точка путешествия зрителя. Это идеальное место для вашего логотипа.
  • Точка #2.
  •  Поместите предметы, которые вы хотите, чтобы читатель увидел, сначала в верхней части Z. Глаз, естественно, будет следовать по пути Z, поэтому цель состоит в том, чтобы поместить ваш вторичный «призыв к действию» в конце. Поместите больше визуального веса в точку #2 — сделайте кнопку (или другой ключевой элемент) яркой и красочной, чтобы привлечь внимание пользователей и направлять их по ходу Z-паттерна.
  • Центральная область страницы.
  •  Необходимо заполнить ее содержимым, которое интересует пользователя, но все же побуждая его обратить взгляд вниз к следующей строке. Например, вы можете поместить изображение герой в центр страницы, чтобы отделить ее верхнюю и нижнюю части и направить глаза по пути Z.
  • Точка #3
  • *.* Направлять пользователей к окончательному призыву к действию в точке #4. Например, ваша страница продвигает какой-либо продукт, который вы хотите продать. Вы желаете, чтобы потенциальные клиенты увидели рекламный текст, который убедит их его купить, прежде чем они увидят кнопку «Купить сейчас». Таким образом, вы можете использовать точку #3 для сообщения преимуществ или другой полезной информации для пользователей.
  • Точка #4.
  •  Это финишная линия, строка между ней и точкой 3 должна содержать контент, который подталкивает взгляд пользователя к углу. Точка #4 сама по себе является идеальным местом для вашего основного призыва к действию.

Что такое F-паттерн и как он работает?

Этот шаблон был популяризирован исследованием отслеживания взгляда NNGroup, в ходе которого было зафиксировано, что более 200 000 пользователей просматривали тысячи веб-страниц и обнаружили, что основное поведение пользователей при чтении было довольно постоянным на многих различных сайтах и при выполнении различных задач. Этот шаблон чтения выглядел как буква F и состоит из трех компонентов:
  • Сначала пользователи читают горизонтально, обычно через верхнюю часть области содержимого. Это движение глаз образует верхнюю часть буквы F.
  • Затем они просматривают вертикальную линию в левой части экрана в поисках интересных мест в начальных предложениях абзаца. Когда они находят что-то интересное, они читают строку, и это движение глаз образует вторую горизонтальную линию буквы F. Вторая линия обычно покрывает более короткую область, чем предыдущее движение.
  • Наконец, пользователи сканируют левую часть содержимого по вертикали.

Очевидно, что шаблоны сканирования пользователей не всегда содержат ровно три части. Когда пользователи заняты чтением (т. Е. Находят то, что им нравится), они начинают читать нормально, образуя горизонтальные линии.

Зачем мне его использовать?

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

Когда его использовать

F-шаблон - это идеальный макет для сайтов с большим количеством текста, таких как блоги и новостные сайты. Если контента много - особенно текста, - пользователи лучше откликнутся на макет, разработанный в соответствии с естественным форматом сканирования.

Как использовать шаблон F-Shapen

F-Layout буквально дает дизайнеру больше контроля над тем, что он видит.

Расставьте приоритеты для вашего контента


Расставьте приоритеты для наиболее и наименее важного контента на странице в соответствии с порядком следования посетителей. Как только вы узнаете, что вы хотите, чтобы ваши пользователи видели, вы можете разместить наиболее важный контент вверху, чтобы вовлечь посетителей в процесс сканирования / чтения.
Первые два абзаца в блоке содержимого являются наиболее важными. Если абзац не привлечет внимание посетителей, вы их потеряете. Вот почему размещайте наиболее важный контент как можно ближе к верху страницы, чтобы попытаться сообщить цель блока контента.
Made on
Tilda