Дизайн у Figma
Дизайн сайту у Figma, готовий до верстки.
Прототип, дизайн-система й адаптивні макети в одному файлі: з компонентами, станами кнопок і полів, сітками та реальними довжинами текстів. Розробник відкриває файл і працює, а не питає, що робити з блоком на мобільному.
Можемо зробити тільки дизайн — або дизайн і розробку в одному потоці.
Красива картинка й робочий макет — різні речі. Макет стає робочим, коли в ньому є компоненти, стани, поведінка на вузьких екранах і відповідь на питання «що буде, якщо тексту вдвічі більше».
Наш підхід
Перевірений шлях до результату.
- 01 Вхідні дані Задачі бізнесу, аудиторія, приклади, обмеження бренду й технічні вимоги.
- 02 Структура Карта сторінок і блоків: що людина має зрозуміти й зробити на кожному екрані.
- 03 Прототип Чорно-білі схеми ключових сторінок — швидко правити, поки немає кольору.
- 04 Візуальна мова Типографіка, палітра, сітка, стиль зображень і поведінка елементів.
- 05 Макети Десктоп і мобільна версія кожного шаблону + стани й порожні екрани.
- 06 Передача Файл із компонентами, шрифтами, іконками та коментарями для розробника.
Обсяг робіт
Що входить у послугу.
Прототипи
Схеми ключових сторінок до початку візуального дизайну.
Дизайн-система
Кольори, типографіка, відступи, кнопки, поля, картки, повідомлення про помилки.
Макети сторінок
Головна, послуга чи категорія, картка товару, контакти, форма, службові сторінки.
Адаптив
Мобільна версія кожного шаблону, а не одна «десктопна» картинка.
Стани інтерфейсу
Наведення, фокус, помилка, успіх, порожній список, завантаження.
Іконки та графіка
Єдиний набір іконок і підготовлені зображення у форматах для вебу.
Файл для розробки
Структуровані сторінки, названі шари, компоненти й авто-лейаут.
Чому BiiD
Не чекліст. Система, що працює.
Питання вирішуються в макеті, а не після того, як усе зверстано.
Перевіряємо макет довгими заголовками, а не короткою рибою.
Нові сторінки збираються з готових компонентів системи.
Продовжити роботу зможе будь-який дизайнер, не тільки ми.
FAQ
Питання, які ставлять найчастіше.
Так. Ви отримуєте файл Figma з макетами, компонентами й дизайн-системою — його може взяти в роботу будь-яка команда розробки.
Зазвичай 6–8 шаблонів: головна, сторінка послуги, каталог послуг, про компанію, контакти, стаття блогу та службові сторінки. Решта сторінок збирається з тих самих блоків.
Правки закладені на кожному етапі: на прототипі, на візуальній мові та на макетах. Обсяг ітерацій фіксуємо на старті, щоб робота не перетворилась на нескінченне узгодження.
Так, якщо він є — використовуємо його кольори, шрифти й правила. Якщо брендбука немає, збираємо мінімальну візуальну систему в межах проєкту.
Файл Figma з іменованими шарами й компонентами, шрифти або посилання на них, іконки в SVG, підготовлені зображення та коментарі про поведінку блоків на різних екранах.
Послуги
З чим ми допомагаємо.
Поговоримо
Опишіть задачу — скажемо, як її вирішити.
Навіть якщо для цього не потрібні наші послуги. Одна розмова, після якої у вас буде зрозумілий наступний крок.