что такое композиция в графическом дизайне
Разбираемся в законах композиции за 10 минут
Законы композиции пригодятся иллюстраторам, визуализаторам и дизайнерам. Чтобы узнать все самое необходимое, достаточно нашей статьи.
Любая дизайнерская работа, будь то иллюстрация, визуализация или
3D-сцена, начинается с построения композиции.
Связь между объектами
Построение композиции стоит начинать с распределения ролей задействованных объектов. Если каждый из них будет притягивать внимание в равной степени, то зритель просто растеряется и не поймет, чему посвящена картинка, и, скорее всего, посчитает ее неинтересной. Именно поэтому важно подчеркнуть главный объект визуализации и, уже отталкиваясь от него, строить композицию, пользуясь приемами привлечения внимания, о которых мы поговорим ниже.
Золотое сечение
Про принцип построения композиции на основе золотого сечения слышали даже те, кто не имеет ничего общего с миром искусства. Интересно, что он использовался еще древними египтянами при строительстве пирамид, хотя историки и спорят о том, насколько осознанно жители Древнего Египта применяли золотое сечение.
Первое упоминание принципа связывают с именем Евклида, который применил золотое сечение для построения правильного прямоугольника. В искусстве принцип получил широкое распространение начиная с Леонардо да Винчи — наверняка вы знаете его легендарный рисунок «Витрувианский человек», наглядно демонстрирующий связь этого принципа с пропорциями человеческого тела.
Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.
Типографика, композиция, стиль. Как дизайнеру развить три базовых навыка
Когда вы занимаетесь веб-дизайном, в ходе работы приходится принимать очень много разных решений: какой будет кнопка, каким будет текст, как будут расположены элементы. Чтобы принимать верные решения, нужно отточить три главных навыка хорошего веб-дизайнера.
Типографика
Первое и самое важное — типографика. Во многих случаях клиент не принимает дизайн именно из-за плохой работы со шрифтом. Дизайнер, который не умеет работать с типографикой, часто не понимает, почему его макет не принимают. Но что интересно, и заказчик часто не может четко сформулировать свои замечания, например, сказать: «Здесь межстрочное расстояние не такое. Здесь текст слишком широкий. Здесь шрифт неправильно выбран». Вместо этого клиент говорит: «Сделайте логотип побольше. Покрасьте все в красное». Естественно, никакая из этих правок не решает первоначальную проблему — типографику.
Как это исправить? Главное, что нужно понять — в дизайне есть невидимые вещи, которые важно научиться видеть. Давайте рассмотрим пример, в котором есть все ошибки типографики.
На этом изображении межстрочные расстояния отличаются друг от друга, или, как иногда говорят, «строчки скачут». Когда вы соблюдаете расстояние между базовыми линиями, на которых стоят буквы, то задаете вертикальный ритм.
Кроме базовых линий, есть еще x-line (высота строчных букв) и cap height (высота заглавных букв). По линиям, лежащим сверху на буквах, вы можете выравнивать текстовые элементы: например, относительно картинок, которые находятся рядом.
Линия выключки — еще одна невидимая воображаемая линия, которая должна быть ровной, иначе дизайн будет смотреться плохо.
Есть еще такое понятие, как кернинг. Это расстояние между буквами. Оно может быть очень маленьким, как между буквой «s» и буквой «i» на примере выше, или очень большим, как между буквами «d» и «e».
Но если оно бывает маленьким и большим, это означает, что где-то посередине есть идеальное расстояние — гармоничное, правильное, красивое, не вызывающее раздражения. И раз оно есть, это расстояние надо найти. В хороших шрифтах это уже сделано за вас.
Важно!
Букв достаточно, чтобы испортить весь дизайн
Как только дизайнер узнает о существовании кернинга, он часто начинает замечать ошибки в работе с ним по всему городу. Он смотрит на рекламные баннеры и вывески и задается вопросом, что за дизайнеры их делали, хотя буквально пять минут назад сам был таким дизайнером.
Итак, мы разобрали базовые понятия типографики, которые нужно обязательно выучить. Это и есть профессионализм — умение видеть невидимые вещи.
Композиция на сайте
Когда мы говорим о таких вещах, как дизайн, композиция и ритм, то у многих людей возникает ощущение, что дизайн — это креатив в чистом виде, не поддающийся никаким законам. Это не так. На самом деле есть определенные приемы, которые позволяют сделать композицию динамичной. Для этого дизайнеры используют атрибуты движения.
Не меньшей ошибкой при построении композиции будет использование цветового круга Иттена и прочей подобной ерунды, например, color.adobe.com. Дело в том, что подобные сервисы сделаны в отрыве от законов человеческого восприятия цветов, они слишком механистические. Картинку обрабатывают не глаза, а человеческий мозг. Именно мозг решает, что хорошо, а что плохо в дизайне.
Для подбора цветов продвинутые дизайнеры используют Dribbble.
Для построения композиции обычно используется правило золотого сечения (спираль Фибоначчи) и модульные сетки, однако это усложняет работу. Начинающему дизайнеру проще всего научиться выстраивать композицию с помощью метода оптических компенсаций.
При использовании этого метода дизайнеры проводят воображаемую линию (струну) и «нанизывают» на нее различные элементы: буквы, картинки и прочее.
На картинке справа дизайнер добавил дополнительный элемент «круг» и сгруппировал все элементы относительно фонового круга.
В результате правая иконка выглядит аккуратно — она оптически выровнена.
Атмосфера и стиль
Третий базовый навык веб-дизайнера — атмосфера и стиль. И здесь мы тоже используем атрибуты: например, атрибуты узнавания фирменного стиля. Если внимательно посмотреть на лучшие образцы фирменных стилей, то можно увидеть, что это скорее ограничения, а не то, какой должна быть вещь. Дизайнеры любят в качестве примера показывать логотип Coca-Cola как эталона стиля и атмосферы.
На примере Coca-Cola можно увидеть несколько атрибутов стиля. Это цвет, фирменная бутылка с «юбкой», определенный наклон линий, логотип. Благодаря этим атрибутам мы безошибочно узнаем Coca-Cola. И этот фирменный стиль уже «зашит» в головы большинства людей. В этом и есть суть создания на сайте атмосферы и стиля — использование уже сложившихся паттернов узнавания того или иного предмета, бренда, услуги.
Для хорошего веб-дизайнера нет ничего невозможного. Но на пути к вершинам профессии необходимо освоить базовые навыки, без которых не достичь истинного мастерства.
Дизайнер, тренер, евангелист компании Skillbox. Обучает дизайнеров с 2007 года.
Курс «Веб-дизайн с 0 до PRO»
Годовой практический курс для тех, кто хочет освоить веб-дизайн с самого начала с индивидуальным наставником, сделать отличное портфолио и получить первые заказы или стажировку в студии.
7 примеров работы с композицией в дизайне Милтона Глейзера
Он прославился на весь мир благодаря логотипу Нью-Йорка. Но самые интересные работы мастера мало известны широкой публике.
Логотип I love NY знаком, наверно, всем: простой слоган с чёрными буквами и красным сердечком.
Сам Милтон Глейзер говорил, что создание логотипа — одно из самых скучных дел в дизайне. Но именно благодаря символу Нью-Йорка широкой публике стало известно имя его создателя. Этот дизайнер — легенда американской поп-культуры и практически наш современник: он жил и работал до 2020 года. И большинство работ мастера не так просты, как «I love NY»: в них масса нестандартных образов, ярких цветов и увлекательных деталей.
Поэтому для любого дизайнера важна насмотренность. Оригинальные идеи и удачные композиционные решения не берутся из воздуха: это творческая переработка всего, что мы видим в природе, в быту или в чужой работе. Одна из главных фишек Глейзера — интересные композиционные решения. Давайте взглянем на несколько любопытных примеров его работ.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Открытая композиция: постер ликёра Campari
В открытой композиции элементы изображения выходят за границы заданного пространства. В этом постере рекламируемая бутылка ликёра не уместилась в рамки. Это интересный приём, потому что главный объект, на котором должно быть сосредоточено всё внимание, показан не целиком, а фрагментарно.
Композиция с основным направлением линий — от центра. Как правило, строится несколько композиционных узлов, используется ритм. В открытой (свободной) композиции взгляд не фокусируется на центре, а свободно уходит за пределы композиции, домысливая продолжение.
При этом бутылка явно главная на изображении: она вынесена на передний план, показана крупно и с большим количеством деталей. Взгляд прикован к части бутылки, у которой видно только дно и название марки, и хочется увидеть её полностью.
Это нестандартный приём для рекламы: Глейзер создаёт интригу, не демонстрируя продукт целиком.
Иерархия элементов: реклама музея голографии
В любой композиции, состоящей из нескольких элементов, есть главные и второстепенные объекты: это создаёт порядок и помогает зрителю сориентироваться в изображении. Чем больше элементов, тем сложнее соблюдать визуальную иерархию. Этим и интересна данная работа Глейзера: здесь очень много надписей, разных по значимости, и все они на своём месте.
Название выставки выделено нарисованными объёмными буквами, менее выражены стрелки-указатели. Адрес музея, даты и информация о содержании выставки напечатаны одинаковым шрифтом и расположены на листе последовательно. Наконец, самые мелкие элементы внизу — это список личностей, чьи портреты представлены на выставке. В этой афише легко ориентироваться даже при беглом взгляде.
Голография создаёт реалистичные объёмные изображения, и Глейзер сделал для рекламы этого музея объёмные буквы, чтобы пробудить интерес к выставке. При этом композиция не перегружена сложными формами и всю информацию на плакате легко воспринимать.
Использование фона: постер Боба Дилана
Здесь Глейзер использует негативное пространство: лицо изображено с помощью чёрного фона, который продолжается и за предполагаемыми пределами фигуры. Если бы на плакате не было разноцветной прически, мы, вероятно, не сразу различили бы силуэт лица.
Негативное пространство — сильный приём, когда нужно сделать композицию максимально лаконичной и не отвлекать внимание от главного. В данном случае главное — это причёска. Обобщённое изображение лица и переход фигуры в чёрный фон позволяют не перегружать плакат ненужными деталями.
Делая акцент на причёске, Глейзер демонстрирует сценический образ артиста, а использование ярких цветов характеризует музыку Дилана. При этом дизайнер не обращает внимания на лицо. Можно предположить, что в этом есть подтекст: мы можем ничего не знать о личности музыканта, а воспринимаем только его искусство.
Ритм: плакат для общества велосипедистов
Ритм — это равномерное чередование элементов, которое помогает упорядочить объекты на изображении. И на этом плакате мы видим чередование окружностей — крутящиеся колёса велосипеда. Обратите внимание, что Глейзер не просто повторяет одно и то же изображение колеса десятки раз: рисунок незначительно, но постоянно меняется. Элементы, выпадающие из общего ритма, привлекают внимание и делают картинку нескучной.
Работа символизирует интенсивное городское движение, его ритм. Повторяющиеся круги показывают колёса так, будто велосипед перемещается по постеру, и в этом есть динамика. Также здесь используются цвета светофора, они дополняют картину городского трафика.
Повторяющиеся мотивы: логотип студии звукозаписи
Тут изображен одновременно и овощ, и виниловый диск с иглой. Знак смотрится вполне современно и чем-то напоминает экспресс-дизайн Артемия Лебедева. Но давайте посмотрим на его форму: в основе окружность, а ещё есть острые углы в чёрном треугольнике. Те же самые формы повторены и в шрифте: буква O нарочито округлая, а в других акцентированы углы.
Органично связать типографику с изображением в логотипе — это частая проблема в дизайне. Милтон Глейзер решил её с помощью повторения форм.
Очевидно, что это не лейбл классической музыки или тяжёлого рока. Простые формы и яркие цвета в логотипе указывают на лёгкую и, возможно, экспериментальную музыку. И томат-диск, и шрифт этому соответствуют.
Шрифтовая композиция: проект против пандемии Covid-19
Любая надпись — это тоже композиция. Иногда работа дизайнера заключается в выборе шрифта и межбуквенных интервалов; в иных случаях текст стилизуют, изменяя форму, размеры и пропорции букв: именно это мы наблюдаем в данной работе.
Здесь использованы буквы с разными шрифтами — с засечками и без. Некоторые нарисованы — как g; у других изменены пропорции — как у T в середине слова. Буквенные знаки выбраны таким образом, чтобы их можно было соединить вместе, сохраняя читаемость.
Визуально эта картинка выражает месседж объединения людей, но и само слово написано разборчиво — а это главное, что нужно сохранить в шрифтовой композиции.
В хорошем дизайне каждый элемент на своём месте: правила композиции позволяют вести взгляд зрителя по выбранной дизайнером траектории. Хотите начать заниматься графическим дизайном под руководством опытных преподавателей? Записывайтесь на наш курс.
ТОП-11 основных правил композиции в веб-дизайне
Правила и лайфхаки, которые пригодятся для создания композиции в веб-дизайне. Проверено в проектах, берите на вооружение. 🔥👇
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Июн 12 · 8 мин читать
Композиция — это схема построения графического произведения, например, страницы сайта. Композиция задает расположение материалов в логическом порядке, при котором дизайн становится цельным и обретает внутренний смысл.
Сегодня поделюсь практическими советами и фишками, которые пригодятся при построении композиции в веб-дизайне.
Содержание
Что такое композиция, какая бывает и зачем она нужна?
Композиция — такое положение объектов и элементов, когда все они гармоничны друг с другом и своим окружением.
Композиция бывает двух типов: симметричная и ассиметричная (динамическая):
Композиция делает дизайн выразительнее – это инструмент управления вниманием и чувством зрителя.
Лучшие практики в работы с композицией
Разобрала 11 правил композиции. Результаты исследования собрала в практические советы по созданию продуманного дизайна. Держите 👇
1. Акцентируйте внимание на герое в кадре
В основе композиции — история о герое. Ценность молотка не в молотке, а в его способности забивать гвозди и давать ощущение надежного инструмента, достойного настоящего мастера. Чем больше ценности раскрывает история на странице сайта, тем выше вероятность, что клиент зажжется идеей попробовать продукт.
В примере бренд OMUT — производство украшений для трансформации образа. OMUT помогает почувствовать себя увереннее, когда это нужно больше всего, он может служить и броней, и вдохновением 🖤🔗⚔️ Именно об этом кульминация о чувствах девушки в первом экране.
2. Поддержите историю второстепенной графикой
Для создания второстепенной графики важно разделить историю на три нити повествования: функциональная, социальная, эмоциональная. Именно на этом уровне происходит отсылка к известной методологии разработки продуктов и услуг Jobs To Be Done.
Разберем на примере.
Функциональная. DScribe — это SaaS-сервис автоматизации маркетинга для риэлторов с AI под капотом. Одна из фишек сервиса — это робот-помощник по созданию рекламных креативов с высокой конверсией для таргета Facebook Ads. Герой в данном случае — интерфейс.
Социальная. Интерфейс как супергерой приходит на помощь риэлторам. Суперсила DScribe — безмерно расширять вселенную контактов потенциальных клиентов для риэлторов. А еще DScribe — это целый мир, который объединяет риэлторов и желающих приобрести и продать недвижимость.
Эмоциональная. DScribe призывает переключиться на другие принципы работы и стать увереннее и успешнее в деле продаж недвижимости. Это история об эмоциональной пользе.
Итого о логике выбора ключевых и второстепенных графических решений:
3. Направляйте взгляд читателя с помощью намеков из сюжетной графики и анимации
В дизайне вы можете опираться на естественные привычки считывания информация, например, слева направо, или создать дополнительные визуальные тропы для скользящего взгляда. Важно, чтобы эти тропы были частью общей дизайн-концепции.
Кроме того, что дополнительные визуальные тропы призваны провести читателя через поворотные моменты истории, они также повышают пропозициональную плотность, а значит влияют на увлеченность материалом.
Пропозициональная плотность — количество информации, передаваемой объектом или средой из расчета на один элемент. Высокая пропозициональная плотность является ключевым фактором в создании интересных и запоминающихся дизайн-решений. О принципе пропозициональной плотности я впервые узнала в книге «Универсальные принципы дизайна» →.
В дизайн-концепции принцип реализован с помощью графической нити, которая намекает на важность создания единой дизайн-концепции для всего дизайн-пространства.
4. Примените контраст и нюанс
Масштаб и графические нюансы — это инструменты захвата внимания. Принцип масштаба помогает усилить значимость объекта в кадре и создают контакт с читателем, а нюанс привлекает взгляд к особенной нотке, которая и делает героя запоминающимся среди других.
На примере заметно, как эти принципы слаженно работают на создание особенного статуса вокруг продукта. Огромное кресло в кадре, даже не помещается целиком, как будто мы подошли ближе рассмотреть его нюансы его текстуры и представить свои ощущение от отдыха в его объятиях.
5. Захватите внимание асимметрией и задайте динамику, или примените симметрию и создайте пространство для сосредоточения
Асимметричное равновесие более динамично и интересно. Ассиметрия вызывает ощущение современности, движения, жизни и энергии. Асимметричного равновесия сложнее достичь, потому что отношения между элементами более сложны, но, с другой стороны, оно оставляет больше простора для творчества.
«Используя асимметричный баланс, дизайнер вызывает у аудитории заинтересованность. Удовольствие от рассматривания асимметричной композиции частично связано с преодолением сопротивления, и зритель при этом, осознанно или нет, получает некоторое эстетическое удовлетворение.»
Пол Рэнд, графический дизайнер
6. Создайте точку фокусировки
Хорошее дизайнерское решение имеет свой центр или фокус. Размещая элементы в кадре, решите, какой из них зрители должны заметить в первую очередь, какой — во вторую, третью — так у вас получится схема управления вниманием.
Если сделать каждый элемент одинаково контрастным, начнется драка за внимание и в итоге ни один из них не выделится. Когда нет приоритета, все объекты будут говорить одновременно и одинаково громко, но не будет слышно ни одного из них.
Дополнительные точки фокуса также являются контрастными, только не настолько сильно, как главный элемент, который можно назвать самой доминирующей фокусной точкой. Как и с доминирующим элементом, вы можете создать дополнительные точки фокуса, придав им больше визуального веса.
Например, в работе мы сначала фокусируемся на фотографии и взгляде – это главная точка фокуса, затем уже рассматриваем заголовок, линию, кнопку, бейджик и штампик – это дополнительные точки фокуса.
7. Покажите действие в разгар событий на сцене исходя из истории
Помогите вашим потенциальным клиентам ощутить эффект от работы с продуктом/услугой, представить каково это – работать с вами — покажите, в какой момент и в какой ситуации ваш сервис особенно ценен. Здесь пригодятся фотографии ситуаций с продуктом, а может быть даже коллаж или иллюстрация, раскрывающие продукт в разгар захватывающей и ценной работы. Стремитесь разжечь желание попробовать.
8. Обеспечьте узнавание и удивление с помощью ритма и графической рифмы
Рифма — это созвучие графических объектов — основа фирменного стиля. Именно благодаря рифме мы видим, что перед нами объекты из одной вселенной.
Ритм — это чередование акцентов и пауз. Ритм помогает нам каждый раз испытывать чувство «узнавания» и следом настает ощущение наслаждения — так работает наш мозг.
В примере мы можем заметить рифму графических пятен, поэтому на каком бы экране страницы вы ни оказались, происходит «узнавание» элементов бренд-айдентики и мы наслаждаемся происходящим.
9. Привлеките внимание к главному с помощью свободного пространства
Белое пространство (или контрформа) — это область между элементами дизайна. Это также пространство внутри самих элементов, включая промежутки между типографическими знаками.
Вопреки своему названию, белое пространство не обязательно белое. Это может быть какой угодно цвет, текстура, паттерн и даже фоновое изображение. Главное, чтобы на этом фоне хорошо считывался контент.
Свободное пространство — это элемент дизайна, как паузы между нотами, которые придают выразительность джазовым композициям. Без этих неслышных форм и узоров музыка превратилась бы в невыносимый шум. О силе белого пространства →
10. Организуйте пространство с помощью модульной сетки
Модуль – единица организации пространства, инструмент управления композицией. Модульная сетка настраивает расположение и пропорции объектов на экране и приводит дизайн к гармонии.
Дизайн как запоминающаяся композиция. Объекты дизайна как ноты, а сетка и модуль — линейки и нотный стан.
11. Проверьте смыслы через гештальт-принципы
Идея гештальта состоит в том, что «целое отличается от суммы его частей». Это значит, что при объединении частей образуется целое, которое имеет новое измерение существования — новое значение. Принципы гештальта: близость, сходство, завершенность, непрерывность и фигура-фон.
Лучше всего принципы гештальта заметны на примере работы Пола Рэнда Eye-Bee-M Rebus Logo.
С помощью принципов гештальта вы можете сделать ваше визуальное сообщение богаче по смыслам — здесь и кроется простор для творчества.
Полезное на тему:
Вывод и рекомендации
Многие правила берут начало из масштабных исследований и наблюдений опытных дизайнеров. Но главная их цель — не сковывать вас, а ускорять достижение нормы и открывать новые возможности для творческих поисков и безграничного удовлетворения потребностей клиентов. Правила и советы в статье скорее являются общей рекомендацией, нежели строгим руководством к действию.
Также напоминаю, что больше практики с композицией в сайтах, мобильных, веб-приложениях и приложениях для смарт-часов вы можете получить на Breezzly.