Прототипування та дизайн
Структура, екрани й клікабельний прототип. Побачити, як продукт працює, до першого рядка коду.
З нуля або з того, що вже є
01
Є ідея, немає картинки
У голові все складається. Показати команді чи інвестору поки нема чого.
02
Розробник питає, що малювати
Код писати готові, макетів немає, і кожен екран вигадується на ходу.
03
Кожен екран інший
Кнопки різні, відступи різні, і нова сторінка щоразу починається з нуля.
04
Переробляємо втретє
Правки приходять уже після верстки, і кожна коштує як новий екран.
Від схеми на аркуші до готової бібліотеки
01Структура й сценарії
Що де лежить і яким шляхом людина доходить до дії.
02Дизайн екранів
Типографіка, кольори, стани. Зокрема порожній екран і екран з помилкою.
03Клікабельний прототип
Пройти шлях пальцем ще до коду.
04Дизайн-система
Компоненти й правила, щоб наступний екран малювався швидше за попередній.
Те, що потім підхопить будь-хто
Макети й прототипи живуть у Figma, і файл лишається у вас. Розробник отримує компоненти й специфікації, з якими можна працювати.
- Де малюємоТе, в чому живуть макети й прототипи
- FigmaFigJamAuto layoutЗмінні й токениБібліотеки
- Що отримує розробникФайл, з якого можна працювати, а не картинка
- КомпонентиСтаниСітка й відступиІконкиШрифтиСпецифікації
- Де допомагає ШІКартинки й відео цього сайту зроблені так само
- Ілюстрації та фониВаріанти екранівЗаміна стокуАпскейл і ретуш
- На чому перевіряємоЩоб макет не розсипався в браузері
- 320pxКонтраст 4.5:1КлавіатураДва мовні варіантиДовгий текст
Від розмови до макетів
01
Розмова
Ви розповідаєте, що треба зробити і навіщо. Далі питання ставимо ми.
02
Структура
Що де лежить і яким шляхом людина доходить до дії. Ще без кольору й шрифтів.
03
Екрани й прототип
Макети й клікабельний прототип. Переробити рішення тут коштує години.
04
Передача
Компоненти, стани, специфікації. Лишаємось на зв'язку, поки йде розробка.
Те, що робимо за замовчуванням
Це не окремі опції й не рядок у рахунку. Так ми робимо кожен проєкт, і подивитись на це можна вже під час роботи.
- 01Стани
- Кожен екран намальований порожнім, з помилкою і з довгим текстом.
- 02Доступність
- Контраст від 4.5:1, кнопки під палець, зрозумілий порядок переходу з клавіатури.
- 03Телефон
- Кожен екран має мобільну версію від 320px.
- 04Мови
- Макет перевіряємо на довшому тексті другої мови.
- 05Компоненти
- Повторювані частини зібрані в бібліотеку й використовуються знову.
- 06Передача
- Файл Figma ваш, з усіма компонентами й правами на редагування.
Технічне завдання писати не доведеться
01
Людина, яка приймає рішення
Хтось один з вашого боку, хто каже «так» і збирає правки. Коли вони приходять від трьох людей одразу, то суперечать одна одній, і роботу доводиться переробляти.
02
Факти, а не готові тексти
Що робите, для кого, чим відрізняєтесь. Текст напишемо ми, а факти вигадати не зможемо.
03
Фото й матеріали
Своє фото завжди краще за стокове. Якщо свого немає, згенеруємо під вашу палітру.
04
Те, що вже намальовано
Старі макети, логотип, брендбук. Щоб не малювати заново те, що вже працює.
Те, що питають до першого листа
Скільки це коштує?
Залежить від того, що вже є і що має вийти, тому рахуємо після короткої розмови. Для зрозумілого проєкту або окремого етапу ціна фіксована. Для роботи з чужим кодом, пошуку помилок і задач із невизначеним обсягом оплата погодинна: оцінити наперед те, чого ще не бачили, неможливо.
Для підтримки й розвитку є місячний пакет годин. TODO(owner): конкретні ставки та мінімальний бюджет ще не визначені.
Скільки це триває?
Залежить від обсягу. Після розмови називаємо дату й тримаємось її. Якщо щось у строках змінюється, кажемо одразу, а не в день здачі.
Що я отримую в кінці?
Файл Figma з макетами, компонентами й клікабельним прототипом. Файл ваш, з правами на редагування.
Можна тільки дизайн, без розробки?
Так. Макети збираємо так, щоб з ними міг працювати будь-який розробник, не лише наш.
А якщо дизайн уже є?
Дивимось, що лишити. Часто достатньо зібрати наявне в систему.
Хто саме робитиме?
Ті, хто відповість на ваш лист. Ви спілкуєтесь напряму з людьми, які роблять роботу.
Розкажіть, що має вийти, і ми скажемо, з якого екрана це починається
- 01Посилання
на сайт, макет або репозиторій, якщо вони вже є
- 02Що змінити
одне речення про те, що має стати інакше
- 03Для кого
хто цим користуватиметься: клієнти, ваша команда, скільки їх