Как сделать графическую композицию

Как сделать

Основы композиции в графическом дизайне

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

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

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

Определите фокус

Ключевой элемент любой хорошей композиции – правильно направить (сфокусировать) взгляд пользователя на самые важные элементы дизайна.

При выборе точки фокуса помните, что главная цель вашего дизайна – «общение» пользователя с сайтом. Правильный выбор фокуса определяет эффективность такого общения.

Существуют некоторые методы для определения фокуса в дизайне, например, масштаб, контраст и т.д. Эти методы мы разберем позже. Сейчас проанализируем пример.

Это работа Мэтью Метца (Matthew Metz) для ретейлера модной одежды Nordstrom, поэтому фокус находится на модели и ее одежде. Поэтому она была помещена в центр, а оранжевая окружность размещена так, что выдвигает на первый план и привлекает внимание к ее лицу, а потом к ее наряду. Кроме этого, на изображении присутствуют белый ведущие линии, которые направляют взгляд пользователя к текстовой информации внизу.

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

Ведите взгляд с помощью направляющих линий

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

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

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

Масштаб и иерархия в композиции

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

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

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

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

Используя контраст масштабов элементов, вы можете создавать разные эффекты.

Баланс элементов

Баланс – это важная вещь во многих отношениях. И ваши проекты – не исключение.

Но как же найти этот совершенный баланс в наших проектах? Для этого рассмотрим два общих типа баланса.

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

Асимметричный баланс достигается пропорциональным рассеиванием и масштабированием элементов.

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

Читайте также:  Как сделать картошку в казане

Хорошим способом создания асимметричного баланса является представление, что каждый элемент имеет реальный вес. Маленькие объекты весят меньше, большие наоборот. Также можно представлять, что на вес влияет четкость текстуры объекта (более четкие весят больше). Таким образом, располагая элементы, чтобы они не перевешивали друг друга.

Используйте элементы, которые дополняют друг друга.

Вы слышали о дополнительных цветах в веб-дизайне? Как на счет дополнительных элементов?

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

Увеличьте (уменьшите) контрастность

Контраст невероятно полезный инструмент обозначения важности элементов вашего веб-дизайна. Увеличивая контрастность или используя контрастный цвет, вы можете поставить элемент на передний план или же «спрятать» его.

Оставляйте пустое пространство в проекте

Пустое пространство в дизайне, если оно используется правильно, может помочь повысить «четкость» дизайна и улучшить общий вид, уравновешивая более сложные и оживленные элементы дизайна.

Вот пара способов, как использовать пустое пространство в проекте:

Выравнивание элементов

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

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

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

Источник

20 советов как правильно выстроить композицию

Создание интересной и цепляющей взгляд композиции – ключ к привлекательной иллюстрации. Картины с мощной композицией элементов будут привлекать внимание зрителей, и удерживать их до тех пор, пока каждая мелочь, над которой вы так кропотливо трудились, не будет оценена по достоинству.
В свою очередь, композиционно неудачно собранная картина может испортить вид даже самых прекрасно обрисованных объектов, создавая чувство, что что-то на ней не так. Многие даже не поймут почему, но картина будет менее привлекательной, и сложнее будет понять ее смысл. Далее в этом уроке я обозначил 20 пунктов, которые, на мой взгляд, являются одними из основных правил хорошей композиции, правил, на которые я всегда опираюсь, когда берусь за кисть.

2. Размещение других объектов
Все другие объекты должны гармонировать с фокусной точкой и тем самым усиливать эффект всей композиции. Аккуратно расположенные элементы картины внесут свой вклад, добавив, в конечном счете, глубину, баланс и реалистичность. Обратите внимание на картине «Нимб» («Nimbus»), где изображен пейзаж, устремляющий взгляд зрителя вдаль; или на маленькие детали, например, автомобиль, возле причаленного корабля на картине «Прометей» («Prometheus»).

5. Избегайте касательных линий
Они могут отрицательно сказаться на всей картине, и их, несомненно, следует избегать. Касательные – это линии, идущие от отдельных элементов картины, которые в конце пересекаются. Например, линии электропередач, которые сходятся прямо на углу здания. Отодвинул эти линии электропередач от здания, уведя их чуть выше или ниже, можно избежать визуальной проблемы восприятия.

6. Температура цвета
Когда вы стоите перед выбором доминантных цветов для своей картины, всегда помните о том, что картина в итоге будет вызывать либо холодные, либо теплые ощущения, она не может быть и теплой и холодной одновременно (если только это не авторский прием). Конечно, вы можете использовать и теплые и холодные цвета в своей картине, но одни из них всегда должны быть доминантными, даже если совсем не намного (как, например, на картине «Подземелье» («Dungeon»)).

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

Читайте также:  Как сделать кудри с помощью карандаша

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

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

11. Да будет свет!
Выберете положение для первичного (самого яркого) источника света – солнца, окна, или, например, уличного фонаря – в котором объект будет выглядеть объемным, и будет отбрасывать интересную тень. Первичный свет может быть основной частью композиции и даже ее фокусной точкой; он определяет, какого цвета будет все то, на что он падает. Без света мы не увидим ничего: поэтому он очень важен, и не менее важна его правильная постановка.

12. Тени
Тень может быть использована для выделения форм объекта, прикреплению их к рисунку и, при правильном использовании, для добавления дополнительного обрамления композиции (например, как на картине «Прометей» («Prometheus»), где верхняя часть причала отбрасывает тень на нижнюю часть – променад). Что важно, тень лучше проявляется при положении под прямыми лучами источника света.

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

14. Атмосфера
Атмосферная глубина и окклюзия (поглощение света) – важные составляющие единой композиции на картине. Это может быть просторная зона, где прозрачный воздух между зрителем и горизонтом обретает цветовой и тональный контраст; или это может быть небольшая площадь, где свет проходит сквозь пыльный воздух, обретая легкий цвет (например, как на рисунке «Комната» (The Room»). Мощный луч света также может придать особую атмосферу картине, отражаясь и рассеиваясь вокруг.

15. Структура поверхности
Для композиционного баланса также очень важны продуманные и правильно выстроенные структуры различных поверхностей. Нужно четко понимать, что применение отражающей или блестящей поверхностей может привлечь внимание зрителя. В картине «Прометей» («Prometheus») я использовал много отражающих поверхностей, которые однозначно привлекут внимание зрителей, но также не будут слишком отвлекать от главного элемента картины – корабля, а будут только усиливать его эффект. Или же наоборот, использование тусклых и грязных текстур может вызвать совсем другие чувства у зрителей (например, как на картине «Комната» (The Room»)).

16. Направление взгляда
Привлечь внимание к картине можно и путем использования элементов, направляющих взгляд зрителя в центр или вокруг кадра. Этого можно добиться разными способами. Например, старые добрые заборы или дороги, идущие вдаль, или, как на картине «Нимб» («Nimbus»), огромное строение, рассекающее небо и ведущее взгляд из верхнего левого угла в самый центр. Фишка в том, что зритель будет вести взглядом по арке, пока не придет к конечной точке – самой главной части рисунка.

17. Задерживание взгляда
Если зритель обратил внимание на картину, важный здесь момент – задержать этот взгляд подольше. Вернемся к старой доброй технике с забором, ведущим вдаль слева направо. С правой стороны обязательно надо будет добавить что-нибудь, например, пару деревьев или может маленький домик, чтобы потом плавно вернуть взгляд зрителя на всю композицию. Снова обратимся к картине «Нимб» («Nimbus»). Обратите внимание, как взгляд идет по линии вниз и задерживается на городе, рассматривая скалы слева и сам город справа.

18. Драматичность
Масштабные и эпические изображения обычно, обычно либо драматичны, либо очень спокойны. Для придания драматичности изображению, можно поиграть с глубиной, масштабностью, скоростью движения элементов или их спокойствия. На картине «Нимб» («Nimbus») большая арочная конструкция возникает из-за спины зрителя, тонет в облаках и опускается на точку вдали, показывая тем самым, как она огромна в отношении сравнительно маленьких небоскребов в точке ее касания с землей.

Читайте также:  Как сделать карточки со словами

Источник

Композиция и её законы в дизайне интерфейсов

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

За всё время я прочитал много информации на данную тему, но долго так и не мог однозначно себе ответить на ряд, как мне кажется, важных вопросов:

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

Обалдеть, как интересно! Всё это далеко от проектирования сложных интерфейсов.

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

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

Примеры статической композиции.

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

Примеры динамической композиции.

Google говорит, что композиция (лат. compositio — составление, связывание, сложение, соединение) — составление целого из частей. Взаимодействие частей с целью передать смысл.

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

Далее я сформулировал две основные задачи, которые помогает решить композиция:

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

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

Я не буду говорить о многим и так известных F- и Z-паттернах восприятия контента пользователями, вместо этого поделюсь одной интересной и в то же время простой вещью, которая произвела на меня огромное впечатление. Посмотрите на текст ниже и ответьте на вопрос, куда стремится вектор вашего внимания.

А как изменится направление вектора вашего внимания, если тот же самый текст немного изменить?

Интересно, правда? Контент тот же, но направление вектора внимания в одном случае — вправо, а в другом случае — вниз.

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

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

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

Но не стоит стремиться сразу выделить все элементы дизайна, иначе вы посеете хаос, о котором я уже упоминал.

Источник

Adblock
detector