Сайт

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

Задача: сделать дизайн сайта для запуска рекламной кампании

«Уроки Легенд» — это онлайн-платформа, на которой выдающиеся люди учат мастерству в своём деле.

Проблема

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

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

Ранний дизайн сайта не нравился заказчику из-за кричащей дороговизны — в плохом смысле слова. В основном такое ощущение давали золотые акценты.

Слишком «дорого»

Хотелось сделать сервис похожим на современные медиа: Нетфликс, Мастеркласс или Стим — но ранняя версия создавала обратное впечатление.

Слишком несовременно

Решение

Сайт с интуитивно знакомым интерфейсом и акцентом на контент

Современная стилистика

Основной цвет — чёрный, графитовый или тёмно-серый. Контрастные и минималистичные шрифты, композиция, которая дает больше «воздуха».

Edutainment-подход в UX

Опыт пользователя больше ассоциируется с развлекательным контентом, а не с академическим обучением.

Контент в центре дизайна

Главная ценность платформы — спикеры-мастера и их знания. В центр дизайна ставим контент: графику, видео, спикеров.

Шаг первый

Собираем референсы

Дина

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

Композиция

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

Цвета

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

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

Типографика

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

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

Шаг второй

Примеряем стилистику

Саша

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

Игорь

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

Три промежуточных варианта сайта. Заказчик выбирает первый

Шаг третий

Шлифуем детали

Саша

От некоторых идей отказываемся, чтобы упростить жизнь заказчику. Например, мы предлагали подбирать для каждого курса своё шрифтовое решение — чтобы они сразу выглядели уникальными и создавали своё настроение. Когда поговорили с заказчиком, поняли, что это слишком усложнит публикацию курсов. Да и вообще: «кириллица не сексуальна» :)

Игорь

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

Игорь

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

Игорь

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

Даша

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

Даша

Наконец, оформляем и верстаем дополнительные страницы: профили спикеров и состав курса. Всё согласовываем, упаковываем макеты для веб-вёрстки и отдаём заказчику.

ФИНАЛ

Новый сайт «Уроков легенд»

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

Команда проекта

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

УРОКИ ЛЕГЕНД

Заказчик

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

НАИЛЬ

Проджект менеджер

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

САША

Арт-лид

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

ДИНА

Графический дизайнер

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

ИГОРЬ

Веб-дизайнер

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

ДАША

Веб-дизайнер

Опишите свою задачу

Мы напишем или позвоним, чтобы узнать больше о вашей задаче и договориться об интервью. Если у вас остались вопросы — ответим подробно.