Сайт 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-курсов, как внутри, так и снаружи.
Про проект та завдання
Webnauts Academy — це освітній проект нашої компанії, націлений на навчання та підвищення кваліфікації новачків та початківців IT-фахівців.
Webnauts давно займається внутрішнім навчанням співробітників, оскільки відчуває постійний кадровий голод. І одного разу спроба вивести навчальний центр у зовнішній світ увінчалася успіхом та показала небувалу актуальність IT-освіти серед мешканців нашого промислового міста.
Організувавши навчальний процес за багатьма напрямами та переконавшись у корисності та важливості проекту, ми прийняли рішення створити сучасний сайт IT-курсів з мінімалістичним інтерфейсом, зрозумілою навігацією та поправкою на великий обсяг контенту: навчальних програм, відеовідгуків, карток викладачів та випускників.
Дизайн
Візуальний аналіз
Перш ніж розпочати проектування макетів, ми взялися за візуальний аналіз, виділивши більше 10 зразкових сайтів у сфері IT-освіти. Оцінивши основні принципи оформлення подібних проектів (сітки, форми, кольори, шрифти та медіа), нам вдалося створити свою унікальну дизайн-концепцію.
Прототипування сайту
На основі результатів візуального аналізу дизайнери ретельно продумали структуру сайту IT-академії, а саме: як виглядатиме головний екран, за допомогою яких блоків звертатимуться до довіри користувачів і як розповісти про вигоду освітніх продуктів? Даний етап є створення чорно-білого ескізу сайту, в якому дизайнери максимально зосереджені на UX (User Experience), а саме як працюватиме інтерфейс і чи буде він зручний для користувача.
Сітка у веб-дизайні
Незважаючи на те, що сайт містить багато інформації, він виглядає акуратним, інтуїтивно зрозумілим та візуально привабливим. Такий ефект створює сітка – основа основ під час створення прототипу будь-якого сайту. Але в нашому випадку це не просто невидимий скелет сайту, а невід’ємна частина дизайну, і разом із великою друкаркою, стрілками та іншими знаками викликає у пам’яті його величність швейцарський стиль.
Ми бачимо, як тонкі сірі лінії пронизують усі сторінки, майстерно структуруючи та розділяючи контент. Таким чином, весь текст, фото, форми і віджети акуратно вписані в прямокутники в чітко визначених межах. Завдяки блоковій структурі ми створили організований та зручний інтерфейс:
Фірмові кольори та ховер-анімація
На початковому етапі проектування дизайнери вже мали напрацювання логотипу у кольоровій стилістиці Баухауса: білий, чорний та приглушений червоний для розміщення акцентів.
Верстка та навігація
Щойно дизайн-концепція готова, проект переходить до наступного етапу – власне, розробки сайту освітніх курсів. Першим за справу береться фронтендер: він верстає макети, використовуючи мови HTML, JS та CSS (SCSS/Sass), і приводить сайт у рух, анімуючи віджети за допомогою технології 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, який дає можливість перевести всі рядки, загорнуті в код, а потім перетворив статичні рядки за допомогою функції __(), здатної повернути оригінальний текст за відсутності перекладу або завантаження текстового домену.
Всі ці складні маніпуляції дозволили налаштувати максимально зручну та зрозумілу адмінку сайту, в якій легко керувати зовнішнім виглядом та змістом сторінок без допомоги розробника:
Комментарии