ПрограммыКонтакты

Курсы по теме

Скачать полезные материалы

12.09.2023

11 мин

Правила композиции. Создаем первое впечатление от продукта через дизайн

Автор

Евгения Стапарь

Поделиться

Содержание

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

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

Что такое композиция в дизайне

Композиция в дизайне — это структура изображения. Благодаря ей составляющие иллюстрации располагаются гармонично по отношению друг к другу и легко считываются зрителем. Для привлечения внимания графические дизайнеры расставляют на картинках акценты. Так оказывается прямое воздействие на человека. Эти приемы направляют взгляд зрителя в нужном направлении, полно и точно передают идею и эмоции.

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

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

Композиция в дизайне — это не отдельные принципы построения элементов. Это их связь в плоскости и пространстве. От организации каждого элемента дизайна и будет сформировано первое впечатление. Такие правила работают на подсознании.

Особенности зрительного восприятия

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

Наиболее четкое восприятие предметов обеспечивает зона центрального зрения. 18° — зона мгновенного зрения. Этот угол обзора соответствует тоже хорошему восприятию, но в течение ограниченного времени наблюдения. Если сконцентрироваться, то зона эффективной видимости находится при угле обзора в 30°. Все, что более — область расплывчатого восприятия.

Особенности зрительного восприятия играют большое значение при разработке интерфейса:

чувствительность глаз в поле зрения резко снижается от центра к периферии

периферическим зрением лучше воспринимаются подвижные объекты

глаза могут одновременно хорошо воспринимать не более 7 объектов.


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

Получите подборку файлов от Московского Института Технологий и Управления

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

Как прокачать свои скиллы. 5 советов графическому дизайнеру.pdf

Отправляя заявку, Вы соглашаетесь с политикой конфиденциальности и условиями обработки персональных данных
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAMAAAAC2hU0AAAAJ1BMVEVMaXHHzv/K0f/M0//Hzf/a2v7H0f/AyP/Byf7ByP/Byf/M0//V3f9xXKgzAAAAC3RSTlMA/kSCUwdqoO4hx7bPwFgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAqSURBVHicY2DAAKzMzGwsDAwMTDw8PNwgmpGREUYzgsW5uUE0JzsXByMADosApcEMAPQAAAAASUVORK5CYII=

Объединение элементов

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

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

Активные зоны

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

Согласно другой модели — диаграмме Гутенберга, взгляд зрителя перемещается от левого угла сверху к правому снизу, при этом проходя через центральную часть иллюстрации.
infografika_5118ce90b0.jpg
С левого верхнего угла мы начинаем читать книгу подсознательно. В этой части дизайнеры размещают логотип компании и другую информацию. В поле зрения человека следующая зона — правая часть. Она классически используется для отображения контактов или поисковой строки в дизайне сайта. По правилам композиции важно расставлять акценты в нужных местах.
nachat-polzovatsya-ya-pochtoy.jpg

Призыв к покупке продукта в правом верхнем углу страницы

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

Правило третей

Правило третей и золотое сечение в информационном дизайне применяют редко. Оно подходит для маркетинговых целей. Суть первого правила заключается в том, что активные для восприятия зрителя точки находятся на пересечении линий, которые разделяют пространство прямоугольника на 9 равных частей.
camera.jpg

Используя сетку при съемке с мобильного телефона, фотограф понимает, как взять ракурс и расположить все элементы

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

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

Центры композиции

Главная задача дизайнера — грамотное расположение графических элементов, которые несут нужный смысл. Те участки, на которые обращает внимание посетитель, называют фокальными точками.



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

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

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

Чтобы выделить центр, художники используют различные приемы

1

Контраст за счет использования светлых и темных тонов

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

2

Оси, которые делают акцент на композиционном центре и размещаются в любом направлении, за исключением прямого угла

3

Размерность

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

4

Несколько планов

На изображении может быть множество объектов. Многоплановость передает глубину пространства. Для этого дизайнеры выводят на первый план композиционный центр, все остальные объекты располагают на удалении от него. Того же эффекта можно добиться, если перенести композиционный центр на задний план. Сделать разницу контрастной и яркой поможет размытие изображения

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

Линии

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

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

Восходящая диагональ берет свое начало в нижнем левом углу и создает противоположное ощущение — замедления. При построении сюжета дизайнеры учитывают тот факт, что движение взгляда справа налево происходит медленнее, чем наоборот. Яркий пример, если изобразить альпиниста, стремящегося покорить вершину по нисходящей диагонали, то он будет выглядеть неуверенно, будто вот вот упадет.
everest-portada-scaled.jpg

Движение альпиниста по нисходящей диагонали транслирует чувство тревоги и неуверенности

Если же сложить сюжет на восходящей диагонали, то герой будет выглядеть смелым и целеустремленным.
stunning-shot-of-a-young-man-climbing-up-a-cliff-on-a-cold-and-foggy-day.jpg

Движение альпиниста по нисходящей диагонали транслирует чувство тревоги и неуверенности

Баланс

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

Чтобы добиться баланса, придерживаются определенных правил и выбирают подходящий его вид

1

Симметричный

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

2

Асимметричный

Динамический баланс тем и интересен, что включает в работу воображение. При отсутствии равновесия мы инстинктивно начинаем искать что-то интересное. В этот самый момент дизайнеры привлекают внимание к малозаметной части страницы. Если правильно расставить акценты, то взгляд пользователя точно зацепится за них. Это может быть кликбейтный заголовок в центре или призыв к действию. Чем ярче выражена асимметрия, тем больше интереса возникает у пользователя. Такая картинка буквально приковывает взгляд. Но здесь важно все делать в меру. Эксцентрика не всегда воспринимается хорошо

3

Радиальный

Для этого типа баланса характерно расхождение визуальных составляющих из одной центральной точки

4

Мозаичный

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

Секреты визуального равновесия
Чтобы сбалансировать дизайн, обращают внимание на следующие рекомендации

крупные предметы имеют больший вес

фигуры неправильной формы выглядят визуально легче нежели правильной

холодные тона легче теплых

вес темных объектов больше светлых

визуальный вес объекта тем больше, чем дальше он от центральной части


Использование в дизайне симметрии показывает профессионализм и устойчивость. Асимметрия еще больше привлекает внимание зрителя, демонстрирует креативность и индивидуальный подход.

Ритм

Ритм в композиции — это правильное и организованное движение.

В дизайне существует 3 главных типа ритма

1

Регулярный

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

2

Плавный

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

3

Прогрессирующий

Его отличительная черта — последовательная смена форм или размера фигурами. Смена интервалов создает иллюзию движения.

proud-tiger-logo-template.jpg

Плавный ритм на примере логотипа маркетингового агентства

Program-Category__1

Курс по теме

Графический дизайн

Цвет

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

По всем канонам дизайна яркий акцент занимает 10%, главный — 60%, а 30% — поддерживающий. Благодаря использованию правил комплементарной цветовой схемы в композиции удается добиться резкого контраста между отдельными элементами. В итоге картинка получается яркой и нескучной. Помимо цвета на общую картинку влияет и насыщенность.

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

Важно! Мы настоятельно рекомендуем ознакомиться с нашими курсами, где тема данной статьи раскрывается более подробно:

Графический дизайнОсвойте профессию графического дизайнера и начните быстрый старт в новой карьере
*В этом месяце мы подготовили для вас скидку 30% на все курсы! Спешите записаться на обучение, ведь количество мест ограничено

Поделиться