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

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

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

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

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

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

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

Компания:

РУНО

Роль:

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

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

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

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

Задачи:

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

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

Цели:

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

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

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

Вид блока до редизайна

Вид обновлённого блока

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

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

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

Вид блока до редизайна

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

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

Вид обновлённого блока

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

Вид блока до редизайна

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

Вид обновлённого блока

Вид блока до редизайна

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

Вид обновлённого блока

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

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

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

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

Вид блока до редизайна

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

Вид обновлённого блока

Вид блока до редизайна

Вид обновлённого блока

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

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

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

Подвал сайта

Вид блока до редизайна

Вид обновлённого блока

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

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

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

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

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

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

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

И вам нужен сайт?

Бесплатно проконсультирую и пропишу структуру сайта под ваши цели. Перезвоню вам в течение 15-ти минут в рабочее время.

Оставьте заявку или напишите мне

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

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

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

До

После

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

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

Плашка курса

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

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

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

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

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

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

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

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

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

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