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

1.

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

2.

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

3.

Основные элементы
Линия
Цвет
Фигура
Форма
Яркость
Пространство
Текстура

4.

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

5.

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

6.

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

7.

Фигура
Геометрические формы имеют структуру и часто являются
математически точными (квадраты, круги, треугольники).
Швейцарское движение графического дизайна 1950-х
годов использовало в своих проектах в основном
геометрические фигуры. Фигуры могут добавить
выразительности макету.
Органические фигуры не имеют четко очерченных краев и
часто кажутся естественными и гладкими. Фигуры
добавляют акценты макету.
Абстрактные фигуры – это минималистичное
представление реальности. Например, контурное
изображение человека – это абстрактная фигура.
Логотипы в основном представляют собой абстрактные
фигуры, чтобы показать тип бизнеса. Комплект иконок
ниже является отличным примером абстрактных фигур,
передающих реальные объекты и ситуации.

8.

Фигура

9.

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

10.

Пространство (негативное
пространство)
Пространство – это область,
которая окружает фигуру; это
создает форму в
пространстве.
Если вы посмотрите на
элемент дизайна, негативное
пространство – это область,
которая не занята никакими
элементами. По сути, это цвет
фона, который вы можете
видеть.

11.

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

12.

Пример отрицательного
(негативного)
пространства.
Геометрические формы
на первом плане имеют
идентичный дубликат на
втором плане. Это
помогает добавить
трехмерный эффект на
негативном пространстве.
Вы заметите, что элементы
равномерно
распределены по фону –
негативному пространству.

13.

Цвет

14.

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

15.

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

16.

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

17.

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

18.

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

19.

Центр внимания в композиции

20.

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

21.

Композиционный центр
Выделение
яркостью одного
объекта на фоне
других

22.

Композиционный центр
Выделение цветом

23.

Композиционный центр
Выделение
размером

24.

Композиционный центр
Выделение
формой

25.

Основные понятия и правила
композиции
совпадение
геометрического и
композиционного центров

26.

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

27.

Замкнутая и открытая композиция

28.

Замкнутая и открытая композиция
В замкнутой композиции основные направления линий
стремятся к центру. Такая композиция подойдет для передачи
чего-то устойчивого, неподвижного.

29.

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

30.

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

31.

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

32.

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

33.

Динамика и статика в изображении,
движение, ритм
Динамичная композиция (справа)- композиция, при
которой создается впечатление движения и внутренней
динамики.
Статичная композиция (слева) - создает впечатление
неподвижности.

34.

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

35.

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

36.

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

37.

Симметрия
Симметричная композиция служит для передачи
покоя, устойчивости, надежности, иногда, величества

38.

Асимметрия в композиции.
достижение равновесия
Асимметрия нарушит это равновесие.

39.

Симметрия и асимметрия в
композиции. Равновесие
Но возможно уравновесить эти объекты, добавив в композицию
что-нибудь, в качестве противовеса. Асимметрия при этом
сохранится.

40.

Симметрия и асимметрия в
композиции. Равновесие
Так же добиться равновесия при асимметрии можно будет,
перевесив больший предмет ближе к центру.

41.

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

42.

Основные задачи, которые помогает
решить композиция
1. Управление вниманием пользователей.
2. Cохранение внимания пользователя.

43.

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

44.

Иерархия объектов
слово “Hello” иерархически выделяется от основного
текста и взгляд на него падает в первую очередь.
Существует несколько способов выделить информацию и
тем самым добавить ей визуального веса:
Размер.
Цвет.
Форма.
Негативное пространство.

45.

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

46.

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

47.

Форма
Чем более сложная форма у
элемента интерфейса, тем
его визуальный вес выше
перед объектами правильной
формы.
По форме в том числе можно
догадаться, что за элемент
перед вами: инпут, кнопка или
дропдаун.
Кнопка Next выделяется за счёт свой формы
перед другими элементами интерфейса.

48.

Негативное пространство
Чем больше пустого
места вокруг
элемента дизайна,
тем больше внимания
он привлекает.
Сочетание 01 и заголовок Motion’s purpose окружены негативным пространством.
Хотя рисунок имеет больший визуальный вес, хорошо примененное негативное
пространство создаёт баланс между этими элементами дизайна, который
предотвращает перевод одного из них в низшую категорию.

49.

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

50.

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

51.

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