Хочеш створювати дизайн-системи? Заглядай сюди! Оновити віжуал бренду, який уже має свій стиль, та ще задачка із зірочкою! Хочеться новизни, але так, щоб підписники не подумали, що випадково зайшли в чужий профіль (і не почали нервово шукати кнопку відписатись).
Спойлер: просто змінити кольори чи шрифт тут не вийде, бо треба вберегти те, за що бренд уже впізнають, і продумати, як дизайн працюватиме далі.
Розберімо все на прикладі HEY BECCA, бренду естетичних та комфортних речей, створених за передовими технологіями.
HEY BECCA був навчальним проєктом учня курсу з SMM-дизайну у Figma — Антона. Він є таргетологом, який хоче нішувати в дизайн для соцмереж.
Гляньмо, як йому вдалось оновити дизайн-систему для бренду одягу!
Із чого почати, перш ніж бігти в Pinterest?
Перша спокуса схожа в усіх: відкрити Pinterest і назбирати красивих референсів. АЛЕ картинка, яка подобається тобі, ще не означає, що вона метчиться з брендом (це як купити класні черевики на розмір менше, бо знижка).
Для HEY BECCA Антон обрав мінімалізм, функціональність і виразні графічні акценти: капслок підсвідчує fashion-естетику, а стікери з ефектом ручного малюнка додають легкості й грайливості, тож віжуал виходить сучасним, але не стерильним.
А потім з’явився мудборд, який переклав слова мовою картинок, щоб уся команда уявляла одне й те саме.
Але мудборд лише показує напрям, а правила створення макетів дає саме дизайн-система.
Що входить у дизайн-систему?
Кольори, шрифти, фото, фірмові елементи й композиція. Але підібрати палітру й шрифт замало, треба ще домовитися, як саме їх використовувати, інакше кожен допис виглядатиме як окремий експеримент.
Пройдемося по кожному пункту з прикладами, які підбрав учень курсу з SMM-дизайну.
Як обрати кольори для бренду?
За основу Антон взяв кольори з брендбуку компанії, бо соцмережі не мають жити окремо від фірмого стилю.
А ще залишив не лише вдалі поєднання, а й заборонені. Наприклад, білий текст на жовтому погано зчитується.
Шрифти для бренду
HEY BECCA юзає сучасний гротеск LINE Seed JP: заголовки набирають капслоком, а підзаголовки й основний текст рядковими літерами.
Які фото пасують fashion-бренду?
Ті, що передають емоцію й характер, а не просто показують річ. У гайдлайні HEY BECCA перевага за сміливими зйомками з цікавими локаціями, рухом і нестандартними позами.
А ще в гайдлайні є список заборон, який економить команді години суперечок.
Навіщо бренду фірмові елементи?
Щоб бренд впізнавали навіть без лого. У HEY BECCA це обводка тексту, яка рятує читабельність й перетворює напис на стікер і іконки, намальовані ніби від руки.
Як дизайн-система працює в інших форматах?
Учень перевірив систему не лише на дописах, а й на хайлайтах, рекламних макетах, бо система, яка працює тільки в одному форматі, ще не система.
Тобто дизайн-система потрібна не для одного красивого допису, а для того, щоб стиль тримався в усіх форматах.
Як перевірити впізнаваність бренду?
Прибери лого з трьох різних дописів і подивися, чи все ще зрозуміло, чиї вони. Якщо так, система працює, якщо ні, стиль поки тримається лише на логотипі.
Збережи собі цю шпаргалку.
HEY BECCA цей тест проходить завдяки вершково-жовтому, капслоку й стікерам із обводкою. Впізнаваність починається з візуальних рішень, які повторюються.
Чому гарний допис ще не означає гарний профіль?
Бо люди бачать не один макет, а всю стрічку. Навіть класно задизайнений допис поруч із рештою може виглядати як далекий родич, якого ти вперше бачиш. Тому оцінювати треба все разом.
У проєкті HEY BECCA Антон зумів поєднати продуктові фото, lifestyle-кадри й графічні макети без жорсткої схеми чергування, тож стрічка вийшла цілісною, але не одноманітною.
Тож із поставленою задачкою учень впорався — зумів як зберегти вже впізнавані елементи бренду, так обіграти їх з новими рисами в дизайн-системі і забрати цей собі кейс в портфоліо.
А відгуки говорять самі за себе — Антон працював разом із куратором Марією, яка підсвідчувала дорогу, відповідала на питання та пройшла весь шлях разом із учнями.
Як зробити дизайн-систему зручною в роботі?
Збери шаблони й пропиши безпечні зони, і макет збиратиметься за хвилини. Адже хороша дизайн-система не лише гарно виглядає, а й економить час на створенні контенту.
Як оновити віжуал бренду вже зараз?
Переробляти весь профіль одразу не обов’язково. Почни з чотирьох кроків:
- Проведи аудит. Знайди, що вибивається зі стилю.
- Збери мудборд. Обери референси, які пасують саме бренду.
- Затести макети. Подивися, як нові рішення виглядають разом у стрічці.
- Створи шаблони. Щоб щоразу не починати з нуля.
Хочеш теж навчитися будувати дизайн-системи і щоб тут був й твій кейс? Залітай на курс SMM-дизайн у Figma, де опануєш графічний, SMM-дизайн і тренуватимешся на справжніх брендах, які потім оселяться в твоєму портфоліо.
Висновок
Оновити віжуал і не загубити себе можна, якщо спершу відповісти, хто ти і за що тебе вже впізнають.
У HEY BECCA такими правилами стали три кольори з чіткими ролями, шрифти, живі фото замість каталожних, стікери з обводкою, і тепер будь-який допис чи реклама виглядають як частина однієї історії.
І найприємніше, що така система працює не лише на красу: вона економить час команді, закриває суперечки й дає бренду свободу експериментувати, не ризикуючи стати невпізнаваним. Виділяє бренд не один вдалий допис, а стиль, який тримається в кожному з них.
