На связи школа GROW! Мы обучаем дизайн-профессиям, делаем это эффективно, быстро и структурно. Наши обучения - это про качество, максимальную включённость в каждого ученика и только нужные знания для развития в сфере.
- Мы создали бесплатный канал с регулярной пользой для веб-дизайнеров и фрилансеров
- За последний год выпустили 1.200+ дизайнеров в школе G.R.O.W study
- Лично создали и запустили в работу 200+ сайтов на Таплинк и готовы передавать свой опыт вам!
Что такое композиция простыми словами?
Композиция - это определённое расположение объектов и элементов в заданной плоскости.
Под «плоскостью» подразумевается некоторая ограниченная область – словно кадр или холст от картины, область с четкими границами, началом и концом. Все объекты, которые мы размещаем внутри этой области, и задают нашу композицию.
Зачем нужна композиция?
Композиция призвана управлять вниманием пользователя и расставлять акценты в дизайне.
С ее помощью мы направляем взгляд туда, куда нужно именно нам, тем самым создавая условия, при которых весь важный контент будет замечен и изучен.
Композиция веб-дизайна = маршрутная карта, которую дизайнер прокладывает для пользователя, чтобы потребление контента было легким и не требовало лишних усилий.
Человеческий мозг стремится находить визуальные закономерности, видеть прослеживаемую логику и структуру, объединяя объекты в группы — так ему проще перерабатывать информацию, не напрягаясь.
Интересно, что подобные закономерности мы ищем интуитивно и ненамеренно. За доли секунд выявляем самое важное, вторичное и находим взаимодействие между объектами.
Какой бывает композиция?
Композицию принято делить по нескольким крупным группам:
- Статичная и динамичная композиция;
- Симметричная и асимметричная;
- Закрытая и открытая.
Статичная композиция
Статичная композиция создает впечатление неподвижности, словно дизайн замер.
Изучая такой дизайн, не возникает желания двигаться дальше, скролить контент и совершать какие-либо еще действия.
Мы сразу понимаем, какое целевое действие ожидает нас, и его хочется совершить. По ощущениям это визуально устойчивый и сбалансированный дизайн.
Вся композиция строится вокруг одного ключевого действия, и все внимание сконцентрировано на один объект, чаще всего на кнопке. Никакого намека на движение здесь нет.
Динамичная композиция
Динамичная композиция создаёт ощущение движения и интерактивности, будто что-то происходит.
Добиться такого эффекта можно не только анимацией, но и грамотным расположением элементов.
Динамики можно достичь с помощью диагональных линий, смещения объектов и ассиметрии, частичного скрытия элементов (как будто они появляются или прячутся), эффекта скорости – например, частичному «смазыванию» объектов.
Расположив фотографию под углом, создается иллюзия, что элементы «скатываться» или движутся, что, как раз таки, передает пользователю ощущение активности.
Симметричная композиция
Симметричная композиция - это та композиция, где вся масса элементов распределена на рабочей области равномерно, есть ощущение баланса.
Идеальный вид симметричной композиции - это тот, где элементы находятся в зеркальном виде друг от друга, но это вовсе не обязательно.
Достигнуть симметрии можно просто грамотно распределяя акценты по всей рабочей области.
Асимметричная композиция
Асимметричная композиция - это композиция, которая создает ощущение некоторого «перекоса» в одну из сторон.
Такая визуальная иллюзия достигается за счет использования более ярких цветов, крупных форм, изображений, декоративных элементов и других акцентов.
Важно понимать: асимметрия ≠ отсутствие баланса.
Хотя элементы будто смещены, в композиции все равно прослеживается логика. Вести взгляд по контенту и изучать его — комфортно.
Нет ощущения «хаоса» и желания метаться из стороны в сторону в попытках изучать материал: мы четко видим главный объект и второстепенные.
Закрытая композиция
Закрытая композиция подразумевает запечатанные, закрытые углы дизайна. Она создает ощущение некой запертости, четко ограничивая область нашего внимания, то есть нашему взгляду некуда «утекать».
Закрытая композиция может быть не обязательно по всем четырем углам, — здесь есть вариативность.
Важно пробовать разные варианты, чтобы достичь нужного эффекта и направлять внимание пользователя в правильной последовательности.
Открытая композиция
Открытая композиция дает ощущение такого полета, размаха.
Здесь все углы рабочей области открыты, создается эффект большого пространства.
Все озвученные виды композиций вы можете сочетать между собой, учитывая специфику вашего проекта и поставленные задачи.
Вне зависимости от того, какую комбинацию вы выбрали, — помните, что пользователю должно быть интуитивно понятно куда направить свое внимание и что делать дальше.
Создавая контент, вы уже заранее должны знать, как будут двигаться глаза человека, который его будет его изучать.
Именно вы задаете правила игры!
Что нам даёт знание о видах композиции?
Помимо того, что мы начинаем управлять вниманием пользователя с помощью композиции, мы еще можем задавать определенную атмосферу.
Например, закрытая статичная композиция создает ощущение четкого и структурного дизайна, который немного давит. Такой дизайн подойдет для продуктов с сильным позиционированием или же для оформления контента на какие-то социальные важные темы, чтобы добавить остроты от изучения этого контента.
Наоборот, открытая динамичная композиция формирует чувство легкости, воздушности и доброжелательности, создавая более свободное и расслабленное ощущение от дизайна.
Безусловно, настроение проекта формируется не только за счет композиции — важны цвета, типографика, tone of voice проекта и т.д. Однако именно композиция является своеобразным скелетом проекта, на который мы нанизываем все остальные элементы.
За счёт чего мы выстраиваем композицию?
- Текст;
- Фото;
- Векторные и графические элементы;
- Негативное пространство (воздух в дизайне).
За счет удачной комбинации всех элементов композиции получается уникальный дизайн, который, прежде всего, удобно изучать, а также хочется рассматривать, запоминать.
Именно с помощью композиции вы управляете вниманием пользователя. Вы заранее понимаете, куда он посмотрит первым, зайдя на ваш сайт.
Достигнуть этого эффекта можно с помощью акцентного выделения некоторых элементов, например, по размеру, по цвету, форме и прочим решениям, которые помогают выделить ключевой элемент и обратить на него внимание.
А если ты не хочешь тратить недели на поиск информации по крупицам и хочешь начать зарабатывать на новой профессии уже через месяц - переходи в наш ТГ-канал и забирай много полезной информации!
Подписывайся на наши другие соц.сети:
ТГ-канал
YouTube-канал
Пинтерест
Инстаграм*
*принадлежит компании Meta, признанной экстремистской организацией и запрещенной на территории РФ