Розробка брендбуку
Система, за якою можна зібрати продукт, а не PDF, який ляже в архів.
Ми робимо брендбуки з 2018 року — і з 2021-го самі пишемо код за цими брендбуками. Це змінює те, що потрапляє всередину: замість «логотип на білому і на чорному» там опиняються мінімальні розміри для 44-піксельної кнопки, поведінка сітки на 320px, контрасти під темну тему і те, що робити з кирилицею, якої немає у фірмовому шрифті.
Коротко для тих, хто порівнює пропозиції. Брендбук за 20–30 тисяч гривень — це, як правило, 10–15 сторінок правил для логотипа. Ми робимо інше: систему, придатну до реалізації, з дизайн-токенами й документацією для розробників. Якщо задача — швидко й недорого отримати правила для логотипа, ми не найкращий вибір, і чесно про це кажемо.
Що входить у брендбук
Не список сторінок, а перелік рішень, які хтось має ухвалити. Якщо їх не ухвалить студія, їх ухвалюватиме розробник у ніч перед релізом — навмання.
Логотип і знак
Основна версія, горизонтальна, компактна, монохромна. Мінімальні розміри окремо для друку й екрана. Охоронне поле. Що заборонено — з прикладами, а не абстрактно.
Кольори
Не «палітра з шести кольорів», а роль кожного: основний, акцент, поверхні, текст, стани помилки й успіху. У HEX, RGB, CMYK і Pantone для друку. Перевірені контрастні пари під WCAG — інакше на етапі верстки з'ясується, що фірмовий сірий на білому нечитабельний.
Типографіка
Шрифтова пара, шкала розмірів, міжрядкові інтервали, поведінка на малих екранах. Обов'язково — кирилиця. Половина модних гротесків її не підтримує, і це виявляється тоді, коли макет уже затверджено.
Сітка й відступи
Модульна сітка, крок відступів, правила компонування. Це те, що перетворює набір елементів на систему, яку може продовжити інша людина.
Графіка й патерни
Фірмові елементи, іконки, ілюстративний підхід, правила фотографії.
Носії
Від візитівки до брендування транспорту — залежно від бізнесу. Для Soloway ми зробили 17 позицій: від блокнота й кухля до килимка для йоги й наклейок.
Цифрові компоненти
Кнопки, поля, картки, стани — у вигляді, придатному для верстки. Це те, чого немає в класичних брендбуках і через що вони не переживають продакшн.
Дизайн-токени
Кольори, розміри й шрифти, експортовані у формат, який розробник підключає одним рядком: CSS-змінні, конфіг Tailwind, змінні Figma. Це і є місток між PDF і кодом.
Tone of voice
Як бренд говорить: приклади «так» і «не так» на реальних фразах, а не абстрактні прикметники.
Як це виглядає на практиці
Ridex — брендбук на 21 сторінку і застосунок за ним
Сервіс шерінгу електросамокатів в Івано-Франківську. Місто, де такого формату не було взагалі, тож брендбук мав пояснити не тільки як виглядає бренд, а й що робити користувачу: підійти, розблокувати телефоном, поїхати.
Ми зробили нейминг, знак, систему, брендбук — і застосунок за цим брендбуком. Далі фірмовий стиль пішов на самі самокати: лівреї, номери, елементи навігації в місті.
Що це доводить: брендбук перевіряється не на презентації, а тоді, коли за ним треба зверстати екран і наклеїти плівку на техніку.
Дивитись кейс Ridex →
Soloway — 30 сторінок і 17 носіїв
Корпоративний бренд, де завдання було не в знаку, а в масштабі: система мала однаково працювати на документі, на мерчі й на цифрових носіях. Тридцять сторінок правил і сімнадцять реалізованих позицій.
Дивитись кейс Soloway →Secret Coffee — бренд, який усе ще працює
Ідентика, застосунок підписок і магазин. Найцінніше тут не картинки, а факт: бренд живий і працює досі, без редизайну. Це найчесніший тест якості системи — не як вона виглядає на подачі, а чи витримує вона щоденне використання.
Дивитись кейс Secret Coffee →
Сім помилок, через які брендбук не працює
Ми зробили близько десятка брендбуків і ще стільки ж отримали в роботу від інших студій, коли нас кликали робити продукт. Це список того, що ламається найчастіше.
Шрифт без кирилиці
Найпоширеніша й найдорожча помилка. Гарнітуру обирають за естетикою на англомовному макеті, брендбук затверджують — а потім з'ясовується, що українського тексту в ній не існує. Далі два шляхи: міняти шрифт і переробляти всю систему або підставляти випадкову заміну, і бренд втрачає впізнаваність на власному ринку. Перевіряти треба до першої концепції, а не після.
Кольори без ролей
Палітра з шести квадратиків нічого не каже про те, який колір відповідає за помилку у формі, який — за тло картки, а який — за текст на цьому тлі. Розробник вирішує це сам, і в кожному новому екрані вирішує по-різному. Через рік у продукті двадцять відтінків замість шести.
Контрасти, яких ніхто не перевіряв
Фірмовий світло-сірий на білому виглядає стильно в презентації й нечитабельно на телефоні при сонці. Якщо в брендбуку не зафіксовані перевірені пари, доступність доводиться рятувати на етапі верстки — і тоді від фірмових кольорів лишається половина.
Логотип без мінімального розміру для екрана
Правила зазвичай пишуть для друку: «не менше 20 мм». Скільки це в пікселях на аватарці 44×44 — не сказано ніде. У результаті знак у мобільній шапці перетворюється на пляму.
Немає станів
Кнопка намальована в одному стані. Що з нею відбувається при наведенні, натисканні, блокуванні, завантаженні — не описано. Це чотири рішення на кожен елемент, які хтось ухвалить замість вас.
Брендбук як картинка, а не як дані
PDF, з якого розробник вручну переписує коди кольорів. Кожне таке переписування — можливість помилитись, і помилки знаходять через півроку. Дизайн-токени вирішують це повністю: значення одне, джерело одне.
Немає правил для того, чого ще не існує
Хороший брендбук описує не тільки наявні носії, а й принцип, за яким робити наступні. Інакше при першій же новій задачі — від упаковки до банера — все починається спочатку.
Наші брендбуки після 2021 року закривають усі сім пунктів. Не тому, що ми розумніші, а тому, що ми самі верстали за власними документами й на кожній із цих помилок один раз наступили.
Види брендбуків
Не всім потрібна максимальна комплектація. Три формати, які реально мають сенс:
Логобук
Логотип, кольори, шрифти, базові правила. 10–15 сторінок. Підходить, коли бренд щойно з'явився і потрібна база, щоб не було різнобою.
Брендбук
Повна айдентика: система, носії, графіка, tone of voice, 25–35 сторінок. Стандартний вибір для бізнесу, який виходить на ринок або оновлює образ.
Брендбук із дизайн-системою
Усе вище плюс цифрові компоненти, стани, дизайн-токени й документація для розробників. Обирають, коли одразу після брендбуку йде сайт або застосунок — а це майже завжди.
Якщо після брендбуку планується продукт, третій варіант виходить дешевшим за суму «брендбук окремо + адаптація під розробку потім». Другий раз за ті самі рішення платити не доводиться.
Що впливає на ціну: кількість носіїв, потреба в неймингу, кількість мов, глибина дослідження ринку, терміновість.
Що обрати: порівняння
| — | Логобук | Брендбук | Брендбук + дизайн-система |
|---|---|---|---|
| Логотип і версії | ✓ | ✓ | ✓ |
| Кольори з ролями | базово | ✓ | ✓ |
| Типографічна шкала | — | ✓ | ✓ |
| Сітка й відступи | — | ✓ | ✓ |
| Носії | 2–3 | 8–15 | 8–15 |
| Tone of voice | — | ✓ | ✓ |
| Цифрові компоненти і стани | — | — | ✓ |
| Дизайн-токени для розробки | — | — | ✓ |
| Придатність зверстати продукт | ні | частково | так |
| Термін | 2–3 тижні | 4–6 тижнів | 5–7 тижнів |
Найчастіша ситуація: беруть середній варіант, через три місяці починають робити сайт — і доводиться повертатись за третім. Якщо продукт у планах є, дешевше одразу взяти третій.
Як ми працюємо
Дослідження — 3–5 днів
Ніша, 3–5 конкурентів, аудиторія. На виході коротка записка, а не стосторінкова презентація. Ми показуємо її до того, як почати малювати, — щоб розбіжності виявились на цьому етапі, а не на четвертому.
Платформа бренду — 3–4 дні
Позиціонування, цінності, tone of voice. Дві-три сторінки, які треба затвердити. Усе, що намальовано далі, спирається на цей документ.
Ідентика — 1,5–2 тижні
Три концепції знака, вибір однієї, доопрацювання. Ми не показуємо тридцять варіантів: три опрацьовані сильніші за тридцять поверхневих.
Система і носії — 1–1,5 тижні
Палітра, типографіка, сітка, патерни, набір носіїв під конкретний бізнес.
Брендбук і передача — 3–5 днів
Документ, вихідники, дизайн-токени, ліцензії на шрифти. Плюс година розмови з тими, хто цим користуватиметься далі.
Разом 4–6 тижнів. Два раунди правок на кожному етапі входять у вартість.
Ціна
Відкрито, бо приховані ціни забирають час обом сторонам.
| Формат | Вилка | Термін |
|---|---|---|
| Логобук | $1 200 – 2 000 | 2–3 тижні |
| Брендбук | $2 500 – 4 500 | 4–6 тижнів |
| Брендбук + дизайн-система | $4 500 – 7 000 | 5–7 тижнів |
| Нейминг окремо | $600 – 1 200 | 1–2 тижні |
Оплата 50 / 50: половина на старті, половина перед передачею. Права переходять вам після повної оплати.
Як ми рахуємо вартість
Не «від балди» і не за кількістю сторінок. Три множники:
Обсяг системи
Скільки носіїв, чи потрібні цифрові компоненти, скільки мов. Двомовний бренд — це не «те саме плюс переклад», це перевірка кожного рішення на двох алфавітах.
Глибина дослідження
Для нового ринку потрібен аналіз, для оновлення наявного бренду часто достатньо аудиту того, що вже є.
Терміновість
Стиснення строку вдвічі коштує дорожче не тому, що ми зловживаємо, а тому, що паралельна робота потребує більше людей і більше узгоджень.
Що саме ви отримуєте у файлах
Перелік важливий: «брендбук» у різних студій означає різні комплекти, і порівнювати пропозиції без цього списку неможливо.
- PDF брендбуку — основний документ, придатний і для перегляду з екрана, і для друку
- Логотип у векторі — SVG, AI, EPS: усі версії, включно з монохромною й компактною
- Растрові версії — PNG із прозорістю в трьох розмірах, favicon і набір іконок застосунку
- Шрифти — файли й ліцензії, окремо для веб і для друку. Якщо гарнітура платна, ми називаємо вартість до затвердження, а не після
- Дизайн-токени — JSON, CSS-змінні, конфіг Tailwind, змінні Figma
- Макети носіїв — у форматі, готовому до передачі в друк, із вильотами й правильним профілем
- Figma-файл — із компонентами, а не пласкими картинками
- Патерни й графіка — вихідники, не експорти
Усе це передається одним архівом плюс доступ до Figma. Права переходять вам після повної оплати, без обмежень на використання.
Кому ця послуга не підходить
- Потрібен логотип за тиждень і за 300 доларів. Це нормальна задача, але не наша — її швидше й дешевше закриє фрилансер
- Бренд уже є і подобається, треба тільки сайт. Тоді вам потрібна не ця сторінка, а розробка сайту
- Рішення ухвалює комітет із восьми людей без права вирішального голосу. Ми працюємо з одним замовником, який може сказати «так»
- Потрібно «як у конкурента, тільки інший колір». Ми на це не погоджуємось — це не економія, це відкладена переробка
Чим ми відрізняємось
Ми пишемо код за власними брендбуками
Це не слоган: у портфоліо є проєкти, де ми зробили і бренд, і продукт — Ridex, Secret Coffee. Тому в наших документах немає рішень, які неможливо реалізувати.
Немає етапу передачі дизайну розробникам
Це найдорожчий етап у більшості проєктів: перечитування макетів, питання без адресата, стани, яких немає в Figma. У нас ланцюжок закінчується всередині команди.
Дизайн-токени в комплекті
Розробник отримує не картинки, а змінні, які підключаються одним рядком.
Ми лишаємось після здачі
Брендбук — не кінець роботи, а початок його використання. Питання виникають на третьому місяці, і ми на них відповідаємо.
Питання, які ставлять найчастіше
Чим брендбук відрізняється від логобуку?
Логобук описує логотип: версії, розміри, охоронне поле, заборони. Брендбук описує систему: кольори з ролями, типографіку, сітку, носії, тон комунікації. Якщо бренду потрібно жити на десяти носіях і в інтерфейсі — логобуку не вистачить.
Скільки коштує брендбук?
Наші вилки: логобук від $1 200, брендбук від $2 500, брендбук із дизайн-системою від $4 500. На ринку є пропозиції в 20–30 тисяч гривень — за ці гроші зазвичай роблять 10–15 сторінок правил для логотипа без системи й без придатності до розробки. Це не погано, це інша послуга.
Скільки триває розробка?
4–6 тижнів для повного брендбуку. Швидше можливо, але за рахунок етапу дослідження — і тоді ризик переробок зростає.
Що я отримаю на виході?
PDF-документ, усі вихідники у векторі, шрифти з ліцензіями, дизайн-токени для розробки й макети носіїв, готові до друку.
Чи можна замовити тільки логотип?
Можна, але ми радимо мінімум логобук. Логотип без правил використання за півроку перетворюється на п'ять різних логотипів у руках п'яти підрядників.
Що робити, якщо у фірмовому шрифті немає кирилиці?
Це одна з найчастіших проблем, і вирішувати її треба на етапі вибору шрифту, а не після затвердження макетів. Ми або обираємо гарнітуру з кирилицею одразу, або підбираємо кириличну пару, узгоджену за вагою й характером, і фіксуємо це правилом у брендбуку.
Чи потрібен брендбук, якщо в компанії дві людини?
Якщо ви замовляєте дизайн у підрядників — так, він окупається на другому ж проєкті: ви перестаєте пояснювати одне й те саме кожному новому виконавцю. Якщо весь дизайн робить одна людина всередині — можна почати з логобуку.
Ви працюєте віддалено?
Так. Більшість проєктів ведеться віддалено, зустрічі за потреби — у Києві.