Что такое паттерны и как их применяют в дизайне

Содержание

• Что такое паттерн
• Виды паттернов
• Как создать графический паттерн
• Онлайн-ресурсы для создания паттернов

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

Они встречаются в дизайне, IT, психологии и даже музыке: паттерны поведения пользователя при взаимодействии с интерфейсом в UX/UI, графические, типографические и другие. В дизайне паттерны используются для создания узнаваемого визуального стиля бренда или продукта, для оформления сайтов, приложений, интерьера.

Остановимся подробнее на видах, элементах и способах создания паттернов в дизайне.

Что такое паттерн

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

Мы сталкиваемся с примерами использования таких рисунков постоянно: паттерны значимы в интерьере, упаковке, одежде, оформлении сайтов. Их отличительные черты:

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

Виды паттернов

Существует много подходов к классификации паттернов. Можно делить их на виды:

• по используемым в рисунке элементам;
• наличию структуры или хаотичности расположения узоров;
• простоте и сложности орнамента;
• планируемому количеству внимания от пользователя.

Чаще всего встречается деление по типам узоров.

Типографические паттерны

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

Паттерны из логотипов

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

Геометрические паттерны

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

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

Абстрактные паттерны

Эти паттерны строятся на замысловатой абстракции, в основе которой — привычные нам предметы и явления в необычном виде. Часто ассоциируются с искусством.

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

Минималистичные паттерны

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

Паттерны с персонажами

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

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

Растительные паттерны

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

Айдентика бренда: что это и как ее разработать

Разбираемся в айдентике: узнаете, как формируется неповторимый образ бренда

Точка зренияАнгелина Соловьева

Как создать графический паттерн

Создать свой графический паттерн можно с помощью редакторов или сервисов-генераторов. Среди популярных дизайн-программ для таких целей можно выделить Adobe Photoshop, Adobe Illustrator, Figma. В отличие от первых двух вариантов Figma в меньшей степени заточена под создание паттернов из-за недостаточного количества инструментов. Но с помощью плагинов Pattern Hero и Fizzy можно создавать несложные узоры.

Процесс создания паттернов в Adobe Photoshop и Illustrator

Создайте пустой лист нужного размера и загрузите любой узор, чтобы он не касался краев листа. Далее создайте копию этого объекта, кликнув на панели слоев «Создать дубликат слоя», в верхней строке меню выберите «Фильтры» → «Другое» → «Сдвиг» и введите нужное значение, на которое хотите, чтобы был сдвинут ваш узор. Отметьте «Вставить отсеченные фрагменты».

Процесс создания паттернов в Adobe Illustrator

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

Онлайн-ресурсы для создания паттернов

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

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

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

Patternico — инструмент позволяет создать узор из иконок встроенной библиотеки или из своего изображения. Можно редактировать размер картинки, цвета, размещение элементов.

Repper — сервис для создания паттернов в стиле калейдоскопа. Есть бесплатная пробная версия.

Doodad.dev — бесплатный онлайн-генератор, в котором легко создать узор и можно настроить цвета, размер элементов, расположение на картинке.

Курс «Нейросетевые эффекты в графике»

Курс Вадима Эпштейна, на котором вы сможете разобраться во внутреннем устройстве нейросетей: как они находят общие паттерны изображений и генерируют новые на их основе.

Записаться на курс 🖌

Заключение

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

Бесшовные рисунки с продуманной композицией и ритмом дополнят оформление упаковки, продукта, сайта, мерча и других материалов.