Добавьте цвета! Как работают паттерны

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

В материале:

• где встречаются паттерны в повседневности;
• как используют паттерн в брендинге;
• актуальны ли паттерны в интерфейсах;
• какова практическая польза паттерна в промышленном дизайне;
• возможности генеративных паттернов.

В повседневном дизайне

С паттернами в обычной жизни мы встречаемся каждый день, часто даже не обращая на них внимание. Например, они популярны в дизайне обоев — рисунок можно продублировать во всю длину и ширину рулона, а при оклейкн большой площади стены место стыка бумажных полос будет почти незаметным.

Модный дом Gucci, известный в первую очередь одеждой и аксессуарами, выпускает обои со своими паттернами.

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

Из-за того, что паттерны не боятся изломов и искривлённой геометрии, они так широко распространены в упаковке. Например, паттерн с мотивами под хохломскую и гжельскую роспись используется в дизайне стаканчиков «Шоколадницы».

Паттернами декорируют также обёрточную бумагу. Узор с паттернами можно нанести на лист любого размера, а если одного листа не хватит, то не проблема соединить несколько — место стыка практически не будет заметно. Точно так же можно отрезать и лишний кусок. Нанесённый рисунок замаскирует любые огрехи и складки.

Рисунок на ткани — это тоже паттерн. При пошиве отрез раскраивается на множество элементов, но рисунок всё равно остаётся узнаваемым. Плюс пёстрый орнамент может сделать незаметными швы. А некоторые модные дома в качестве рисунка используют фирменный паттерн.

Самый известный из них — монограмма модного дома Louis Vuitton.

В брендинге

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

Иногда паттерн может заполнить весь логотип — такое решение использовано в городской айдентике Мельбурна. Дизайнеры хотели показать динамичность разных городских инициатив города, который находится в постоянном развитии. Это хороший графический ход для динамичного дизайна, который не боится выглядеть по-разному, показывая разные стороны одного и того же продукта.

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

Фирменный паттерн VK составлен из элементов логотипа, разобранного на части. Таким образом, фрагменты монограммы можно использовать практически в любой среде: в интерфейсах, буклетах, при оформлении блокнотов или подложек под значки.

Чтобы паттерн оставался узнаваемым и передавал настроение, заложенное айдентикой, он используется по строго определённой схеме. Поэтому применение паттерна прописывают в брендбуке. Вот так выглядит страница с правилами использования фирменного паттерна магазина «Пятёрочка»:

Ещё одно использование паттерна в брендинге — нанесение фирменного знака без изменений. Например, белорусская компания «Морозпродукт» делает паттерн из логотипа мороженого «20 копеек» и использует его для разных форматов упаковки. Далеко не всякий бренд готов пойти на такое вольное обращение со своей айдентикой, когда нужно «показать товар лицом» — часто это достаточно смелое решение.

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

В дизайне интерфейсов

В дизайне интерфейсов паттерны заменяют собою сплошную заливку фона. Это делает оформление ярче и разнообразнее, задаёт ему характер и динамику.

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

Современный дизайн адаптируется под разные расширения, а технологии позволяют заливать фон как достаточно крупными изображениями, так и делать разноцветные заливки средствами HTML, не используя графические файлы. Поэтому сегодня повторяющиеся паттерны дизайнеры выбирают редко. Чаще всего их используют для заливки малозначительных элементов дизайна, чтобы не оставлять их «пустыми», но и не привлекать к ним большого внимания.

Сейчас по-прежнему можно встретить сайты с паттерном на фоне, правда, они вызывают ощущение «ретро». Яркий фон может отвлекать от серьёзного содержания, но подобный подход уместен, например, в блогах.

По этому же принципу работает и подложка в мессенджерах. Фон делает страницу живой — цвет приятно дополняет диалог из коротких, простых по форме сообщений.

Ещё одно применение паттернов в современных интерфейсах — временное заполнение «пустого» пространства на сайте. Незаполненный профиль выглядит скучно, поэтому разработчики Last.fm в шапку интерфейса личной страницы загрузили паттерн — впоследствии пользователь его должен заменить собственным изображением.

Ещё одно применение простых паттернов в проектировании — адаптация дизайна для людей с дальтонизмом (цветовой слепотой). Так, при цветовом кодировании можно использовать не только цвета, но и лёгкие текстуры, которые передадут разницу тем, для кого цвета неразличимы.

В промышленном дизайне

Часто паттерны выполняют прикладную функцию: например, рельефный рисунок на шинах и подошве обуви улучшает сцепление с дорогой.

В общественном транспорте паттерны гораздо предпочтительнее однотонной обивки, поскольку узор помогает скрыть грязь и царапины. Например, для московского транспорта в Студии Артемия Лебедева разработали паттерн со знаковыми зданиями Москвы. Его ещё и интересно разглядывать во время поездки.

Ещё один известный пример — армейский камуфляж. Но есть и более интересные варианты применения маскировки. Так, при помощи контрастных чёрно-белых паттернов прячут облик моделей автомобилей, находящихся в разработке. Узор делает неразборчивыми дизайн кузова и не позволяет сделать фотографии, которые могли бы утечь в прессу или к конкурентам раньше времени. Такой вид рисунка называется Dazzle — «ослепляющий камуфляж», его использовали военные для маскировки формы кораблей.

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

Генеративные паттерны

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

Генеративные паттерны создают нейросети, «придумывая» каждый кусочек заново на основе загруженных в программу рисунков и параметров. Поскольку в таких паттернах нет дублирования, то у них более узкий круг применения. Например, рисунок для текстиля должен быть размером с весь отрез ткани, который может быть длиной до 150 метров.

Несколько лет назад агентство Ogilvy Italia запустило рекламный концепт Nutella Unica. Чтобы привлечь внимание к бренду, была создана «неповторимая упаковка» Nutella — каждая из семи миллионов баночек имела уникальную этикетку, которую сгенерировала нейросеть. Тираж был раскуплен за месяц.

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

Подводя итог

Паттерн — универсальный инструмент. Он может заполнять поверхности любых размеров, следовать любой форме, скрывать заломы и швы.

Свойства паттерна нашли применение в брендинге, где он выполняет те же функции: оживляет дизайн и служит хорошим элементом в упаковке. А вот в интерфейсах классический паттерн больше не востребован — он уступил место графическим подложкам и генеративным паттернам, создаваемым нейросетями.