✔ Одразу показати, чого тут навчають, — готувати еклери й торт
✔ Познайомити з авторкою курсів і викликати довіру до неї як до шеф-кондитерки
✔ Продавати курс фотографіями десертів і відео, а не довгими текстами
✔ Відповісти на запитання покупця: що всередині, скільки уроків, як довго діє доступ
✔ Вести до запису на курс кнопкою «get started»
Марія Тульчевська — шеф-кондитерка й засновниця Art Dessert LLC у Каліфорнії. Для її онлайн-школи потрібен був сайт англійською, який продає курси з еклерів і торта — і новачкам без досвіду випікання, і професіоналам.
Я зверстав головну й сторінку курсу так, щоб продавали самі десерти: великі фото на білому тлі, графітові й пісочно-золоті блоки в шаховому порядку, кнопки з градієнтом від чорного до золотого. Структура відповідає на два запитання покупця — хто навчає і чого саме навчать.
Результат — сайт із головної з курсами й блоком про інструкторку та сторінки курсу «Contemporary Éclairs» з відео, цифрами й програмою за модулями в акордеоні. У мобільній версії — шапка з бургером і посиланням «get started», а блоки вибудувано в одну колонку.
Сайт, на якому курс продають самі десерти.
Еклери на білому тлі, великі плани глазурі й розрізи з начинкою
Портрет Марії, цитата, факти про компанію й учнів, окремий блок про місію
Запис відкрито → про курс із відео → переваги → що ви отримаєте → цифри → програма
Модулі від вступного уроку до декору розгортаються після кліку й не розтягують сторінку
Доступ на 6 або 9 місяців, 50+ сторінок для друку і 36 уроків — однією золотою смугою
Бургер, монограма й «get started» у шапці, блоки курсу — в одну колонку
Стриманий графітово-золотий сайт, у якому головне — еклери та їхня авторка.
Сайт розв’язує кілька основних завдань:
Відповідь гарантовано протягом 24 годин.
Перша консультація безкоштовна й ні до чого не зобов’язує.
Коли продаєш курс з еклерів, головний аргумент — самі еклери. На прикладі онлайн-школи шеф-кондитерки Марії Тульчевської розповідаю, як я зробив сайт англійською: головну з курсами й авторкою, сторінку курсу, яка продає, з відео й програмою за модулями, а також мобільну версію.
Марія Тульчевська — шеф-кондитерка й засновниця Art Dessert LLC. Її компанія в Каліфорнії готує європейські десерти й випічку, співпрацює з місцевими кав’ярнями та проводить професійні кондитерські заняття онлайн і наживо по всій території США. Особисто Марія навчила понад двісті учнів.
Для онлайн-школи ART DESSERT by Maria Tulchevska потрібен був сайт англійською, який продає курси — з еклерів і з торта. Головний із них — «Contemporary Éclairs»: навчитися робити еклери професійного рівня можна навіть без досвіду випікання. Моє завдання — зробити сайт, у якому цій обіцянці віриш з першого погляду: зверстати головну й сторінку курсу, зібрати інтерактивні блоки й мобільну версію.
Еклери Марії самі собою схожі на прикраси: дзеркальна глазур, сусальне золото, ягоди. Тому сайт не змагається з ними декором — головну роль відіграють фотографії:
Більшість сторінок зібрано в шаховому порядку: фото, а поруч текст на темній чи золотій плашці. Такий ритм легко читати, а сітку легко доповнювати новими розділами — наприклад, сторінкою курсу з торта.
Меню в шапці розділене логотипом-монограмою: ліворуч — «Éclairs», «Cake» і «Your instructor», праворуч — «Events», «Professional blog» та Instagram. На першому екрані — портрет Марії в кондитерському кітелі, назва школи, коротка обіцянка навчити робити еклери професійного рівня без досвіду випікання й дві кнопки — «éclairs» і «cake». Відвідувач вибирає курс, ще не прокрутивши сторінку.
Нижче курси подано блоками в шаховому порядку: фото десертів і темна плашка з підписом «online course», назвою, описом і кнопкою «more about course».
В онлайн-навчанні купують не лише програму, а й викладача. Блок «Meet Your Instructor» відкривається великою цитатою Марії про те, скільки часу й сил пішло на кондитерську майстерність. Поруч із її портретом — золота плашка з трьома фактами: компанія Art Dessert LLC, співпраця з кав’ярнями Каліфорнії, які продають випічку за рецептами Марії, і понад двісті учнів.
Далі — смуга розрізаних еклерів із відображенням на всю ширину й блок місії: Марія з еклером у руках і цитата про те, що для неї радість — ділитися знаннями й робити сучасні кондитерські техніки доступними кожному. Кнопка «more about Maria Tulchevska» веде до докладної розповіді про авторку, а темний підвал збирає меню, логотип і контакти.
Сторінку «Contemporary Éclairs» побудовано як історію, що продає. Перший екран — назва курсу, напис «Enrollment is now open», обіцянка результату й кнопка «get started» поруч із великим фото еклера з малиною в розрізі.
Далі — темний блок «About»: запрошення до ART DESSERT і пояснення, що курс створила професійна шеф-кондитерка для людей з будь-яким рівнем підготовки. Поруч — фото еклерів із круглою кнопкою «play» для відео про курс: воно показує роботу наочніше за будь-який текст.
Чотири переваги сформульовано як відповіді на сумніви покупця:
Блок «What You Get» — сім пронумерованих пунктів із золотими цифрами й тонкими розділювачами: секрети декору й дзеркальних глазурей, заварне тісто й рівні еклери без тріщин, сучасні десерти на основі французьких технік, зберігання еклерів до двох тижнів, 7 начинок і 3 глазурі, теорія за кожним рецептом і те, як інгредієнти працюють разом.
Потім — золота смуга з трьома цифрами курсу:
Після великого макрокадру еклера йде «Course Syllabus» — програма за модулями на темному тлі: вступний урок, теорія за рецептами, а потім практика — заварне тісто, начинки, глазурі й підготовка декору. Модулі розгортаються після кліку на «плюс», тож програму видно повністю, і вона не розтягує сторінку.
На телефоні шапка стискається до бургера, монограми й посилання «get started» — кнопка запису стоїть просто в шапці. Перший екран сторінки курсу перебудовано в колонку: назва, фото еклера, кнопка й лише потім текст. Блоки, що чергувалися в шаховому порядку, шикуються один під одним, зберігаючи чергування темного й світлого, а кнопка «play» лягає поверх фото на стику секцій.
Онлайн-курс не можна покуштувати до покупки. Людина вирішує за сайтом: чи можна довіряти авторові, чи вийде в неї і чи вартий курс своїх грошей. Тому, коли я роблю сайти для онлайн-шкіл, спираюся на кілька правил:
Якщо ви запускаєте онлайн-курси чи школу і вам потрібен сайт, який продає навчання, я зроблю його під ключ: від структури сторінок до верстки, інтерактивних блоків і мобільної версії.
