Что такое паттерн в дизайне

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

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

Коротко о главном

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

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

Возьмите любой предмет рядом: обои, обивку стула, обложку тетради, ткань рубашки. Если рисунок на них повторяется, это паттерн.

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

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

Паттерн, текстура, орнамент: в чем разница

Эти слова путают чаще всего.

Паттерн это точное повторение. Элементы одинаковые, положение подчинено правилу. Взгляд считывает ритм.

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

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

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

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

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

Растительные . Листья, цветы, ветви. Смягчают восприятие, работают в косметике, продуктах питания, детских товарах.

Абстрактные . Пятна, мазки, произвольные формы. Дают характер и настроение, но требуют чувства меры.

Персонажные и предметные . Повторяющиеся фигурки, иконки, объекты. Часто используют в детских товарах и мерче.

Текстовые . Раппорт строится из слов, букв или логотипа. Прием популярен в мерче и упаковке, работает на узнаваемость.

Орнаментальные . Построены на традиционных мотивах. О них подробнее ниже.

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

Как устроено повторение

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

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

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

Зеркальное отражение . Раппорт отражается по осям. Дает симметрию и декоративность, характерно для тканей и обоев.

Поворот . Элементы разворачиваются на определенный угол внутри раппорта. Усложняет рисунок при том же наборе объектов.

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

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

Узбекский орнамент как рабочий ресурс

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

Что есть в распоряжении . Гирих, геометрический орнамент со строгим математическим построением, знакомый по резьбе и кирпичной кладке. Ислими, растительный узор с плавными переплетающимися побегами. Мотивы сузане с крупными розетками и стилизованными растениями. Майолика Самарканда, Бухары и Хивы с ее сине-бирюзовой гаммой. Резьба по ганчу и по дереву. Мотив хлопковой коробочки, ставший почти официальным символом.

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

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

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

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

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

Где применяют паттерны

Айдентика . Фирменный паттерн описывается в брендбуке наравне с логотипом и цветами. Его сила в том, что он работает без логотипа: узнаваемый узор на упаковке говорит о бренде, даже когда знак не виден.

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

Полиграфия . Форзацы, обложки, визитки, фоны презентаций.

Веб и интерфейсы . Фоны секций, разделители, декоративные подложки. Здесь особенно важна сдержанность.

Мерч и униформа . Футболки, сумки, фартуки, спецодежда.

Интерьер . Обои, плитка, текстиль, декоративные панели.

Трехмерная графика . Бесшовные текстуры натягиваются на модели, и без них не обходится ни визуализация интерьера, ни игровая локация. Работа с материалами и текстурами входит в программу курса Blender: четыре месяца, основы 3D-графики, визуализация и анимация.

Как создать паттерн

Общий порядок одинаков независимо от программы.

Шаг 1. Определите задачу . Где паттерн будет жить, в каком размере, что должно быть поверх него. Узор для фона сайта и узор для упаковки конфет решают разные задачи.

Шаг 2. Соберите элементы . Отрисуйте объекты, из которых будет строиться раппорт. На старте достаточно двух-трех.

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

Шаг 4. Выберите схему повторения . Прямая, со смещением, с поворотом. От нее зависит характер узора.

Шаг 5. Проверьте стыки . Размножьте фрагмент и посмотрите на результат целиком. Ищите не только швы, но и незапланированные диагонали и пустоты, которые проявляются только на большой площади.

Шаг 6. Проверьте в масштабах . Посмотрите, как узор выглядит на визитке и на плакате. Часто требуется сделать две версии с разной плотностью.

Шаг 7. Проверьте в цвете печати . Тонкие линии и мелкие детали при печати могут слипнуться или пропасть.

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

Типичные ошибки

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

Паразитные линии . Элементы случайно выстраиваются в диагональ или полосу, которой не было в замысле. Заметно только на большой площади.

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

Конфликт с логотипом . Паттерн перетягивает внимание на себя, и знак теряется.

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

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

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

Один паттерн на все случаи . Для разных носителей обычно нужны версии с разной плотностью.

Другие значения слова

Чтобы не было путаницы при поиске.

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

Поведенческий паттерн в психологии . Повторяющаяся последовательность действий человека.

Паттерн проектирования в программировании . Типовое решение часто встречающейся архитектурной задачи.

Общее у всех значений одно: повторяемость. Дальше области расходятся.

Частые вопросы

Как правильно, паттерн или патерн?

Паттерн, с двумя буквами «т», по написанию английского pattern.

Чем паттерн отличается от текстуры?

Паттерн строится на точном повторении одинаковых элементов, текстура имитирует поверхность и точного повторения не имеет.

Что такое бесшовный паттерн?

Тот, у которого края раппорта совмещаются без видимого стыка, поэтому им можно закрыть поверхность любого размера.

В какой программе делать паттерн?

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

Можно ли брать готовые паттерны со стоков?

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

Обязателен ли паттерн в фирменном стиле?

Нет. Но он дает бренду дополнительный узнаваемый носитель, который работает там, где логотип не помещается или неуместен.

Сколько элементов должно быть в раппорте?

Жесткого правила нет. Начинающим проще начать с двух-трех: это уже дает вариативность, но еще позволяет контролировать стыки.

Что дальше

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

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

Если пока выбираете направление, пройдите бесплатный IT-тест: он покажет, что вам ближе, графика, трехмерная среда или интерфейсы.