Верстку часто вважають механічною роботою: перенести макет у браузер. Насправді тут ухвалюється рішення, яке потім дорого скасовувати. Чи витримає продукт довгий текст, другу мову, вузький екран телефона і нові розділи? Якщо верстку зроблено під одну картинку, кожна наступна правка дизайну коштує як маленький проєкт.
Це п'ятий етап нашої стратегії розробки застосунку і перший, на якому макети стають живими сторінками. Нижче: що саме робиться, що Ви отримуєте на виході, від чого залежить ціна і чим обертається економія.
Що відбувається на етапі
- Адаптивна верстка за макетами з етапу дизайну інтерфейсу. Кожен екран перевіряється на ширині телефона, планшета й ноутбука.
- Робота на стеку HTML, CSS, Bootstrap, AdminLTE, FontAwesome. Bootstrap дає сітку й адаптивність, AdminLTE пришвидшує адміністративні екрани, FontAwesome закриває іконки.
- Підготовка до PWA для iOS і Android, щоб продукт можна було встановити на телефон як застосунок.
- Збирання повторюваних елементів у компоненти: кнопки, поля, таблиці, картки, модальні вікна. Компонент правиться в одному місці, і правка розходиться по всіх екранах.
Що Ви отримуєте на виході
- Зверстані сторінки та екрани, які відкриваються в браузері й однаково поводяться на різних пристроях.
- Набір компонентів, з якого збираються нові сторінки без верстки з нуля.
- Основу для PWA: продукт ставиться на головний екран телефона без магазинів застосунків.
- Готовий майданчик для наступного етапу, на якому сторінки починають відповідати на дії користувача.
Скільки коштує верстка інтерфейсу і від чого залежить ціна
У прайсі Ingello етап верстки інтерфейсів коштує від $0 до $2400. Ціну етапу фіксуємо до початку робіт, а результат приймаємо за списком зверстаних екранів. Нижня межа означає, що окремий бюджет на етап потрібен не в кожному проєкті: обсяг залежить від того, що вже зроблено на попередніх етапах і скільки унікальних екранів потребує продукт.
Усередині діапазону ціну рухають кілька чинників:
- кількість унікальних екранів та їхніх станів у макетах;
- скільки ширин екрана й пристроїв треба підтримати;
- скільки мов в інтерфейсі й наскільки довгі в них тексти;
- чи потрібен фірмовий вигляд адмінпанелі, чи підійде типова тема;
- чи потрібна підготовка до PWA.
Точну суму ми називаємо, коли видно склад екранів. Вона входить у загальний розрахунок за етапами, який Ви отримуєте після консультації з архітектором.
Типова тема чи індивідуальна верстка
Адміністративній частині не завжди потрібен унікальний дизайн. У системі продажу автобусних квитків BusTicket адмінку побудовано на типовій темі AdminLTE (Bootstrap 4). Це швидко, недорого і звично операторам: таблиці, фільтри й форми стоять на своїх місцях. Якщо бізнесу потрібен фірмовий інтерфейс, ми верстаємо й адміністративну систему за індивідуальним дизайном.
Клієнтську частину бачить покупець, тому там верстка зазвичай індивідуальна. У застосунку для психологів Rapport окрім мобільної версії є веб-кабінет під дві адаптивні ширини, 1000 і 768 пікселів. Ліворуч розділи, праворуч календар і стрічка сеансів дня, і на планшеті все це перебудовується без втрати функцій.
Чому PWA закладається саме тут
PWA дає користувачеві застосунок на телефоні без магазинів застосунків, модерації та окремої мобільної команди. Але додати його заднім числом дорожче, ніж закласти одразу: вимоги до структури сторінок і до поведінки без мережі впливають на розмітку.
Приклад із практики: PWA-застосунок з адмінпанеллю (CRM) для обслуговування клієнтів і роботи із замовленнями. Він просто встановлюється на телефон, працює без інтернету, має вбудовану оплату, а замовлення потрапляють у CRM зі статистикою. Такий набір простіше отримати, коли верстка з першого дня розрахована на мобільний екран.
Продовження цієї лінії: плавність інтерфейсу та офлайн-версія у блоці корпоративного розвитку, де додаються кешування даних і синхронізація без інтернету.
Що ламається, якщо заощадити
- Верстка під один макет розсипається на довгому тексті, на українській локалі та на вузькому екрані.
- Лагодять це точковими милицями, і за рік правка відступу в одному місці ламає три інші.
- Без компонентів кожна нова сторінка верстається з нуля, і бюджет на розвиток зростає разом із кількістю екранів.
- Якщо PWA не заклали одразу, мобільну версію доводиться переробляти, а не доповнювати.
- Важка розмітка гальмує на слабких телефонах, і людина йде раніше, ніж побачить пропозицію.
Швидкість на слабких пристроях теж залежить від верстки. У нашій карті предметних областей області, вузли, модулі та зв'язки малюються на одному полотні, і інтерфейс тримає 42 кадри на секунду на слабкому телефоні.
Що потрібно від Вас
- Затверджені макети або рішення працювати на типовій темі.
- Перелік мов і пристроїв, на яких працюватимуть Ваші клієнти й співробітники.
- Реальні приклади даних: найдовша назва товару, найдовше ім'я клієнта, найдовша таблиця. Саме на них верстку й перевіряємо.
Куди далі
Далі логіка інтерфейсів: форми, валідація та сценарії на JS/TS. Попередній крок: дизайн інтерфейсу. Карта всіх етапів у стратегії розробки застосунку.
Якщо у Вас уже є макети чи прототип, приходьте на безкоштовну консультацію з архітектором. Розберемо склад екранів, а після консультації Ви отримаєте розрахунок ціни та строків за етапами.
