Как паттерны упрощают жизнь и развивают креативность

Если у вас есть свое медиа или блог, вам наверняка знакома боль с подбором иллюстраций (да, эта статья была написана до появления Midjourney). Рассказываем о проблеме, с которой мы столкнулись при поиске иллюстраций для Топвизор-Журнала, нашего корпоративного блога, и делимся тем, какое мы нашли решение, да еще и со множеством применений.

Кейсом поделились Юля Федотова, директор по продукту, и Саша Кафтанов, руководитель отдела дизайна. Мы из Топвизора — сервиса поисковой аналитики, и у нас есть бренд-медиа Топвизор-Журнал. Пишем о SEO и маркетинге, публикуем кейсы об успехах и факапах в продвижении.

Пока мы публиковали эту статью, в Топвизор-Журнале уже успел произойти редизайн. Повод сравнить Журнал «до» и «после», да и советы по паттернам от этого актуальности не потеряли!

Проблема у нас была одна: ограниченный бюджет на иллюстратора. В Топвизор-Журнале есть несколько рубрик, одна из них — «Новости». В SEO постоянно что-то меняется, поисковики обновляют свои алгоритмы, так что у нас ежедневно выходит несколько новостей. Дизайном Журнала в ленте статей у каждого поста была предусмотрена своя картинка, но столько иллюстраций, естественно, за деньги не закажешь. Поэтому мы брали картинки с Pixabay и вставляли их на цветной фон. Вот как это выглядело:

Честно? Скучновато. Проблема ведь еще и в том, что под этот стиль нам приходилось подгонять оформление других рубрик — и мы заказывали иллюстрации у профессионалов. Ведь было бы странно, если в одном разделе были картинки в стиле Shutterstock, а в другом — броские авторские иллюстрации, как, например, в СВОИХ или Трудовой обороне.

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

• сделать редизайн и не делать картинки в новостях;
• придумать способ делать разнообразные красивые картинки бесплатно (и без регистрации).

О редизайне Журнала можно написать отдельную статью — и мы напишем! Пока только скажем, что сначала был редизайн, а потом редизайн редизайна 😭 — он сейчас на проде. Наш совет: когда делаете редизайн, стремитесь к единому видению. Сначала у нас его не было, и мы все передрались. Но те, кто выжил, многому научились.

Обе версии объединяет одно: у новостей нет картинок. Во-первых, это сэкономит время редактору — ему не придется искать и вставлять подходящую картинку. Во-вторых, это убирает одну переменную в визуальном стиле Журнала.

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

Решение пришло: паттерны.

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

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

Идея не нова: есть много живых примеров использования паттернов в блогах, и даже целый раздел у студии Лебедева.

А вот как выглядел Топвизор-Журнал с паттернами на обложках статей:

Мы делаем паттерны в Figma.

• Создаете квадрат и назначаете его компонентом.
• Дублируете дочерние компоненты.
• Складываете их в один большой квадрат (или прямоугольник).

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

Попробуйте — у нас есть инструкция и пример настроенного компонента. Скопируйте файл себе и попробуйте повставлять что угодно в родительский компонент — хоть писек. Гарантированно займете не только дизайнера, но любого айтишника на 2-3 часа.

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

У нас в Топвизоре есть такая практика: раз в неделю мы садимся и делаем паттерны — пять штук в течение часа. Время строго ограничено. Потом смотрим, что получилось.

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

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

На данный момент наш отдел из трех дизайнеров успел создать 200 паттернов. Есть запас обложек для Топвизор-Журнала на год вперед; а исхитряться и делать какой-нибудь крутой паттерн каждый раз интересно. Вот некоторые из наших паттернов:

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

На этом наши приключения с оформлением Топвизор-Журнала не закончились.

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

Мы протестировали много способов уменьшить размер паттерна, оставив SVG-исходник, но у нас ничего не получалось. Поэтому сейчас делаем так: оригинальный маленький кубик мы сохраняем в PNG 2x, а потом заполняем им нужную картинку с помощью опции Tile; подробную инструкцию оставили тут. Финальную картинку выгружаем уже в SVG — и она весит примерно 80-100 Кб.

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

Ну и всем известно, что невозможно написать статью для vc и не пропиарить свой канал. Подписывайтесь на Юлин канал «Продакт тётя Юля», если вам интересно почитать про внутрянку Топвизора и полевой опыт управления продуктом из первых рук.