Великое оновлення дизайну Kazki AI — зустрічайте Soft Monochrome UI

🎨 Kazki AI змінився — і ми хочемо розповісти, чому це важливо

Якщо ви користуєтесь Kazki AI вже деякий час, то напевно помітили — платформа виглядає зовсім інакше. Це не просто косметичний ремонт. Ми повністю переосмислили візуальну мову нашого продукту — від першого екрану кабінету до останньої сторінки з текстом казки. Сьогодні хочемо детально розповісти, що саме змінилось, як називається наш новий дизайн-підхід і чому ми впевнені, що вам сподобається.

Передісторія: чому ми вирішили все змінити

Коли Kazki AI тільки запускався, головним пріоритетом була функціональність. Ми хотіли, щоб платформа працювала — щоб казки генерувались, аудіо озвучувалось, а батьки могли зручно керувати профілями дітей. Дизайн збирався з різних компонентів: десь сині кнопки, десь фіолетові градієнти, іконки з Font Awesome, різні стилі карток на різних сторінках.

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

Знайомтесь: Soft Monochrome UI

Наш новий дизайн має назву — Soft Monochrome UI. Це мінімалістичний підхід з м'якою монохромною палітрою, натхненний інтерфейсами таких компаній як Linear, Vercel та Raycast. Але з однією важливою відмінністю — ми додали теплоту та дитячий настрій, адже наша платформа створена для батьків і дітей, а не для розробників.

Soft Monochrome UI — це не просто "зробити все сірим". Це продуманий набір принципів, які разом створюють відчуття спокою, чистоти та сучасності. Давайте розберемо кожен з них.

Slate-палітра — серце нового дизайну

Головна зміна, яку ви помітите одразу — це колір. Точніше, його відсутність у звичному розумінні. Замість яскравих синіх кнопок, фіолетових градієнтів та різнокольорових акцентів ми перейшли на slate-палітру.

Slate — це не просто сірий. Це м'який сіро-синій відтінок, який виглядає благородно та не втомлює очі навіть при тривалому використанні. Основний колір кнопок і акцентів — slate-900, глибокий темний відтінок. Тексти використовують slate-600 та slate-400 для створення чіткої ієрархії. Фони — slate-50, ледь помітний теплий відтінок замість холодного білого.

Чому саме slate? Ми тестували кілька варіантів — gray, zinc, neutral. Slate виявився найбільш збалансованим: він достатньо теплий для дитячої платформи, але достатньо серйозний, щоб батьки сприймали продукт як надійний та професійний.

Парящі картки з глибокими тінями

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

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

М'які форми та pill-кнопки

Усі картки, блоки повідомлень, секції аудіоплеєра — все має великі скруглення. Це створює відчуття м'якості та дружності, що дуже важливо для продукту, пов'язаного з дітьми. Гострі кути асоціюються з офіційністю та строгістю, а м'які скруглення — з комфортом та безпекою.

Окрема тема — pill-кнопки. Це повністю закруглені кнопки, схожі на капсулу або пілюлю. Цей тренд активно використовується у 2024-2025 роках — його можна побачити в інтерфейсах Apple, Google та багатьох сучасних стартапів. На Kazki AI pill-кнопки використовуються для всіх основних дій: "Створити казку", "Читати", "Слухати", "Фільтрувати" та інші.

Pill-кнопки мають ще одну перевагу: вони візуально відрізняються від карток та блоків, які теж мають скруглення, але менші. Це допомагає користувачу миттєво ідентифікувати інтерактивні елементи на сторінці.

Емодзі замість іконок — свідомий вибір

Це, мабуть, найнезвичніше рішення в нашому дизайні. Ми повністю відмовились від Font Awesome та інших бібліотек іконок на користь емодзі. Так, звичайних емодзі, які ви використовуєте в месенджерах щодня.

Чому? По-перше, це швидкість. Font Awesome — це зовнішня бібліотека, яку потрібно завантажити. Це додаткові кілобайти та додатковий HTTP-запит. Без неї сторінки завантажуються швидше, особливо на мобільних пристроях з повільним інтернетом.

По-друге, це настрій. Емодзі — це універсальна мова, яку розуміють всі. Коли батько бачить 🎧 поруч з кнопкою "Слухати" або 📚 поруч з бібліотекою — все зрозуміло без слів. Емодзі додають теплоту та людяність, якої часто не вистачає мінімалістичним інтерфейсам.

По-третє, це унікальність. Більшість платформ використовують одні й ті самі набори іконок, і всі виглядають схоже. Емодзі роблять Kazki AI впізнаваним — ви точно не сплутаєте нас з іншим сервісом.

Звичайно, емодзі підходять не для кожного продукту. Для банківського додатку чи медичної системи це було б недоречно. Але для платформи дитячих казок — ідеально.

Кольорові акценти — тільки там, де потрібно

У Soft Monochrome UI колір з'являється тільки з конкретною метою. Ми використовуємо чітку систему кольорового кодування:

Emerald (зелений) — для позитивних станів. Казку прослухано, серію завершено, модерацію пройдено. Коли ви бачите зелений — все добре.

Amber (бурштиновий) — для попереджень та проміжних станів. Залишилась одна казка з ліміту, серію призупинено, казка на перевірці. Бурштиновий каже: зверніть увагу, але паніки немає.

Red (червоний) — для критичних станів та помилок. Ліміт вичерпано, казку відхилено, сталась помилка. Червоний привертає увагу миттєво.

Indigo та Violet — для декоративних елементів. Обкладинки серій казок, фонові градієнти для карток без зображень. Ці кольори не несуть функціонального навантаження, але додають візуальний інтерес.

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

Єдиний стиль — від дашборду до останньої сторінки

Можливо, найважливіша зміна — це консистентність. Тепер кожна сторінка Kazki AI виглядає як частина одного цілого. Дашборд, бібліотека, Discover, серії казок, сторінка окремої казки, сторінка епізоду — всюди однакові принципи.

Однаковий максимальний розмір контейнера. Однакові відступи. Однакові тіні на картках. Однакові кнопки. Однаковий футер з логотипом КА та назвою Kazki AI. Коли ви переходите між сторінками — немає відчуття, що ви потрапили на інший сайт.