Конспект
Конспект дизайнера: основы композиции
Лекция руководителя отдела веб-дизайна «1+1 медиа» Евгения Демченко в школе Projector
18 июля, 2018
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Telegraf.Design начинает серию публикаций конспектов лекций о дизайне от школы Projector.

Откроет новую рубрику лекция руководителя отдела веб-дизайна «1+1 медиа» Евгения Демченко, который расскажет об основах композиции и способах управления вниманием читателей.

Евгений Демченко – бывший арт-директор Pоkupon и дизайнер MEGOGO. Уже почти 18 лет профессиональной жизни посвятил психологии разработки дизайна.


Композиция – это сложение малых частей в одно целое

Также композицию можно представить как игру. Есть два игрока: вы (создатель композиции) и наблюдатель.

Цель игры — заставить человека выполнить определенные действия или доставить ему определенную информацию.

Если у игры нет цели, вы никогда не выиграете.

Выстраивая композицию, вы задаете правила игры и управляете поведением оппонента.

Почему мы можем управлять оппонентом? Композиция – это еще и среда, в которую мы помещаем наблюдателя. А поведение любого человека напрямую зависит от его личности и среды, в которой он находится.

В = f (P, E)

* В – поведение человека                                                                                                                                    * f – знак функциональной зависимости                                                                                                       * P – особенности личности человека                                                                                                             * E – среда

Основные виды плоскостных композиций:

  1. Симметричная
  2. Асимметричная

Также выделяют:

  • горизонтальную
  • вертикальную
  • диагональную
  • круговую
  • глубинную
  • ракурсную
  • всегда можно создать свой собственный вариант

Создание композиции также подчиняется нескольким основным правилам размещения якорных объектов.

Якорные объекты – это ключевые точки взаимодействия мозга пользователя с областью композиции

Правило размещения в угловых точках и в центре. Именно эти места на плоскости человеческий мозг обрабатывает лучше всего, они являются самыми активными в прямоугольнике.

Правило силовых сторон. Якорные объекты также можно разместить вдоль одной из силовых сторон композиции.

Как выбрать тип композиции и правило размещения якорных объектов? Исходя из целей вашей игры и контента. При этом контент является основой всей композиции. Вам нужно сделать такую композицию, чтобы контент удачно сыграл с наблюдателем.

A и Ω композиции – контент

Для грамотной подачи контента вам необходимо разработать свою метрическую систему. Как это сделать?

  1. Определиться с контентом.
  2. Выбрать область композиции, ее формат.
  3. Учесть окружающую среду (где будет выставлена ваша композиция?).
  4. Учесть условия взаимодействия (сколько времени наблюдатель будет коммуницировать с композицией и т.д.).
  5. Изучить особенности потребления.
  6. Учесть другие факторы.

Для создания композиции, как правило, используют сетки. Сетки бывают: колоночные, строчные, в клетку, в косую линию, радиальные, сетка Вилларда (микроформатные), ромбические, фасетные и т.д.

Чтобы человек понял, на что он смотрит, мозгу нужно провести определенную работу:

  1. Провести селекцию. Человек выделяет объект, на который смотрит.
  2. Организовать информацию. Объект идентифицируется по ряду признаков. Мозг ищет в памяти похожие атрибуты.
  3. Провести категоризацию и приписать наблюдаемому объекту свойства других объектов этого класса.

Восприятием человека можно управлять. Этого мы и добиваемся в своей композиции

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

Если ваша композиция составлена правильно, наблюдатель будет взаимодействовать с теми якорными объектами и в той последовательности, в которой вы ему покажете.

Базовые элементы композиции

Компонентами композиции являются:

  • Точка
  • Линия
  • Прямоугольник
  • Окружность
  • Многоугольник

Все макеты могут состоять из этих базовых элементов.

У каждого базового элемента есть свои оптические особенности.

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

То же правило касается и острых углов.

Многоугольники и прямоугольники выравниваются по центру массы.

Квадраты и окружности будут казаться более идеальной формы, если их немного вытянуть.

Чтобы ваш оппонент хорошо считал якорный объект, нужно дать ему немного пространства (white space). Это нужно, чтобы облегчить восприятие элементов мозгу вашего оппонента. Чем больше «белого пространства» у объекта, тем легче его заметить и считать. Вы также можете управлять вниманием оппонента при помощи увеличения или уменьшения этого пространства.

Из этого выведено правило «внутреннего и внешнего».

Внутренний отступ должен быть равен или быть меньше, чем внешний

Чем проще воспринимается вашим оппонентом композиция, тем лучше. Ваша задача – сделать восприятие всех элементов композиции максимально простым.

Группировка элементов

Существует 3 типа группировки информации по принципу воздействия, которые мы можем подать в плоскостном дизайне:

  1. Инфо-блок
  2. Промо-блок
  3. Блок разрыва

Инфо-блок – это текст. Он должен передать сообщение. Состоит из множества многоугольников (букв) и сложен для восприятия. Инфо-блок является самым медленным по передаче информации оппоненту.

Промо-блок – это видео или изображение, взаимодействует с эмоциями и должен заворожить человека, используя основные рычаги манипуляции.

Блок разрыва – разрыв контента и сюжета в композиции. Блоком разрыва может быть контрформа, полоска или отсутствие контента.

Рифмы блоков:

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

Стоит чередовать нагрузку на мозг оппонента. Блок разрыва можно ставить там, где он будет выгоден.

Группировка через гештальтизм:

  1. Закон близости. Объекты, расположенные рядом, имеют тенденцию восприниматься вместе.
  2. Закон схожести. Объекты, которые похожи по атрибутам, будут восприниматься как группа.
  3. Закон закрытости. Неполные силуэты достраиваются в восприятии до полных.
  4. Закон симметрии. Симметричные объекты и выровненные вокруг центральной точки объекты воспринимаются как часть цельного объекта.
  5. Закон общего поля. Элементы, которые лежат на одной плоскости или в одном поле, воспринимаются как одно множество.
  6. Закон связанности. Элементы, объединенные общим элементом, воспринимаются как одно множество.
  7. Закон общей судьбы. Элементы с одинаковым направлением движения воспринимаются как целое.

Также нужно учитывать законы взаимодействия:

Закон Фиттса. Время, необходимое для быстрого перехода к целевой области, зависит от соотношения расстояния до цели и ширины цели. Если вам нужно далеко тянуться к кнопке, нужно сделать ее больше.

Закон Хика. Чем меньше элементов, тем меньше времени занимает выбор одного из них.

Закон Якоба. Пользователи предпочитают, чтобы ваш продукт работал так же, как и все другие продукты, которые они уже знают.

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

Закон Миллера. Кратковременная человеческая память, как правило, не может запомнить и повторить более 5-9 элементов.

Бритва Оккама. Не следует привлекать новые сущности без крайней на то необходимости.

Закон Паркинсона. Рост приводит к усложненности, а усложненность – это конец пути.

Закон крайней позиции. Мозг лучше всего запоминает первый и последний элемент серии.

Эффект Ресторфф. Объект, выделяющийся из общего ряда схожести однородных объектов, запоминается лучше других.

Эффект Зейгарник. Человек лучше запоминает прерванные действия, чем завершенные.

Вывод

Как правильно сделать композицию?

Берем контент -> Разбиваем его на сюжет-> Выбираем метрическую систему для подачи контента -> Контролируем работу пятен -> Приводим хаос к порядку. Убираем ненужные мелочи -> Проверяем по психологическим моментам.


Полную видео-версию лекции можно посмотреть на сайте школы Projector.

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: