Послуги

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

Пошук

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

Сайт IT-курсів на WordPress

Про проект та завдання

Webnauts Academy — це освітній проект нашої компанії, націлений на навчання та підвищення кваліфікації новачків та початківців IT-фахівців.

Webnauts давно займається внутрішнім навчанням співробітників, оскільки відчуває постійний кадровий голод. І одного разу спроба вивести навчальний центр у зовнішній світ увінчалася успіхом та показала небувалу актуальність IT-освіти серед мешканців нашого промислового міста.

Організувавши навчальний процес за багатьма напрямами та переконавшись у корисності та важливості проекту, ми прийняли рішення створити сучасний сайт IT-курсів з мінімалістичним інтерфейсом, зрозумілою навігацією та поправкою на великий обсяг контенту: навчальних програм, відеовідгуків, карток викладачів та випускників.

Дизайн

Візуальний аналіз

Перш ніж розпочати проектування макетів, ми взялися за візуальний аналіз, виділивши більше 10 зразкових сайтів у сфері IT-освіти. Оцінивши основні принципи оформлення подібних проектів (сітки, форми, кольори, шрифти та медіа), нам вдалося створити свою унікальну дизайн-концепцію.

Прототипування сайту

На основі результатів візуального аналізу дизайнери ретельно продумали структуру сайту IT-академії, а саме: як виглядатиме головний екран, за допомогою яких блоків звертатимуться до довіри користувачів і як розповісти про вигоду освітніх продуктів? Даний етап є створення чорно-білого ескізу сайту, в якому дизайнери максимально зосереджені на UX (User Experience), а саме як працюватиме інтерфейс і чи буде він зручний для користувача.

Як бачимо, робота UI/UX дизайнерів – це не тільки творчий, але і аналітичний процес, в ході якого ретельно вивчається досвід користувача. Таке дослідження дозволило нам створити ефективний цифровий продукт, який перетворює перегляди на заявки на навчання.

Сітка у веб-дизайні

Незважаючи на те, що сайт містить багато інформації, він виглядає акуратним, інтуїтивно зрозумілим та візуально привабливим. Такий ефект створює сітка – основа основ під час створення прототипу будь-якого сайту. Але в нашому випадку це не просто невидимий скелет сайту, а невід’ємна частина дизайну, і разом із великою друкаркою, стрілками та іншими знаками викликає у пам’яті його величність швейцарський стиль.

Ми бачимо, як тонкі сірі лінії пронизують усі сторінки, майстерно структуруючи та розділяючи контент. Таким чином, весь текст, фото, форми і віджети акуратно вписані в прямокутники в чітко визначених межах. Завдяки блоковій структурі ми створили організований та зручний інтерфейс:

Фірмові кольори та ховер-анімація

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

Так, дизайн сайту був виконаний відповідно до наявних фірмових кольорів. Як фон ми використовували білий колір: він надає інтерфейсу достатньо простору, а разом з тим і контрасту для інших важливих елементів. Це чорні кнопки і значки списків, що випадають, при наведенні змінюють свій колір на червоний. Акцентним червоним також виділено заголовки та плашки з важливою інформацією, що повністю захоплюють увагу користувача:

Верстка та навігація

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

Всі ці складні маніпуляції дозволили налаштувати максимально зручну та зрозумілу адмінку сайту, в якій легко керувати зовнішнім виглядом та змістом сторінок без допомоги розробника:

Результат

Ефективність будь-якого веб-продукту вимірюється першокласним досвідом взаємодії з користувачем, а створення такого сайту потребує ефективної взаємодії дизайнерів та розробників. Завдяки злагодженій роботі команди на кожному етапі – від візуального аналізу та до налаштування системної панелі управління – нам вдалося реалізувати зручний та привабливий сайт IT-курсів, як усередині, так і зовні.

Чи плануєте запуск освітніх курсів? Розкажіть про це за допомогою стильного та функціонального сайту!

Експертиза в дизайні та розробці, сформована за 8 років роботи з десятками проектів, допомагає нам створювати не лише унікальні сайти шкіл, курсів чи інших освітніх закладів, а й складні онлайн-платформи для студентів та викладачів.

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