Эркен Кагаров о фигуре, фоне и принципах композиции
Конспект выступления арт-директора Студии Артемия Лебедева в Йошкар-Оле
Неделю назад в нашей силиконовой Йошкар-Оле в рамках проекта TexТолк (#techtalkyola) выступал с лекцией арт-директор студии Артемия Лебедева Эркен Кагаров. Эркен раскрыл тему — “Предметы и фон” — на все 150%, а я постараюсь емко передать самую суть.
Отношения
Между предметом и фоном существуют определенные отношения. Стоит заменить фон — и мы начнем иначе воспринимать предмет. Эркен приводит множество примеров того, как фон влияет на объект: от оптических иллюзий и до старушек-тяжелоатлеток. Давайте рассмотрим по-порядку:
Цвет относителен
Рассмотрим обычную оптическую иллюзию. Кружок на синем фоне кажется желтее, а на желтом — голубее. Это известный эффект: когда мы смотрим на объект на желтом фоне, мы компенсируем отсутствие в фоне холодных цветов и видим сам объект более голубым.
Этот эффект работает на дополняющих цветах — то есть на цветах, расположенных на цветовом круге друг напротив друга. Дополняющие цвета контрастны, они усиливают друг друга.
Эркен рассказывает случай из личной практики: нужно было сделать дизайн для обложки альбома “Хармс 10: Случаи”. В голову пришла идея изобразить на обложке яркие оранжевые значки-пиктограммы, какие рисуют на баллончиках и аэрозолях. Здесь надо заметить, что оранжевая краска — в силу определенных особенностей полиграфиии
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
— после печати получается грязновато-коричневой и недостаточно яркой. Напечатать оранжевые элементы специальной краской также не удалось. Тогда Эркен воспользовался вышеописанным эффектом и добавил в фоновые цвета голубого (который, как мы уже выяснили, дополняет и оттеняет оранжевый). Получилось! Оранжевый стал ярче!
На практике можно выделить много случаев использования этого принципа. Например, мудрые торговцы часто продают фрукты и ягоды в зеленых лоточках, которые прекрасно оттеняют красно-розовую мякоть. А желтые лимоны становятся еще желтее в фиолетовых лотках.
Размер относителен
Наше восприятие размера объекта тоже напрямую зависит от фона, на котором мы его видим. Для начала простейшая оптическая иллюзия: кружок кажется больше, если вокруг него — маленькие кружки.
Здесь Эркен предполагает, что это не зрение, а опыт диктует подобные искажения, и вводит понятие “социальной иллюзии”:
“Я иду по улице, а навстречу идет 6 человек — сборная Дагестана по вольной борьбе. И мы почему-то с ними повздорили. Кто победит? Вопрос риторический, можете не отвечать. Другая ситуация: я иду по улице, а навстречу — сборная детского сада по шахматам. Кто победит теперь? В одном случае я слабый, а в другом — сильный”
Этот жизненный опыт мы применяем к абстрактной картинке с кружками. Мы наделяем кружки энергией из реального мира. Точно так же и с другими графическими объектами: вертикальная линия воспринимается более напряженной и энергичной, так как мы спим лежа, а когда стоим, на нас влияет гравитация — и нужна определенная энергия, чтобы ее преодолеть.
Еще один пример (его Эркен приводит чуть позже, но мне показалось, что он прекрасно иллюстрирует этот принцип). Один белорусский производитель оптики поставлял приборы на американский рынок. Американские партнеры рассказали, что американцы любят все большое — и готовы покупать большие вещи дороже. Физически увеличивать размер оптики было нерационально, поэтому производители уменьшили размер логотипа на приборах. И так как предмет (логотип) стал меньше, фон (оптический прибор) стал казаться больше.
Масштаб относителен
В обычной жизни мы легко понимаем масштаб вещей, и поэтому запросто оцениваем размеры и расстояния. В горах — где нет знакомых нам ориентиров — понять масштаб гораздо сложнее. А в космосе вообще ничего не понятно.
В дизайне — как в космосе: мы сами можем задать масштаб. Эркен приводит в пример рекламные объявления: если бюджета хватает только на маленькое объявление, его можно сделать визуально больше: например, разместить в объявлении какой-то более мелкий элемент и не забивать все свободное пространство.
Освещенность относительна
Эту фотографию сделал знакомый Эркена в метро. Вообще-то в метро темно, но это фото сделано на длинной выдержке. Эркен поясняет для не-фотографов:
“Представьте камеру. Через объектив в нее залетает определенное количество отраженных от предметов фотонов. Если темно — то фотонов залетит мало. Если открыть объектив надолго — успеет залететь больше фотонов.”
А теперь самое интересное — мы воспринимаем так же. Представим, что мы черепахи. Мы медленно живем, думаем медленно и медленно смотрим. Получается, что за это время в глаз черепахи успевает “залететь” больше фотонов — то есть ей светлее. А вот маленькие насекомые не успевают ничего понять — живут в темноте.
Результат относителен
Эркен рассказывает историю, как на чемпионате по тяжелой атлетике болгарский штангист поднял штангу весом в 185 кг и выиграл чемпионат. После него на помост взошла старушка и подняла штангу весом 184 кг. Кто произвел большее впечатление? Конечно, старушка! Даже несмотря на то, что она подняла меньший вес.
Мораль: люди оценивают результат в контексте усилий и возможностей. Это применимо и к дизайну: скажем, дизайнер А использовал один шрифт, а дизайнер Б — три, а результат получился один и тот же. Дизайнер А кажется нам круче — ведь он меньше работал, а добился того же.
И так мы оцениваем все в нашей жизни. Тысяча рублей — это много, если ты ее только что потерял. Но тысяча кажется мелочью, если ты покупаешь квартиру за несколько миллионов.
Очень важно в дизайне создать определенную легкость, чтобы со стороны казалось, что все делалось очень просто, “без пота и усилий” — тогда на этом фоне результат будет выглядеть просто замечательно.
Свежачок: Эркен опубликовал у себя на Facebook еще один интересный пример того, как работает “легкость”:
Контраст относителен
Вот здание в стиле “модернизм”: его логотип расположен сбоку. Такое расположение увеличивает контраст между логотипом и зданием, делает здание активнее. А вот строение в классическом стиле выглядит очень спокойно и сбалансировано — за счет симметрии.
Форма и смысл
Взаимодействие формы и смысла Эркен рассматривает на примере шрифтов. Первый пример — слово “дети”, написанное двумя разными шрифтами: органичным “веселым” шрифтом и сухим бюрократическим. Суть в том, что форма взаимодействует с первоначальным смыслом слова и создает новые смыслы.
То же самое в этой работе Дмитрия Кавко:
Смысл и шрифт — это тоже фигура и фон.
Контрформа и композиция
Множество художественных произведений и дизайнерских работ построены на том, что фигура и фон начинают взаимодействовать. Контрформа — это белое пространство, которое работает как часть фигуры.
В скульптурах Генри Мура работает не только фигура, но и пустота.
Есть 2 типа скульпторов: те, кто ваяют (то есть отсекают лишнее), и те, кто лепят (то есть наращивают). Но и те, и другие ищут границу между заполненным и свободным. Эркен подчеркивает, что это ключевой вопрос во всех сферах творчества: например, в актерском искусстве пауза в речи — это та же пустота.
Баланс между заполненным и пустым пространством — это и есть композиция.
В качестве примера — небольшое объявление, композицию которого Эркен переделал, не меняя самих элементов. Благодаря композиции цвета стали работать активнее — и даже белый цвет кажется ярче.
В связи с этим можно выделить две стратегии: стратегия концентрации и стратегия распределения. Рассмотрим на примере двух картинок: на первой цвета распределены равномерно, на второй — сконцентрированы.
Эти стратегии работают во многих областях нашей жизни. Например, стратегия распределения просто необходима для стабильной работы предприятия (равномерное распределение ресурсов). Но вот при проведении рекламной компании лучше “выстрелит” стратегия концентрации — иначе можно потеряться на других фоне сконцентрированных и активных объявлений.
Еще пример работы этих стратегий: в мирное время войска распределены по границам равномерно, но в случае активных боевых действий просто необходима концентрация.
Носитель и объект
В дизайне часто используется прием, когда носитель (то есть фон) усиливает объект. Эркен приводит несколько интересных примеров из жизни:
Текст и контекст
Если мы задействуем в дизайне носитель — очень важно учесть контекст отображения. Например это кафе оформлено симпатично, но совершенно не сочетается со зданием, в котором оно расположено.
А вот как контекст усиливает объявление. Сам по себе дизайн не выглядит особо интересно, но за счет окружения (цветущих сиреней именно таких оттенков) создается целостный притягательный образ.
Еще один пример — логотип Ярославля, созданный Студей Артемия Лебедева. Игра образов (буква “я” и стрелочка) отлично проявляется, стоит поместить логотип в правильный контекст.
Кроме того, контекст можно выстраивать. Эркен приводит в пример водку “Абсолют” — бренд, который мы мгновенно узнаем в любых обстоятельствах.
Если контекст выстроен — реклама быстрее распознается, именно поэтому многие бренды сейчас выпускают серийную рекламу (вот, например, Билайн).
Элементы коммуникации
В конце лекции Эркен выделяет основные элементы коммуникации на примере рекламного щита:
- изображение
- текст
- носитель
- марка
- среда
- зритель
Эффективное и интересное сообщение получается тогда, когда взаимодействуют несколько элементов.
Например на этой картинке изображение (рубашка) взаимодействует с носителем (пятно на специальном выносном элементе билборда) и все это взаимодействует со зрителем (точнее с изменяющимся местоположением зрителя, который едет по дороге).
Есть такая задачка: 9 точек нужно соединить 4(!) линиями. Так вот: если не задействовать фон — то есть не выйти за рамки самих точек — эту задачу не решить.
Но стоит выйти за пределы — и решение оказывается очень простым.
От себя скажу, что мне понравилась лекция, особенно эта красивая концовка в духе “выходите за рамки”. Спасибо большое Эркену за выступление! Вот несколько фотографий:
Еще спасибо ребятам-организаторам за ребячество и организацию)) Ну в смысле было четко, спланировано и весело! #techtalkyola
Если вам понравилось читать — ставьте лайк!
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
