Основные правила композиции в дизайне. Тема: Основы гармоничной композиции

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

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

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

2. Контраст
Контраст — это взаимодействие противоположных элементов композиции, таких как цвет, размер, текстура и т.д. Примеры контраста: большой и маленький, шероховатый и гладкий, толстый и тонкий, черный и белый.

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

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

5. Пропорции
Пропорция — это отношение отдельной части ко всему объекту, а также соотношение отдельных частей друг с другом. В данном примере показано «Золотое сечение». Подробнее о «Золотом сечении» можно прочитать в статье».

6. Масштаб
Масштаб — это реальный, видимый размер объекта, рассматриваемый в отношении других предметов, людей, окружающей среды.

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

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

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

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

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

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

Самыми главными законами композиции я считаю следующие:

  • Равновесие
    Этот закон говорит нам о том, что каждая композиция должна быть устойчивой. То есть местонахождение элементов не должно вызывать сомнений и желания передвинуть их куда-либо.
    Посмотрите на рисунок ниже:

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

  • Единство
    Закон единства (или целостности) композиции считается соблюденным, если при охвате изображения взглядом оно воспринимается как единое целое и не распадается на отдельные части. Должно ощущаться наличие «притяжения» между элементами, они должны «подходить» друг другу. Также должен ясно различаться смысловой центр композиции.

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

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

    Хочу сразу предостеречь от возможного недопонимания: смысловой центр никак не связан с геометрическим центром композиции. Также композиционный центр может быть не один.

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

Навыки создания правильной композиции очень важны для графического дизайнера. Хочу подчеркнуть именно слово «навыки «, т.к. знания, которые вы не умеете применять на практике не стоят ничего. Поэтому обязательно упражняйтесь, уделяйте этому от 20 минут до 1 часа каждый день, и результат будет налицо!

Как обычно, я желаю вам успехов в ваших начинаниях, побольше усидчивости и терпения!

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

Вы наверняка не раз обращали внимание на изображения, причем не обязательно фотографические, которые приятны взгляду безотносительно к содержанию. Их как правило можно перевернуть, отразить в зеркале, а иногда даже и обесцветить, не нарушив при этом зрительной привлекательности. Чем же объясняется такая «устойчивость» эмоционального восприятия? О фотографиях, имеющих подобные свойства, говорят, что в них присутствует визуальная гармония, и причина ее - в особом расположении элементов по полю изображения, или гармоничной композиции. Слово композиция происходит от латинского сompositio - «составление». Правила художественной композиции были разработаны еще в античности и с тех пор практически не изменились. Они настолько универсальны, что зритель любого возраста, пола, расы и вероисповедания в состоянии отличить сильную композицию от слабой. Гармоничная композиции может иметь различные пространственные основы: пропорцию, симметрию, ритм, контраст, перспективу...

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

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

Композиционное построение включает:
- выяснение центра композиции и подчинение ему других частей произведения;
- объединение отдельных частей произведения в гармоническом единстве;
- соподчинение и группировка с целью достичь выразительности и пластической целостности произведения.

О НАСЛЕДИИ ДРЕВНИХ ГРЕКОВ

Учение о гармонии берет свое начало в Древней Греции. Наиболее глубокий след в мировой культуре оставили пифагорейцы. Последователи Пифагора представляли вселенную, включая человека, как единое целое, в котором все гармонично взаимосвязано. Пытаясь математически обосновать идею единства мира, пифагорейцы утверждали, что в основе мироздания лежат симметричные геометрические формы. Они фактически ввели понятие пропорции как основы гармоничности. На основе пропорций человеческого тела последователи Пифагора утвердили математический канон красоты, по которому скульптор Поликлет создал статую «Канон». Существуют разные виды пропорций, но для нас наиболее важен частный случай геометрической пропорции, получивший название «золотое сечение»: a:b=b:(a+b). Отрезок a относится к большему отрезку b так же, как b относится к отрезку суммарной длины a+b. Отношение золотого сечения выражается числом 0,618. Если отрезок прямой выразить через единицу, а затем разделить его на два отрезка по золотому сечению, то больший отрезок будет равен 0,618, а меньший - 0,382.

На плоскости золотое сечение - это прямоугольник со сторонами в пропорции 1:0,618, который можно получить геометрическим построением, показанным на рис. 1.

Если стороны AB и AD прямоугольника ABCD относятся друг к другу в пропорции золотого сечения, грубо - 5:8 (что очень близко к размеру 35-миллиметрового кадра), а отрезок CE перпендикулярен диагонали BD, то проекция из точки Е на сторону AD делит ее в той же пропорции, то есть FD:AF=5:8. Если расположить структурные элементы изображения в получившихся треугольниках, а диагонали - вдоль разделяющих отрезков, то результат будет радовать глаз, чем бы эти треугольники ни были наполнены (рис. 2). Диагонально-треугольная композиция часто встречается в пейзажной фотографии (фото 1).

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

......................................................................................................................................................

При построении кадра нужно помнить о разнице между восприятием живого глаза и неодушевленного объектива и стараться при компоновке изображения внимательно следить не только за объектом съемки, но и за всем, что находится в пределах видоискателя

......................................................................................................................................................

КОМПОЗИЦИЯ И ПЕРСПЕКТИВА

Как вы помните по лекции о свойствах оптических систем, объективы делятся на три категории: короткофокусные (широкоугольные), нормальные и длиннофокусные (телеобъективы). Мы уже говорили о том, что для каждой из них характерны определенные искажения перспективы, которые обусловлены тем, где находится так называемая точка схождения. Что такое точка схождения, легко понять, представив себе ряд находящихся на равных расстояниях друг от друга одинаковых объектов, расположенных вдоль оптической оси. Наглядным примером будет ряд столбов, стоящих вдоль дороги, уходящей вдаль. Первый столб, находящийся рядом с вами, будет большим, второй - поменьше, третий - еще меньше, и так далее. Если через основания и верхушки столбов провести две воображаемые прямые, то они пересекутся как раз в той самой точке схождения. Находящийся в ней столб не имеет видимых линейных размеров, иными словами, он для зрителя превращается в точку (фото 2). Широкоугольные объективы приближают точку схождения, то есть объекты, расположенные рядом с фотоаппаратом, будут казаться преувеличенно большими, а те, что вдали, - слишком маленькими. Это делает изображение динамичным вне зависимости от сюжета (фото 3).
Телеобъективы, напротив, удаляют точку схождения, и расстояния между объектами, находящимися на оси, непараллельной плоскости кадра (или, как говорят, в разных планах), кажутся меньше, чем они есть на самом деле. Понимание вышеописанных свойств дает фотографу возможность строить сложные, так называемые многоплановые изображения.

О ТУННЕЛЬНОМ ЗРЕНИИ

Может показаться удивительным, сколько любительских фотографий построено совершенно идентично: главный объект - точно в центре кадра, занимает он там примерно одну десятую общей площади, а все остальное пространство заполнено мусором, не имеющим совершенно никакого отношения к сюжету. На самом деле ничего странного тут нет. Объясняется это явление тем, что часть визуальной информации мозг блокирует, помогая своему владельцу сконцентрироваться на интересующем его объекте. Кстати сказать, то же самое происходит с фоновым шумом любого происхождения. Если бы не это, мы бы наверняка уплыли в страну безумия, влекомые ошеломляющим потоком зрительных образов, звуков, запахов, вкусовых оттенков и тактильных ощущений. Но, к сожалению, то, что помогает в жизни нормальному человеку, играет злую шутку с теми, кто смотрит на мир через видоискатель фотоаппарата. Художник-живописец, например, рисует то, что видит, то есть замечает. Следовательно, фоновая информация, заботливо заблокированная его мозгом, остается ненарисованной, а главный объект занимает господствующее положение на холсте. У фотографов же все по-другому. Когда они чего-то не замечают, объектив об этом не догадывается и предательски фиксирует все, что попало в поле его зрения. Это влечет за собой две неприятности: во-первых, в кадре оказывается масса никому не нужной ерунды, в которой объект съемки теряется, как ребенок в универмаге, а во-вторых, центр интереса оказывается точно в середине изображения, что в большинстве случаев создает статичную и в то же время напряженную композицию, неприятную глазу.

Очевидно, что простейшая композиция - одноплановая. Хорошо известная всем, у кого есть паспорт. Но то, что является допустимым в индустрии паспортного фото, в художественной фотографии приветствуется только в том случае, если является единственно возможным методом выражения творческого замысла. Обычно одноплановая композиция свидетельствует о неопытности фотографа. Даже если портрет композиционно прост, в нем есть как минимум два плана: лицо и фон, освещенный таким образом, чтобы придать изображению глубину (фото 4).

Рассуждая о многоплановой композиции, я хотел бы передать близко к тексту сказанное как-то Сергеем Максимишиным, известным фотожурналистом и талантливым фотографом: новичок фотографирует сюжет «ехал Ваня на коне», фотограф поопытнее усложняет композицию вторым планом и снимает карточку «ехал Ваня на коне, вел собачку на ремне», а совсем уж опытный и хитрый фотограф добавляет третий план, в котором «старушка в это время мыла фикус на окне». Таким образом, прожженный фотожурналист не только создает сложное изображение, в котором основной объект каждого плана находится в композиционно важной точке, но и делает сюжет более занимательным, вводя в него конфликт (Ваня и собачка заняты одним, а старушка - совершенно другим). Рассмотрите фото 5.

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

КОМПОЗИЦИЯ И ЭМОЦИИ

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

Если композиционно важные элементы расположены в кадре таким образом, что взгляд переходит с одного на другой без скачков и движется по плавной кривой, то такая фотография воспринимается без напряжения и имеет успокаивающий эффект. Он выражен особенно сильно, если в основе композиции лежит S-образная кривая (фото 6, 7) или в разных планах есть пологие диагонали, встречно пересекающие кадр (фото 8).

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

При построении кадра нужно помнить о разнице между восприятием живого глаза и неодушевленного объектива и стараться при компоновке изображения внимательно следить не только за объектом съемки, но и за всем, что находится в пределах видоискателя. Исключением, в некотором смысле, можно считать «ковровую» композицию, целиком состоящую из «мусора». Гармоничность здесь достигается повторяющимися элементами и контрастами (фото 9).

Хорошее упражнение на фотографическое внимание: поймав объект в кадр, подходите к нему до тех пор, пока все ненужное останется за пределами видоискателя, и выбирайте такой ракурс, чтобы главный объект оказался не в центре поля изображения, а в точке пересечения линий золотого сечения. Хотелось бы подчеркнуть, что на первом этапе обучения фотографии лучше не пользоваться оптикой с переменным фокусным расстоянием, а снимать штатным объективом. Напомню, что штатный объектив - это тот, фокусное расстояние которого примерно равно диагонали кадра. Таким образом, в 35-миллиметровом мире это будет примерно 50 мм (для особо въедливых - 43 мм), в среднем формате 6×6 см штатным будет объектив с фокусным расстоянием 80 мм, а для цифровой камеры с сенсором формата APS это 35 мм. Фотография, сделанная штатным объективом, имеет важную особенность: перспектива на ней очень близка к тому, как видит человеческий глаз.

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

......................................................................................................................................................

Основная задача фотографа в процессе компоновки изображения - заставить взгляд зрителя оставаться в пределах фотографии как можно дольше

......................................................................................................................................................

КОМПОЗИЦИЯ И УПРАВЛЕНИЕ ВНИМАНИЕМ

Если вы еще не слышали, что главный объект должен занимать в кадре не менее 60% площади, а остальные 40% должны по крайней мере от него не отвлекать, то услышите не раз. На самом деле это очередной пример сочетания твердолобого догматизма с примитивным пониманием действительности. Правильно используя законы композиции, можно привлечь внимание зрителя даже к одному лицу в огромной толпе или к нескольким объектам в разных частях кадра. Сделать это можно несколькими способами. Самым простым и часто используемым является включение в кадр диагоналей, ведущих к центру интереса или как бы проходящих сквозь него. Помимо этого, объект можно выделить цветом или тоном, а также заключить его в рамку, присутствующую в кадре на правах самостоятельного структурного элемента. Фотография на фото 11 являет собой пример одновременного применения всех упомянутых способов. Использование сразу нескольких композиционных приемов в этой фотографии не случайно. Явление синергизма, с которым вы еще не раз столкнетесь в этом курсе, проявляет себя в том, что кумулятивный эффект сильнее, чем простая сумма составляющих. Важно здесь еще то, что эффект, достигнутый применением чисто композиционных приемов, усиливается выражением лица модели, то есть элементом смысловым. Частным случаем ритмической структуры (то есть последовательности повторяющихся элементов) можно считать и включение в кадр двух или трех конгруэнтных фигур.
Количество сюжетно значимых объектов в кадре имеет существенное значение. Если это один или два объекта сюжет, как правило, простой и добиться эмоциональной выразительности весьма сложно. Если в композиции много элементов связанных отношениями, сознанию сложно воспринимать такой образ.

Удобнее всего при постороении композиции считать до трех. Число 3 обладает особыми семантическими свойствами, которыми мы пользуемся, сами того не сознавая, практически с самого рождения. Драматическая история о трех поросятах, беседа трех девиц под окном, приключения трех богатырей по нашу сторону границы и трех мушкетеров по противоположную навсегда застряли в мозговых извилинах любого мало-мальски грамотного человека. Даже те, кто не знает, кто такой Посейдон, прекрасно разбираются в количестве зубцов на символе владения подводным царством, а не читавшие Ремарка кучкуются по трое в подворотнях с целью совершенно определенной. Причиной психологической важности числа 3 является то, что оно резко снижает возможность случайности происходящего. Например, случайное столкновение двух знакомых на улице - явление достаточно частое, но непреднамеренная встреча трех как правило вызывает очень сильное удивление, а иногда и подозрение, в зависимости от результатов и последствий этого примечательного события. Та же простая логика применима и при построении фотографического изображения. Если в нем присутствуют всего два похожих предмета, зритель может и не подумать, что так было задумано, но когда повторений три, ему понадобятся дополнительные усилия, чтобы не заметить преднамеренности. Более подробно о неявных элементах изображения мы поговорим позже, в курсе «Фотография как средство художественного повествования».

ВМЕСТО ЗАКЛЮЧЕНИЯ

Хорошему фотографу не нужно делить кадр воображаемыми линиями и потом раскладывать картинку по получившимся треугольникам. Вместо этого он руководствуется внутренним голосом, который шепчет ему в нужный момент: жми кнопку прямо сейчас! Как правило фотография, сделанная по команде этого голоса, интереснее, глубже и непринужденнее той, что выверена микрометром и транспортиром. Поэтому во время съемки лучше руководствоваться чувствами, а анализировать результаты (если захочется, конечно) уже потом, изучая отпечаток или глядя на компьютерный экран.

Композиция - это правильное расположение элементов изображения, основанное на анализе восприятия человеком зрительной информации.

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

Что такое композиционный центр?

Это точка внимания, акцент зрительского внимания. Вот несколько примеров того, как можно захватить внимание зрителя:

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

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

Выделение цветом


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

Выделение размером

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

Выделение формой


Сложный объект, состоящий из множества элементов на фоне самой просто геометрии - круга.

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

Понравилось? - Подпишись на мой канал о дизайне и искусстве в Telegram, чтобы не пропустить новые статьи:

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

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

Баланс

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

Баланс может быть симметричным, то есть объекты (два серых круга ) в этом случае расположены на одинаковом расстоянии по отношению к какому-то третьему объекту (черный круг ). Проще говоря, симметричный баланс — это синоним «одинаковый «. В нашем случае два серых круга расположены на одинаковом расстоянии по отношению к большому черному кругу (рисунок ниже) .

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

Контраст

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

Если они будут стоять рядом, то контраст будет заметен. В следствие этого будет наибольшее внимание. Также если взять, что-то большое и толстое (форма квадрата в крайнем, нижнем левом углу) , и взять маленькое, худое (форма полоски в крайнем правом углу ), и поставить их рядом — также будет контраст.

Значимость и подчиненность

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

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

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

Направление внимания

По сути, в веб-дизайне вы должны как бы сделать тропинку из , по которым должен пройтись человек туда, куда вам нужно. К примеру, вам нужно, чтобы человек заказал на сайте утюг:

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

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

Этого допускать нельзя.

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

Пропорции

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

Все стороны, углы, диаметры и прочие характеристики, всего лишь увеличиваются или уменьшаются на определенное какое-то число.

Масштаб

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

Кстати, в любых графических редакторах (например, в ), когда надо увеличивать или уменьшать размер с помощью лупы, вам будет показан масштаб картинки в %. Надеюсь, вам стало понятнее, что такое масштаб.

Повторение и ритм

Довольно часто нам нужно будет как-то привлекать внимание пользователя, но одного объекта для этого будет не достаточно. Необходимо будет этот объект повторить или, проще говоря, продублировать. Также это можно использовать для удержания внимания посетителя.

Единство в разнообразии

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

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



Похожие статьи