Продукты
Разработали фирменный стиль и спроектировали портал для запуска рекламной кампании проекта.
«Уроки Легенд» — онлайн-платформа, на которой собраны онлайн-курсы по самым актуальным направлениям в формате edutainment. Все онлайн-курсы ведут признанные медийные персоны. Их опыт уникален, а знания универсальны. Они выходят далеко за рамки профессии и доступны только на «Уроках Легенд».
«Уроки Легенд» ещё только готовились запускаться. Нужен был сайт, чтобы продвигать сервис и генерировать первые продажи. Проблема в том, что первая версия сайта создавала неверное впечатление и отпугивала аудиторию. Продвигать его было нельзя.
Дизайн существующего сайта не нравится из-за кричащей дороговизны — в плохом смысле слова. В основном такое ощущение дают золотые акценты. Хотим сделать сервис похожим на современные медиа: Netflix, Мастеркласс или Steam.
Задача понятна. Мы разработаем новую версию стилистики для сайта и используем edutainment-подход в UX, чтобы сделать интерфейс одновременно привлекающим
и настраивающим на обучение
И сделать так, чтобы платформа ассоциировалась с серьезным обучением от известных мастеров своего дела, а не с развлекательным контентом.
Основная идея: удобный, минималистичный дизайн, который станет интеллигентным обрамлением для качественного контента. Вдохновляемся примерами платформ, на которых привык находиться современный пользователь: Netflix и Мастеркласс. Так интерфейс не отвлекает от главного, дизайн не будет отпугивать, вынуждать разбираться и привыкать.
Композиция
Использовали центральное выравнивание в ключевых блоках, которые важно выделить. Продублировали этот прием внутри видео. В титрах выравнивание по центру выглядит органично. Если дублировать этот прием на другие носители, он запоминается и ассоциируются с видеоформатом.
Цвета
Взяли за основу темный цвет, так как он лучше всего подходит для презентации видео. Еще это привычная цветовая схема развлекательного контента: стримингов и игровых платформа. Он подчеркивает качество знаний, которые есть на платформе.
Подобрали три варианта акцентного цвета, чтобы подчеркнуть важное и направить внимание пользователя. Это может быть синий, привычный красный или даже золотой, но более спокойный, чем на первом сайте.
Типографика
Основную типографику выстроили с помощью наборных шрифтов. Работая с контрастами между ними и композицией, создали приятный и современный сайт.
В заголовках использовали индивидуальное шрифтовое решение для каждого продукта. Это придает курсам индивидуальность и подчеркивает уникальность каждого героя.
Примерили основные элементы стилистики на старый сайт. Пробовали сразу несколько вариантов, чтобы отсечь лишнее
и найти лучший. В итоге осталось три самых удачных варианта. У каждого — свои цели и сильные стороны. В итоге заказчик остановился на первом варианте.
Утвержденные блоки и элементы дорабатываем от «нормальных» до «отличных». Для каждого пробуем разные варианты композиции, цвета, акцентов — чтобы найти самые эффектные и удобные для пользователей. Со всеми блоками проделываем одно и то же упражнение: верстаем 5−10 вариантов, которые нам нравятся, смотрим командой, показываем заказчику, отсекаем те, что точно не подошли, и из оставшихся выбираем тот, с которым все согласны. Может казаться, что это долго, но на самом деле, так мы экономим время на переделки и повторные согласования.
Когда готова стилистика главной, собираем варианты страницы курса. Процесс такой же: делаем много вариантов структуры и композиции, чтобы оценить, как от мелких деталей меняется общее восприятие. На этом этапе стилистика уже понятна, ее почти не трогаем.
В этом проекте мы не верстали сайт сами, а передавали макеты разработчикам заказчика. Чтобы им было легче, а нам — спокойнее, подготовили подробный гайд со всей дизайн-системой и инструкциями по верстке. Это сэкономило всем время на доработки и беготню между дизайнерами и разработчиками.
Для внутренней команды «Уроков легенд» сделали простой гайд по подбору, обработке и верстке фотографий спикеров. Так они сами смогут быстро оформлять новые курсы.
Новый сайт создает правильное впечатление, ассоциируется с современными платформами
и помогает привлечь внимание пользователя.
01
Современное дизайн-решение создает впечатление серьезного образовательного продукта
02
Подробные инструкции
и шаблоны помогают развивать платформу в единой стилистике
03
Сайт пошел в продвижение,
а сам сервис продолжает развиваться
01
Свяжемся с вами, чтобы договориться об онлайн-встрече
02
После встречи предложим решение и оценим состав работ
03
После утверждения подпишем договор и начнем работу
*нажимая на кнопку, вы соглашаетесь c политикой конфиденциальности и разрешаете обрабатывать персональные данные
© 2018-2022 Tetraform. All right resrved.
