Международная академия KEUNE design объединяет академию парикмахерского искусства, центр подготовки и развития администраторов салонов, курсы менеджмента в индустрии красоты и авторские программы сертификации от компании KEUNE haircosmetics из Нидерландов.
Разработка интернет-магазина в образовательной сфере
Сайт Академии KEUNE https://academykeune. ru/ ― полнофункциональный E-Commerce проект, где в роли товаров выступают авторские образовательные программы как для начинающих специалистов и администраторов индустрии красоты, так и профессионалов, повышающих квалификацию.
Одно из направлений образовательной программы
Сайт выполнен как интернет-магазин на CMS 1C-Битрикс с индивидуальной сборкой, где товары ― это обучающие курсы Академии, с фильтрацией по профессии, специализации, квалификации, групповым или индивидуальным курсам и пр. Корзина интернет-магазина доработана под специфику продуктов ― и с ними можно поступать в точности как с товарами: отказаться от покупки и вернуть заказ, поместить в избранное, приобрести комплект, воспользоваться скидкой, показать историю заказов и пр.
На сайте представлены офлайн и онлайн курсы, которые можно тут же оплатить полностью или в рассрочку с предоплатой. В разных городах различаются цены на обучение, преподаватели и даты — при смене города эти данные на сайте изменяются автоматически.
Для корректной работы всех систем сайта потребовалась «ручная сборка» интеграций с 1С УТ11 и платформой для онлайн-обучения GetCourse. Личный кабинет пользователя (обучающегося) на сайте интегрирован с его аккаунтом на GetCourse для двустороннего обмена данными. В результате в личном кабинете на сайте Академии легко отслеживать динамику обучения, накапливать и тратить бонусные баллы, применять личную скидку, получать рекомендации по учебному плану и прочее. При этом в аккаунт GetCourse оперативно поступают данные с сайта — если студенту удобнее работать с курсами на платформе.
Интеграция с 1С также настроена для двустороннего обмена данными о текущем заказе, истории покупок, оплате, программе лояльности, скидкам ― и возможности аннулировать заказ, работать с корзиной по привычному сценарию интернет-магазина.
Кроме того, сайт объединяет специалистов отрасли для участия в fashion-проектах, обмена опытом с коллегами из-за рубежа, создания портфолио, трудоустройства. Поэтому для ресурса на стыке образования, моды и красоты, продаж и продвижения профессиональных курсов потребовались особые решения для «умного» фильтра, календаря, поиска, личного кабинета.
Компонент календаря, разработанный для сайта Академии KEUNE, позволяет интуитивно понятно отображать всё многообразие курсов любой продолжительности, всех уровней подготовки, по разным дисциплинам, которые могут идти одновременно. Причем некоторые программы в Академии междисциплинарные, и разделение по профессиональным сферам не всегда актуально. Для большей наглядности в каталоге курсов и календаре при переходе из раздела в раздел меняется цвет карточек, что упрощает навигацию.
Календарь с умным фильтром
Поиск учитывает характеристик каждого курса: цена, даты начала и окончания, продолжительность с привязкой к календарю, преподаватель, город, формат. Искать можно по разделам, продолжительности и другим характеристикам ― разные варианты фильтрации и отображения контента помогают каждому пользователю выбрать удобный формат представления данных, находить информацию различными способами.
Дизайн сайта Международной академии KEUNE
Особую роль в проекте играет дизайн: для индустрии красоты и моды важен внешний вид сайта, понимание трендов. Для Академии KEUNE наша команда разработала бренд и всю айдентику, выполнила индивидуальный дизайн сайта.
При создании бренда за основу взяли элементы фирменного стиля KEUNE haircosmetics и в едином стиле с ними создали логотип Академии, разработали руководство по использованию фирменного стиля на 16 листах (гайдлайн). В гайдлайне максимально подробно прописаны правила использования элементов фирменного стиля: логотипа, цветовой палитры, типографики, UX/UI элементов и т. д.
Гайдлайн для KEUNE Academy
В основу дизайна сайта заложены большие качественные фотографии. Они лучше слов рассказывают о профессионализме преподавателей, уровне обучения студентов, внимании к деталям, понимании тенденций индустрии моды и красоты.
Задача собрать и визуально организовать фотографии с подиумов и конкурсов, обучающие материалы, технические детали для администраторов и менеджеров решена за счёт облегчённой модульной сетки сайта. Акцентные фотографии и сдержанный минимализм текстовых блоков формируют образ эксклюзивного сервиса и принадлежности к миру высокой моды.
Вёрстка, наполнение и структура сайта
Для клиента было важно сохранить лёгкую для восприятия структуру сайта при всём многообразии материалов: организационных документов, правил внутреннего распорядка, обучающих и справочных материалов, расписаний, анонсов мероприятий и пр.
Целевая аудитория сайта — как новички отрасли, так и профессионалы индустрии красоты, администраторы и менеджеры салонов, модели, партнёры, организаторы модных съёмок, показов и т. д. Часть информации по типам аудитории помещена в специальные разделы (управляющим, моделям, партнёрам) вынесены блоки акций, отзывов, блог, раздел с новостями, FAQ (ответы на часто задаваемые вопросы).
Вёрстка по индивидуально разработанной модульной сетке позволяет размещать колоссальный объём информации без увеличения времени загрузки и ощущения перегруженности информацией. Обширный список учебных программ, обычно размещаемых последовательно и линейно (лонгридом), компактно свёрстан в виде горизонтального слайдера, либо показывается на специально разработанной календарной сетке.
Заглавный слайдер позволяет загружать картинки любого размера в высоком разрешении мгновенно и без ухудшения качества фотографии. Чтобы добиться такого эффекта, в слайдере используется встроенная технология lazy load, вместо того чтобы отдельно настраивать и загружать дополнительный скрипт с аналогичной функцией. В результате уменьшается время загрузки, а картинка появляется на странице сразу в готовом виде.
Особого внимания заслуживает адаптивный дизайн: изменения масштаба и перекомпоновка элементов на 6 разрешениях экрана (1920*1200, 1440*1050, 1280*800, 1024*768 (и 768*1024), 575*960, 320*480). При изменении разрешения экрана размер текстовых блоков и иллюстраций меняется соразмерно, без потери качества изображений, читабельности текстов и навигационных элементов, благодаря специально разработанным для сайта скриптам.
К примеру, в информационных блоках с иллюстрациями используется скрипт, благодаря которому не текст подгоняется под размер блока картинки, как это делается обычно, а видимая часть фотографии изменяется под нужный объём контента. Так на одном из скриншотов видно, что фотография модели кадрируется то по пояс, то по линии бёдер в зависимости от количества текста при меняющемся масштабе контентного блока при изменении разрешения экрана.
Так же пропорционально меняется размер блоков от двух к одному в описаниях услуг, и от четырёх квадратных блоков в горизонтальном слайдере до трёх, двух и одного видимого элемента. Перекомпоновка блоков слайдера учитывает допустимое изменение масштаба текстов и картинок в адаптивном дизайне, последовательность подачи информации и гармоничность чередования блоков.