Сайт для центра дополнительного профессионального образования РУНО

Компания:

РУНО

Роль:

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

Главная страница сайта до обновления (редизайна)

Как видно на изображении сайт с большими полями и мелким убористым текстом. При обновлении сайта, был учтён большой объём текстовой информации.

Для удобства чтения больших объёмов текста был подобран шрифт, который подходит для длительного чтения, логотипа и печатной продукции.

Первый экран главной страницы

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

Слайдер-карусель работает с автоматической ротацией, т. е. изображения сменяют друг друга без действий пользователя сайта. При взаимодействии человека с контентом (наведении или движении мышкой по баннеру) смена слайдов прекращается.

Меню (шапка сайта)

Главное меню сайта было трёхуровневым и занимало четверть экрана.

В процессе редизайна изменила структуру меню, оставила только лого, основные пункты меню, кнопки телефона, Ватсап, авторизации и корзину. Остальные пункты меню вынесла в подвал сайта.

Задачи:

Сопутствующие задачи:

2 вида целевой аудитории:

Цели:

Рекламные баннеры

Полиграфия

Сайт

Третий экран главной страницы (блок Форматы обучения)

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

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

Блок Партнёры

Логотипы компаний с черно-белом исполнении, не отвлекают внимание посетителей. А заинтересовавшиеся при наведении увидят лого в цвете.

Блок Форма заявки

В форму заявки добавила кнопку WhatsApp для тех, кто предпочитает переписку.

Блок Новости центра

Блок Новости на Главной странице спроектирован в галерею с изображениями, заголовками и кратким описанием. Дата информирует об актуальности.

Отзыв посетителей сайта

Основной целью обновления сайта было сделать его удобным для людей и простым для покупок курсов.

Мой заказчик получает от своих клиентов такие сообщения, они ему пишут, что сайт — бомба, значит цель обновления сайта выполнена.

Подвал сайта

Благодаря редизайну сайт, он стал шире, контент занимает большее место на экране, широкие поля по бокам отсутствуют. Всё это позволило расположить ссылки в подвале сайта в 5 колонок.

Блок с отзывами

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

При клике на миниатюру скриншота отзыва скриншот открывается в удобном для чтения размере. Тем самым повышаю доверие к отзывам.

Помимо текстовых отзывов, в этот блок добавила видеоотзывы (повышаю доверие к отзывам и компании).

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

Мобильный вид

В мобильной версии плашки с отзывами поместила в горизонтальную галерею. Это было сделано для сокращения страницы. А чтобы пользователю было понятно, что при скролле влево есть ещё инфа, я показала часть второй плашки.

Второй экран главной страницы (блок Направления обучения)

Контент блока занимает 1 экран, все направления обучения видны сразу.

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

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

Большое значение при выборе карусели слайдеров на первый экран играет её размер.

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

Страница Каталога с курсами

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

Для сайта были созданы фотографии преподавателей на фирменном фоне.
Обработано более 70 фотографий преподавателей.

Страница направления обучения

Блок с видео на актуальную для ЦА тему с кнопкой перехода на канал YouTube.

Плашка курса

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

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

Баннеры для страниц направлений обучения

Было отрисовано 12 баннеров в трёх разрешениях (веб, мобильная и версия для ноутбука).

Допродажа образовательных продуктов

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

Мобильный вид

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

Так как у центра доп. образования 10 направлений обучения, было решено на каждой странице направления разместить баннер с основными преимуществами и плашки с курсами.
Левое меню было отрисовано в дизайн-макете для удобной навигации между подразделами направления.
Активный пункт меню выделен фирменным цветом.

Рекламные креативы

Печатные материалы

Адрес сайта: https://cpb-runo.ru