Медиа

Композиция

Композиция

Почему иногда фотографии выглядят классно, а иногда нам кажется что мы квинтесенция уродства на планете? Почему кадры в фильмах так привлекательны для глаза? Одна из причин — композиция. Это навык, который нам с тобой предстоит развить.
Композиция.png
В фильмах режиссеры и операторы постоянно управляют нашим вниманием. Они буквально направляют наш взгляд. Также и дизайнер выступает в роли навигатора, который показывает маршрут пользователю. Посмотрите как выстраивает композицию Уэс Андерсон в своих фильмах. Каждый кадр — произведение искусства.
 *Вот здесь можно посмотреть подробнее как этот режиссер управляет нами.*
*Вот здесь можно посмотреть подробнее как этот режиссер управляет нами.*
Композиция влияет на мозг на уровне нейронов. Нам нравятся симметричные вещи. Нам нравятся люди с симметричными лицами. Человеку комфортнее, когда между объектами есть понятная система, которая помогает ему воспринимать информацию.
Правильная композиция поможет донести до пользователя нужную информацию. Это один из базовых навыков, которым должен владеть любой дизайнер. В рамках небольшого урока мы, конечно, не сможем постигнуть этот навык. Но пробежимся по базовым понятиям и у тебя сформируется верное представление. После — можно углубляться.

Иерархия

Когда мы говорим про композицию, то должны разобраться с иерархией. Это размещение элементов в порядке важности от самого главного до самого незначительного. Она помогает направить внимание пользователя и привести к целевому действию.
Упаравление вниманием.png
Создание элементов айдентики или любого интерфейса основано на правильном использовании законов иерархии. Любая композиция состоит из элементов и между ними должна быть определенная логика.
Плохой пример визуальной иерархии — местный аналог Avito в Норвегии. Глаз сразу теряется и непонятно куда смотреть. Каждый элемент борется за наше внимание и пытается что-то продать. Такой интерфейс вызывает только негативные эмоции.
https://arngren.net
Не знаешь, где можно купить самые дешевые авиабилеты?) Теперь посмотри насколько логична продумана композиция на сайте Aviasales. Глаз сразу концентрирует внимание на целевом действии — поиске билетов. И ничего не отвлекает. Удобно и эффективно для бизнеса.
Авиасейлс.png

Как люди читают

Человек неосознанно следует одной из схем анализа увиденного: F-паттерн или Z-паттерн. Когда мы смотрим на любое изображение, то наш глаз машинально рисует траекторию латинских F или Z.
https://habr.com/ru/company/iloveip/blog/251689/
Именно поэтому, например, Google и Yandex располагают рекламные объявления — сразу после поискового запроса — в области максимальной концентрации внимания.
Реклама.png
Посмотри как, например, пользователи смотрят сайт Apple Watch. Первое, что всегда привлекает внимание — иллюстрации. Потом пользователь сканирует заголовки. И идёт дальше вниз по иерархии.
https://www.nngroup.com/articles/how-people-read-online/

Визуальный вес

У каждого объекта есть визуальный вес. Этот принцип неразрывно связан с иерархией: чем важнее элемент, тем больше его визуальный вес. Проще всего, это увидеть, если заблюрить макет. Давай это сделаем на примере сайта Apple. Очевидно, что самый тяжелый элемент — иллюстрация макбуков. Затем идёт заголовок, после — кнопка, потом — описание.
Композиция 20.png

Якорные объекты. И доминанта.

Как же нам управлять пользователем и направлять его внимание. Посмотри на картинку внизу. Синие круги — это якорные объекты. Первый якорь — доминанта, которая притягивает взгляд. Место, куда мы посмотрим первым. Остальные четыре — образуют прямоугольник и задают границы, как рамка у картины.
Акцент в дизайне — это способ выделить элемент и привлечь внимание. Он напрямую связан с визуальной иерархией.
Иерархия 3.png
Иерархия 1.png
Иерархия 2.png
Например, на сайте Tesla доминанта — это их машина. Она привлекает всё внимание, показывает продукт и концентрирует взгляд на кнопке «заказать».
Тесла акцент.png
Чтобы лучше разобраться в теме, попробуй найти доминанту сам. Куда сначала смотрит глаз на этом сайте?
https://eiger-extreme.mammut.com/en
Вариант ответа:
  • а) на человека в комбинезоне
  • Абсолютно верно. Это доминанта. Первое за что цепляется взгляд. Тут и контраст по цвету, и по глубине и по размеру.
  • б) на текст «Dani Arnild...»
  • Неа(. Давай подумаем ещё.
  • в) на заголовок «BAIKAL»
  • Почти, но нет. Да, заголовок привлекает внимание, но есть элемент ещё весомее.
Композиция 4.png
Вариант ответа:
  • а) на кнопку «BUY NOW»
  • Совсем нет. Элемент теряется на фоне крупных элементов.
  • б) заголовок «READY TO SHIP»
  • Нет. Давай подумаем ещё.
  • в) на иллюстрацию часов
  • Верно. К тому же они находятся в самом центре.

Инструменты: размер, форма, цвет и пространство

Сейчас мы разберемся с базовыми инструментами, которые помогут создавать акценты и работать с доминантами. Это основа для понимания работы с композицией.
Размер
Большие объекты всегда привлекают больше внимания. Использование размера — эффективный способ захватить глаз и сообщить нам, что большой так же важен. Величина объектов помогает показать, что является первичным, а что вторичным.
Форма 2.png
И может полностью исказить смысл изображения. Как, например, на двух картинках снизу. Сначала мы видим тёмного волка, который вот-вот нападёт оленя. Но если поменять их местами, то кажется, что олень находится в полной безопасности.
Волк 1.png
Волк 2.png
Например, посмотрите на этот проект нашей студентки Кати, где она нарисовала целую оранжерею и создала для неё сайт. Чтобы макет стал более креативным, Катя решила сделать акцент на ключевых растениях, увеличила их в размере и добавила композиционные паузы. В итоге, в макете появилась динамика и дизайн стал выглядеть интереснее.
gjkrfrpolka.png
Форма
Неправильные элементы кажутся легче, чем элементы правильной формы.
Форма.png
Цвет, оттенок или текстура
С помощью цвета ты можешь подчеркнуть главное и сбалансировать элементы на странице. Цвета имеют свою собственную иерархию, в зависимости от их способности привлекать внимание. Например, более теплые цвета тяжелее холодных, а более темные объекты весят больше, чем светлые.
Форма 3.png
На практике подобный приём часто используется в пользовательском интерфейсе. Например, когда на сайте Lamoda мы наводим на интересующий раздел, он меняет оттенок. Это даёт нам понять, что этот объект кликабельный и визуально отделяет от остальных.
Ламода 2.png
Ламода 1.png
Негативное пространство
Незаполненное пространство между изображениями, текстом и другими элементами является полезным инструментом в иерархии. От этого зависит, насколько легко пользователь получит информацию. Делаем дизайн из воздуха.
Музыка — это тишина, которая живет между звуками. Моцарт, наверное
Иногда композиция решает действительно нетривиальные задачи. Посмотри на бюллетень выборов президента в 2018 году. Именно пустое пространство управляет нашим вниманием и приковывает взгляд лишь к одному кандидату.
Выборы.png
Негативное пространство работает и в дизайне айдентики. В любых гайдлайнах описывается охранная зона у логотипа — это расстояние, на котором должны располагаться другие элементы. Это нужно, чтобы не испортить впечатление от айдентики.
http://qiwiguide.ru/styles/qiwi-logos/
А порой от композиции может зависеть жизнь человека. В августе мы участвовали в Каннских Львах и разрабатывали концепцию рекламной кампании для CALM*.* Они помогают людям, которые хотят покончить с собой. Для кого-то их сайт — последний шанс. Глупо будет, если такой пользователь запутается в интерфейсе и... не найдёт нужную кнопку или телефон.
Прошлая версия сайта. Разбегаются глаза от количества визуального шума. Непонятно куда смотреть.
Прошлая версия сайта. Разбегаются глаза от количества визуального шума. Непонятно куда смотреть.
Текущая версия сайта. Стало меньше лишних элементов, но сделали странный шрифт, который только мешает.
Текущая версия сайта. Стало меньше лишних элементов, но сделали странный шрифт, который только мешает.
Расположение и ориентация
Чем дальше объект находится от центра, тем больше его визуальный вес. Вертикальные объекты кажутся тяжелее горизонтальных. Диагональные элементы имеют самый высокий вес и привлекают внимание. Также этот приём поможет создать эффект движения.
Форма 5.png
Плотность
Много маленьких элементов тяжелее одного большого. И если несколько элементов сгруппированы, и один из них отделен от группы, взгляд переходит к этому элементу.
Форма 4.png

Баланс

Баланс — это состояние элементов, когда они создают равновесие и гармонию. В таком случае объекты расположены в определенной логике относительно друг друга. Нам нравятся объекты, которые сбалансированы по вертикальной оси.
В контексте дизайна баланс основан на визуальном весе элементов, о котором мы говорили выше. Если макет сбалансирован, то пользователь подсознательно чувствует себя комфортно.
Когда мы хотим создать баланс, нужно найти оптимальное расположение для каждого элемента. Посмотри на этот магазин Plantien по продаже необычных горшков для растений, который придумала и замоделировала Катя Танко (без опыта в дизайна). Макет идеально сбалансирован по центру.
plantien1.png
А вот на сайте приложения для скорочтения Readom наоборот. Сразу чувствуется перекос вправо. Это происходит из-за динамического приёма с падением книг (метафора: книги читаются так быстро, как падают фишки).
readom11.png
Но это тоже баланс, так как всё уравновешивается заголовком и кнопкой. Он просто другой. Давай разберемся какие виды баланса бывают.

Виды баланса

1. Симметричный
Это самый частый вид баланса. Симметрия визуально приятна на подсознательном уровне. Такой баланс создается равномерным размещением элементов по обе стороны горизонтальной или вертикальной центральной оси.
Умная кормушка для животных / Элина Блажиевская
Умная кормушка для животных / Элина Блажиевская
Приложение для сбалансированного питания Balanceat / Рия Шулева (без опыта до курса)
Приложение для сбалансированного питания Balanceat / Рия Шулева (без опыта до курса)
Конный трекер Equatom / Таисия Лихошерст (без опыта до курса)
Конный трекер Equatom / Таисия Лихошерст (без опыта до курса)
Концепт ровера Growler для выгула собак
Концепт ровера Growler для выгула собак
Приложение для трекинг задач Firefly / Элиза Киреева
А в этом видео можно посмотреть насколько симметричны фильмы Уэса Андерсона, о котором мы говорили в начале. Особое эстетическое удовольствие.
2. Ассиметричный
Композиция с неравным весом с обеих сторон имеет асимметричный баланс. Такой динамический баланс всегда интереснее статического. В отсутствие равновесия наш взгляд подсознательно начинает искать противовес, и это отличный способ, чтобы привлечь внимание.
Композиция 12.png
Онлайн-школа трейдинга Thomas Kralow
Онлайн-школа трейдинга Thomas Kralow
3. Мозаичный
Это сбалансированный хаос. В такой композиции нет очевидных акцентов, все элементы имеют примерно одинаковый вес . Отсутствие иерархии, на первый взгляд, образует визуальный шум, но все элементы образуют единое целое. Такая композиция регулярно используется в интернет-магазинах и новостных лентах.
Композиция 17.png
https://bauhaus.futurelondonacademy.com
Композиция 18.png
4. Радиальный
Тип баланса, при котором визуальные элементы излучаются из общей центральной точки. Радиальный баланс используется в дизайне не очень часто. Его преимущество заключается в том, что внимание легко находит и удерживает фокус. Обычно это самая замечательная часть композиции. Именно такой баланс мы привыкли видеть в различных играх.
Композиция 19.png
Пример из более привычного мира дизайна — блока с сайта нашего студента Дмитрия Пака. Для лендинга шиномонтажки он добавил интересное решение с выбором разделов вокруг обычного колесного диска.
Tires.png

Принципы группировки

Сейчас мы поговорим о правилах группировки объектов. Сначала может показаться, что все они об одном и том же. Даже потом может так показаться.
Правило близости
В основе этого дизайнерского правила принцип близости из гештальт-психологии — расположенные рядом объекты воспринимаются вместе. Можете прочитать статью в кодоводстве Лебедева. Если поставить один из квадратов подальше, то они будут восприниматься отдельно.
Форма 6.png
Самый простой пример — текстовый блок. В первом примере непонятно к какому тексту относится надпись, так как расстояние одинаковое. Но если мы уменьшим расстояние заголовка к тексту снизу, то макет будет логичнее.
Правило близости (пример).png
Принцип коробки
Есть достаточно простой способ разобраться с правилом близости. Можно представить, что мы собираем элементы по коробкам. Первая самая маленькая и содержит минимум элементов. Это частное правило внутреннего и внешнего.
Коробки.png
Правило близости.png
Правило внутреннего и внешнего
Расстояние между буквами — внутреннее, а между словами — внешнее. Идём выше. Между словами — внутреннее, а между строками — внешнее. Ещё выше. Между строками — внутреннее, а между абзацами — внешнее. Простой способ, чтобы сделать дизайн эстетичнее.
Пропускайте начертание.png

Единство и целостность

Этот принцип мы раскрыли в модуле Брендинг и айдентика. Тут действуют те же правила. Чтобы дизайн воспринимался целостно, у него должны быть единые правила в типографике.
Любой дизайн всегда рассматривается в рамках какой-то композиции. В рисунке — холст. В дизайне интерьера — помещение. В дизайне интерфейса — макет. Нужно определиться с целью и сделать так, чтобы все элементы были связаны.
Особенно в этом помогают гайдлайны и дизайн-системы. Посмотрите как систематизируют элементы крупные компании. Например, Рамблер или Mail.ru. Зайдите на их сайты и изучите гайдлайны, которые помогают поддерживать целостность пользовательского опыта. Подробнее об этом в модуле Дизайн-системы и гайдлайны.
Рамблер.png
Мэйл.png
Именно с целостностью проблемы у начинающих дизайнеров. Они лепят всё подряд. Иллюстрации, потому что скачали их в интернете, а не потому что подходят под контекст, иконки, потому что бесплатно скинул друг, шрифты, которые увидел в подборке в Instagram. В итоге, получается суп из всего.
Чтобы этого избежать мы в студии сразу создаём UI-киты к каждому проекту, когда концепция уже согласована. Она может быть максимально простой. Но уже такой системы правил будет достаточно, чтобы не сделать что-то ужасное.
Такой шаблон мы используем в начале проекта, чтобы было легче ориентироваться во всех текстовых стилях и цветовой палитре.
Такой шаблон мы используем в начале проекта, чтобы было легче ориентироваться во всех текстовых стилях и цветовой палитре.

Статика и динамика

Применение статики и динамики в композиции — эффективный инструмент для управления вниманием пользователя.
Динамичная композиция — это композиция, при которой создается впечатление движения и внутренней динамики. Статичная композиция создает впечатление неподвижности. Попробуй определить на какой из двух картин композиция динамичная.
Статика.png
  • Вариант 1
  • Неверно.
Динамика.png
  • Вариант 2
  • Верно.
Хорошо, а где здесь динамичная композиция?
Динамика 4.png
  • Вариант 1
Статика 4.png
  • Вариант 2
На картинке слева создается иллюзия движения, потому что мы предполагаем, что шарик упадет и покатится. И воспринимаем этот предмет даже на статичной картинке движущимся. Давай посмотрим на примере этого свойства в дизайне.
1. Статичная композиция
Устойчивый и сбалансированный дизайн. Вся композиция строится вокруг одного ключевого действия. Посмотрите на эти сайты. Они концентрируют всё внимание в центре — на кнопке. Никакого намека на движение нет.
Умный термос Senty / Виктория Тимофеева (без опыта до курса)
Умный термос Senty / Виктория Тимофеева (без опыта до курса)
Приложение для путешествий Finch / Захар Грачёв (без опыта до курса)
Приложение для путешествий Finch / Захар Грачёв (без опыта до курса)
2. Динамичная композиция
Это движение. Для передачи движения в композиции можно использовать диагональные линии и ассиметричное расположение элементов.
Приложение Artpills / Саша Забуга (без опыта до курса)
Приложение Artpills / Саша Забуга (без опыта до курса)
Приложение DJay / Лиза Самоховец (без опыта до курса)
Приложение DJay / Лиза Самоховец (без опыта до курса)

Следующий модуль

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

Библиотека

Инструменты

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

Материалы

Grids.png
Наглядный справочник по сеткам в вебе от агентства Obys. Показывают, как они работают на примере своих проектов.
Простым языком о базовых принципах композиции.
Более подробно о композиции в фильмах можно почитать вот здесь.
Отличное видео о том, как работает композиция в кино.
Про фундаментальное правило близости
Книга «О языке композиции» Юрий Гордон
Untitled
Про значение форм в дизайне
Untitled
Чтобы понять значимость пустого пространство. Перформанс от пианиста.
Про контраст
Про адаптив и Mobile First
Статистика экранов
Можно показывать заказчикам и защищать своё мнение касательно адаптивов.
Руководство про сетки в дизайне интерфейсов
Исследование Креатив