← Кейси Chyzh AgencyCase study · UX/UI · Brand identity · Mobile
Кейс · Дизайн мобільного додатку
Sadok.app — фірмовий стиль і дизайн-система дитячого садка в телефоні
Знак із кубиків, іконка, палітра, типографіка й UI-кіт для застосунку, у якому щодня живуть батьки, вихователі та адміністрація.
Фірмовий стильІконкаДизайн-системаUI-кітiOS + Android
Проєкт
Дитячий садок, який має виглядати дитячим — і лишатись робочим
Потрібен був дизайн мобільного застосунку і UI/UX для продукту з трьома аудиторіями: батьки заходять на хвилину, вихователь працює зміну, адміністрація веде облік і гроші. Один стиль мав обслужити і дитячу тему, і таблиці з рахунками.
Фірмовий стиль
Знак, який працює літерою
Будиночок із кубиків — впізнаваний дитячий образ без жодної ілюстрації. Той самий знак стає літерою «А» в назві, тому іконка на екрані телефона й логотип усередині застосунку читаються як одне ціле.
Знак і вордмарк. У промо-матеріалах той самий будиночок складається з реальних дитячих кубиків — бренд виходить із екрана в предмет.
Палітра
Чотири кольори, кожен зі своєю роботою
#FD5C29
Дія — кнопки, акценти
#2B9D4C
Присутній, сплачено
#3297D1
Інформація, навігація
#FFBD48
Очікує, до сплати
Кольори знака стали функціональними станами: помаранчевий веде до дії, зелений підтверджує, синій пояснює, жовтий чекає.
Типографіка
Чотири розміри на всі сто екранів
22 / 800Група «Калина»
18 / 700Вихователі
16 / 400Група Pre-school для наших маленьких розумників
14 / 400Помічник вихователя · 7/10 дітей
Шкала 22 / 18 / 16 / 14. Більше розмірів не знадобилось навіть тоді, коли додали рахунки й звіти.
Найцікавіше
Три екрани, заради яких застосунок відкривають щодня
Зліва направо: мапа садків — перемикач «список / мапа», піни закладів і фільтр по місту. Галерея дня — усе, що зняли у групі, зібране за датою, без пошуку по чатах. Чат із вихователем — відеоповідомлення прямо в стрічці й швидкі відповіді готовими фразами: «запізнюємося, будемо через 10 хв», «прихворіли, сьогодні нас не чекайте». Батько відповідає одним дотиком, не набираючи текст на ходу.
Сервіси
Розібрали інтерфейс, щоб показати, з чого він складається
Календар, картка дитини й статус оплати харчування — те, по що батько заходить найчастіше, винесено на поверхню.
Правило в дії
Кожна група фарбується у свій колір
«Малина» рожева, «Калина» зелена. Картка підхоплює світлий тон основного кольору з логотипа — вихователь знаходить свою групу за кольором, ще не читаючи назви.
Живий контент
Дитячий садок — це фото, події й цифри
Зліва направо: картка садка — рейтинг, відстань, бейджі програм на кшталт Cambridge English. Календар подій — дні народження, свята й заняття різними кольорами. Панель адміністратора — відвідуваність, заповненість місць, нарахування за гуртки одним екраном.
Аватари
Форма каже, хто перед тобою
ГВ
100 · людина
ТІ
48 · людина
ІО
36 · людина
100 · група, садок
48 · група, садок
Людина — завжди коло, садок, група і чат — завжди квадрат. Розміри фіксовані: 36, 48, 100. Немає фото — лишаються ініціали на згенерованому кольорі, насиченому настільки, щоб білий текст лишався читабельним. Аватар дитини при цьому бачить лише її батько.
UI-кіт
Компоненти з правилами, а не набір макетів
Сторінка специфікації: до кожного компонента виписане правило, а не приклад.
Іконки
Одна лінія на всю навігацію
Головна, календар, чат, галерея, профіль — однакова товщина, однакова оптична вага, активний стан помаранчевим.
Результат
На чому зробили
FigmaАйдентикаІконка застосункуДизайн-системаUI-кітAccessibility
Перевіркою системи став наступний модуль: коли до застосунку додали рахунки й харчування, нових компонентів малювати майже не довелось. Як усе це зібрано в коді — у кейсі про розробку застосунку.
Потрібен фірмовий стиль і дизайн мобільного застосунку? Обговоримо проєкт.
Замовити дизайн додатку
Кейс підготовлено Chyzh Agency. Матеріали: айдентика, дизайн-специфікація та макети проєкту Sadok.app. Оновлено 17.09.2026.