Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!

Основы композиции

Композиция - это искусство составления (компоновки).
Композиция состоит из ограниченной плоскости и пятен (элементов) на плоскости.
Плоскость
Элементы
У сайта за плоскость возьмем страницу, а за элементы - блоки.

У страницы за плоскость возьмем наш рабочий контейнер (контейнеры), а за элементы - картинки, текст, кнопки, формы обратной связи и т.д.
Задача композиции: создать комфортное пространство для восприятия информации человеком.
Что такое композиция?
Условия комфортности:
1) Неравное кол-во черного и белого. Необходимо для определения фона и элементов на нем - что есть что? Фон - это то, чего больше. Если фон занимает столько же, сколько и пятна на нем, то это вызывает дискомфорт восприятия.

2) Наличие пятен трех размеров: большие, средние и маленькие.

3) Наличие композиционного центра. Комп. центр - специально выделенное место на плоскости, имеющее свои уникальные качества. (не является геом. центром!).

4) Наличие ритма. Пятна и промежутки между ними должны иметь разные расстояния (размеры).

5) Сбалансированность выходов пятен в края композиции. (не обрезать общую картину)
* страницу целиком можно рассматривать как композицию.
* блок можно рассматривать как композицию
Пятна
Фон
рис 1
рис 2
среднее по размеру пятно
большое пятно
маленькое пятно
Композиционный центр
рис 3
Композиционный центр
Композиционный центр
рис 4
рис 5
Создается ощущение незавершенности, "обрезанности", будто это кусочек от общей картины
Фрагментарность и монотонность
Если в композиции отсутствуют малые пятна, она имеет свойство фрагментарности.
Если в композиции отсутствуют большие пятна, она имеет свойство монотонности.
В большинстве случаев следует избегать фрагментарности и монотонности
Композиция целиком (картина "Рождение Венеры" Боттичелли)
фрагмент
НЕ монотонная композиция
монотонная композиция
Статика и динамика. Равновесие в композиции
Композиция бывает:
Статичная: создает впечатление спокойного состояния фигур. Статику хорошо передают прямоугольник и квадрат.

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

Равновесие может касаться:
самих фигур и пространства между ними.
Композиция натюрморта:

а – уравновешенная по цвету,
б – неуравновешенная по цвету

СИММЕТРИЯ
АССИМЕТРИЯ
СТАТИКА
ДИНАМИКА
Пропорции и модуль
Пропорция - равенство двух или нескольких отношений.

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

Модули составляют модульные сетки, основа которых: квадраты, прямоугольники.

Модульную сетку можно придумать самому или воспользоваться существующими.

Модульные сетки используются, например, в полиграфии и архитектуре.

В веб-дизайне по модульным сеткам могут располагаться такие объекты, как текст/иллюстрации/кнопки и др.
модуль
модульная сетка
ДОМАШНЕЕ ЗАДАНИЕ:
  1. повторить в этом блоке (в свободном пространстве справа) две композиции с картинок (статика и динамика).
* размер и цвет прямоугольников можно взять на свое усмотрение.
2. придумать и оформить ниже свою статическую и динамическую композицию на плоскости, используя подготовленные фигуры:
* Размер, цвет и количество фигур можно изменять на своё усмотрение.

Копировать фигуру можно:

1) навести курсор на нужную фигуру и кликнуть по ней левой кнопкой мыши.
2) нажать на клавиатуре комбинацию клавиш ctrl и C (одновременно контрл цэ), чтобы скопировать фигуру
3) нажать на клавиатуре комбинацию клавиш ctrl и V (контрл вэ), чтобы вставить новую фигуру
4) передвинуть новую фигуру на новое место, кликнув на нее мышкой (лкм), удерживая клавишу мыши, или при помощи стрелок на клавиатуре вверх/вниз, влево/вправо