Сайт IT-курсов на WordPress
О проекте и задаче
Webnauts Academy — это образовательный проект нашей компании, нацеленный на обучение и повышение квалификации новичков и начинающих IT-специалистов.
Webnauts давно занимается внутренним обучением сотрудников, так как чувствует постоянный кадровый голод. И однажды попытка вывести обучающий центр во внешний мир увенчалась успехом и показала небывалую актуальность IT-образования среди жителей нашего промышленного города.
Организовав учебный процесс по множеству направлений и убедившись в полезности и важности проекта, мы приняли решение создать современный сайт IT-курсов с минималистичным интерфейсом, понятной навигацией и поправкой на большой объём контента: учебных программ, видеоотзывов, карточек преподавателей и выпускников.
Дизайн
Визуальный анализ
Прежде чем приступить к проектированию макетов, мы принялись за визуальный анализ, выделив более 10 образцовых сайтов в сфере IT-образования. Оценив основные принципы оформления подобных проектов (сетки, формы, цвета, шрифты и медиа) нам удалось создать свою уникальную дизайн-концепцию.
Прототипирование сайта
На основе результатов визуального анализа дизайнеры тщательно продумали структуру сайта IT-академии, а именно: как будет выглядеть главный экран, с помощью каких блоков взывать к доверию пользователей и каким образом рассказать о выгоде образовательных продуктов? Данный этап представляет собой создание чёрно-белого эскиза сайта, в котором дизайнеры максимально сосредоточены на UX (User Experience), а именно как будет работать интерфейс и будет ли он удобен для пользователя.
Как видим, работа UI/UX дизайнеров — это не только творческий, но и аналитический процесс, в ходе которого тщательно изучается пользовательский опыт. Такое исследование позволило нам создать эффективный цифровой продукт, превращающий просмотры в заявки на обучение.
Сетка в веб-дизайне
Несмотря на то, что сайт содержит много информации, он выглядит аккуратным, интуитивно понятным и визуально привлекательным. Такой эффект создаёт сетка — основа основ при создании прототипа любого сайта. Но в нашем случае это не просто невидимый скелет сайта, а неотъемлемая часть дизайна, и вместе с крупной типографикой, стрелками и другими знаками вызывает в памяти его величество швейцарский стиль.
Мы видим, как тонкие серые линии пронизывают все страницы, искусно структурируя и разделяя контент. Таким образом весь текст, фото, формы и виджеты аккуратно вписаны в прямоугольники в чётко обозначенных границах. Благодаря блочной структуре мы создали организованный и удобный интерфейс:
Фирменные цвета и ховер-анимация
На начальном этапе проектирования дизайнеры уже имели наработки логотипа в цветовой стилистике Баухауса: белый, чёрный и приглушённый красный для расстановки акцентов.
Так, дизайн сайта был выполнен в соответствии с имеющимися фирменными цветами. В качестве фона мы использовали белый цвет: он придаёт интерфейсу достаточное количество пространства, а вместе с тем и контраста для других важных элементов. Это чёрные кнопки и значки выпадающих списков, при наведении меняющие свой цвет на красный. Акцентным красным также выделены заголовки и плашки с важной информацией, полностью захватывающие внимание пользователя:
Вёрстка и навигация
Как только дизайн-концепция готова, проект переходит к следующему этапу — собственно разработке сайта образовательных курсов. Первым за дело берётся фронтендер: он верстает макеты, используя языки HTML, JS и CSS (SCSS/Sass), и приводит сайт в движение, анимируя виджеты c помощью технологии GSAP (GreenSock Animation Platform). Давайте разберём сайт по частям и посмотрим, что у нас вышло.
Первый экран сайта
Первый экран формирует первое впечатление пользователя. Важно помнить, что для этого достаточно всего несколько секунд, но в то же время не стоит перегружать контентом главный раздел. Исходя из этих соображений, мы поместили на первый экран самое важное:
- крупный и понятный заголовок, в полной мере отражающий тематику сайта;
- горизонтальный вариант логотипа с лаконичным меню в шапке;
- динамичный видеоролик, говорящий пользователю о главном преимуществе и локации учебного центра: «Обучайся в лучшей IT-компании Кривого Рога»;
- баннер с актуальным предложением и кнопкой «Все акции академии»;
- главная конверсионная кнопка «Выбрать курс»:
Блок «О нас»
Играет важную роль в формировании лояльности и доверия клиента. Но это совсем не означает, что он должен занимать уйму места или вовсе отдельную страницу. Мы обошлись без полотна текста, преисполненного победами, и ограничились фотографией и действительно важной информацией, которая уместилась всего в паре предложений:
Уверены, что пользователи оценят экономию их драгоценного времени, а мы тем временем постараемся укрепить их уверенность в надёжности компании при помощи других важных блоков и страниц.
Образовательные продукты
Главный продукт компании — это курс, а их ни много ни мало 17. Мы объединили их в 7 категорий по отдельным IT-направлениям и представили в виде раскрывающегося списка.
Каждый курс ведет на отдельную страницу и знакомит с более подробной информацией:
- названием, кратким содержанием и началом занятий с кнопкой «Записаться»,
- фотогалереей, демонстрирующей учебный процесс,
- выгодами обучения с кнопкой «Полная программа курса»,
- информацией о преподавателе с фото,
- условиями обучения,
- формой заявки с конверсионной кнопкой.
На странице легко ориентироваться, а вся важная и нужная информация смотрится как на ладони:
Стоит заметить, что благодаря использованию сетки стал красивее не только дизайн, но и код, причём в буквальном смысле этого слова. А в переводе с языка разработчиков красивый означает работающий, структурированный и читабельный.
Способы связи
Мы продумали множество разных вариантов для того, чтобы пользователь связался с компанией, и даже посвятили этому отдельный экран главной страницы. Цель очевидна абсолютно для всех, но какова подача! Раздел подкупает оригинальным индивидуальным подходом. Так, интровертам предлагается написать, экстравертам — позвонить, а сомневающимся — бесплатно посетить любое занятие на выбор:
Преимущества компании
Данный раздел усиливает блок сайта «О нас» и представляет собой лаконичный список из 4 пунктов, аккуратно помещенный в таблицу:
Отзывы
Видеоотзывы выпускников, а если быть точнее, трудоустроенных выпускников, подкрепляет предыдущий текстовый блок и внушает ещё большее доверие пользователей. Медиа-раздел оформлен в виде кольцевой галереи с чёрно-белыми фото, нумерацией и стрелками. При наведении курсора фото оживает, а при клике на него ретранслируется полное видео с Youtube.
Данный блок был одним из самых интересных и непростых с точки зрения разработки, и результат оправдал наши ожидания. Перед вами — пример того, как довольно минималистичный интерфейс способен создавать поистине уникальный пользовательский опыт:
Каталог выпускников
Это ещё одно преимущество компании, воплощённое в отдельном лендинге. Он посвящён выпускникам, которые успешно окончили обучение и готовы приступать к новым IT-проектам. Страница представляет собой каталог с карточками молодых специалистов. В свою очередь карточка содержит фото выпускника, краткую информацию и ссылку на портфолио, контакты для связи и кнопку с резюме. Также страница имеет простую навигацию в виде горизонтального списка в 3 строки и позволяет отфильтровать кандидатов по специализации:
На раздел выпускников можно попасть из блока главной страницы или из пункта меню в шапке сайта «О нас — Выпусники».
Что касается разработки, то мы снова готовы воспевать grid-раскладку, ведь благодаря её горизонтальным и вертикальным линиям вёрстка карточек далась быстрее, исключив такое программное явление как «дублирование кода».
Фотогалерея
Значение фотографий на сайте сложно переоценить: реальные информативные фото вызывают интерес и описывают услуги вместо тысячи слов. Мы оформили фото в виде компактной кольцевой галереи, которая как нельзя лучше отображает учебный процесс в творческой атмосфере современной IT-компании:
FAQ
Блок часто задающих вопросов призван закрывать распространённые возражения клиентов, тем самым снижая нагрузку на менеджеров. В нашем случае посетитель закрывает интересующий вопрос, раскрывая нужный ответ. Да-да, раскрывающийся список не теряет актуальности до сих пор в силу своей компактности и удобства использования:
Форма и контакты
Форма заявки максимально проста и включает в себя всего одно поле для ввода мобильного номера. Настроения добавляет забавная крупная кнопка, которая меняет свой цвет при ховере и отправляет заявку в обработку.
Пользователи, которые привыкли брать инициативу в свои руки, могут связаться с компанией по любому контакту, указанному в подвале сайта:
Адаптивность
Помимо десктопной версии сайта, дизайнеры Webnauts потрудились над созданием макетов для планшетов и мобильных устройств. Все блоки и виджеты автоматически подстраиваются под любой размер экрана, и в результате сайт удобно юзать как на смартфоне, так и на стационарном компьютере.
Функциональность сайта
«Важна не только внешняя, но и внутренняя красота» — сказал back-end разработчик и мастерски настроил программно-серверную часть сайта IT-курсов на WordPress, в частности:
- кастомные поля с использованием плагина ACF (Advanced Custom Fields);
- кастомные типы записей Выпускники и Курсы;
- формы Ajax, позволяющие обмениваться данными браузера с веб-сервером в фоновом режиме;
- страницу выпускников с Ajax-фильтрами и пагинацией.
Также разработчик установил на сайт плагин Loco Translate, который даёт возможность перевести все строки, обернутые в код, а затем преобразовал статические строки с помощью функции __(), способной вернуть оригинальный текст при отсутствии перевода или загрузки текстового домена.
Все эти сложные манипуляции позволили настроить максимально удобную и понятную админку сайта, в которой легко управлять внешним видом и содержанием страниц без помощи разработчика:
Результат
Эффективность любого веб-продукта измеряется первоклассным опытом взаимодействия с пользователем, а создание такого сайта требует эффективного взаимодействия дизайнеров и разработчиков. Благодаря слаженной работе команды на каждом этапе — от визуального анализа и до настройки системной панели управления — нам удалось реализовать удобный и привлекательный сайт IT-курсов, как внутри, так и снаружи.
