Основы композиции в графическом дизайне
В вашем дизайне могут быть использованы самые красивые графические элементы в мире, но если в нем нет правильно композиции, все напрасно.
Таким образом, можно с уверенностью сказать, что композиция в веб-дизайне крайне важна. Что собой представляет композиция? Говоря простыми словами, это то, как отдельные элементы веб-дизайна формируют общую картину проекта.
Правильная композиция означает, что вы расположили, распределили, согласовали и скомпилировали ваш проект таким образом, чтобы он не только хорошо выглядел, но и являлся функциональным и эффективным. Итак, давайте рассмотрим несколько приемов для создания гармоничной композиции в вашем веб-дизайне.
Определите фокус
Ключевой элемент любой хорошей композиции – правильно направить (сфокусировать) взгляд пользователя на самые важные элементы дизайна.
При выборе точки фокуса помните, что главная цель вашего дизайна – «общение» пользователя с сайтом. Правильный выбор фокуса определяет эффективность такого общения.
Существуют некоторые методы для определения фокуса в дизайне, например, масштаб, контраст и т.д. Эти методы мы разберем позже. Сейчас проанализируем пример.
Это работа Мэтью Метца (Matthew Metz) для ретейлера модной одежды Nordstrom, поэтому фокус находится на модели и ее одежде. Поэтому она была помещена в центр, а оранжевая окружность размещена так, что выдвигает на первый план и привлекает внимание к ее лицу, а потом к ее наряду. Кроме этого, на изображении присутствуют белый ведущие линии, которые направляют взгляд пользователя к текстовой информации внизу.
Также и в следующем примере дизайна. Фокус направлен на человека в центре. Это достигается не только расположением персонажа в центр, но и с помощью «обрамления» его графикой, состоящей из нарисованных от руки изображений.
Ведите взгляд с помощью направляющих линий
Когда вы хотите, чтобы человек посмотрел куда-либо, вы показываете рукой или пальцем. В случае дизайна, для этого используются направляющие линии и формы. Взгляните, как это используется в примере ниже.
Ведущие (направляющие) линии также могут вести вас к разным уровням информации. Позиционирую и изменяя вид и форму направляющих линий, вы можете создавать иерархию целей для взгляда пользователя. Пример такого приема ниже.
Конечно, не каждый дизайн, который вы создаете имеет такие очевидные направляющие линии. Их использование достигается соединением или совмещением разных элементов. Примером этого способа является следующий постер, который использует линию левой руки человека, чтобы направить взгляд от логотипа к человеку и дальше на нижнюю часть постера.
Масштаб и иерархия в композиции
Масштаб и иерархия – это фундаментальные элементы, которые действительно могут «создать» или «похоронить» весь ваш дизайн. Поэтому очень важно их контролировать, чтобы получить хорошую композицию.
Иерархия – это расположение элементов в дизайне, визуально характеризующее их значимость. К примеру, более важные элементы делаются больше и иногда ярче, чем второстепенные. Иерархия имеет огромное значение особенно, когда речь идет о типографике.
Масштаб часто используют, показать иерархию, направляя внимание на важные элементы, таким образом обозначая их важность в передаче информации. Масштаб также используется для передачи вашему дизайну пропорции и чувства размера. Вы можете создавать элементы невероятно подробными, запутанными и крошечными или же большими и общими.
Например, постер ниже использует уменьшенные в масштабе силуэты двух людей, чтобы передать грандиозность вида напротив них.
Используя контраст масштабов элементов, вы можете создавать разные эффекты.
Баланс элементов
Баланс – это важная вещь во многих отношениях. И ваши проекты – не исключение.
Но как же найти этот совершенный баланс в наших проектах? Для этого рассмотрим два общих типа баланса.
Симметричный баланс. Создает симметрию в проекте. Располагая важные элементы с права налево, с верху вниз, вы создаете правильное чувство баланса у пользователя.
Асимметричный баланс достигается пропорциональным рассеиванием и масштабированием элементов.
В примере сверху, три центральные окружности являются самыми крупными в дизайне. Но они сбалансированы по средствам использования правильной типографики, направляющих линий и небольшой, но четко прорисованной окружности в левом нижнем углу.
Хорошим способом создания асимметричного баланса является представление, что каждый элемент имеет реальный вес. Маленькие объекты весят меньше, большие наоборот. Также можно представлять, что на вес влияет четкость текстуры объекта (более четкие весят больше). Таким образом, располагая элементы, чтобы они не перевешивали друг друга.
Используйте элементы, которые дополняют друг друга.
Вы слышали о дополнительных цветах в веб-дизайне? Как на счет дополнительных элементов?
Хорошая и эффективная композиция достигается, когда каждый элемент дополняет какой-либо другой, создавая общую картину. Распространенной ошибкой в композиции является выбор не подходящих друг другу изображений. Поэтому используя несколько изображений в композиции, стремитесь к тому, чтобы они сочетались. Для этого необходимо следовать нескольким советам
- Используйте фото из одной фотосессии;
- Окрашивайте ваши фотографии в один тон;
- Используйте фотографии, сделанные одним способом.
Увеличьте (уменьшите) контрастность
Контраст невероятно полезный инструмент обозначения важности элементов вашего веб-дизайна. Увеличивая контрастность или используя контрастный цвет, вы можете поставить элемент на передний план или же «спрятать» его.
Оставляйте пустое пространство в проекте
Пустое пространство в дизайне, если оно используется правильно, может помочь повысить «четкость» дизайна и улучшить общий вид, уравновешивая более сложные и оживленные элементы дизайна.
Вот пара способов, как использовать пустое пространство в проекте:
- Уменьшите масштаб графических элементов;
- Не заполняйте все пространство контентом.
Выравнивание элементов
Когда создаете композицию элементов в дизайне, никогда нельзя просто бросать все их сразу на страницу, потому что выравнивание элементов – это быстрый и простой способ превратить дизайн из посредственного в шикарный.
Выравнивание элементов позволяет создать логический порядок в веб-дизайне, который распределит множество элементов.
Основы композиции в графическом дизайне включают в себя множество аспектов, учитывая которые можно добиться прекрасных результатов.
Источник
Композиция в графическом дизайне
Композиция в графическом дизайне — объединение всех элементов (изображений, текста и декоративных деталей) в единое целое, позволяющее наиболее точно передать идею, то есть, выделить ключевые сюжетные линии, передать необходимое настроение и соблюсти при этом гармонию.
Компьютерная графика — современное направление художественной деятельности — относится к области графического дизайна. Результат деятельности графического дизайнера должен быть не только красив, но и практичен.
Компьютерная графика предполагает две составные части: художественную и техническую. К первой относятся замысел (идея) и эстетика, которая определяется композицией, цветовым решением и шрифтовым оформлением.
Композиция в графическом дизайне — объединение всех элементов (изображений, текста и декоративных деталей) в единое целое, позволяющее наиболее точно передать идею, то есть, выделить ключевые сюжетные линии, передать необходимое настроение и соблюсти при этом гармонию. В композиции каждый элемент подчиняется общей художественной (образной) идее.
Удачное дизайнерское решение невозможно без соблюдения некоторых принципов композиции. Следование им не гарантирует автоматического успеха, но дает указание, в какую сторону следовать. Рассмотрим только самые общие принципы и правила композиции.
· Единство стиля достигается тем, что все элементы не противоречат друг другу, а имеют ту или иную стилистическую близость. Этот принцип композиции означает самый тщательный отбор элементов и проверку их на соответствие друг другу. Отдельная деталь сама по себе может быть очень удачной, но если она не соответствует композиции, то такую деталь нельзя использовать (или придется изменять всю композицию и замысел целиком).
· Ритм — чередование элементов с определенной и закономерной последовательностью. Ритм задает темп и последовательность восприятия графического произведения. Максимальный ритмический рисунок присущ орнаментам, для которых характерно равномерное следование элементов друг за другом. Достаточно заметен ритм строк и абзацев текста. Дизайнер должен всегда продумывать ритмическое построение изображения, страницы или даже всего издания в целом.
· Контраст. Основной принцип композиции. Контраст — это резкое различие однотипных элементов композиции. Не считается контрастом круглое и красное, хотя между ними существует различие. В графическом произведении контраст может основываться на различии:
o форм (квадратной и круглой),
o размеров (длинный и короткий, большой и маленький)
o направления (вертикального и горизонтального, прямого и наклонного),
o цвета (черного и белого, цветного и серого, светлого и темного, теплого и холодного) и пр.
· Нюанс — это ослабленный контраст, который играет роль оттенка в различиях основного контраста. Главный контраст требует развития, которое реализуется в нюансе. Если основной контраст строится, например, на крупном (заголовок) и мелком (основной текст) шрифтах, то уместно использовать еще один размер шрифта, который слегка отличается от основного, для выделения важных абзацев. Он и подчеркнет основной контраст и сохранит единство стиля.
Необходимо рассмотреть некоторые правила композиции, вытекающие из основных принципов (единства стиля, контраста, нюанса и ритма).
· Уместность элементов. Из принципа единства стиля следует уместность, которой следует руководствоваться при выборе элементов. Удачный рисунок или декоративный элемент могут оказаться «чужими» в конкретной композиции. Уместность исходит прежде всего из назначения графического произведения и касается всех элементов дизайна (иллюстраций, цвета и шрифта). Для официального документа предпочтительны сдержанные, строгие цветовые соотношения, а для рекламного буклета вполне допустимо цветовое буйство. Выбор шрифта и его разнообразие также требует учета цели документа и его аудитории.
· Простота решения. Из принципа единого контраста следует достаточно трудное правило, которое требует от дизайнера значительных сил для борьбы с собственной фантазией и возможностями современных компьютерных технологий. Правило простоты требует максимального ограничения в средствах выразительности и неукоснительного следования главной идее. У этого правила два аспекта:
o Во-первых, дизайн, как правило, должен определяться единственным контрастом. Например, если основной контраст строится на крупном и мелком шрифте, то не стоит добавлять контраст по цвету. Контраст «работает» только тогда, когда он ясно читается. А множество контрастов взаимно гасят друг друга.
o Во-вторых, дизайн должен быть «прозрачен», то есть зрителю умело преподносится содержание, а не обилие технических приемов.
· Внимание к деталям. Самый тщательный отбор деталей и строгое отношение к их размещению — одно из руководящих правил. Коварство мелких деталей состоит в том, что незамеченная опечатка, неравномерные отступы и другие «мелочи» могут испортить в целом удачно решенную композицию.
· Пропорциональность — это четкость замысла и точность исполнения, когда каждый элемент занимает свое соразмерное место. Достижение пропорциональности — конечный этап работы над графической композицией. Показателем пропорциональности является ситуация, когда нельзя изменить размер или положение ни одного элемента без того, чтобы это не повлияло на размеры и положение других элементов.
· Равновесие компоновки. Если через плоскость построения композиции провести две диагональные линии, то их точка пересечения укажет на геометрический центр будущей композиции. Любой предмет, вписанный в этот центр, будет чувствовать себя вполне уверенно. Композиционный центр служит для фокусировки внимания зрителя на деталях, и он может на совпадать с геометрическим центром. К тому же композиционных центров может быть несколько.
Правило равновесия состоит в том, что каждый элемент имеет «визуальный вес», который создается сложным сочетанием размера, цвета и положения. Например, темный цвет тяжелее светлого, а большой элемент тяжелее такого же, но маленького размера.
Одним из способов достижения равновесия является симметричное расположение элементов (такая композиция считается не самой выразительной). Но соотношение элементов по горизонтальной линии, как правило, желательно иметь одинаковым («равновесным»). Если композиция имеет визуальный центр, то скорее всего это должен быть оптический центр листа (на 1/8 выше физического центра).
Источник
