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

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

Задача: сделать редизайн сайта на Тильде
Teachbase — это система дистанционного обучения с конструктором курсов и тестов, автоматизацией, понятной аналитикой и заботливой техподдержкой. К нам обратились, чтобы освежить дизайн сайта, который уже не соответствовал уровню продукта.
Команда проекта
Вела проект со стороны заказчика, согласовывала все итерации работы
ОЛЯ
Маркетинг Teachbase
ДАША
UI/UX дизайнер
Реализовывала все задумки на Тильде, придумывала и настраивала анимации
Разрабатывала общую стилистику сайта и концепции иллюстраций
САША
Арт-лид
Следил за сроками и общался по организационным вопросам
НАИЛЬ
Проджект менеджер
Проблема
Сайт, на котором клиенты узнают о продукте, устарел
Teachbase уже входит в реестр Российского ПО, работает с СИБУРом, Сбербанком, Озоном и другими крупнейшими компаниями России, а сайт не обновляли несколько лет. Маркетологи решили, что пора соответствовать уровню.
  • Оля, Teachbase
    Сейчас сайт не отвечает на все вопросы пользователей, а ещё он сделан на платформе, которую сложно обновлять. Мы подробно прописали структуру страниц и путь пользователя, теперь хотим переехать на Тильду и нам нужен новый дизайн.
  • Саша
    Ни слова больше, работаем!
Решение
Фирменный стиль с нуля, графичные иллюстрации и вёрстка на Тильде
Мы сделали редизайн главной и нескольких дополнительных страниц, дальше дизайнеры Teachbase использовали их как шаблоны и продолжают развивать стилистику.
Использовали много кастомных решений для вёрстки и микроанимаций в Тильде.
Нескучная вёрстка
Придумали, как иллюстрировать ценности продукта, не усложняя восприятие.
Узнаваемые иллюстрации
Специально для сайта разработали фирменный стиль, сделали узнаваемый язык бренда.
Фирменный стиль
Шаг первый
Изучаем компанию и конкурентов, подбираем референсы, собираем первые концепты
  • Оля, Teachbase
    Сайты конкурентов-LMS довольно похожи. Мы в маркетинге сделали продуманную структуру, которая отвечает на все вопросы посетителей и помогает быстро найти нужное. Теперь хочется, чтобы сайт запоминался среди прочих. Здесь у нас нет строгих гайдлайнов, только логотип и фирменный зелёный цвет.
  • Саша
    Узнаваемость может быть за счёт ярких цветов, типографики, микроанимаций, акцентных элементов. Подбираем референсы, чтобы найти своё направление и собираем первые концепты, чтобы утвердить с Teachbase.
Конкуренты
Первые концепты
Светлая гамма с зелёными акцентами, фокус на интерфейс
Тёмная основа, крупная типографика и карточки
Градиенты, полупрозрачность, фото живых людей
Иконки в карточках кейсов, пробуем разные композиции главного экрана
Линейные иллюстрации и типографика
Собираем примеры сайтов, от которых нужно максимально отстроиться стилистически
Референсы
Ищем примеры и идеи подходящей стилистики
Собираем первые варианты, чтобы выбрать направление.
  • Оля, Teachbase
    Давайте брать вариант с градиентными пятнами и карточками кейсов. Только карточек сделаем поменьше и анимируем.
  • Саша
    Отлично! Теперь прорабатываем стилистику главной страницы, дальше будем расшивать её на весь сайт и верстать.
Макет
Выносим главные кейсы в начало и анимируем карточки, чтобы они сразу привлекали к себе внимание. Успокаиваем акцентные цвета и паттерны.
Отзывы
Показываем больше отзывов за раз, чтобы блок лучше работал на задачу подкрепить пользу продукта.
  • Оля, Teachbase
    Всё хорошо, давайте добивать этот вариант. Ещё есть беспокойство насчёт иллюстраций. Стоковые фото не хотим, а интерфейсы часто не информативные — и их используют все. Что-то можем придумать?
  • Саша
    Без проблем, подумаем, что можно сделать.
Шаг второй
Ищем решение для иллюстраций и шлифуем стилистику сайта
  • Саша
    С иллюстрациями есть две проблемы. С одной стороны, хочется показывать живых людей, которые пользуются продуктом. Фотографии со стоков сразу «дешевят» сайт, остаётся неприятный осадок, что ты уже десять раз видел этих людей на других сайтах.

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

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