Сайт освітнього центру з живим розкладом занять
Новий дизайн і власна WordPress-тема для центру додаткової освіти «Фізматик» (Харків, Київ, дистанційно): розклад за напрямками з викладачами та контактами, сторінки викладачів, домашні завдання, новини — українською та російською.
1Задача
У центру вже був сайт на WordPress і старий сайт харківської філії. Потрібен був єдиний сучасний ресурс, де батьки швидко знаходять розклад потрібного предмета у своєму місті або онлайн, бачать викладача й одразу можуть з ним зв'язатися. Окремо — розділи для новин, домашніх завдань і лекторію.
2Рішення
Намалювали дизайн у Figma і зібрали на його основі власну тему WordPress. Ядро сайту — розклад із зв'язками «напрямок → місто → клас → викладач»: таблиці з фото викладача, часом, форматом заняття (Zoom або адреса аудиторії) та контактами. Додали сторінки напрямків, викладачів, дистанційного навчання, домашніх завдань, новин і галереї.
3Результат
Сайт запущено взимку 2021 року, протягом року перекладено українською та доопрацьовано за побажаннями клієнта. Ресурс живе й досі: на ньому три розклади (Харків, Київ, дистанційно), 14 викладачів, свіжі новини про олімпіади й табори — усе оновлюється силами самого центру через адмінку.
Що зробили
Дизайн
- Вивчення двох наявних сайтів центру та його структури напрямків
- Макети у Figma: головна, розклад, напрямок, викладачі, новини — десктоп і мобільна версія
- Фірмова графіка: кольорові акценти для кожного напрямку, декоративні елементи, ілюстрації
- Коментарі до макетів і контроль верстки за дизайном
Розклад занять
- Окремі розклади для Харкова, Києва та дистанційного навчання
- Таблиці за напрямками: математика, фізика, програмування, хімія — розгортаються блоками
- У кожному рядку: клас, день, час, викладач із фото, формат заняття (Zoom чи аудиторія), кнопка «Зв'язатися»
- Зв'язки між розкладом, напрямками та викладачами: з картки викладача — на його розклад, із напрямку — на розклад предмета
- Сортування та скорочення переліку класів для зручного відображення
Розділи сайту
- Головна: слайдер фото, плитки напрямків з кнопками переходу до розкладу, останні новини, контакти з картами
- Сторінки напрямків із галереєю та списком викладачів предмета
- Сторінка викладачів з фото, регаліями й контактами
- Дистанційне навчання з підсторінками «Математика» і «Фізика» та окремим розкладом
- Домашні завдання з внутрішніми сторінками, новини з фільтром за категоріями, лекторій із відео, галерея
Дві мови та доробки
- Переклад сайту українською через WPML, перемикач RU/UA у шапці
- Правки за зверненнями клієнта: адреси й карти філій, форматування розкладів, новий напрямок у київському розкладі
- Блоки новин із фото в плитках і довшими анонсами
Як це виглядає
Живий сайт: головна, розклад занять, сторінка викладачів і мобільні версії.
Наведіть курсор на знімок — він прокрутиться. Торкніться знімка, щоб відкрити його повністю.
Як ішла робота
- 1Вивчення поточних сайтів і структури розкладу
- 2Дизайн у Figma, узгодження з клієнтом
- 3Верстка теми та програмування розкладу зі зв'язками
- 4Перенесення контенту, правки за зауваженнями клієнта
- 5Переклад українською та доробки після запуску
Що всередині
Потрібен сайт для школи чи освітнього центру?
Зробимо сайт із розкладом, викладачами та новинами, який легко оновлювати самостійно. Напишіть — обговоримо задачу.