Сайт IT-курсів на WordPress
Про проект та завдання
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, який дає можливість перевести всі рядки, загорнуті в код, а потім перетворив статичні рядки за допомогою функції __(), здатної повернути оригінальний текст за відсутності перекладу або завантаження текстового домену.
Всі ці складні маніпуляції дозволили налаштувати максимально зручну та зрозумілу адмінку сайту, в якій легко керувати зовнішнім виглядом та змістом сторінок без допомоги розробника:
