гигантские шейпы, кислотный фирменный цвет и пиксельные иллюстрации для онлайн-школы

praktika.school

Задача

Концепт и структура онлайн-школы полностью менялась:
В дизайне стояли задачи сделать фирменный стиль узнаваемым и минималистичным.
В структуре – задача сделать сайт более понятным и простым. Большой объем контента на главной  странице планировали убрать, приоритет планировали отдавать новым продуктам и карточкам их презентаций на главном экране.
Пожеланием заказчицы было использование типографики, иллюстраций и плоской графики.
{прошлый дизайн}

Структура

Требовалось изменить концепцию продукта, оставив его минималистичным. При этом – удобным с точки зрения пользовательского опыта и узнаваемым. При проектировании исходили из предположения о том, что пользователю важно наиболее коротким путем перейти к материалам. На первом экране – быстрая форма с ключевыми тезисами. Затем, содержимое библиотеки, которая является продуктом для поддержания профессионального развития маркетологов.

Также – отдельные курсы по маркетингу, включающие в себя социальные медиа, копирайтинг и рекламу. А для трафика, которому требуется прогрев или статьи по теме – раздел блог.
{новая структура главной страницы}

Дизайн решения

Новый фирменный стиль школы хотели создать простой и понятный, даже фоновый в каком-то смысле. Для того, чтобы под каждый курс внутри школы создавать лендинг с уникальным дизайном. И именно карточки этих лендингов с уникальным дизайном будут привлекать к себе внимание, тем самым выполняя главную задачу.
{наброски дизайн-концепций}
Во время разработки набросков сама оцениваю свои идеи:
1 – слишком простые формы, скучно, не хочется рассматривать
2 – немного интереснее засчет элементов на главном экране – карточек. Иллюстрации привлекают внимание, но слишком грубые
3 – нравится цвет и карточки на главном экране. Во втором блоке иллюстрации не привлекают внимание, нужно или убрать их или изменить вид
Как итоговый вариант для презентации и дальнейшей разработки я выбрала 3-й вариант. После чего получила ответ от заказчицы:
{дизайн-концепт}
Главный оффер и новая концепция школы планировалась в формате библиотеки для маркетологов с пополняемыми инструментами-курсами. В фирменном стиле школы решила использовать прямую отсылку к библиотеке – плоские карточки в формате формуляров.
{элементы с отсылками к библиотеке}
Уникальным элементов фирменного стиля, который поможет выделить продукт среди конкурентов станут пиксельные иллюстрации. Потому что наша библиотека цифровая)) а также акцентный зеленый цвет.

В итоге цифровая библиотека – это понятная структура, большие элементы, зеленый цвет и пиксельный иллюстрации.
{пиксельные элементы}
Анимация
В структуре библиотеки используется интеграция со сторонними сервисами Collabza и Airtable для удобной организации личных кабинетов пользователей. Посколько в общей структуре используется много интеграций, сложна анимация расставлена в таких местах как главный экран школы и подвал.

В остальном анимация только легкая функциональная.
{анимация главной страницы}
{мобильная версия главной страницы}
Страница курса
В школе много разных курсов. Для них сделала типовой дизайн, блоки которых будут использоваться на всех страницах, отсылаясь к общему стилю.
{дизайн страницы курса}
{анимация страницы курса}
{мобильная версия страницы курса}
Личный кабинет
В личном кабинете еще более минималистичный дизайн, в котором используются фирменные элементы. Анимация функциональная – только на элементах, показывающих действие при наведении. Цветовые акценты на элементах и кнопках расставлены для призыва к действию.
{фрагменты личного кабинета}
{анимация загрузки страницы}
Результат
Промежуточный результат конверсий после редизайна:
Сайт доступен по ссылке – praktika.school
Заинтересовал мой подход в работе?
— Оставляйте заявку на разработку сайта ниже:
Made on
Tilda