Как паттерны упрощают жизнь и развивают креативность
Если у вас есть свое медиа или блог, вам наверняка знакома боль с подбором иллюстраций (да, эта статья была написана до появления Midjourney). Рассказываем о проблеме, с которой мы столкнулись при поиске иллюстраций для Топвизор-Журнала, нашего корпоративного блога, и делимся тем, какое мы нашли решение, да еще и со множеством применений.
Кейсом поделились Юля Федотова, директор по продукту, и Саша Кафтанов, руководитель отдела дизайна. Мы из Топвизора — сервиса поисковой аналитики, и у нас есть бренд-медиа Топвизор-Журнал. Пишем о SEO и маркетинге, публикуем кейсы об успехах и факапах в продвижении.
Пока мы публиковали эту статью, в Топвизор-Журнале уже успел произойти редизайн. Повод сравнить Журнал «до» и «после», да и советы по паттернам от этого актуальности не потеряли!
С чего все началось: оформляем бренд-медиа
Проблема у нас была одна: ограниченный бюджет на иллюстратора. В Топвизор-Журнале есть несколько рубрик, одна из них — «Новости». В SEO постоянно что-то меняется, поисковики обновляют свои алгоритмы, так что у нас ежедневно выходит несколько новостей. Дизайном Журнала в ленте статей у каждого поста была предусмотрена своя картинка, но столько иллюстраций, естественно, за деньги не закажешь. Поэтому мы брали картинки с Pixabay и вставляли их на цветной фон. Вот как это выглядело:
Честно? Скучновато. Проблема ведь еще и в том, что под этот стиль нам приходилось подгонять оформление других рубрик — и мы заказывали иллюстрации у профессионалов. Ведь было бы странно, если в одном разделе были картинки в стиле Shutterstock, а в другом — броские авторские иллюстрации, как, например, в СВОИХ или Трудовой обороне.
Стадию осознания проблемы мы прошли. Выделение бюджета под иллюстратора отдельно для новостей в нашем случае не было выходом, поэтому осталось два варианта:
- сделать редизайн и не делать картинки в новостях;
- придумать способ делать разнообразные красивые картинки бесплатно (и без регистрации).
Вариант сложный. Редизайн
О редизайне Журнала можно написать отдельную статью — и мы напишем! Пока только скажем, что сначала был редизайн, а потом редизайн редизайна 😭 — он сейчас на проде. Наш совет: когда делаете редизайн, стремитесь к единому видению. Сначала у нас его не было, и мы все передрались. Но те, кто выжил, многому научились.
Обе версии объединяет одно: у новостей нет картинок. Во-первых, это сэкономит время редактору — ему не придется искать и вставлять подходящую картинку. Во-вторых, это убирает одну переменную в визуальном стиле Журнала.
Вариант попроще. Паттерны
Делать редизайн — долго, дорого, офигенно. А бесплатные красивые иллюстрации нам были нужны еще вчера.
Решение пришло: паттерны.
Паттерн — это бесшовный узор с повторяющимися элементами. За примерами далеко ходить не надо: обои у вас дома или плитка в туалете. Даже школьная тетрадка в клетку — тоже своего рода паттерн, состоящий из равноудаленных горизонтальных и вертикальных линий.
Более интересный пример паттерна — это калейдоскоп. В нем повторяющийся узор расположен не по сетке из направляющих линий, а по радиусу. Но практичность его использования ограничена форматом.
Идея не нова: есть много живых примеров использования паттернов в блогах, и даже целый раздел у студии Лебедева.
А вот как выглядел Топвизор-Журнал с паттернами на обложках статей:
Как сделать паттерн
Мы делаем паттерны в Figma.
- Создаете квадрат и назначаете его компонентом.
- Дублируете дочерние компоненты.
- Складываете их в один большой квадрат (или прямоугольник).
Теперь, если вы поместите любой объект в родительский квадрат, он будет дублироваться во всех его копиях.
Попробуйте — у нас есть инструкция и пример настроенного компонента. Скопируйте файл себе и попробуйте повставлять что угодно в родительский компонент — хоть писек. Гарантированно займете не только дизайнера, но любого айтишника на 2-3 часа.
Как паттерны тренируют креативность
Паттерны — это еще и отличная возможность для дизайнеров потренировать креативность и художественное мышление. Ведь создать классный паттерн не так-то просто: нужно сделать его таким, чтобы при склейке он повторялся без ошибок.
У нас в Топвизоре есть такая практика: раз в неделю мы садимся и делаем паттерны — пять штук в течение часа. Время строго ограничено. Потом смотрим, что получилось.
Если проделывать такое упражнение регулярно, рано или поздно вы исчерпаете идеи на поверхности; и с каждым разом находить интересное решение или идею будет все сложнее.
Уже спустя месяц мы стали тратить все больше времени на поиск новых идей и реализацию чего-то более необычного, чем расположение на паттерне разных фигур. Когда время в таймере заканчивалось, мы выдавали не пять, а всего лишь один-два паттерна, но сложных. Это не минус, а закономерный итог развития подобной практики.
На данный момент наш отдел из трех дизайнеров успел создать 200 паттернов. Есть запас обложек для Топвизор-Журнала на год вперед; а исхитряться и делать какой-нибудь крутой паттерн каждый раз интересно. Вот некоторые из наших паттернов:
Конечно, мы собрали для статьи самые лучшие работы. Но если проследить историю создания паттернов от первого до последнего — видно, что мы стали применять более замысловатые графические приемы и находить необычные цветовые сочетания. Это влияет не только на паттерны, но и на весь проект в целом.
Как уменьшить размер паттерна
На этом наши приключения с оформлением Топвизор-Журнала не закончились.
Недавно наш техдир Артем заметил, что что-то в хранилище занимает очень много места — это оказались наши паттерны. Мы делали компоненты и сохраняли финальный большой паттерн в SVG. Поэтому он весил столько, сколько весила оригинальная SVG-шка, умноженная на число повторений в паттерне. А это — до 2-х космических Мб.
Мы протестировали много способов уменьшить размер паттерна, оставив SVG-исходник, но у нас ничего не получалось. Поэтому сейчас делаем так: оригинальный маленький кубик мы сохраняем в PNG 2x, а потом заполняем им нужную картинку с помощью опции Tile; подробную инструкцию оставили тут. Финальную картинку выгружаем уже в SVG — и она весит примерно 80-100 Кб.
Вместо вывода
Даже если ваше медиа не использует паттерны, или у вас вообще нет медиа — все равно пробуйте создавать их в качестве упражнения на креативность. Это весело и интересно, а еще заставляет мозг придумывать и вспоминать необычные образы и сочетания.
Ну и всем известно, что невозможно написать статью для vc и не пропиарить свой канал. Подписывайтесь на Юлин канал «Продакт тётя Юля», если вам интересно почитать про внутрянку Топвизора и полевой опыт управления продуктом из первых рук.
Согласен.
Паттерны - классная штука.
Когда придумал как их применять - сразу резко скакнул уровень картинок для статей.
Правда для своего сайта делаю в Кандинском и Dezgo - и занятие настолько залипательное, что часто приходится себя заставлять остановиться - ведь паттерны не самоцель. ))
Зато разнообразие немыслимое. )
Иногда для генерации основной идеи (объекта) паттерна мы используем Fusion Brain. Помогает быстро найти нужную форму или мотив. Но в основном лучше прибегать к самостоятельному поиску идей. Так можно лучше развить скорость поиска и синтеза идеи)
практика создания паттернов довольно интересная и с точки зрения практичности удобна
Да, каждый раз интересно придумывать новый паттерн, хоть это все сложней и сложней
Как человек, причастный к созданию паттернов, скажу, что это самое залипательное занятие, которое только может быть. Очень классно разгружает мозг и позволяет на время сместить фокус с какой-нибудь большой задачи, а после взглянуть на нее свежим взглядом))
Первый выпуск Midjourney был 12 июля 2022 года, насколько давно вы написали статью
Примерно весной 22-го мы начали делать паттерны, а летом появилась идея написать статью. Потом написали, но vc ввел платную подписку, а мы откладывали ее покупку)