Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт 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-курсов, как внутри, так и снаружи.

Планируете запуск образовательных курсов? Расскажите об этом с помощью стильного и функционального сайта!

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

Над проектом работали