Дизайн у деталях: градієнт
Олена Сокольникова у новій колонці розповідає про роль градієнта в історії графічного дизайну та візуальних комунікацій.
Ілюстрація: Поліна Честнова для Skillbox Media
Кандидат педагогічних наук, доцент ВАК, незалежний куратор та педагог, спеціаліст з історії дизайну, автор проектів «Дизайн у деталях» та «Жінки-дизайнери СРСР». Веде тг-канал @design_in_details. Сайт – www.sokolnikova.com
Світ природи сповнений прикладів плавного переходу між квітами. Коли ми милуємося відтінками світанку і заходу сонця, прожилками осіннього листя або пелюстками екзотичних квітів, то спостерігаємо явище колірного градієнта. Протягом історії люди шукали способи відтворити цей ефект на різних поверхнях — розповім про історію градієнта та його тиражне використання у цій колонці.
Передісторія: кольорові розлучення на склі, тканині та папері
Різні технології виготовлення предметів із поліхромного скла були відомі ще у Стародавньому Єгипті. Коли різнокольорові заготовки сплавлялися, їх виходили витончені колірні переходи. Скляні судини, що дійшли до наших днів, з кольоровими градієнтами періоду Римської імперії виглядають цілком сучасно.
Один із найдавніших способів створити орнамент на тканині – вузличне фарбування. Фрагменти тканини зав'язували, прошивали, складали чи стискали — так поверхня фарбувалася нерівномірно, у ньому виходили візерунки з розпливчастими краями. У Японії такий метод отримав назву "сиборі" (шиборі), у Стародавній Індії – "бандану". Різновид цього фарбування під назвою «тай-дай» поширився в європейській культурі в 1960-ті роки завдяки хіпі, які яскраво прикрашали одяг доступними способами.
Марморування, або ебру, – техніка малювання фарбами або чорнилом на поверхні води (або спеціального рідкого складу) з подальшим перенесенням малюнка на тверду поверхню (папір, дерево, кераміку, шкіру). Завдяки різниці хімічних складів фарби розтікалися поверхнею води, утворюючи фантастичні візерунки.
Подібні техніки існували у Стародавньому Китаї, Японії, Узбекистані, Індії, Пакистані, Персії, Туреччині. З початку XVII століття техніка поширилася й у Європі — з її допомогою декорували книжки до кінця ХІХ століття.
Марморований папір у книжковому дизайні. Мадрид, 1788 / Лондон, 1860
Фото: Victoria and Albert Museum
Райдужний друк: вікторіанська реклама, грошові банкноти та хіпі
При традиційній технології друку кожен колір мав окрему форму, і це робило процес дорогим. Друкарі вікторіанської епохи прагнули його здешевити, але при цьому зробити продукцію особливо рекламні афіші більш яскравими і привабливими. Так було винайдено райдужний друк, або печатку врастирку (Split fountain printing technique).
Її робили кількома фарбами одночасно — з однієї барвистої скриньки та однієї друкованої форми. Завдяки автоматичним валикам (або ручному скребку) фарби змішувалися прямо в процесі друку, утворюючи плавні колірні переходи. В результаті в Європі та США з'явилося багато барвистої реклами із градієнтним заповненням фону або контурів літер.
Зразки вікторіанського райдужного друку (Split fountain printing)
Зображення: Richard Sheaff / Letterform Archive
1890 року в Російській імперії Іван Орлов запропонував свою версію технології «райдужного» (або «ірисового») друку — як додаткового засобу захисту банкнот та цінних паперів від копіювання.1892 року цю технологію представили на європейському форумі банківських службовців і згодом запатентували. Вперше в Росії райдужну печатку застосували в 1894 – для кредитних квитків номіналом 25 рублів.
У 1960-ті роки технологія райдужного друку знову стала популярною — також завдяки субкультурі хіпі, їхнім психоделічним плакатам та журналам. Яскраві та оригінальні стилізації у дусі вікторіанської реклами створював у той період французький художник книги Роберт Массін.
Розворот сіетлської андеграундної газети Helix 1967 року. Автор малюнка – Гері Ігл (Gary Eagle) / Роберт Массін
Зображення: Seattle Public Library / видавництво Hoëbeke / Amazon
Аерографія: піонери фоторетуші, художники ар-деко та графіті
Ще один варіант створити плавні колірні переходи – розпорошити фарби поверхнею під тиском повітря (наприклад, при видування пігменту через трубочку). Найдавніші зображення подібного роду, вік яких становить 13 000-9500 років, можна знайти на стінах печери Куева-де-лас-Манос на півдні Аргентини. Це фарба кількох кольорів, розпорошена довкола «трафарету» — кистей рук.
Професійний прилад для розпилення рідких або порошкових пігментів – аерограф – був придуманий тільки після появи фотографії і спочатку призначався для фоторетуші. Патент на перший пристрій видали в 1876 (Френсіс Едгар Стенлі, США), але воно ще було без безперервної подачі стисненого повітря. Ручний компресор в 1878 додав Ебнер Пілер, і надалі прилад ще багаторазово вдосконалювався.
Незабаром новинку оцінили художники та комерційні ілюстратори, які прагнули створення фотореалістичних об'ємних зображень з плавними кольоровими переходами.Нова техніка, що дозволяє малювати без пензля, зацікавила й передових представників авангарду.
Вже 1919 року один із засновників дадаїзму Ман Рей створив за допомогою аерографа серію сюрреалістичних робіт — аерограм, розкритикованих мистецтвознавцями того часу за приниження статусу живопису. У сучасне мистецтво аерограф повноправно увійшов лише у 1960-ті роки завдяки роботам художників поп-арту.
Комерційні ілюстратори ар-деко використовували аерограф, створюючи нову візуальну мову: до стилізованих плоских форм раннього авангарду вони почали додавати геометричні об'ємні елементи.
Характерний приклад – паризькі роботи вихідця з Російської імперії Адольфа-Жан-Марі Мурона, який працював під псевдонімом А. М. Кассандр. Завдяки аерографічним деталям здається, що гладкий ніс трансатлантичного турбоелектроходу "Нормандія" велично випливає на нас із поверхні рекламного плаката.
Аерографія допомагала та декорувати тканини. Людмила, старша сестра Володимира Маяковського, стала першою жінкою, яка очолила промислову аерографічну майстерню. Зразки її тканин, пофарбованих у тому числі за запатентованою нею технікою, були представлені на Паризькій виставці 1925 і досі виглядають дуже сучасно.
До 1930-х років аерограф масово застосовують у промисловому виробництві: за його допомогою, наприклад, наносили малюнки на автомобілі. Поступово аерографія як спосіб прикрашання особистих автомобілів, мотоциклів і навіть літаків стане самостійним явищем масової культури, популярним досі.
Графіті поїздом, одна з ранніх робіт популярного художника Futura 2000
Фото: Martha Cooper / Futura Laboratories
Наступний важливий винахід – аерозольні балончики з фарбою.Їх створили 1949 року в США, щоб наносити алюмінієву фарбу на автомобільні деталі. Наприкінці 1970-х балончики стали головним інструментом для художників графіті. Вони створювали новий вид візуального мистецтва, в якому були плавні переходи кольорів і темні контури з м'якими краями.
Від кітчу до мінімалізму: еволюція градієнтів у цифрову епоху
Завдяки комп'ютерній графіці та технологіям цифрового друку створювати градієнт стало простіше. Можна одним кліком додати тіні, що падають, контролювати ступінь розмиття країв об'єкта і інтенсивність вливання одного кольору в інший. Всі ці прийоми стали популярними вже у 1980–1990-ті роки.
Фото: Neville Brody & Propeller Art Works / @EvanCollins90 / X / Special Event Graphics by P. I. E. Books
Характерний приклад – реклама виставки та освітніх заходів Graphic Arts Message '92 у Токіо. Робота виконана одним із піонерів та майстрів комп'ютерної графіки Невілом Броуді з його шрифтом Blur (1992).
Рейв-флаєр 1990-х та сучасна стилізація для реклами ретрошрифту
Зображення: Perpetual Groove / Tree Leaf Records / Roberlan Borges / Behance
Тоді комп'ютерна графіка була недосконала, а деякі дизайнери зловживали ефектами імітації обсягу, неонового світіння, блискучих металізованих фактур із контрастними білими відблисками. Все це зараз сприймається як кітч і використовується переважно для ретростилізацій.
Пізніше фахівці стали ставитися до градієнта делікатніше. Історія редизайну логотипів відомих брендів, що поступово позбулися «зайвого» об'єму та блиску, спрощення іконок та графічних інтерфейсів відмінно ілюструють цей процес.
Градієнт у сучасному мистецтві та дизайні
У ХХ–ХХI століттях колір для багатьох художників стає головним та самодостатнім інструментом художньої виразності. Передача вібрацій, ефемерності кольору та його взаємозв'язку зі світлом – одна з ключових проблем художників авангарду. Саме градієнт додає рух, обсяг та додаткову виразність їх роботам. Приклад: картина «Зелена смуга», що значно випередила свій час (1917) Ольги Розанової.
Ольга Розанова "Зелена смуга" (1917) / Ларрі Белл, Barcelona Suite #6, 1989
Зображення: Державний музей-заповідник «Ростовський кремль» / Larry Bell / Artsy
Розанова у своїх кольорових пошуках мріяла уникнути традиційних мальовничих матеріалів у бік мультимедіа — екранів, прожекторів і безпосередньої роботи зі світлом. Актуальність таких ідей демонструє подальша історія розвитку відеоарту. Від, наприклад, "Модулятора світлового простору" (Light-Space Modulator, 1922-1930) угорського викладача Баухауса Ласло Мохой-Надя до експериментальних світлових установок Булата Галєєва та команди НДІ "Прометей" 1960-1980-х років.
Ласло Мохой-Надь, «Модулятор світлового простору», 1922–1930
Фото: The Bauhaus-Archiv / Museum für Gestaltung
Булат Галєєв та світломузична установка «Кристал», 1964
Фото: Street Art Research Institute / Prometey Research Institute
Джеймс Таррелл, динамічна світлова інсталяція Aten Reign («Правління Атона», 2013) для Музею Гуггенхайма, Нью-Йорк
Фото: The Solomon R. Guggenheim Foundation
Ларрі Белл, Pacific Red II, 2017, Whitney Museum, New York
Фото: Larry Bell / Artists Rights Society (ARS) / Whitney Museum of American Art
Наступний етап розвитку світло-колірного мистецтва – роботи художників-мінімалістів 1960–1970-х років.Наприклад, американський рух "Світло і простір" (Light and Space movement), яскраві представники якого – Джеймс Таррелл, Джон МакКракен, Ларрі Белл і Роберт Ірвін. Художник і скульптор Ларрі Белл використовував градієнти не тільки у своїх літографіях і колажах у змішаних техніках, а й у кольорових скляних скульптурах кубічної форми, що по-різному переломлюють світло і перетворюють простір.
Яскравим прикладом впливу сучасного мистецтва на дизайн є робота Германа Ерміча, латвійського дизайнера, що базується в Амстердамі. Він створює предмети меблів та цілі інтер'єри із прозорого скла з градієнтною плівкою різних відтінків, тонко працює з особливостями сприйняття кольору при різному освітленні.
Особливе місце градієнти посідають у сучасній моді. Плавні колірні переходи в одязі отримують не лише за допомогою традиційних технологій фарбування тканини, але й завдяки переплетенню ниток різних кольорів, накладенню шарів напівпрозорої тканини, цифрового друку на тканині та навіть вбудованих в одяг світлових LED-елементів.
Цікавий тренд предметного та фешен-дизайну — створення колекцій, що існують у цифровому вигляді та лише частково реалізованих у фізичному. Наприклад, Діана Уоллінгер, засновниця студії DNWLLNGR, має проект «Турбота про себе, турбота про мир» (2021). Він складається із серії надихаючих та фантазійних цифрових моделей та одного білого брючного костюма, пофарбованого в життєстверджуючі градації зеленого та рожевого.
Градієнти були присутні у візуальній та матеріальній культурі людства з найдавніших часів.Контрастні та нюансні, статичні та динамічні, що заповнюють фон або об'єкти, що тонують ілюстрації чи фото, з накладеними текстурами чи без… Коли мода йде на одні градієнти — приходить мода на інші.
Більше цікавого про дизайн у нашому телеграм-каналі. Підписуйтесь!
Функціональний пакет Adob, як і Figma, дозволяє створити потрібний градієнт: лінійний двотоновий, багатобарвний і нелінійний, складний і об'ємний, будь-який, достатньо вибрати відповідні кольори. Якщо ж виникають складності у поєднанні відтінків, крім референсів та наочних прикладів, що тренують нагляд, є плагіни Figma: Noisy Gradients, Gradient Morph, Mesh Gradient та багато інших.
Самі назви градієнтів дуже говорять: складні складаються з кількох кольорів (більше 3), сітчасті (mesh gradient) будуються за принципом сітки і т.д. Їх можна застосовувати залежно від мети та завдань, наприклад, якщо використовувати лінійний колірний перехід без сильного контрасту за відтінками, то вийде м'який градієнт. Подібний прийом зустрічається на обкладинках плейлистів Яндекс Музики та асоціюється з балансом, виглядає гармонійно та цілісно.
Якщо ж є мета додати динаміки, то чудово підійдуть різкі градієнти, у яких кольори не плавно переходять одна в одну. Наприклад, візуальна метафора призми лежить в основі бренду SEEN, а яскрава графіка з контрастними градієнтами-променями підкреслює механіку процесу та результат.
Одна з неприємних особливостей колірних переходів може бути в проміжних відтінках, які створюють бруд. Це тому, що компліментарні кольори, а саме ті, які знаходяться на протилежних сторонах колірного кола Іттена, при змішуванні дають сірість або зеленість. Прикладами комплементарних кольорів будуть: червоний та зелений; фіолетовий та жовтий; синій та помаранчевий. Щоб уникнути цього, достатньо додати перехідний колір між відтінками, як на прикладі нижче. Чим складніший градієнт, тим більше перехідних відтінків можливо.
Що? Куди? Навіщо?
Якщо відноситися до градієнта не тільки як до прикраси, він може стати відмінним інструментом для вирішення таких завдань, як: 1. Привернення уваги. Градієнтом можна назвати заголовок, акцентний текст, дизайн-елементи, іконки, кнопки і т.д. Його часто застосовують як тло або обведення, що демонструє активність елемента. Вибір кольору теж має значення, якщо градієнт недостатньо контрастний у порівнянні з фоном, ми отримаємо заголовок, що не читається, або «втрачену в повітрі кнопку».
Поставте запитання який заголовок читаний і відразу стане зрозуміло, де присутня контрастність
2. Збільшення розмаїття. Градієнти можуть використовуватися між тлом та текстом, роблячи його більш читабельним, чітким. Це допомагає покращити сприйняття інформації. Нерідко цей прийом можна зустріти в Інтернеті на картках продуктів, різних веб-сайтах і т.д.
3. Створення обсягу. Градієнти чудово відтворюють глибину та об'єм за рахунок контрастно підібраних кольорів. Наприклад, при зображенні куба чи циліндра. Це допомагає створити ілюзію простору та форми, а також надати дизайну реалістичності та деталізації. Такі тривимірні елементи створюють певний вайб та футуристичну атмосферу.
4. Маніпулювання поглядом. За рахунок своєї яскравості колірні переходи можуть не просто привертати увагу, а й керувати поглядом того, хто дивиться.Як це працює на практиці: плавний градієнт на сайті веде м'яко по сторінці, занурюючи користувача в свою атмосферу.
Якоб Нільсен у своїх дослідженнях з'ясував, що користувач вивчає сторінку сайту по траєкторії, схожій на букву F. Градієнт може діяти за таким же принципом, керуючи увагою клієнта від світлого відтінку до темного. 5. Звернення до емоцій. Градієнти можуть створювати різні візуальні ефекти, нести символічне значення, асоціюючись з природними явищами, ідеями і почуттями. Наприклад, поєднання помаранчевого, синього та фіолетового відтінку використовуються для передачі атмосфери заходу сонця, а блакитні та сині градієнти схожі на морську гладь.
Вони чудово передають потрібний настрій, наприклад, Elfbar, бренд одноразових електронних сигарет, використовує упаковку, в якій перемикання кольорів символізують смаки продукту.
Web примірники
Немає конкретних правил використання градієнтів, все залежить від мети та її реалізації. Можна було б сказати, що перехід кольорів застосовують для дизайну головного екрану, але є приклади, де градієнт стає основою цілого сайту, його родзинкою. Можна було б сказати, що не варто використовувати брудні градієнти, але такого правила немає. Сайт photopills.ru увібрав у себе всі ці «можна було б», на виході вийшов яскравий продукт, що запам'ятовується, що імітує стару фотоплівку. Для курсу фотографії чудова візуальна метафора, яка зчитується користувачем.
Інший приклад, де градієнт делікатно доповнює футуристичну атмосферу сайту за рахунок сітчастих градієнтів (mesh gradient). Ми можемо їх розрізнити за нелінійною структурою та плавними лініями. Такий яскравий та контрастний колірний перехід замінює повноцінну ілюстрацію.
Що ж щодо відверто поганих прикладів? Будь-який продукт існує не у вакуумі і дизайн один з факторів, що впливають на успіх. Відверто поганий дизайн – це не робочий дизайн, коли блоки не провантажуються, сайт висить, а покупка не відбувається. Градієнт не підвищить конверсію, але може створити необхідний настрій, який вплине на клієнта і він здійснить покупку, оплатить послугу тощо.
Пакувальні примірники
Градієнти роблять упаковку більш цікавою та привабливою, додають глибину. Існує ряд досліджень (наприклад, "Вплив оточення на поведінку покупців: критичний огляд" від Shun Yin Lam, "Вигода від використання кольору" від Color Marketing Group, "Психологія кольору в маркетингу" від June Campbell), які показують, що колір є основним фактором, що впливає рішення людей про купівлю певного товару. У наш цифровий вік покупок на маркетплейсах зовнішній вигляд товару відіграє величезну роль у прийнятті рішення про покупку. Градієнтом можна розбавити вже існуючу лінійку продукту, як це роблять бренди Darling або Kristall Minerals cosmetics, додаючи звичному мінімалістичному дизайну упаковки колірний акцент.
Японський бренд косметики Biore використовують синьо-блакитний колірний перехід для пакування сонцезахисного засобу. Які у вас виникають емоції від такого продукту? Відчувається літній, відпускний настрій, може бути морський бриз чи свіжість? Існує екологічна теорія колірних переваг від Стівена Палмера та Карен Шлосс, які стверджують у своїх дослідженнях, що синій колір асоціюється із сприятливими екологічними умовами. Такий колір подобається багатьом людям та викликає приємні емоції: колір безхмарного неба, гірського озера, чистої води тощо.
У дизайні продукту немає випадкових кольорів, потрібно враховувати безліч чинників: стать, вік, цільовий ринок, вже існуючі продукти тощо. Так, наприклад, з віком сприйняття кольору змінюється через фізіологічні зміни. Люди почесного віку важко розрізняють такі змішані кольори як синьо-зелений, жовто-зелений, фіолетовий і майже всі темні відтінки. Тому не варто лаяти дизайнера за те, що в аптеці всі коробочки аспірину зелені))
Брендингові приклади
Бренди створюються не на день, а на роки, тому важливо, щоб логотип не втрачав актуальності з часом. Тому градієнти у брендингу трапляються нечасто. На думку відразу спадає логотип інстаграма, який не потребує представлення. Метафора яскравого життя втілюється у колірному переході, що буквально наповнює логотип. Строкатий і відомий градієнт став частиною візуального коду бренду, проте є не менш цікаві графічні метафори.
Музичний факультет Монреальського університету використовує градієнти у своїй фірмовій графіці, щоб відбудуватись від логотипу університету. Дизайнери розробили гнучку, масштабовану систему сіток з кольоровими переходами, відображаючи різноманітність підходів до музичних композицій, їхню нескінченність. Той випадок, коли графіка здатна вдихнути життя у строгий фірмовий стиль університету.
Цікава метафора у провайдера цифрових послуг із Північної Осетії M2_Connect. Ідея полягає в тому, що «технології зближують людей і змінюють життя на краще. Ідея зв'язку людини та технологій — проста, але важлива думка, яка стала основною метафорою в айдентиці нового бренду».Змінюючись залежно від формату, градієнтна лінія стає головним стилеутворюючим об'єктом для будь-яких носіїв фірмового стилю, від ділових бланків до сувенірної продукції та оформлення упаковок цифрової техніки.
Хороший приклад того, як яскравий фірмовий стиль не йде в «папугу», бренд транслює почуття впевненості і залишається стриманим. Градієнт не прагне заповнити собою простір, він доповнює і стає такою собі вишнею на торті)
Художні приклади
Мистецтво впливає на дизайн, є натхненням і дає їжу для роздумів. Герман Ерміч у своїх роботах застосовує досвід із графічного дизайну та дизайну інтер'єрів, втілює сміливі, концептуальні ідеї. Він використовує колір і світлові ефекти, щоб отримати емоційний відгук у першу мить, як ми бачимо предмет. Художник вивчає як дизайн впливає взаємодія людей з навколишнім світом.
«Мені завжди ставлять це питання, але я ніколи не маю відповіді. Я не граю в метафори, не намагаюся нікого копіювати чи щось відтворювати. Просто висловлюю конкретне почуття у конкретний момент. Палітра, яка спливає в моїй уяві і захоплює дух, вартий того, щоб матеріалізуватися в предметі».
Візуальні образи в дизайні завжди несуть у собі смисли та аналіз, переосмислений досвід. Є безліч прикладів, коли дизайнери надихаються абстрактним мистецтвом, зокрема супрематизмом.
У супрематизмі колір стає основним, він втрачає зв'язок із природними формами. Відлуння цієї течії ми і зараз можемо бачити. Справжнє мистецтво як і творчість безмежне, а свіже прочитання одного й того народжує нові сенси.
Висновки
Градієнти складаються з кольорів, тому краще докладніше вивчити теорію кольору, щоб грамотно застосовувати її практично. Будь-який графічний прийом може бути інструментом у руках творця. Я не вірю в табу та заборонені прийоми, використовувати можна все, важливо розуміти навіщо і для чого.