Результати пошуку
Знайдено 446 результатів із порожнім запитом
- Promova виграла 2024 EdTechX Awards
Платформа для вивчення мов Promova одержала премію EdTechX Awards 2024. Перемогу здобули в номінації «Language Learning». Журі конкурсу відзначило «стабільне зростання доходів та сильну бізнес-модель платформи». За словами CEO та співзасновника Promova Андрія Скрипника, визнання від EdTech-ком’юніті відкриває більше можливостей щодо партнерств з іншими визначними бізнесами. Також воно дає змогу активніше розвивати B2B сегмент, де подібне визнання грає одну з ключових ролей у залученні. «Ми з командою знаємо, що Promova — це крутий продукт, який цінують користувачі. Вони залишають високі оцінки та класні відгуки в сторах та навіть пишуть мені особисті повідомлення про те, як застосунок змінює їхні життя. Проте визнання такого рівня від професійного ком’юніті — це інший рівень, який дає змогу впевнитися у правильності нашого шляху з погляду бізнес-операцій. Надзвичайно приємно, що професійне журі відзначило саме «стабільне зростання доходів та сильну бізнес-модель». Я вдячний кожному й кожній, хто працює над Promova. Здобуття EdTechX Awards 2024 — це заслуга команди, яка активно розвиває продукт», — говорить Андрій Скрипник. Promova — платформа для вивчення мов з персоналізованим підходом, яку запустили 2019 року в компанії Boosters з екосистеми Genesis. Наразі кількість активних користувачів щомісяця досягла 1,5 мільйона, загальна кількість завантажень — 15 мільйонів. Вивчати мову можна самостійно, також є змога відвідувати онлайн-заняття з мовними менторами, групові заняття та розмовні клуби. У 2023 році Promova стала одним із перших продуктів у національній програмі з популяризації англійської мови Future Perfect . Раніше того ж року, Promova стала першим застосунком для вивчення мов, який запустив Dyslexia Mode — спеціальний режим, який змінює усі шрифти на платформі на Dysfont спеціалізований шрифт, який спрощує сприйняття тексту та допомагає вивчати мови людям з дислексією. EdTechX Awards — щорічна премія для EdTech компаній, яка проходить в межах London EdTech Week та визначає лідерів у 15 категоріях. Переможців премії визначало експертне журі. Основними критеріями були інновації та вплив, які використовують компанії для покращення освіти, навчання та роботи.
- Екосистема Genesis передала на потреби лікарні «Охматдит» понад 8 млн грн
Понад 8 млн грн бізнеси екосистеми Genesis та партнерські компанії передали для потреб дітей і лікарні «Охматдит», які постраждали внаслідок ракетної атаки по лікарні 8 липня цього року. Із цієї сумі понад 4,5 млн грн зібрав корпоративний фонд Genesis for Ukraine . Це внески від Genesis, OBRIO, Jiji, особисто CEO Володимира Многолєтнього та донати співробітників. Ці кошти компанія передала благодійному фонду «Запорука» , який з 2008 року працює з онкохворими дітьми. За ці кошти «Запорука» придбала усе необхідне для закриття першочергових потреб дітей у важкому стані, яких після атаки на лікарню перевели в три інші клініки. Серед того, що вже вдалося придбати: монітори пацієнта, інфузомати, медикаменти та розхідні матеріали. Майже 4 млн грн партнерські компанії та бізнеси екосистеми переказали на рахунки інші фонди, які допомагають подолати наслідки атаки по Охматдиту. До зборів долучились SKELAR, BetterMe, Headway, Quarks, Universe.
- Boosters продала застосунок для сну та задонатила 3,5 млн гривень з прибутку
Компанія Boosters з екосистеми Genesis, розробник застосунків Promova , Manifest та JustDone , продала один зі своїх найуспішніших продуктів - апку для покращення сну Avrora . Угоду уклали з американським підприємцем Кеном Колбертом, який має понад 20 років досвіду у розробці та нещодавно заснував власну продуктову IT-компанію One Eleven. Він зазначає, що придбав Avrora через потенціал продукту та його місце на ринку. «Ми були надзвичайно вражені рівнем коду та історією успіху продукту, а тому рішення про покупку далося нам легко. Бачимо значний потенціал для подальшого розвитку продуктів у ніші покращення сну, бо ж, здається, що зараз ледь не кожен має з цим певні проблеми. Ми плануємо надалі працювати з наявною базою користувачів застосунку та збільшувати кількість завантажень, щоб закріпити Avrora у ТОП-5 застосунків у своїй ніші. У One Eleven радіють такому придбанню та думці про те, що тепер ми зможемо відчутно допомогти людям у всьому світі покращити якість їхнього сну», - ділиться Кен Колберт. СЕО компанії Boosters Михайло Галян зазначає, що він заснував Avrora у 2018 році через свій попередній досвід роботи з мобільними застосунками в категорії Health and Fitness, бажання допомагати людям покращувати якість життя та перспективність ринку. За 5 років існування Avrora допомогла зі сном понад 10 млн людей, які пройшли понад 40 млн сесій, а компанія згенерувала понад 15 млн доларів виторгу. До рішення про продаж Avrora Михайло прийшов у 2022 році. Основною причиною стало бажання сфокусувати свої ресурси на нішах із більшим потенціалом росту. До розвитку Avrora Михайло залучав своїх колег з Boosters – Валерію Вакульську, СЕО Manifest, та Андрія Скрипника, CEO та співзасновника Promova. Валерія запускала перформанс маркетинг та формувала команду маркетингу Avrora, а Андрій долучився до команди для розробки технології з тренінгу сну і хропіння, яка потім лягла в основу технології. «У 2020 році Avrora стала першою серед застосунків для сну у США за кількістю завантажень та посіла третє місце у категорії «Медитація і сон». Тому я надзвичайно радий, що продукт, куди команда Boosters вклала стільки сил та енергії, отримає друге дихання в руках Кена, який дійсно бачить цінність в тому, що дає Avrora, і має амбіційний план його розвитку», - говорить Михайло Галян. Сума угоди з продажу не розголошується. Проте частина від прибутку, яка становить 3,5 млн гривень, Boosters спрямує на підтримку кількох важливих благодійних ініціатив, зокрема перші внески вже скеровано до благодійних фондів « Діти Героїв » та « KOLO » . Компанія прагне не лише підтримати окремі ініціативи, а й забезпечити тривалу допомогу, яка матиме вплив на суспільство та, як і загальна місія компанії, – покращить життя і умови, надасть особливі можливості в Україні протягом складного періоду боротьби.
- Український Impulse запустив Android-версію застосунку
Український застосунок для тренування мозку Impulse став доступним для користувачів Google Play . Раніше застосунок був представлений тільки в App Store. За перші чотири місяці з моменту релізу його завантажили близько п’яти мільйонів людей у світі. Користувачі з України мають безплатний доступ до всіх функцій застосунку. «З початком повномасштабної війни ми відкрили користувачам з України безкоштовний доступ до iOS-версії застосунку. Тепер вони можуть безоплатно користуватись і Android-версією. Ми прагнемо підтримати українців і надати можливість розвиватися та покращувати когнітивні здібності», — коментує СЕО Impulse Євгеній Костенецький. Impulse — це застосунок, який розвиває пам’ять, увагу та логічне мислення користувачів за допомогою коротких ігор. Наразі в Android-версії застосунку вже доступно понад 25 ігор на розвиток різних когнітивних навичок, 8 тестів на самопізнання, а також щоденні персоналізовані тренування. Застосунок має понад 170 тисяч завантажень в Україні та понад 70 млн у світі. У 2022-2023 роках Impulse був найбільш завантажуваним iOS-застосунком у світі у категорії Health & Fitness. Impulse є частиною EdTech компанії Headway, що розробляє продукти з мікронавчання. До екосистеми продуктів входять також однойменний застосунок із самарі нонфікшн книг Headway, коучингова платформа для персонального та карʼєрного розвитку Addmile та застосунок з короткими курсами на різні теми Nibble.
- Медіакомпанія HOLYWATER та видавництво Vivat запускають проєкт «ПИШИ»
Технологічна медіакомпанія HOLYWATER з екосистеми Genesis та видавництво Vivat розпочинають пошук нових українських талантів і оголошують open-call для авторів/ок у жанрі Romance. Партнери шукають письменників/ць, готових поділитися своїми романтичними текстами та отримати шанс перетворити їх на міжнародний медіапродукт — digital-книгу, інтерактивний сюжет гри, відеосеріал — або справжню фізичну книжку в Україні. «У 2020 році я створив HOLYWATER з місією розкривати потенціал людей. Зараз я хочу допомогти українським авторам та авторкам розкрити свій творчий потенціал за допомогою нашої платформи. Ми хочемо мотивувати їх підкорювати нові вершини та світову аудиторію, писати навіть в умовах війни та отримувати за свою роботу гідні компенсації та роялті», — підкреслює Богдан Несвіт, засновник і CEO HOLYWATER HOLYWATER відбере твори, які відповідають вимогам ніші та конкурсу, адаптує їх і протестує серед реальних користувачів своїх платформ, а також збере аналітику для розуміння потенційної популярності текстів. Автори/ки найкращих творів отримають гонорар у розмірі 30 000 гривень та ексклюзивний контракт з медіакомпанією, за умовами якого вони отримуватимуть щомісячні роялті від продажу їхніх продуктів. Найкращі роботи будуть опубліковані в застосунку My Passion від HOLYWATER — цифровій книжковій бібліотеці у жанрі Romance, яка стала найпопулярнішим додатком у понад 10 країнах світу в своїй ніші. HOLYWATER володіє потужними маркетинговими інструментами, має великий досвід у промоції електронних книг та успішно співпрацює з авторами/ками по всьому світу протягом багатьох років –– завдяки цьому компанія може забезпечити ефективну підтримку та просування творів, допомагаючи авторам/кам досягати широкої аудиторії та значних успіхів. Якщо книга матиме успіх на платформі My Passion, медіакомпанія зможе перетворити її на аудіокнигу, інтерактивну гру або відеосеріал в межах екосистеми своїх продуктів, а автори/ки надалі отримуватимуть щомісячні роялті за всі нові форми контенту. «Для нас важливо показати, що українські авторки і автори можуть писати на рівні зі світовими і також «потрапляти» сюжетами і тропами у світові тренди. Ми видаємо любовні історії Алі Гейзелвуд і Лорен Ашер, але готові відкривати українські імена читачкам і читачам», — коментує CEO видавництва Vivat Юлія Орлова Автор/ка найкращого твору отримає можливість надрукувати свій текст в одному з найбільших видавництв України – Vivat, а також отримати ексклюзивний контракт на промо та просування своєї книги на українському ринку. Подати свою роботу та переглянути деталі конкурсу можна на вебсайті за посиланням . Прийом робіт триватиме з 05.08.2024 до 30.09.2024.
- Grammarly купує компанію Coda, доступ до ChatGPT Search та інші новини тижня
Grammarly купує компанію Coda і змінює CEO Grammarly, компанія, заснована в Україні, яка розробляє сервіси на основі штучного інтелекту для допомоги у спілкуванні англійською мовою, оголосила про придбання Coda (відомий редактор документів). Після об'єднання генеральним директором стане Шишир Мехротра, співзасновник та CEO Coda. Обидві компанії мають спільне бачення майбутнього, де штучний інтелект переосмислює бізнес-програми та робочі процеси. Планується інтеграція інструментів, зокрема об'єднання Grammarly з ШІ-асистентом Coda Brain, що зробить продукт «розумнішим» та «кориснішим». Мета — створення нових продуктів з використанням штучного інтелекту для підвищення продуктивності у сфері написання та редагування текстів. OpenAI відкрив доступ до пошукового сервісу ChatGPT Search усім користувачам Раніше ця функція була доступна лише для платних підписників. Тепер користувачі можуть отримувати актуальну інформацію з інтернету безпосередньо через ChatGPT, що робить його конкурентом для традиційних пошукових систем. Щоб скористатися цією функцією, достатньо увійти в обліковий запис ChatGPT через мобільний додаток або вебсайт, натиснути на значок у формі глобуса або опцію «Пошук в інтернеті» в полі введення тексту, і ввести свій запит. Це дозволяє отримувати відповіді з перевірених джерел та налаштувати ChatGPT як пошукову систему за замовчуванням. OpenAI також співпрацює з представниками новинної індустрії, збираючи зворотний зв’язок щодо своєї пошукової функції. У Києві відкрили другий у світі GovTech-центр Ц ентр об'єднує уряд, бізнес, стартапи та науковців для спільного створення цифрових рішень, реалізації проєктів із міжнародними партнерами та обміну досвідом. Основні напрями його роботи включають аналіз глобальних трендів у сфері урядових технологій, пошук партнерів для розвитку інновацій у сферах штучного інтелекту, EdTech, Defense Tech, Semiconductors, BioTech, Green Tech та AUV, а також навчання цифрових лідерів сучасних технологій. Очолила український GovTech-центр соціальна підприємиця та лідерка у сфері цифрових трансформацій Зоя Литвин. Центр створений з ініціативи Міністерства цифрової трансформації України в межах Програми EGAP, що виконує Фонд Східна Європа коштом Швейцарії. Copilot для VSCode тепер має безкоштовну версію Microsoft випустила безкоштовну версію свого ШІ Copilot для користувачів Visual Studio Code. Ця версія інтегрована безпосередньо в редактор і дозволяє виконувати до 2000 генерацій коду та 50 чат-запитів на місяць. Користувачі можуть обирати між моделями Claude 3.5 Sonnet від Anthropic та GPT-4o від OpenAI. Крім того, безкоштовний пакет надає доступ до сторонніх агентів Copilot та можливість створювати власні розширення. Для розробників, яким потрібні розширені можливості, доступні платні плани: Copilot Pro: $10 на місяць або $100 на рік; необмежені генерації коду та чат-запити, доступ до моделей Gemini 1.5 Pro, o1-preview та -mini. Призначений для професійних розробників і великих проєктів. Copilot Business: $19 за користувача на місяць, аналогічні можливості, орієнтовані на організації з кількома розробниками. Copilot Enterprise: $39 за користувача на місяць, призначений для підприємств із великими потребами. Фінтех стартап ONE залучив $300 млн Walmart, спільно з інвестиційною фірмою Ribbit Capital, очолює раунд фінансування на суму понад $300 мільйонів для фінтех-стартапу One, який є дочірньою компанією Walmart. Цей раунд, який ще не завершено, оцінює One у $2,5 млрд до залучення нових коштів. One надає фінансові послуги мільйонам клієнтів Walmart та його співробітникам. Запущений близько двох років тому, стартап пропонує розстрочку, дебетові картки, платіжні сервіси. Для співробітників рітейлера — доступ до заробітної плати раніше терміну. Планується, що у 2025 році One випустить кредитну картку Walmart з новим банківським партнером.
- Chief Growth Officer Genesis Олексій Ніщик став переможцем премії DOU 2025
У березні 2025 року видання DOU оголосило результати другої щорічної премії, яка відзначає людей і ініціативи, що формують українське ІТ. Цього року серед переможців — Chief Growth Officer Genesis Олексій Ніщик. Олексій одержав нагороду в номінації «Вони надихають». Номінація відзначає людей, які своєю відданістю, інноваціями та лідерством мотивують і надихають ІТ-спільноту. Під керівництвом Олексія одна внутрішня школа перетворилася на цілу екосистему освітніх проєктів. Понад 50 000 українців уже взяли участь у програмах, створених Genesis. «Я радий, що сьогодні в країні можна продовжувати створювати якісні ініціативи — за це велика вдячність ЗСУ! Люди й проєкти, які я побачив вчора на нагороджені, стали для мене ще одним підтвердженням, що IT в Україні розвивається дуже стрімко. І я радий бути дотичним до цієї спільноти. Ця нагорода — це не тільки моя нагорода, але команди й усієї екосистеми Genesis»,— говорить Олексій. Також у шортлист цьогорічної премії потрапили: платформа INTRO, ініціатива Genesis Press та Андрій Скоромний, Delivery Manager Promova. Нагородження в межах премії DOU відбувається уже вдруге. Відзнака покликана продемонструвати найкраще в українському ІТ і надихнути спільноту на створення нових ініціатив та проєктів. Після голосування читачів та експертного обговорення команда DOU обрала найкращі проєкти, які формують українську ІТ-спільноту і є двигуном технологічного розвитку країни. 20 березня відбувся фінал Премії, на якому оголосили переможців у 12 номінаціях.
- Новини тижня у ШІ: плюси Gemini 2.5 Pro, перспективи LLM та ризик підробки рецептів
У регулярному дайджесті новин запрошені експерти розповідають, що у їх галузі варто уваги. Сьогодні новинами з ринку ШІ ділиться Сергій Бриль, AI and Analytics Executive Leader. Розповідаємо, що вміє Gemini 2.5 Pro від Google, чи стануть LLM справжнім ШІ та як захиститись від ШІ-шахрайства. Gemini 2.5 Pro від Google стала доступною для всіх Які переваги вона має? Google вивів конкуренцію на ШІ-ринку на новий рівень, безкоштовно відкривши доступ до Gemini 2.5 Pro – моделі з 1 млн токенів контексту (майбутнє розширення — до 2 млн). Її архітектура включає механізм багатоетапного мислення. Це забезпечує 51.6% ефективності у тестах на людську логіку, випереджаючи аналоги. Модель демонструє найвищі показники в наукових (84% у GPQA) та кодових (63.8% у SWE-bench) задачах, а також здатність аналізувати об’ємні дані (повні романи, відео, код-бази). Стратегія Google базується на демпінгу: безкоштовний доступ (5 запитів/хв) повинен перехопити базу користувачів інших гравців, які не мають альтернативних джерел доходів і існують за рахунок інвестицій — їм набагато важче відмовитися від монетизації. Незважаючи на вищі енерговитрати (2.1 kWh/запит) та латентність (4.7с), модель вже інтегрована з платформами Replit / VS Code і планує підтримку 3D-рендерингу та Google Workspace до 2025 року. Цей крок змусить конкурентів переглянути ціноутворення або функціонал (наприклад, додати можливості в платних пакетах). Великі мовні моделі (LLM) ніколи не стануть справжнім ШІ Це дійсно так? До таких результатів прийшли дослідники Association for the Advancement of Artificial Intelligence, опитавши близько 500 спеціалістів із ШІ. Відповідь залежить від того, як визначити Artificial General Intelligence (AGI). Якщо під AGI розуміти систему, здатну мислити, адаптуватися та вирішувати будь-які завдання так само добре або краще за людину, поточна архітектура LLM має серйозні обмеження: LLM є статистичними моделями, які працюють на основі патернів у даних. Вони не мають справжнього розуміння чи свідомості. Їхня здатність вирішувати завдання обмежується якістю та обсягом тренувальних даних. Відсутність довгострокового планування та причинно-наслідкового мислення робить їх непридатними для багатьох задач AGI. Крім того, як зазначив засновник OpenAI Сем Альтман у 2024 році, визначення AGI може змінюватися залежно від контексту та очікувань суспільства. У конкурентній гонці компанії можуть називати AGI системи, які частково відповідають початковим критеріям. Це нагадує ситуацію зі штучним інтелектом — термін використовують для позначення майже всіх сучасних технологій — від статистичних методів до NLP. Наукова спільнота вважає, що поточна архітектура LLM не є достатньою для створення справжнього AGI. Однак це не означає, що AGI неможливе в принципі. Майбутні прориви в галузях нейроморфних обчислень, когнітивної науки чи нових архітектур штучного інтелекту можуть змінити ситуацію. Проте обговорення можливості створення AGI ще до його появи є важливим кроком. Це дає суспільству шанс підготуватися до потенційних викликів і ризиків, пов’язаних із появою такої технології. Новий генератор зображень від ChatGPT якісно підробляє рахунки в ресторанах До чого це може призвести? Хоча технологія має потенціал для творчих і освітніх цілей, її зловживання може призвести до ризиків у сфері безпеки, фінансів і медицини. Їх можна поділити на три групи: 1. Безпосередні загрози (короткострокові): Зростання кількості фішингових атак через підроблені рахунки/рецепти. Колапс ручних систем верифікації (наприклад, аптеки не встигатимуть перевіряти кожен рецепт). Масові спроби отримати ліки з обмеженим доступом (наприклад, опіоїди). 2. Системні наслідки (середньострокові): Знецінення цифрових документів у медицині та фінансах. Виникнення «паралельних» баз даних (легальні vs ШІ-документи). Зниження якості медичних послуг через хибні діагнози на основі фальсифікованих аналізів. 3. Стратегічні загрози (довгострокові): Дискредитація поняття «офіційний документ». Формування чорного ринку ШІ-генерованих документів. Знизити ризики можуть: Цифрові водяні знаки (наприклад, вбудовані NFT -маркери). Регуляторні зміни (наприклад, обов'язкова сертифікація ШІ-генераторів документів). ШІ-детектори. Децентралізована верифікація. Не здивуюсь, якщо виникне навіть страхування від ШІ-шахрайства.
- Новини тижня у ШІ: чип від Meta, китайський Manus AI та пропозиція Bluesky
У дайджесті новин запрошені експерти розповідають, що у їх галузі варто уваги. Цього разу новинами з ринку ШІ ділиться Сергій Бриль, AI and Analytics Executive Leader . Для чого Meta створювати власні чипи, на що схожий Manus AI та що спільного між ідеєю Bluesky та GDPR — обговорюємо у матеріалі. Meta тестує власний чип для навчання ШІ Створення чипів — ставка на стратегію вертикальної інтеграції у сфері штучного інтелекту. Про плани розробляти чипи раніше оголошували Google, Microsoft, Amazon, Tesla, OpenAI. Apple вже створює власні чипи для мобільних девайсів. З одного боку, ця стратегія вертикалізації обмежена наступним етапом, котрий буде дуже складно реалізувати, — виробництвом. Але до цього, здається, ще далеко. З іншого, монополіст на ринку — Nvidia — також не має власного виробництва. Таким чином, для Meta це спроба уникнути залежності від Nvidia і покращити свої конкурентні позиції. Це добре не тільки для компанії, але й для ринку. Задача дуже амбітна, адже потрібно набути глибокої експертизи в цьому напрямі, й на це можуть піти роки. До того ж, попередній чіп Meta був невдалим. Цікаво, як швидко AI почне суттєво підсилювати розробку чипів для самого себе? Китайські вчені створили першого повністю автономного ШІ-агента Manus AI Перші огляди показують, що Manus дійсно непогано працює, а ззовні й всередині сильно нагадує сімейство великих мовних моделей Claude від Antrophic. Сама новина виглядає як спроба зіграти на хайпі «китайських вчених» і галасі, який наробив Deepseek. Насправді парасолькова компанія зареєстрована в Сінгапурі, котрий не є Китаєм і не має обмежень у використанні новітніх чипів (а чи потрібні вони, якщо під капотом вже навчений Claude?). А домен Manus зареєстрований в офшорній юрисдикції — на Острові Мен, що є територією Британії. Bluesky розробляє основу для згоди юзерів щодо того, як їхні дані може використовувати генеративний ШІ Тема авторських прав на власні дописи і інші праці періодично виникає з різною силою. Так буде, поки не зʼявляться загальний підхід і правила. Пропозиція Bluesky нагадує підхід з GDPR, де користувач дає згоду (або ні) на збір даних про нього. На це точно можна спиратися як на діючий аналог, але: 1. Те як працює GDPR і досі викликає питання — далеко не всі виконують його умови, при тому, що він набув чинності в 2018 році. 2. Питання використання згенерованого людиною контенту виглядає набагато складніше, хоча б через те, що довести факт його вжитку непросто. Я вважаю, що варто приділяти увагу дискусії навколо цього питання і радію, що зʼявляються такі пропозиції. На думку спала next level ідея: заповіт на згенерований контент, який буде надавати можливість близьким розпоряджатися цим активом після смерті автора.
- Повне керівництво із Flexbox у CSS
Світ веб-верстки довгий час був полем експериментів: спочатку ми використовували таблиці для розміщення блоків, потім боролися з float-ами, а після цього перейшли на inline-block. Кожен із цих методів мав свої обмеження, складності та підводні камені. Але з появою Flexbox усе змінилося. Це прорив у веброзробці, який дозволяє контролювати розміщення елементів надзвичайно просто і гнучко. Своїм досвідом роботи із Flexbox з нами поділився Давид Дубляков, Front-end engineer в компанії AutoDoc. Він розповів, як Flexbox застосовується на практиці, у яких випадках він є оптимальним вибором і які його обмеження. Що таке Flexbox Flexbox (CSS Flexible Box Layout Module) — це сучасний інструмент для організації адаптивної, динамічної верстки. Він дозволяє легко розподіляти простір між елементами, вирівнювати їх у будь-якому напрямку та створювати складні компоненти без зайвих хаків та громіздких CSS-правил. Основна перевага Flexbox — це спрощення верстки без використання застарілих методів, таких як float або inline-block. Чому з'явився Flexbox До його появи верстальники використовували: Таблиці () — негнучкий метод, який не відповідає сучасним стандартам веб-дизайну. Float (float: left/right;) — застосовувався для створення колонок, але вимагав громіздких хаків (clearfix). Inline-block (display: inline-block;) — зручніший за float, проте мав проблему з невидимими відступами між елементами. Flexbox вирішує ці проблеми, даючи розробникам можливість легко керувати розташуванням і розмірами блоків без зайвого коду. Уявіть собі коробку, що складається з кількох відділів, розмір яких автоматично змінюється залежно від наявного простору, при цьому кожен відділ може бути вирівняний за певними критеріями. Flexbox працює за таким самим принципом, забезпечуючи динамічне розташування елементів. Перший досвід роботи з Flexbox був для мене, мабуть, у 2019 році, коли я випадково зустрів його в прикладі коду, — ділиться Давид Дубляков . — Це було щось просте, і я навіть не звернув особливої уваги. Але вже у 2020 році інші розробники порадили мені пройти через FLEXBOX FROGGY . Цей ресурс допоміг швидко зрозуміти основні принципи роботи з Flexbox, при цьому у формі гри. Сьогодні майже в будь-якій, навіть найпростішій веброзробці, можна зустріти використання flexbox. Зараз це вже must-have. Як працює Flexbox Flexbox — це потужний модуль для створення гнучких макетів. Він дозволяє легко розташовувати, вирівнювати та розтягувати елементи в контейнері без використання float або position. Flexbox базується на двох осях: Головна вісь (main axis) — елементи розташовуються вздовж цієї осі (горизонтально чи вертикально, залежно від налаштувань). Поперечна вісь (cross axis) — елементи можна вирівнювати по цій осі (перпендикулярно до головної осі). У вас є flex-контейнер (батьківський елемент), в якому знаходяться flex-елементи (дочірні елементи). «Flexbox є найкращим рішенням для адаптивного дизайну, — зазначає Давид, — а також, коли структура блоків здебільшого однолінійна — по горизонталі чи вертикалі». Втім, є й випадки, коли розробник не рекомендує використовувати Flexbox. Якщо є потреба вирівнювання при великому вкладенні елементів — це може перетворитись в зайвий boilerplate flex-container’ів, — пояснює він. — Якщо ж вам потрібне жорстке вирівнювання по певній сітці чи 2D, то звісно, з цим набагато простіше впорається grid. Інколи також можу використовувати inline-block і позиціювання елементів за допомогою властивості position як альтернативу Flexbox. Напрямок осей визначається через властивість flex-direction. Ключові поняття Main axis – це основна вісь, уздовж якої будуть вирівнюватися елементи (горизонтально або вертикально, залежно від налаштувань). Cross axis – це поперечна вісь, яка перпендикулярна до основної. Main-start | main-end – початок і кінець головної осі, звідки і куди шикуються елементи. Cross-start | cross-end – початок і кінець поперечної осі. Main size – ширина або висота елемента вздовж головної осі. Cross size – ширина або висота елемента вздовж поперечної осі. Головне правило: спочатку задайте display: flex для контейнера, а потім налаштуйте flex-direction, justify-content і align-items, щоб отримати потрібний макет. Приклад без Flexbox (за допомогою float) html 1 2 3 css .container { overflow: hidden; } .item { float: left; width: 30%; margin: 1%; background-color: lightgray; text-align: center; padding: 20px; } Проблеми : громіздке очищення потоку, складне керування відступами Приклад із Flexbox css .container { display: flex; justify-content: space-between; } .item { width: 30%; background-color: lightgray; text-align: center; padding: 20px; } Переваги : простий код, рівномірний розподіл, легке управління позиціями. Flexbox спрощує верстку, усуваючи необхідність у маніпуляціях з float або inline-block, що робить код чистішим і більш адаптивним. Щодо найтиповіших завдань, — розповідає Давид , — то Flexbox дуже добре підходить для вирівнювання декількох блоків одночасно — як по вертикалі, так і по горизонталі. Також для гнучких відступів між блоками й автоматичного перенесення елементів у новий рядок. Flexbox робить ці завдання дуже простими. Як працює display: flex Як активувати Flexbox? Щоби почати використовувати Flexbox, потрібно додати до батьківського контейнера властивість display: flex;. Це перетворює його на flex-контейнер, а всі дочірні елементи автоматично стають гнучкими та отримують можливість адаптуватися до розміру контейнера. Вони можуть змінювати своє положення, ширину та висоту залежно від налаштувань контейнера, таких як напрямок розташування, вирівнювання та розподіл простору. Що є «батьками», а що — «дітьми» в цій моделі? Батьківський елемент — це контейнер, до якого застосовується display: flex;. Він визначає, як будуть розташовані й вирівнюватися елементи всередині нього. Дочірні елементи — це всі елементи, що знаходяться всередині flex-контейнера. Вони автоматично підпорядковуються правилам вирівнювання та розміщення, заданим для батьківського контейнера. Приклад: css .container { display: flex; background-color: lightgray; } .item { width: 100px; height: 100px; background-color: steelblue; } html Результат: усі .item елементи будуть вирівняні в один ряд (горизонтально) — це стандартна поведінка display: flex;. Відмінність між display: flex; та display: inline-flex; display: flex; — контейнер займає всю доступну ширину і вирівнює елементи всередині на основі заданих параметрів (наприклад, напрямок, вирівнювання). display: inline-flex; — контейнер поводиться як inline-елемент, займаючи лише необхідний простір, що потрібен для розміщення його дочірніх елементів. Це означає, що контейнер може бути частиною рядка, не розтягується на всю ширину. Приклад: css .inline-container { display: inline-flex; border: 2px solid black; } Цей контейнер буде лише такої ширини, яка необхідна для розміщення його дочірніх елементів. Наприклад, у створенні адаптивного дизайну Flexbox — це дійсно крутий інструмент, — додає спікер. — Простота й ефективність полягають у його гнучкості. Він надає елементам і відступам автоматично розрахований простір залежно від того, які властивості ви надасте контейнеру та самим елементам. Ви можете налаштувати відображення елементів залежно від ширини екрана. Головне — правильно налаштувати властивості, а Flexbox зробить решту «магії» за вас. Властивості flex-контейнера Flexbox надає низку потужних властивостей, які дозволяють детально налаштовувати розташування елементів у контейнері. Розглянемо кожну з них. flex-direction Ця властивість визначає напрямок основної осі контейнера, що впливає на розташування елементів у рядку або стовпці. За замовчуванням елементи розташовуються в ряд (горизонтально), але можна змінити напрямок на вертикальний або навіть змінити порядок елементів. Значення: row (за замовчуванням) – елементи розташовуються зліва направо. row-reverse – елементи розташовуються справа наліво. column – елементи шикуються зверху вниз. column-reverse – порядок елементів зверху вниз, але у зворотному напрямку. Приклад коду: css .container { display: flex; flex-direction: column; } Цей код змінює напрямок розташування елементів на вертикальний. justify-content Ця властивість визначає вирівнювання елементів вздовж головної осі (горизонтально для row або вертикально для column). Вона дозволяє контролювати розподіл простору між елементами в контейнері. Опції: flex-start — елементи вирівнюються на початку контейнера. flex-end — елементи вирівнюються в кінці контейнера. center — елементи центруються. space-between — перший і останній елементи розташовуються по краях, решта рівномірно між ними. space-around — рівні відступи між елементами. space-evenly — рівні відступи між елементами, включаючи краї контейнера. Приклад коду: css .container { display: flex; justify-content: center; } Цей код центрує елементи всередині контейнера. align-items Ця властивість дозволяє вирівнювати елементи по поперечній осі (перпендикулярно головній осі). Залежно від значення, елементи можуть бути вирівняні по верхньому, нижньому краю або за допомогою центрування. Значення: stretch (за замовчуванням) — елементи розтягуються на всю висоту контейнера. flex-start — вирівнювання по верхньому краю. flex-end — вирівнювання по нижньому краю. center — центрування елементів по вертикалі. baseline — вирівнювання елементів по базовій лінії тексту. Приклад коду: css .container { display: flex; align-items: center; } Цей код вирівнює елементи по центру контейнера. flex-wrap За замовчуванням усі flex-елементи намагаються поміститися в один рядок. Якщо елементів занадто багато, можна використовувати властивість flex-wrap, щоб дозволити їм переноситись на нові рядки. Опції: nowrap (за замовчуванням) — усі елементи знаходяться в одному рядку. wrap — елементи переносяться на новий рядок при нестачі місця. wrap-reverse — елементи переносяться, але у зворотному порядку. Приклад коду: css .container { display: flex; flex-wrap: wrap; } Цей код дозволяє елементам переноситися на новий рядок, якщо для них не вистачає місця. gap Властивість gap задає відступи між дочірніми елементами, що дозволяє уникнути використання марґінів. Вона є дуже зручною для управління простором між елементами, особливо у складних макетах. Опції: row-gap — вертикальні відступи між рядками. column-gap — горизонтальні відступи між колонками. gap — одночасно задає вертикальні та горизонтальні відступи. Приклад коду: css .container { display: flex; gap: 20px; } Цей код додає відступи між усіма елементами контейнера. Ці властивості забезпечують максимальну гнучкість у керуванні розташуванням елементів у контейнері, дозволяючи легко налаштовувати їх орієнтацію, вирівнювання, розподіл простору та відступи. Якщо ж говорити про відображення Flexbox у різних браузерах, то, за словами Давида, в старіших версіях Safari є проблема з визначення flex-basis, якщо не задана конкретна ширина для flex-item. В сучасних версіях браузерів різниці немає. Властивості flex-елементів Flex-елементи — це дочірні елементи flex-контейнера, і вони мають власні властивості, що визначають їхню поведінку всередині гнучкого контейнера. Розглянемо основні властивості, які дозволяють точніше налаштувати розмір, розташування та вирівнювання. flex-grow Визначає, як елемент буде розширюватися, щоб зайняти вільний простір у контейнері. Значення цієї властивості вказує, у скільки разів елемент має рости порівняно з іншими. Приклад коду: css .container { display: flex; } .item { flex-grow: 1; /* Всі елементи розширюються рівномірно */ background-color: steelblue; width: 100px; height: 100px; } У цьому прикладі елементи рівномірно займають доступний простір. Якщо одному з елементів встановити flex-grow: 2;, він займатиме вдвічі більше місця, ніж інші. flex-shrink Керує тим, як елементи зменшуються, якщо місця в контейнері недостатньо. Значення цієї властивості вказує, наскільки елемент буде стискатися в порівнянні з іншими. Приклад коду: css .item { flex-shrink: 0; /* Елемент не буде зменшуватися */ } У випадку нестачі місця елементи з flex-shrink: 1; будуть зменшуватися рівномірно, а елементи з більшим значенням, наприклад flex-shrink: 2;, стискаються сильніше. «Буває, що елементи з використанням flex-grow та flex-shrink поводять себе досить неочікувано, — застерігає Давид, — тому треба певний досвід та час, щоб зрозуміти чому саме вони себе так поводять». flex-basis Визначає початковий розмір елемента до застосування властивостей flex-grow та flex-shrink. Це значення задається у пікселях, відсотках або може бути визначене як auto. Приклад коду: css .item { flex-basis: 200px; /* Початковий розмір елемента */ } Цей параметр визначає початкові розміри елементів до будь-якого їхнього розширення чи зменшення. align-self Дозволяє перевизначити властивість align-items для окремого flex-елемента. Це дає можливість кожному елементу мати своє вирівнювання, незалежно від налаштувань контейнера. Можливі значення: auto — використовує значення align-items контейнера. flex-start — вирівнювання по верхньому краю. flex-end — вирівнювання по нижньому краю. center — центрування елемента. baseline — вирівнювання по базовій лінії тексту. stretch — розтягнення елемента по висоті контейнера. Приклад коду: css .item { align-self: center; /* Центрування елемента по вертикалі */ } Цей код встановлює центрування для конкретного елемента в межах контейнера. Завдяки таким властивостям flex-елементів, можна досягти максимального контролю над тим, як елементи поводяться у flexbox макетах. Це дає змогу створювати адаптивні та гнучкі дизайни, що легко підлаштовуються під різні екрани та умови. Аби уникнути «перекручування» верстки при використанні flex-grow, flex-shrink та flex-basis, Давид рекомендує наступне: Використовуйте flex-grow: 0;, якщо елемент не повинен змінювати розмір. Використовуйте flex-shrink: 0;, якщо елемент не повинен зменшуватися. Використовуйте flex-basis: 0;, якщо хочете досягти рівномірного розподіл простору. Для перевірки розмірів можна використовувати DevTools в Chrome або Firefox. «Додам, що Flexbox може впливати негативно на продуктивність веб-сторінки, якщо динамічний розрахунок розмірів відбувається занадто часто. Тут я б рекомендував би не анімувати flex-grow або flex-shrink, а використовувати transform для кращої продуктивності. Також мінімізуйте вкладеність Flexbox-контейнерів, щоб зменшити навантаження на перерахунок макета». Приклади реального використання У цьому розділі ми розглянемо кілька практичних прикладів використання flexbox у реальних веб-проєктах. Створення адаптивного макета Одним з найбільш популярних сценаріїв використання flexbox є створення адаптивного макета, який коректно виглядатиме на різних розмірах екранів. У цьому прикладі ми побудуємо базову структуру сайту з хедером, сайдбаром, основним контентом і футером. Приклад: css .container { display: flex; flex-direction: column; min-height: 100vh; } .header, .footer { background: #333; color: white; text-align: center; padding: 20px; } .main { display: flex; flex: 1; } .sidebar { flex: 1; background: #f4f4f4; padding: 20px; } .content { flex: 3; background: #fff; padding: 20px; } У цьому прикладі сайдбар та основний контент займають пропорційно доступний простір, а футер завжди залишатиметься закріпленим внизу сторінки. Вертикальне та горизонтальне центрування елементів Часто зустрічається задача — розташувати елемент по центру сторінки як горизонтально, так і вертикально. За допомогою flexbox це можна зробити дуже просто, всього за один рядок коду. Приклад коду: css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .box { width: 200px; height: 200px; background: steelblue; color: white; display: flex; justify-content: center; align-items: center; } Використовуючи justify-content: center та align-items: center , елемент .box ідеально вирівнюється по центру як горизонтально, так і вертикально в межах контейнера. Сітка для карток товарів Ще один популярний сценарій використання flexbox — створення сітки для товарів або карток із рівномірним розподілом простору між ними. Це рішення забезпечує гнучкість і адаптивність макета. Приклад коду: css .cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .card { width: 200px; height: 300px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } Використання flex-wrap: wrap дозволяє карткам автоматично переноситися на новий рядок, коли не вистачає місця. З параметром gap: 20px забезпечуються рівномірні відступи між картками без потреби у використанні margin. Інколи були випадки, коли починав робити макет за допомогою flexbox, але в процесі розумів, що це буде реалізувати занадто складно на flexbox і переписував на grid для кращого контролю над сіткою», — зазначає Давид. Flexbox vs CSS Grid: що обрати? Flexbox та CSS Grid — це два основні методи для побудови макетів у CSS, кожен з яких має свої переваги в залежності від типу задачі. Основні відмінності між Flexbox та CSS Grid У яких випадках використовувати той чи інший метод Flexbox : обирайте для простих лінійних макетів, коли потрібно вирівнювати елементи в одному напрямку (наприклад, для адаптивних навігаційних панелей або простих форм). CSS Grid : обирайте для складних макетів, де потрібно контролювати розташування елементів по двох осях (наприклад, для створення сіток карток товарів або складних веб-сторінок з кількома колонками та секціями). Обидва методи можуть бути використані разом, комбінуючи їх переваги для досягнення оптимальних результатів у вашому проєкті. Grid краще використовувати для загального розміщення блоків, а Flexbox — для вирівнювання контенту всередині цих блоків. Така комбінація дає максимальну гнучкість і адаптивність. Навіть більше, — додає експерт , — Flexbox і CSS Grid і на майбутнє залишатимуться разом. Обидва ці потужні CSS-модулі використовуються для різних завдань. Grid, ймовірно, буде виступати основним методом побудови складних сіток, а Flexbox — для роботи з елементами, що знаходяться всередині grid-елементів. Flexbox — це потужний інструмент для створення адаптивних макетів, який забезпечує простоту в управлінні розташуванням елементів і гнучкість у їх розмірах. Його головні принципи це гнучкість, осьова орієнтація та адаптивність. Хочете швидко освоїти Flexbox? Варто почати з вивчення основних властивостей та їх застосування в простих прикладах. Ось кілька ресурсів для практики: Flexbox Froggy — інтерактивна гра, яка дозволяє вивчити основи Flexbox у веселій формі. CSS-Tricks Flexbox Guide — один з найкращих ресурсів для глибокого розуміння Flexbox, що містить як теоретичні, так і практичні приклади. MDN Web Docs — офіційна документація з усіма властивостями та прикладами для Flexbox. «Найкращий спосіб навчитися — ефективно використовувати Flexbox через практику. Я б порадив намагатися копіювати макети або застосовувати Flexbox у рамках реальних робочих задач. Це найкращий спосіб розібратися в принципах роботи», — говорить експерт.
- Дайджест продуктових новин: яка стратегія у YouTube, що сталось з Product-Market Fit і як змінився ринок застосунків
У дайджесті новин запрошені експерти розповідають, які події й зміни в їхньої галузі варти уваги. Цього тижня продуктовими новинами ділиться Богдан Кіт, співзасновник фонду KOLO та VP of Product в WordPress. Говоримо про те, чому YouTube обирає стратегію tiering pricing, яка динаміка у концепції Product-Market Fit і як відбувається трансформація від «чистих» підписок до гібридних моделей на ринку застосунків. YouTube запустив пілотну версію підписки Premium Lite Для чого йому стратегія tiering pricing? Все логічно: компанія запускає tiering pricing для того, щоб збільшити загальну конверсію з безкоштовного користувача в платного. Кожна людина може дивитися YouTube безкоштовно, але маленький відсоток людей підпишеться, і буде генерувати YouTube додаткові кошти. Цікавий план, адже у YouTube сегментована аудиторія: хтось приходить за відео, хтось — за музикою, хтось, можливо, й за тим, й за іншим, і тому купує Premium. У випадку, коли потрібні тільки відео, користувач зможе зараз підписатися, наприклад, на Lite. Але для компанії це завжди створює ризики, оскільки може змінитися план-мікс, і таким чином загальні revenue можуть впасти через даунгрейди. Це може призвести до «канібалізації» преміум-плану ( ринкова канібалізація — зниження продажів одного продукту, повʼязане з виходом нового продукту у тій же компанії — Ред. ). Тому такі концепції складні в реалізації, і в випадку YouTube можуть мати непоправний ефект. Проте я думаю, що в YouTube провели дослідження. Наприклад, дізнались, який відсоток аудиторії з існуючого преміум-плану слухає (або не слухає) музику, скільки користувачів можуть відписатися від Premium і перейти на новий план. Й який відсоток тих, хто не міг купити Premium, міг би підписатись на Lite, а також чи можуть покращення в конверсії перекрити канібалізацію більш дорожчого плана. Я думаю, що, як мінімум, їх гіпотеза щодо успішності Lite є сильною, тому вибір tiering strategy — це логічний крок: ти намагаєшся розширювати кількість планів, щоб краще монетизувати свою аудиторію. Подивимося на результати, адже у YouTube і до цього були спроби запускати різні плани. Вони завжди можуть закрити Premium Lite, якщо щось піде не так. Колишні product-менеджери HubSpot і Slack говорять про колапс Product-Market Fit Чи дійсно це так? Ця стаття — спроба назвати речі, які вже давно відбуваються в бізнес-середовищі, новими термінами. Product-Market Fit давно існує як концепція — вона описує, як стартап або нова компанія знаходить потребу на ринку й починає її задовольняти у спосіб, що відповідає очікуванням користувача. Це видно в певних метриках , і довкола того, як саме міряти Product-Market Fit, існує багато дискусій. Але це завжди динамічна величина: сьогодні він у тебе є, завтра — вже немає. Те, що автори описали більше схоже на пришвидшення кожної фази corporate lifecycles. Середній термін життя компанії в індексі SP 500 кожного разу скорочується, і це підтверджує тезу авторів. За свою кар’єру я бачив багато прикладів, коли компанії досягали Product-Market Fit, а потім випадали з нього. Якщо на ринок приходить більш сильний гравець, який вирішує ту ж саму проблему кращим продуктом, твій Product-Market Fit передається йому як естафетна паличка. Це й є ринкова конкуренція. Я не певен, що це має радикально змінити підходи до продуктової стратегії. Можливо, шалька ваг трохи зміститься, адже ти почнеш розуміти, що потрібно думати на кілька кроків вперед, враховувати наслідки другого та третього порядку тощо. Але якщо ти тільки починаєш нову компанію, ефективно враховувати усі виклики дуже складно. І якщо з самого початку думати про них, може просто не вистачити енергії, щоб їх долати. Тому на ранньому етапі краще рухатися поступово. Це радше про здатність бути адаптивним — створювати системи, які дозволяють ефективно реагувати на виклики, а не намагатись усе передбачити наперед. Це актуально для досвідчених компаній, де вже є інертність, бюрократія, системні обмеження, й з ними потрібно працювати. Тут ми говоримо про корпоративну стратегію — як створити умови, в яких компанія може ефективно відповідати на нові виклики. Я думаю, що у першу чергу потрібно переглядати не growth-моделі, а стратегічну базу. Якщо стратегія виходить з того, що бізнес завжди існуватиме і ніколи не з’явиться зовнішній disruptor, — така стратегія слабка. Інвестори, які бачать у ШІ системний ризик для бізнесу, запитають: «Який у вас план дій?», і компанії повинні мати відповідь. Для тих, хто вже має сильну ринкову позицію, важливо не стільки захоплювати, скільки захищатися — випускати схожі інструменти, які відповідають новим очікуванням користувачів. Наприклад, у WordPress одним із таких системних ризиків є популяризація no-code рішень і vibe-coding. Люди не хочуть програмувати — вони хочуть швидко створити сайт. Зараз це легко зробити з ШІ, тому ми випускаємо BigSky — наш власний ШІ-website builder. Це дає змогу захистити свою аудиторію від відтоку і задовольнити їхню потребу. Окрім цього, у нас є й інші механізми захисту: defensibility, switching costs. Багато користувачів вже давно на нашій платформі, і якщо ми їм даємо ті ж самі інструменти, що й конкуренти, — їм не потрібно йти кудись ще. Я думаю, що кожна компанія має відповісти на запитання: 1. Чи є ШІ системним ризиком для нас? 2. Якщо так — який наш план дій? І на основі відповідей формувати конкретну стратегію — або захисту, або атаки. Бо ШІ може бути як загрозою, так і можливістю. Для стартапів це — швидше шанс завоювати аудиторію, для established-компаній — захистити свою. Дослідження ринку застосунків за підпискою показало, що ШІ-застосунки приносять більше грошей на одного платного юзера, ніж звичайні Як до цього адаптуватись й чи стане виходом гібридна модель підписки? ШІ-застосунки досі мають ефект новизни, хоча він поступово згасає. Тепер люди просто очікують, що будь-який додаток матиме ШІ-фічі. Варто звернути увагу на те, який спліт між ChatGPT та іншими додатками, тому що є чітка динаміка winner-takes-all, і саме ChatGPT заробляє основну частку ринку, тому загальні метрики можуть бути трохи викривленими. З іншого боку, ШІ-додатки приносять більше доходу з одного платного користувача, просто тому, що вони агресивніше монетизуються — через наявність прямих витрат, які значно впливають на маржинальність. OpenAI досі не є прибутковими, бо вони надають дуже цінний сервіс за помірну ціну. Але якщо порівняти цей price point із середньоринковим, то він агресивний. Наприклад, підписка за $20 на місяць або $240 на рік — це вже рівень топ-тієр монетизації, що і формує високий LTV: продукт дуже цінний, retention високий, життєвий цикл користувача довший, і тому з одного юзера можна заробити більше. OpenAI задав ринковий стандарт: користувачі вже готові платити $20, і хтось інший може випустити ще щось і чарджити навіть більше. Це ще раз підтверджує, що основа — це value-based pricing. Звісно, потрібно враховувати конкурентне середовище, але базовий підхід має виходити з цінності, яку ми доносимо до користувача. Було б цікаво зрозуміти, чому OpenAI обрали саме $20. Для нового Pro-плану вони вже виставили $200 — очевидно, там інша математика. Але, наприклад, якщо б вони підняли ціну підписки до $25, можливо, конверсія залишилась би такою ж, а заробіток — вищим. На таких масштабах кожен додатковий долар — це величезні гроші, тому головне — розуміти цінність продукту і тестувати, скільки за неї готові платити. Гібридна система монетизації є логічною для апок, тому що в багатьох з них є невидима стеля Average Revenue per User: неможливо продати дві підписки юзеру. Різні типи підписки працюють не для всіх. Зазвичай у більшості застосунків немає глибокого енґейджменту, щоб встановлювати вартість на основі рівнів і мати Pro або Light план, як у YouTube чи ChatGPT. Тому для них найбільш розумною є комбінація цих підходів. В багатьох випадках є сенс додати маркетплейс до підписочної моделі. Таким чином можна збільшити й Average Revenue per User, й (частково) LTV. Звісно, не завжди легко зробити правильний price point, особливо коли ти не створюєш щось нове або працюєш у ніші з високою price sensitivity. Але модель value-based pricing усе ще працює — якщо ти створюєш щось справді цінне й даєш за це справедливу, але конкурентну ціну, ти можеш стрімко зростати. Є базове правило: не відкладати Core Experience — користувач має якнайшвидше відчути головну цінність продукту. Це не завжди означає уникати довгого онбордингу. Наприклад, якщо користувач одразу потрапляє в флоу із 20 запитаннями — це не обов’язково погано, для багатьох продуктів це частина Core Experience. Таким чином формується персоналізація, і вже під час відповідей користувач починає осмислювати свій досвід, й навіть отримувати перші інсайти або відчувати прогрес. Не всі додатки можуть показати цінність за перші 10 секунд. Особливо це стосується тих, що базуються на комунікації або емоційній взаємодії з аудиторією. Але є інші категорії, де демонстрація цінності — майже миттєва. Наприклад, якщо це фоторедактор, то Day One Experience можна спроєктувати швидко. Використати ефект Curiosity Gap : дати змогу завантажити фото, миттєво зробити магію, показати результат із водяним знаком або в блюрі — і одразу запропонувати платний план для отримання повної версії. Користувач бачить, за що платить, і тому конверсія в таких застосунках зазвичай висока. Вони не завжди живуть довго, бо їх легко клонувати, але в моменті ці апки можуть заробити багато. Ключ — правильно спроєктований Day One Experience, де користувач одразу відчуває цінність і готовий платити. Приклади вдалого Day One Experience У застосунка з розмальовками Lake був хороший таймінг для апсейлуу: починаєш розмальовувати, й коли ти завершив частину, застосунок каже: «Це може зайняти ще багато часу. Хочеш дізнатися, чому варто підписатися вже зараз?». Після цього відкривається paywall, де розробники продукту не просто просять оплату, а розповідають про користь розмальовок для ментального здоров’я. Це сильний підхід, тому що користувач уже вклав час, у нього з’являється loss aversion — він не хоче втратити прогрес, через це зростає як його намір, так і ймовірність підписки. Uber і Amazon також роблять апсейл грамотно. Коли ти підписуєшся на Prime чи Uber One, тобі показують, скільки грошей ти зекономив, створюючи відчуття, що підписка себе виправдовує. У користувача формується суб’єктивне сприйняття цінності: я не просто плачу, а отримую щось у відповідь. Це підвищує бажання продовжити підписку. Ще один приклад — Arc Browser. Вони показують слайдер, де можна порівняти вигляд сайту з трекерами і рекламою та без них. Це — 100% чітке донесення цінності. Таких технік багато, але всі вони — контекстуальні. Усе залежить від ніші, специфіки продукту й очікувань користувача. Але успішні продукти знаходять спосіб швидко донести цінність і грамотно таймити момент, коли просити про оплату.
- SUITSME стає w7g. Як відбувалась трансформація ігрового стартапу в femtech-компанію
Команда SUITSME публічно оголосила про зміну імені компанії — відтепер вона називається w7g . Це рішення стало логічним продовженням масштабної трансформації: стратегічної, продуктової, організаційної. У колонці для High Bar Journal СЕО і засновниця компанії Галина Єфремова розповідає історію ребрендингу зсередини — від перших сумнівів до останнього штриху в логотипі. Коли я тільки запускала SUITSME , усе здавалося очевидним: є гра, є продукт, є назва. Вона збігалася з іменем компанії, і це було зручно. Але, насправді, тоді питання назви не мало великого значення. Коли запускаєш перший продукт, усі сили йдуть на сам продукт і бізнес. Ти не думаєш про назву чи бренд — не знаєш, куди все приведе, і фокусуєшся на тому, щоби дати результат. Назва здається другорядною. Так було і в нас. Та з часом стало зрозуміло: SUITSME — це не просто гра. Спільнота користувачок зростала, ми чули історії, які не вкладалися в звичний геймінг-наратив. Жінки розповідали, що наш продукт для них це спосіб підтримки, релаксу, самовираження. І саме ці інсайти стали першим дзвіночком: нашій аудиторії потрібен простір турботи про себе. Не просто розвага чи гра, а щось глибше — емоційна підтримка, безпечне середовище, де можна побути з собою. Так з’явився FABU — продукт, який народився як експеримент, а з часом став повноцінним інструментом емоційного добробуту. У цей момент я вперше поставила собі запитання: а як нам тепер себе позиціонувати як компанію? Розвиваючи другий продукт, ми вже не просто створюємо окремі ігри, ми переходимо в іншу категорію. SUITSME — це назва гри. FABU — інший продукт, з іншою місією. А як називається компанія, що об’єднує їх? І що ми будуємо насправді? Це запитання запустило ланцюг змін: ми переглянули свою місію, відчули потребу в новій назві, провели ребрендинг, дещо змінили структуру команди й повністю оновили інфраструктуру. Стратегічна сесія і рішення змінити ім’я Ми вже створювали два продукти, які мали спільну аудиторію, але різні формати, теми, темп. Усе частіше ми поверталися до запитання: що нас об’єднує? Яка наша справжня місія? І як ми маємо виглядати назовні, щоб це відображати? Відповіді почали формуватися під час стратегічної сесії з керівниками. Саме вона стала точкою неповернення. Я побачила нас зі сторони — як компанію, яка створює цифрові продукти для жінок, із глибшим фокусом на емоційне благополуччя, підтримку, самопізнання. Я зрозуміла, що вже не мислимо категорією одного продукту — ми будуємо платформу, екосистему, простір, де різні продукти працюють на одну спільну мету. І в цей момент стало очевидно: стара назва нас більше не вміщує. Рішення про зміну імені не було спонтанним. Насправді, це був довгий внутрішній процес. Я довго сумнівалась: а чи справді треба щось змінювати? А якщо SUITSME залишиться єдиним продуктом? А якщо FABU стане основним? Але чим більше я ставила собі ці «а якщо», тим очевиднішим ставало головне: ми вже інша компанія і нам потрібне ім’я, яке це відображає. Як ми шукали нову назву — і знайшли w7g На перший погляд, це здається простим завданням: треба просто знайти красиве вільне ім’я, купити домен і зробити логотип. Але насправді це був один із найскладніших етапів трансформації. Спочатку я подумала, що впораюся сама. Вирішила почати з ChatGPT — здавалося, це буде швидко й ефективно. Я годинами генерувала варіанти, тестувала комбінації, шукала гру слів. Але все звучало або надто банально, або штучно. Жоден варіант не «чіпляв». Усі ці назви ніби й мали сенс, але не мали душі. Тоді я звернулася до консультантки з неймінгу — людини, яка спеціалізується на створенні назв. Ми провели дві повноцінні ітерації. Вона запропонував низку ідей — структурних, концептуальних, з історіями. Деякі були занадто претензійними, інші — складними для вимови, ще інші вже були зайняті в доменах і соцмережах. Але головне — жодна з них не відгукнулася на рівні «оце воно». І от коли вже здавалося, що ми зайшли в глухий кут, я почала більше говорити з людьми з команди. Без формальних воркшопів чи брейнштормів з генерації назв. Просто — ділитися своїми думками, сумнівами, внутрішнім пошуком. Наш продуктовий дизайнер, який до цього мав досвід у бренд-дизайні, сказав дуже просту, але важливу річ: бренд не живе у вакуумі. Назва має працювати у повсякденному житті — виглядати на футболці, звучати в розмові, зчитуватись у логотипі. І тоді він надіслав мені кілька варіантів назв, оформлених як принти на мерчі. Серед цих варіантів була w7g . Саме вона мене зачепила. Не тому, що ми довго її тестували чи експериментували з нею — а тому, що вона «зачепила». Обдумуючи її певний час, я вирішила зупинитися на ній. У ній була структура, простота, сучасність. Вона звучала технологічно, але не штучно. І головне — в ній був сенс. Деякі з варіантів назв, які пропонував ChatGPT Її логіка була дуже проста й водночас глибока: w — перша літера слова well-being ; 7 — кількість літер між w та g у цьому слові, окрім того, сімка символізує 7 днів на тиждень тобто «щодня»; g — остання літера слова well-being, а також перша літера слова globally . Спочатку вона здавалася занадто технічною, але чим більше ми про неї думали, тим більше вона нам подобалась. У ній була структура, стислість, сучасність. Ми розшифрували її для себе як: Wellbeing Daily Companion for Women Globally . Це була не просто назва — це була наша нова ідентичність. Айдентика, яку ми створили самі Після того як ми обрали назву w7g, наступним кроком стало візуальне оформлення бренду. І тут для мене було принциповим: ми не звертаємось до зовнішньої агенції. Ідея назви народилася всередині команди, і ми мали достатньо внутрішньої сили, таланту й експертизи, щоб продовжити цей шлях самостійно. Наш бренд-дизайнер взяв на себе розробку логотипу та візуального стилю. Водночас над контентною та комунікаційною частиною ребрендингу працювала наша внутрішня PR-команда. Це було важливо — бо ми не просто створювали айдентику, ми переосмислювали, як презентуємо себе назовні, як формуємо історію бренду. У світі, де більшість компаній передають такі завдання на аутсорс, ми зробили все самі. Це дало не лише контроль, а й глибше розуміння того, ким ми є. Я хотіла, щоб новий візуальний стиль передавав не тільки технологічність, а й впевненість. Ми будуємо продукти для жінок, але це не означає, що вони мають виглядати «жіночними» у стереотипному сенсі — з квітами, метеликами й пастеллю. Наші користувачки — сильні, розумні, вимогливі. І ми хочемо підтримати їх не м’якістю, а опорою. w7g виглядає достатньо сильно навіть без складної графіки. Ми пішли в сучасний мінімалізм: правильний шрифт, точна геометрія, ритм. Окремо працювали навіть з формою сімки — вона стала візуальною опорою логотипу. Усе це стало частиною нового голосу компанії. Як ми оголосили про ребрендинг команді Коли назва вже була обрана, почалося найцікавіше — внутрішній запуск. У таких ситуаціях зазвичай є два шляхи. Перший — коли назву просто оголошують у день публічного релізу, і для команди все змінюється миттєво. Ми свідомо обрали інший підхід. Мені було важливо, щоб команда не просто дізналася про зміни, а зрозуміла їхню глибину. Щоб кожен відчув себе частиною цього процесу. Тому ми зробили внутрішній анонс заздалегідь — ще до того, як оновлення стали публічними або технічно впровадженими. Ми хотіли, щоб команда розуміла, чому ми змінюємось, і стала нашою підтримкою та амбасадорами нового бренду. Я провела презентацію: розповіла історію пошуку назви, пояснила місію, символіку w7g, чому ми змінюємося і що це означає. Після цього ми вирішили зробити внутрішнє опитування — аби зібрати перші реакції та питання. Я швидко склала форму й надіслала її команді. Результати опитування стали несподіваним джерелом інсайтів. Дехто запитував, як правильно вимовляти назву. Інші — чи це вже фінальне ім’я. Були й ті, хто чесно сказав, що не одразу її «відчули». Але головне — майже всі писали, що зрозуміли логіку змін і підтримують трансформацію. Цей фідбек підсвітив важливу річ: щоби команда прийняла зміни, їй потрібен не тільки результат, а історія. І саме завдяки цій історії — щирій, відкритій, без прикрас — ребрендинг сприйняли позитивно. Від Slack до пошти: технічна частина трансформації Зміна назви — це лише вершина айсберга. За нею — десятки технічних процесів, які потрібно синхронізувати, щоб усе працювало як єдине ціле. Саме ці «невидимі» кроки стали важливою частиною нашої трансформації. Одним із перших викликів була міграція Slack. Ми могли б просто створити новий робочий простір і почати з чистого аркуша. Але нам було принципово зберегти всю історію листування — бо це теж частина нашої культури, памʼяті та командної динаміки. Ми обрали складніший, але правильний шлях: перенести дані, канали, переписки. Координувала цей процес наша Head of Delivery — чітко, структуровано, з контролем доступів і дедлайнів. Паралельно ми оновили корпоративну пошту, структуру доступів, внутрішні документи, домени. І весь цей процес тривав близько чотирьох діб — інтенсивно, але дуже злагоджено. Команда включилася на максимум. Усе це дало відчуття: ми справді перезапускаємось. Не просто змінюємо логотип чи банер на сайті — а починаємо нову главу. І це дуже об’єднало команду. Ми відчули, що зробили щось важливе разом. Як ми перебудували команду під мультипродуктовість Коли ти працюєш над одним продуктом, усе очевидно: єдині команда, мета і фокус. Але щойно з’являється другий — з власними задачами, циклом розробки, потребами в тестуванні та маркетингу — структура починає хитатись. У нас обидва продукти — SUITSME і FABU — певний час розвивалися в межах однієї команди. Ми жонглювали тасками, ресурсами, людьми. Тестувальники перемикались туди-сюди, пріоритети змінювались щотижня. Це працює на старті, коли продукт ще на етапі R&D, але як тільки стає зрозуміло, що обидва проєкти — «живі», потрібно розділяти. Ми поступово переходимо до моделі двох незалежних технічних команд: окремі фронтенд-розробники, тестувальники. Серверна команда нині ще в процесі розділення, а маркетинг, дизайн та інші нетехнічні команди — все ще працюють над усіма продуктами спільно. Паралельно відбулась ще одна важлива зміна — з’явилась ієрархія. Якщо раніше у нас були тільки тімліди, то зараз сформувались head-рівні: Head of Delivery — відповідає за всю розробку; Head of Fashion & Content — керує контент-командою SUITSME: створює нові образи, челенджі, сезони; Head of Marketing — відповідає за залучення нових користувачів. Це була найздоровіша трансформація за весь час існування компанії. Люди виросли всередині команди — повна довіра і делегування. Єдиний напрям, який я все ще менеджерю особисто — це продукт. У нас є продакт-дизайнер, аналітикиня, спеціаліст на воронках, але Head of Product — це моя головна «відкрита вакансія» . Бо я знаю: щоби продукт став масштабним, мені потрібно передати його в надійні руки. І сама я вже не встигаю бути product owner повноцінно. Але з усім іншим — ми вийшли на рівень, де команда самостійно приймає рішення, планує, росте. І це — найсильніша частина цієї трансформації.