Кейс

Онлайн-платформа для проекта «Уроки легенд»

Разработали фирменный стиль и спроектировали портал для запуска рекламной кампании проекта.

О проекте

Онлайн-платформа, на которой выдающиеся люди учат мастерству в своем деле

«Уроки Легенд» — онлайн-платформа, на которой собраны онлайн-курсы по самым актуальным направлениям в формате edutainment. Все онлайн-курсы ведут признанные медийные персоны. Их опыт уникален, а знания универсальны. Они выходят далеко за рамки профессии и доступны только на «Уроках Легенд».

Проблема

Сайт, который нужен, чтобы запустить рекламу — слишком «лакшери»

«Уроки Легенд» ещё только готовились запускаться. Нужен был сайт, чтобы продвигать сервис и генерировать первые продажи. Проблема в том, что первая версия сайта создавала неверное впечатление и отпугивала аудиторию. Продвигать его было нельзя.

«Уроки легенд», заказчик

Дизайн существующего сайта не нравится из-за кричащей дороговизны — в плохом смысле слова. В основном такое ощущение дают золотые акценты. Хотим сделать сервис похожим на современные медиа: Netflix, Мастеркласс 
или Steam.

Саша, co-founder и руководитель продакшена

Задача понятна. Мы разработаем новую версию стилистики для сайта и используем edutainment-подход в UX, чтобы сделать интерфейс одновременно привлекающим
и настраивающим на обучение

Задача

Создать современный сайт 
с интуитивно понятным интерфейсом

И сделать так, чтобы платформа ассоциировалась с серьезным обучением 
от известных мастеров своего дела, а не с развлекательным контентом.

Решение

Собрали референсы и подготовили первую версию стилистики

Основная идея: удобный, минималистичный дизайн, который станет интеллигентным обрамлением для качественного контента. Вдохновляемся примерами платформ, на которых привык находиться современный пользователь: Netflix и Мастеркласс. Так интерфейс не отвлекает от главного, дизайн не будет отпугивать, вынуждать разбираться и привыкать.

Композиция

Использовали центральное выравнивание в ключевых блоках, которые важно выделить. Продублировали этот прием внутри видео. В титрах выравнивание по центру выглядит органично. Если дублировать этот прием на другие носители, он запоминается и ассоциируются с видеоформатом.

Цвета

Взяли за основу темный цвет, так как он лучше всего подходит для презентации видео. Еще это привычная цветовая схема развлекательного контента: стримингов и игровых платформа. Он подчеркивает качество знаний, которые есть на платформе.

Подобрали три варианта акцентного цвета, чтобы подчеркнуть важное и направить внимание пользователя. Это может быть синий, привычный красный или даже золотой, но более спокойный, чем на первом сайте.

Типографика

Основную типографику выстроили с помощью наборных шрифтов. Работая с контрастами между ними и композицией, создали приятный и современный сайт.

В заголовках использовали индивидуальное шрифтовое решение для каждого продукта. Это придает курсам индивидуальность и подчеркивает уникальность каждого героя.

Стилистика

Создали три промежуточных варианта стилистики и согласовали с заказчиком

Примерили основные элементы стилистики на старый сайт. Пробовали сразу несколько вариантов, чтобы отсечь лишнее
и найти лучший. В итоге осталось три самых удачных варианта. У каждого — свои цели и сильные стороны. В итоге заказчик остановился на первом варианте.

Доработка

Доработали детали

Утвержденные блоки и элементы дорабатываем от «нормальных» до «отличных». Для каждого пробуем разные варианты композиции, цвета, акцентов — чтобы найти самые эффектные и удобные для пользователей. Со всеми блоками проделываем одно и то же упражнение: верстаем 5−10 вариантов, которые нам нравятся, смотрим командой, показываем заказчику, отсекаем те, что точно не подошли, и из оставшихся выбираем тот, с которым все согласны. Может казаться, что это долго, но на самом деле, так мы экономим время на переделки и повторные согласования.

Когда готова стилистика главной, собираем варианты страницы курса. Процесс такой же: делаем много вариантов структуры и композиции, чтобы оценить, как от мелких деталей меняется общее восприятие. На этом этапе стилистика уже понятна, ее почти не трогаем.

Инструкции

Подготовили инструкции  для разработчиков

В этом проекте мы не верстали сайт сами, а передавали макеты разработчикам заказчика. Чтобы им было легче, а нам — спокойнее, подготовили подробный гайд со всей дизайн-системой и инструкциями по верстке. Это сэкономило всем время на доработки и беготню между дизайнерами и разработчиками.

Шаблоны

Подготовили шаблоны и гайды для дальнейшей работы с платформой

Для внутренней команды «Уроков легенд» сделали простой гайд по подбору, обработке и верстке фотографий спикеров. Так они сами смогут быстро оформлять новые курсы.

Результат

Современная и удобная образовательная платформа  для проекта «Уроки легенд»

Новый сайт создает правильное впечатление, ассоциируется с современными платформами
и помогает привлечь внимание пользователя.

01

Современное дизайн-решение создает впечатление серьезного образовательного продукта

02

Подробные инструкции
и шаблоны помогают развивать платформу в единой стилистике

03

Сайт пошел в продвижение,
а сам сервис продолжает развиваться

Команда

создали современную  и презентабельную обучающую платформу

Саша, co founder

Помогала нащупать общее направление и не свернуть с пути

Наиль, co founder

Следил за сроками и общался по организационным вопросам

Дина, graphic designer

Подобрала референсы, разработала основу фирменного стиля. Работала над типографикой

Игорь, UI&Motion designer

Разработал структуру и композицию основных страниц, подобрал лучшие варианты блоков

Даша, web designer

Сверстала финальные макеты и дополнительные страницы сайта. Подготовила для передачи заказчику

Саша, co-founder

Помогала нащупать общее направление и не свернуть с пути

Наиль, co-founder

Следил за сроками и общался по организационным вопросам

Дина, графический дизайнер

Подобрала референсы, разработала основу фирменного стиля. Работала над типографикой

Игорь, UI&motion-designer

Разработал структуру и композицию основных страниц, подобрал лучшие варианты блоков

Даша, web-designer

Сверстала финальные макеты и дополнительные страницы сайта. Подготовила для передачи заказчику

форма связи

Расскажите о вашей задаче

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.

01

Свяжемся с вами, чтобы договориться об онлайн-встрече

02

После встречи предложим решение и оценим состав работ

03

После утверждения подпишем договор и начнем работу

Делимся новыми кейсами и полезными статьями в письмах
Получили вашу заявку!
Oops! Something went wrong while submitting the form.

*нажимая на кнопку, вы соглашаетесь c политикой конфиденциальности и разрешаете обрабатывать персональные данные

© 2018-2022 Tetraform. All right resrved.

Подпишитесь на нас, чтобы не потерять

Расскажите о вашей задаче

Получили вашу заявку!

Наш менеджер скоро напишет или позвонит, чтобы обсудить детали. А пока вы можете почитать полезные посты в наших соцсетях
Oops! Something went wrong while submitting the form.