Дизайн
#статьи

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

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

Иллюстрация: Colowgee для Skillbox Media

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

В материале:

Подробно о том, что такое паттерн в графическом дизайне и как он устроен, читайте в карточках.

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

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

Использование паттерна: пример с обоями
Обои Sanderson с паттерном в стиле модерн
Изображение: Sanderson

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

Использование паттерна: пример с обоями Gucci
Обои от фирменного дома Gucci
Изображение: Gucci

Обои с растительными паттернами были очень популярны в эпоху модерна. Об этом удивительном времени читайте в нашем материале.

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

Использование паттерна: пример с блокнотами
Блокноты с паттерном-лисицей. Рисунок разный по насыщенности, однако одинаково хорошо смотрится на произвольном формате
Изображение: Be Genius

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

Использование паттерна: пример с кофейными стаканчиками
Лимитированная серия одноразовых стаканчиков для кафе «Шоколадница»
Изображение: дизайн агентства Shma

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

 Использование паттерна: пример с подарочной упаковкой
Различные варианты оформления обёрточной бумаги для подарков
Фото: nito / Shutterstock

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

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

Использование паттерна: пример с сумкой
Сумка с паттерном Louis Vuitton
Изображение: Wikimedia Commons / Louis Vuitton

Рассказываем в этом материале об африканских паттернах в моде и дизайне — как грамотно использовать и где ими вдохновляться.

В брендинге

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

Использование паттерна: пример с упаковкой стритфуда
Упаковка еды навынос для кафе Tikithai
Изображение: Tikithai / Directa Bureau / Behance

Рассказываем о форматах и компонентах фирменного стиля.

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

Использование паттерна: пример с логотипом
М — главный элемент айдентики Мельбурна
Изображение: Landor & Fitch

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

Использование паттерна: пример с визитками
Визитки Cloudaware
Изображения: cloudaware / дизайн студии «Логомашина» / Behance

Читайте подробный рассказ о работе над айдентикой Cloudware от «Логомашины» в этом материале.

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

Использование паттерна: пример от VK
Варианты фирменного паттерна VK, собранные из элементов логотипа
Изображение: VK
Использование паттерна: пример от VK
Фирменный паттерн VK на папке и обложке годового отчёта
Изображение: VK

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

Использование паттерна: пример с брендбуком «Пятёрочки»
Правила сборки паттерна в брендбуке магазина «Пятёрочка»
Изображение: «Пятёрочка»
Использование паттерна: пример с картой лояльности «Пятёрочки»
Фирменный паттерн магазина «Пятёрочка» на карте лояльности
Изображение: сайт 5ka.ru

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

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

Использование паттерна: пример с упаковкой мороженого
Разные виды упаковки мороженого «20 копеек»
Изображение: СООО «Морозпродукт»

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

Использование паттерна: пример с упаковкой бургеров McDonald’s и KFC
Листовая упаковка бургеров KFC и McDonald’s
Фото: Evtushkova Olga / Shutterstock

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

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

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

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

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

Использование паттерна: пример с блогом
Скриншот: сайт Kelli Anderson

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

Использование паттерна: пример с мессенджером WhatsApp
Паттерны для фона в мессенджере WhatsApp
Скриншот: приложение WhatsApp 

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

Использование паттерна: пример с профилем пользователя на сайте
Шапка незаполненного профиля на Last.fm
Скриншот: Last.fm

В этой статье — полезные плагины для создания паттернов в Figma.

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

Использование паттерна: пример с цветовым кодированием в Trello
Использование простых паттернов при цветовом кодировании в трекере Trello
Изображение: Trello

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

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

Использование паттерна: пример с протектором обуви
Протектор беговых кроссовок
Фото: FCG / Shutterstock

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

Использование паттерна: пример с сиденьями в автобусе
Узор обивки сидений для «Московского транспорта»
Изображение: дизайн Студии Артемия Лебедева

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

Увидеть детали кузова прототипа Toyota Yaris GR на этом видео, сделанном во время испытаний, невозможно даже на крупных планах.

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

Использование паттерна: пример с перфорацией металлических листов
Металлическая перфорация с узорами на фасаде здания
Фото: Kevin Yuan / Shutterstock

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

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

Использование паттерна: пример с генеративным паттерном
Генеративные паттерны от Normform
Изображение: Normform / Behance
Использование паттерна: пример с генеративным паттерном
Генеративные паттерны от Normform
Изображение: Normform / Behance
Использование паттерна: пример с генеративным паттерном
Генеративные паттерны от Normform
Изображение: Normform / Behance

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

Использование паттерна: пример с генеративным паттерном на кашпоъ
Коллекция кашпо от Sambul & Dasha Design, оформленных генеративными паттернами neopatternion
Фото: Sambul & Dasha Design

Читайте рассказ о дизайнерке Хелле Йонгериус, которая придумала и соткала трёхметровый паттерн для ткани Repeat.

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

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

В этом материале мы сделали подборку из 27 самых востребованных дизайн-студий и брендинговых агентств.

Подводя итог

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

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

Курс

UX-дизайнер с нуля до PRO

Вы узнаете, как проводить UX-исследования и проектировать удобные интерфейсы. Научитесь создавать сайты и приложения, которые точно понравятся пользователям. Сможете брать первые заказы уже через четыре месяца обучения на платформе и зарабатывать от 120 тысяч рублей.

Узнать про курс

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

Участвовать
Обучение: UX-дизайнер с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована