Мы с тобой уже вспомнили как работает цвет и разобрались какое настроение у шрифтов, но вот вопрос, как это все объединить воедино? Здесь то и начинается изучение самого важного в дизайне — композиции.
Композиция — это клей, который собирает разрозненные элементы, в органичное целое. Она создает порядок, управляет вниманием и вызывает эмоцию.
Короче, композиция — это важно. Для начала давай разберемся, какие вообще виды композиции бывают.
Композиция — это клей, который собирает разрозненные элементы, в органичное целое. Она создает порядок, управляет вниманием и вызывает эмоцию.
Короче, композиция — это важно. Для начала давай разберемся, какие вообще виды композиции бывают.
Да кто такая эта ваша композиция?
композиция
Виды композиции
УПОРЯДОЧЕННАЯ
РИТМИЧНАЯ
СИММЕТРИЧНАЯ
АСИММЕТРИЧНАЯ
ДИНАМИЧНАЯ
ПЛОТНАЯ
СКОНЦЕНТРИРОВАННАЯ
СФОКУСИРОВАННАЯ
КОНТРАСТНАЯ
элементы композиции могут
шептать
Говорить
Перебивать Друг Друга
ОРАТЬ
Тут опять все дело в настроении макета. Например, когда цветочки расположены равномерно по сетке (упорядоченная композиция), зрителю спокойно.
А когда хаотично разбросаны по пространству, то зритель испытывает некое эмоциональное возбуждение, так как чувствует динамику.
А когда хаотично разбросаны по пространству, то зритель испытывает некое эмоциональное возбуждение, так как чувствует динамику.
Ты же понял как это работает, правда?
композиция
Иерархия определяет кто в доме хозяин (ну то есть помогает акцентировать внимание зрителя на ключевых деталях). Перед тем, как начинать собирать макет посмотри на информацию и определи что в ней самое важное. Главное правило иерархии: если важно все, то не важно ничего.
Вот посмотри на мою гифку: сначала вроде понятно, на что смотреть первым, но потом я начинаю давать акцент тем вещам, где акцента быть не должно, в итоге получается визуальная каша.
Когда выбрал что будем выделять, можно разбираться с тем как мы будем это выделять.
Вот посмотри на мою гифку: сначала вроде понятно, на что смотреть первым, но потом я начинаю давать акцент тем вещам, где акцента быть не должно, в итоге получается визуальная каша.
Когда выбрал что будем выделять, можно разбираться с тем как мы будем это выделять.
Теперь давай разберемся с иерархией
Иерархия
Способы выделения информации
Размер
Контраст
Позиция
Почти не важное
Чуть менее важное
Яркое и важное
Внизу почти не важное
Чуть ниже чуть менее важное
Выше все важное
Большое и важное
Маленькое и почти не важное
Среднее и чуть менее важное
А теперь самое важное!
Уж не знаю почему, но обычно все на этом моменте лажают.
Давай ты не будешь повторять чужих ошибок и сразу запомнишь правило близости. Что рядом — то вместе. Так уж устроен наш мозг, что элементы, которые расположены близко друг к другу он воспринимает как группу. Это как полки в шкафу: футболки к футболкам, носки к носкам, так проще ориентироваться.
Давай рассмотрим на примере карточек товара в интернет магазине. Видишь как вся информация развалилась и сразу не понять какой товар сколько стоит? Нажми кнопку «починить» и мы исправим это недоразумение с помощью правила близости
Давай рассмотрим на примере карточек товара в интернет магазине. Видишь как вся информация развалилась и сразу не понять какой товар сколько стоит? Нажми кнопку «починить» и мы исправим это недоразумение с помощью правила близости
А теперь самое важное!
Уж не знаю почему, но обычно все на этом моменте лажают.
Давай ты не будешь повторять чужих ошибок и сразу запомнишь правило близости. Что рядом — то вместе. Так уж устроен наш мозг, что элементы, которые расположены близко друг к другу он воспринимает как группу. Это как полки в шкафу: футболки к футболкам, носки к носкам, так проще ориентироваться.
Давай рассмотрим на примере карточек товара в интернет магазине. Видишь как вся информация развалилась и сразу не понять какой товар сколько стоит? Нажми кнопку «починить» и мы исправим это недоразумение с помощью правила близости
Давай рассмотрим на примере карточек товара в интернет магазине. Видишь как вся информация развалилась и сразу не понять какой товар сколько стоит? Нажми кнопку «починить» и мы исправим это недоразумение с помощью правила близости
Ой ой ой, кажется я в клетке
А точнее в колоночной сетке. Не пугайся, сейчас все обьясню
Видишь эти тоненькие линии? Это и есть сетка. В нее аккуратными блоками встраивается контент, что помогает структурировать информацию
