UX/UI дизайн сайтів і застосунків

Малюємо інтерфейси, якими зручно користуватися: сайти, магазини, особисті кабінети та мобільні застосунки. Дизайн починається зі структури й сценаріїв, а не з палітри кольорів.

Що входить в роботу над дизайном

Аналіз і структура

Розбираємо, хто ваші користувачі й що вони приходять зробити. З цього народжується структура сторінок і перелік екранів — до того, як щось намальовано.

Прототип

Схематичні макети без кольору: що де стоїть і в якому порядку читається. На цьому етапі правки коштують нічого, після дизайну — вже помітно дорожче.

Візуальна частина

Стиль під ваш бренд: типографіка, кольори, сітка, стани кнопок і форм. Окремо десктоп, окремо мобільна версія — адаптив це не «те саме, тільки вужче».

UI-кіт і передача

Збираємо компоненти в бібліотеку, щоб нові сторінки додавалися в тому ж стилі. Макети передаємо у Figma з усіма шарами — з ними зможе працювати будь-який розробник, не лише ми.

Редизайн наявного сайту

Якщо сайт уже є, але не працює, ми починаємо з даних, а не з малювання: дивимось аналітику, поведінку на мобільному, швидкість, шлях до заявки. Часто виявляється, що проблема не в дизайні — і половину бюджету можна не витрачати.

Типові місця, де губляться заявки, ми розібрали в статті «Чому сайт не приносить заявок».

Дизайн, який враховує розробку

Красивий макет, який неможливо швидко завантажити, — поганий макет. Ми одразу закладаємо:

• вагу графіки й формати зображень;
• читабельні розміри тексту й кнопки, у які легко влучити пальцем;
• стани: наведення, натискання, помилка, порожній список, завантаження;
• контрастність, достатню для читання при сонці й для людей із поганим зором.

Формати співпраці

• Дизайн + розробка — повний цикл, ми відповідаємо за результат цілком.
• Тільки дизайн — віддаємо макети й UI-кіт, реалізує ваша команда.
• Доробки — окремі екрани чи блоки до наявного сайту в його стилі.

Строки й вартість

Головна сторінка коштує дорожче за внутрішні: вона задає стиль усьому проєкту. Далі ціна залежить від кількості унікальних макетів. Порахувати проєкт — три кроки.

Подивитися готові інтерфейси можна в портфоліо.

Як проходить робота

1. Вступний бриф — 1–2 дні

Завдання бізнесу, аудиторія, конкуренти, обмеження бренду. Тут же домовляємося про орієнтири: три-п’ять прикладів із поясненням, що саме в них подобається.

2. Структура й сценарії — 2–5 днів

Перелік екранів і шлях користувача до цільової дії. Дизайн без цього етапу перетворюється на набір гарних картинок, які не складаються в продукт.

3. Прототипи — 3–7 днів

Схеми без кольору: розташування блоків, ієрархія, чернетки текстів. Погоджуємо саме тут — правки на цьому етапі найдешевші.

4. Візуальний дизайн — 1–3 тижні

Головна сторінка першою, далі внутрішні по 1–2 дні на макет. Два раунди правок входять у вартість.

5. UI-кіт і передача — 2–4 дні

Бібліотека компонентів, стани елементів, сітка й типографіка. Файл Figma із шарами передаємо вам — з ним працюватиме будь-який розробник.

Що ви отримуєте на виході

• макети десктопної й мобільної версій усіх погоджених екранів;
• UI-кіт: кнопки, форми, картки, стани, іконки, сітка;
• вихідний файл Figma з правами на використання;
• специфікацію для розробника: відступи, шрифти, поведінка елементів;
• рекомендації щодо графіки й швидкості завантаження.

Коли дизайн не вирішує проблему

Ми говоримо про це чесно ще на брифі. Якщо заявок мало через повільне завантаження, зламану форму або відсутність трафіку — редизайн не допоможе, а гроші витратяться. У таких випадках спочатку робимо аудит: дивимось швидкість, шлях до заявки й технічний стан сайту, а вже потім вирішуємо, чи потрібне перемальовування.

Питання і відповіді

Обговоримо проєкт

Опишіть завдання — подивимося, що потрібно насправді: новий дизайн, редизайн чи спершу аудит наявного сайту.