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

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

Від€600за проєкт

Замовити проєктПереглянути ціни
  • 5користувачів знаходять близько 80 % проблем
  • 1-2 тиж.до клікабельного прототипу
  • 2 колаправок входять у ціну дизайну
  • €0за зміну, поки це макет

UI-дизайн означає готові екрани сайту чи застосунку: кольори, шрифти, кнопки, форми та їхні стани на телефоні й комп'ютері. Дизайн екранів коштує від €1 000, дизайн-система від €1 200. Кожен екран іде з усіма станами, тож розробники збирають його один раз і правильно.

Кожен екран має стани наведення, помилки, порожнього списку й завантаження, розробникам не доводиться домислювати.

Кожен екран має стани наведення, помилки, порожнього списку й завантаження, розробникам не доводиться домислювати.

Компоненти малюємо в Figma й збираємо в коді в одній команді, тому готовий сайт виглядає як дизайн.

Компоненти малюємо в Figma й збираємо в коді в одній команді, тому готовий сайт виглядає як дизайн.

Під час редизайну міряємо конверсію до і після, щоб було видно, чи окупилася переробка.

Під час редизайну міряємо конверсію до і після, щоб було видно, чи окупилася переробка.

Розкладку проєктуємо спершу для телефона, бо звідти сьогодні приходить більшість візитів.

Розкладку проєктуємо спершу для телефона, бо звідти сьогодні приходить більшість візитів.

Усі послуги цієї категорії по-людськи

  • Детальний дизайн

    Готові екрани зі справжнім контентом, готові до верстки.

    Замовити проєктПорахувати ціну

    Коротко Детально промальовані екрани, готові до розробки: реальний контент, реальні стани, світла й темна теми, крайні випадки враховані. UI/UX-дизайн передаємо зі специфікаціями, без місця для здогадок.

    Як ми працюємоПроєктуємо на сітці й компонентах, одразу з реальним контентом і реальною довжиною текстів, тож видно, де текст не влізе. До кожного екрана додаємо крайні випадки. Контраст і читабельність перевіряємо ще на етапі UI/UX-дизайну.

    Що ти отримаєшУсе, що дає UI/UX-дизайн: готові екрани у світлій і темній темі, зі станами, крайніми випадками і специфікаціями розмірів, кольорів та поведінки. Плюс експортовані асети і вихідний файл у Figma, який лишається твоїм.

    Що входить у вартість

    • Справжній контент і реальна довжина текстів
    • Світла й темна теми
    • Крайні випадки враховані в дизайні
    • Специфікації замість здогадок на око

    Дизайн-системи

    Кольори, шрифти й компоненти в одному місці для будь-якого екрана.

    Замовити проєктПорахувати ціну

    Коротко Одне джерело правди для кольорів, типографіки, відступів і компонентів. Нова сторінка складається за години замість днів, і продукт більше не розповзається з кожним релізом.

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

    Що ти отримаєшНабір токенів і компонентів у Figma і в коді, з правилами використання і демосторінкою, де всі елементи видно разом. Зміна основного кольору чи радіуса кута перетворюється на одну правку, і на систему може спертися навіть твоя власна команда.

    Що входить у вартість

    • Токени замість жорстко вписаних значень
    • Новий екран за години
    • Figma та код синхронізовані
    • Правила, що коли застосовувати

    Редизайн

    Чесно скажемо, чи вистачить нового вигляду, чи потрібна перебудова.

    Замовити проєктПорахувати ціну

    Коротко Фейсліфт чи капітальна перебудова: чесно скажемо, що саме тобі потрібно, і підкріпимо це аудитом. Потім оновимо дизайн інтерфейсу, не ламаючи звичок, на які покладаються твої користувачі.

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

    Що ти отримаєшНовий інтерфейс, побудований на тому, що підтверджують дані, з перенесеними адресами й контентом та картою переспрямувань. Плюс порівняння цифр до і після там, де це можна виміряти, тож про результат не доводиться гадати.

    Що входить у вартість

    • Чесно: фейсліфт чи перебудова
    • Ґрунтується на аудиті й даних
    • Береже звички постійних користувачів
    • Переспрямування 1:1 для позицій у пошуку

    Входить у комплект

    Це не замовляють окремо: воно входить у будь-яку роботу, і робимо це ми.

    Бібліотека компонентів

    Дизайн-система на практиці: задокументовані компоненти у Figma й у коді, які завжди збігаються між собою. Розробники більше не збирають ту саму кнопку п'ятьма різними способами.

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

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

    • Ті самі компоненти у Figma і в коді
    • Задокументовані варіанти і стани
    • Сторінка з прикладами для перевірки
    • Порядок додавання нових елементів

    Стайлгайди

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

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

    РезультатКомпактні правила для типографіки, кольорів, відступів і роботи із зображеннями, з прикладом правильно і неправильно до кожного пункту. Плюс готові експорти і шаблони, з якими маркетолог чи асистент зробить банер без студії.

    • Написано для людей без дизайнерського досвіду
    • У кожного правила приклад правильно і неправильно
    • Готові шаблони й експорти
    • Зберігає якість і без нас

    Адаптивний дизайн

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

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

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

    • Дизайн, побудований від мобільного
    • Перевірено на справжніх пристроях
    • Форми і таблиці на малому екрані
    • Працює навіть зі збільшеним шрифтом

    Технології

    Знайоме?

    Іван Іваненкоперша розмова

    1. Сайт виглядає як у 2015-му, і надсилати його соромно

    2. Застарілий вигляд підриває довіру раніше, ніж людина прочитає перше речення. Будуємо редизайн на тому, що на сайті вже працює, і підтягуємо вигляд до того, якою компанія є зараз.

    3. Кожна сторінка виглядає трохи по-своєму

    4. Без дизайн-системи кожен додає свої кнопки й відтінки. Збираємо бібліотеку компонентів із правилами, і нова сторінка складається з готових деталей і виглядає як решта.

    5. З телефона сайтом майже неможливо користуватися

    6. Розкладка з комп'ютера, стиснута до телефона, ламається. Проєктуємо спершу під телефон, із кнопками під великий палець і читабельним шрифтом, а для великих екранів розкладку розширюємо.

    7. Розробники зібрали не так, як у макеті

    8. Картинки екрана замало, розробник починає вгадувати. Передаємо компоненти зі станами, розмірами й токенами кольорів, а оскільки збирає та сама команда, дорогою нічого не губиться.

    У якій ситуації ти?

    Вибери свій випадок і підстав свої числа. Екран порахує, що ти втрачаєш або отримуєш.

    Люди йдуть, і я не розумію чому

    Відвідувачів на місяць2 000
    Скільки відвідувачів купують1,5%
    Середнє замовлення120 EUR

    Щоб перевірка UI/UX окупилася за 3 місяці, досить

    +8,3% до конверсії

    Зараз сайт приносить приблизно 3 600 EUR на місяць: 2 000 відвідувачів, з них 1,5% купують по 120 EUR. Аудит UI/UX зазвичай коштує 900 EUR.

    Ціна «зазвичай» з прайса студії. Виручка без урахування маржі. Це поріг окупності: зростання конверсії наперед ніхто не гарантує.

    Замовити проєкт

    Я створюю щось нове

    Бюджет на розробку20 000 EUR
    Скільки екранів, на твою думку, доведеться переробити25%

    Під ризиком переробки після запуску

    5 000 EUR з бюджету

    Переробити 25% екранів після запуску означає заплатити ще 5 000 EUR з 20 000 EUR. Клікабельний прототип зазвичай коштує 1 200 EUR, і ці правки робляться в ньому ще до коду.

    Частку переробок задаєш ти. Ціна прототипу «зазвичай» з прайса студії.

    Замовити проєкт

    Продукт розповзся в різнобій

    Скільки людей роблять інтерфейс4
    Годин на тиждень у кожного на підгонку екранів3 год
    Скільки коштує твоя година30 EUR

    Різнобій коштує

    1 559 EUR на місяць

    4 люди по 3 год на тиждень по 30 EUR за годину. Дизайн-система зазвичай коштує 2 650 EUR і окупиться за 1,7 місяця.

    Години і ставку задаєш ти. Оцінка зверху: вважаємо, що система знімає підгонку повністю. Ціна «зазвичай» з прайса студії.

    Замовити проєкт

    Купити шаблон за кілька десятків євро?

    Готовий шаблон коштує кілька десятків євро й гарно виглядає в прев'ю. Для старту це може бути розумним вибором. Різниця з'являється, коли в нього потрапляють твій контент, бренд і функції, на які шаблон не розрахований.

    Коли вистачить шаблону

    • Потрібна проста презентація на кілька місяців, поки ти розганяєшся
    • Контент лягає в шаблон як є, без правок розкладки
    • У бренду поки немає власного візуального стилю, на який треба спиратися
    • Тебе не бентежить, що так само виглядають сотні інших сайтів

    Коли він почне гальмувати

    • Кожна правка розкладки перетворюється на боротьбу з чужим кодом
    • Шаблон тягне десятки скриптів і ефектів, які сповільнюють сайт
    • Нові функції, наприклад калькулятор чи бронювання, у нього не вписуються
    • Конкуренти виглядають так само, бо купили той самий шаблон

    Від задачі до екранів, готових до коду

    1. Знаєш, що проєктуємо

      Дзвінок і матеріали

      Розбираємо бренд, контент, вайрфрейми чи поточний сайт і цілі. Домовляємося про кількість екранів, і ти отримуєш фіксовану ціну.

    2. Бачиш, як це виглядатиме

      Візуальний напрям

      На двох-трьох ключових екранах показуємо напрям: шрифти, кольори, ритм. Вирішуємо на справжньому контенті, мудборд на таке не здатен.

    3. Маєш увесь дизайн

      Екрани й стани

      Домальовуємо всі екрани для телефона й комп'ютера, зі станами наведення, помилки, завантаження й порожнього списку.

    4. Кожна деталь має правила

      Дизайн-система

      Витягаємо з екранів компоненти й токени: кольори, шрифти, відступи, тіні. Нова сторінка збирається з готових деталей.

    5. Дизайн сидить як слід

      Перевірка й правки

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

    6. Екрани готові

      Передача або розробка

      Віддаємо файли Figma зі специфікаціями або збираємо сайт самі. Під час редизайну після запуску порівнюємо конверсію з вихідною.

    Скільки коштує UI/UX-дизайн

    Дизайн екранів від €1 000, дизайн-система від €1 200, бібліотека компонентів від €600, редизайн від €1 000. Два кола правок у ціні. Ціна остаточна, зверху нічого не додається.

    Переглянути ціни

    Де ми це робили

    • 3Dсцена просто в браузері, без плагінів
    • 0,10 sвідповідь сервера, замір 8/2026

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

    Відкрити кейс
    Spectrum Interactive
    Фінансова освіта · 2026

    Spectrum Interactive

    • ×5відвідувачів з органіки, рік до року
    • ×20переглядів сторінок, рік до року
    • 100+сторінок на всю групу компаній
    • 0,17 sвідповідь сервера, замір 8/2026

    Текстильна фабрика з 1987 року, нетканні матеріали, конопляний утеплювач Konsulate™ і готовий домашній текстиль UKONO™, з сайтом, застряглим на десять років назад.

    Відкрити кейс
    Fabrika Sumy
    Текстильне виробництво · 2025

    Fabrika Sumy

    • 100+компаній-резидентів, від Coca-Cola до Kyivstar
    • 85 000м² цехів, офісів і складів в оренду
    • 0,26 sвідповідь сервера, замір 8/2026

    Індустріальний парк на території текстильної фабрики 1987 року. Здає виробничі, складські та офісні площі орендарям з бізнесу, без роздрібних покупців і кліків.

    Відкрити кейс
    Індустріальний парк «Патріот»
    Промислова нерухомість · 2024

    Індустріальний парк «Патріот»

    01 / 03

    Спочатку факти, потім смак

    Проєктуємо UX/UI-дизайн на фактах: дослідження показує, що лагодити, прототип перевіряє це на живих людях, а аналітика після запуску показує, чи спрацювало. Усе стоїть на дизайн-системі, єдиному джерелі правди для кольору, шрифту, відступів і компонентів, тому нові екрани з'являються за години замість днів, а продукт лишається консистентним, поки росте. І на етапі передачі ми нікуди не зникаємо: дизайнер лишається на зв'язку під час розробки, щоб готовий продукт збігався з тим, що ми тестували.

    Про що питають найчастіше

    Що таке UI-дизайн?

    UI-дизайн (user interface) проєктує вигляд екранів: розкладку, шрифти, кольори, кнопки, форми та їхні стани. Він спирається на UX, який відповідає за те, як людина рухається сайтом. Результат: екрани, готові для розробників.

    Скільки коштує UI/UX-дизайн сайту?

    Дизайн екранів від €1 000, для звичайного сайту компанії близько €2 450 залежно від кількості шаблонів сторінок. Дизайн-система від €1 200, редизайн від €1 000. Ціну знаєш після першого дзвінка. Ціна остаточна, зверху нічого не додається.

    Що таке дизайн-система і чи потрібна вона мені?

    Дизайн-система складається з компонентів і правил: кнопки, форми, картки, кольори, шрифти й відступи. Вона окупається для сайту чи застосунку, який ростиме й над яким працюють кілька людей. Для разової презентації вистачить стилю на екранах.

    Робите мобільну версію?

    Завжди. Проєктуємо спершу під телефон, потім розширюємо для планшета й комп'ютера. Кожен екран має обидві версії, нічого не домислюється на етапі розробки.

    Чи отримаю вихідні файли?

    Так, повні файли Figma з компонентами й стилями твої. З ними можна працювати далі самому або передати іншому дизайнерові чи розробникові.

    Коли потрібен редизайн?

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

    Скільки триває дизайн?

    Сайт компанії з п'ятьма-вісьмома шаблонами сторінок два-три тижні. Дизайн-система для застосунку три-п'ять тижнів. Термін називаємо після дзвінка й тримаємо його.

    Зберете сайт за чужим дизайном?

    Так. Якщо макет готовий, проходимо його, домальовуємо відсутні стани й мобільні версії та збираємо. Часто знаходимо місця, де макет повівся б у коді інакше, і розв'язуємо їх заздалегідь.

    Скільки кіл правок входить у ціну?

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

    Категорії поруч

    Усі послуги

    Дослідження

    3 послуги

    Прототипування

    2 послуги

    Тестування і здача

    3 послуги

    Розкажи про свою задачу

    Вистачить кількох речень. Відповімо протягом кількох годин і запропонуємо час для дзвінка.

    1. 1За кілька годин: відповість людина, поділиться першими думками й, можливо, поставить кілька питань.
    2. 2За кілька днів: дзвінок на 30 хвилин. Безкоштовно й ні до чого не зобов’язує.
    3. 3Після дзвінка: кошторис із фіксованою ціною. Або чесна відповідь, що ми тобі не підходимо, і порада, до кого звернутися.

    Жодних скриптів продажів. Ти говоритимеш із людьми, які реально це будуватимуть.

    Алергія на форми? Розуміємо.info@chronicles.cz+420 773 230 278

    Надсилаючи форму, ти погоджуєшся на обробку зазначених даних для відповіді на цю заявку. Як ми поводимося з даними. Дані потрібні лише для відповіді. Ми їх не продаємо і не додаємо в розсилку.