Оставить заявку

Фирменный стиль — Веб-дизайн

Сайт системы дистанционного обучения Teachbase

Задача: сделать редизайн сайта на Тильде

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

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

Вела проект со стороны заказчика, согласовывала все итерации работы

ОЛЯ

Маркетинг Teachbase

ДАША

UI/UX дизайнер

Реализовывала все задумки на Тильде, придумывала и настраивала анимации

Разрабатывала общую стилистику сайта и концепции иллюстраций

САША

Арт-лид

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

НАИЛЬ

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

Проблема

Сайт, на котором клиенты узнают о продукте, устарел

Teachbase уже входит в реестр Российского ПО, работает с СИБУРом, Сбербанком, Озоном и другими крупнейшими компаниями России, а сайт не обновляли несколько лет. Маркетологи решили, что пора соответствовать уровню.

Оля, Teachbase
Сейчас сайт не отвечает на все вопросы пользователей, а ещё он сделан на платформе, которую сложно обновлять. Мы подробно прописали структуру страниц и путь пользователя, теперь хотим переехать на Тильду и нам нужен новый дизайн.

Саша
Ни слова больше, работаем!

Решение

Фирменный стиль с нуля, графичные иллюстрации и вёрстка на Тильде

Мы сделали редизайн главной и нескольких дополнительных страниц, дальше дизайнеры Teachbase использовали их как шаблоны и продолжают развивать стилистику.

Использовали много кастомных решений для вёрстки и микроанимаций в Тильде.

Нескучная вёрстка

Придумали, как иллюстрировать ценности продукта, не усложняя восприятие.

Узнаваемые иллюстрации

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

Фирменный стиль

Шаг первый

Изучаем компанию и конкурентов, подбираем референсы, собираем первые концепты

Оля, Teachbase
Сайты конкурентов-LMS довольно похожи. Мы в маркетинге сделали продуманную структуру, которая отвечает на все вопросы посетителей и помогает быстро найти нужное. Теперь хочется, чтобы сайт запоминался среди прочих. Здесь у нас нет строгих гайдлайнов, только логотип и фирменный зелёный цвет.

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

Конкуренты

Первые концепты

Светлая гамма с зелёными акцентами, фокус на интерфейс

Тёмная основа, крупная типографика и карточки

Градиенты, полупрозрачность, фото живых людей

Иконки в карточках кейсов, пробуем разные композиции главного экрана

Линейные иллюстрации и типографика

Собираем примеры сайтов, от которых нужно максимально отстроиться стилистически

Референсы

Ищем примеры и идеи подходящей стилистики

Собираем первые варианты, чтобы выбрать направление.

Оля, Teachbase
Давайте брать вариант с градиентными пятнами и карточками кейсов. Только карточек сделаем поменьше и анимируем.

Саша
Отлично! Теперь прорабатываем стилистику главной страницы, дальше будем расшивать её на весь сайт и верстать.

Макет

Выносим главные кейсы в начало и анимируем карточки, чтобы они сразу привлекали к себе внимание. Успокаиваем акцентные цвета и паттерны.

Отзывы

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

Оля, Teachbase
Всё хорошо, давайте добивать этот вариант. Ещё есть беспокойство насчёт иллюстраций. Стоковые фото не хотим, а интерфейсы часто не информативные — и их используют все. Что-то можем придумать?

Саша
Без проблем, подумаем, что можно сделать.

Шаг второй

Ищем решение для иллюстраций и шлифуем стилистику сайта

Саша
С иллюстрациями есть две проблемы. С одной стороны, хочется показывать живых людей, которые пользуются продуктом. Фотографии со стоков сразу «дешевят» сайт, остаётся неприятный осадок, что ты уже десять раз видел этих людей на других сайтах.

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

Пробуем разные варианты.