Сайт для приватної школи й садка

Сайт для LeaderShip, приватної школи й садка в Києві: школа на Оболоні й Виноградарі, садок у Нових Петрівцях, а ще пришкільний і виїзні табори. Це не скриншот: погортай і поклацай просто тут.

Гортай екран ноутбука й натискай на меню та кнопки. Це міні-копія: чотири сторінки з дванадцяти, форми не надсилаються.

Клієнт: LeaderShip, Київ, Україна
Вид робіт: Корпоративний сайт
Дизайн
Розробка
WordPress

21заявка в середньому за квартал, без реклами

3напрями: школа, садок, табір

12сторінок разом із блогом

ЗадачаЩо мав уміти сайт

Щоб батьки знайшли відповідь раніше, ніж спитають

А якщо тривога? Кожне наше приміщення оснащене укриттям.

Цитата з головної сторінки LeaderShip. Там поруч ще дві такі відповіді: про відключення світла й про навчання онлайн.

Батьки приходять за різним: школу, садок або табір. Сайт мав одразу розвести їх по напрямах, зняти головні тривоги й довести до заявки.

ПроцесСім кроків до запуску

Дизайн не перший

Спершу з’ясовую, що будуємо, бо правки на схемі швидкі й дешеві, а на готовому дизайні вже ні.

01
Бриф

Розпитую про заклад, батьків і задачі сайту. У LeaderShip це школа, садок і табори в трьох місцях. У кожного напряму свої батьки й свої питання.
Хто що робить
- Ти: розповідаєш про заклад і батьків.
- Я: розпитую, поки не буде картина.
- На руках: записані відповіді й задачі сайту.
Що за заклад?
Приватна школа й садок, а ще табори

Де працюєте?
Київ: Оболонь і Виноградар. Нові Петрівці. Виїзні табори в Карпатах

Які напрями?
Школа для 1–11 класів, садок, пришкільний і виїзні табори

Що має зробити відвідувач?
Записатися на відвідування або поставити питання
02
Технічне завдання

Це список того, що саме роблю: сторінки, напрями, форма, способи зв’язку. Так далі ніхто не гадає, що мав на увазі.
Хто що робить
- Ти: читаєш і підтверджуєш.
- Я: записую все, що вирішили.
- На руках: список сторінок, напрямів і способів зв’язку.
Сторінки
головна, про нас, школа, садок, можливості з факультативами і пришкільним табором, табори, події, вакансії, контакти

Напрями
школа, садок і табори, у кожного своя картка на головній

Форма
«Поспілкуйтесь з нами»: ім’я, телефон, email і питання

Швидкий зв’язок
кнопка «Зв’язатись з нами», телефон, Telegram, Viber, пошта

Новини
з датами, на головній видно останні

Платформа
WordPress
03
Структура

Малюю карту сайту і шлях батьків до заявки. Видно, звідки людина йде і де лишає запит.
Хто що робить
- Ти: перевіряєш, чи шлях логічний для твоїх батьків.
- Я: будую карту всіх сторінок.
- На руках: схема структури сайту.
Як влаштований сайт для дитячого садка і школи

12 сторінок разом із блогом і подіями. Як читати схему: картка означає окрему сторінку, а рядок зі стрілкою означає розділ на тій самій сторінці.
Головназвідси три напрями: школа, садок, табори
Про насісторія, місія, цінності, слово співзасновників
Історія
Місія та цінності

Подіїрозділ новин: картки з датою

Вакансіїтри вакансії, опис розкривається+ резюме до заявки
Школа1–11 класи: особливості навчання, локації, відгуки

Садокособливості садочка й активності для дитини
Можливостідев’ять факультативів і табори
Факультативи
Пришкільний табір

Табориу меню «Виїзні табори»: зміни з датами
Контактитри адреси з графіком і карта

Поспілкуйтесь з намистоїть на кожній сторінці, а кнопки по всьому сайту відкривають її у спливному вікніу «Вакансіях» до заявки можна додати резюме
Поза меню
Записи подій і змін таборівокремі сторінки, відкриваються з кнопки «Детальніше»

Політика конфіденційностіпосилання в підвалі та під формою
Чесно: цю схему відтворено вже за готовим сайтом.
04
Вайрфрейм

Це чорно-біла схема кожної сторінки, без кольору й фото.

Навіщо: порядок блоків погоджуємо, поки зміни швидкі й дешеві, і ніхто не відволікається на красу.
Хто що робить
- Ти: погоджуєш логіку й порядок блоків.
- Я: малюю екран за екраном.
- На руках: погоджена схема сторінок.
Чорно-біла схема першого екрана

Чесно: цю схему намальовано вже за готовим першим екраном, щоб показати принцип.
05
Дизайн

Стиль лягає на погоджену схему: світле блакитне тло, одна помаранчева кнопка, справжні фото дітей і персонажі, яких я намалювала сама.
Хто що робить
- Ти: дивишся стиль, погоджуєш.
- Я: малюю макети для комп’ютера й телефона.
- На руках: готові макети двох версій.
Ідея дизайну
Бренд школи

Логотип із вітрильником і морська назва. Глибокий синій і блакитний.

#182B60#3B719F#63A4D5
Мої ілюстрації

Персонажів і морські дрібниці я намалювала сама: маяк, штурвал, рятувальний круг. М’які пастельні кольори.

#ABB5EA#ADDAE6#C7DAE3
Приватна школа та садок LeaderShip

Синій школи в заголовку, мої персонажі поруч із текстом і одна помаранчева кнопка на світлому тлі.
#3B719F#ADDAE6#F45323
Так це виглядає на сторінках сайту

Садок

Табори

Можливості
06
Верстка

Лише тепер збираю сайт на WordPress у Elementor (конструктор, у якому зручно правити сайт без програміста) за макетом. Три напрями, форма для батьків, новини й кнопки зв’язку вже всередині.
Хто що робить
- Ти: отримуєш посилання на робочу версію сайту й дивишся, як усе виглядає.
- Я: збираю всі сторінки, форму для батьків, розділ новин і кнопки зв’язку.
- На руках: робочий сайт, на якому вже можна лишити заявку.
- 3напрями
- 12пунктів меню
- 5кнопок зв’язку
07
Тестування і запуск

Перевіряю на комп’ютері й телефоні, надсилаю тестову заявку. Запуск тільки після цього.
Хто що робить
- Ти: дивишся результат і даєш добро на запуск.
- Я: перевіряю кожну сторінку, кожну кнопку й форму.
- На руках: запущений сайт.
- На комп’ютері
- На телефоні
- Кожна сторінка й кожна кнопка
- Тестова заявка з форми
- Запуск

РішенняЩо всередині

Написати можна звідусіль

Форма «Поспілкуйтесь з нами» на головній сторінці LeaderShip: ім’я, телефон із прапором країни, email і питання

Школа отримує в Telegram

‹LeaderShip School BotботL

12 листопада

🔔 Хтось заповнив форму "leadershipua.com" 🔔

Марія

+380 67 000 00 00

maria.example@gmail.com

Садочок, донька 3 роки. Чи є вільні місця з вересня?

---

Date: 12 Листопада

Time: 9:15 am

Page URL: https://leadershipua.com/sadok/

9:15

Повідомлення

Приклад заявки, дані вигадані.

Відкривається з будь-якого місця

Форма «Поспілкуйтесь з нами» стоїть на кожній сторінці: на головній, у садку, у контактах і у вакансіях. А кнопки по всьому сайту відкривають її у спливному вікні, і більшість заявок приходить саме через нього. На головній у формі чотири поля: ім’я, телефон із прапором країни, email і питання.

Зв’язатись з нами
Відвідати школу
Відвідати садок
Отримати інфу
Хочу в команду

Заявка одразу в Telegram

Я налаштувала форму так, що заявка одразу приходить школі в Telegram: ім’я, телефон, питання і сторінка, з якої написали. Реклами школа не запускає, тож усі заявки приходять із самого сайту. За півтора року через форми сайту прийшло понад 130 заявок.

Telegram
Сторінка заявки
Дата й час

Форма на сторінці «Вакансії» LeaderShip: телефон із прапором і кнопка «Вибрати файл» для резюме

Вакансії з резюме

На сторінці «Вакансії» три вакансії. Спершу видно назви, повний опис я сховала під кнопку «Дізнатися більше». До заявки можна одразу додати резюме.

Ментор
Вчитель української мови та літератури
Заступник директора школи
Резюме до заявки

Три напрями з першого гортання: Одразу під першим екраном три картки: школа, садок, табори. На кожній скільки дітей у класі чи групі або вік, мітка з місцем і кнопка «Дізнатися більше».
Відповіді на тривоги: «А якщо тривога?», «А раптом відключення?», «А якщо знову онлайн?». Три короткі відповіді стоять поруч із розповіддю про школу.
Пробний тиждень: Помаранчева картка «Хочу спробувати пробний тиждень» стоїть одразу біля відповідей. Наступний крок видно без пошуку.
Факультативи з позначками: Дев’ять факультативів на одній сторінці. Біля кожного я поставила позначки локацій, де він є.
Історія за роками: Історію школи я подала хронологією: 2017, 2019, 2021, 2022. Шлях закладу видно за кілька секунд.
Відгуки й новини: Відгуки батьків із Google із зірочками і новини школи з датами. Сайт виглядає живим.

Три версіїТелефон, планшет і комп’ютер

Адаптований під усі пристрої

Окрема версія для телефона: усе в одну колонку, текст великий, форму можна заповнити одним пальцем. На планшеті своя сітка, середня між телефоном і комп’ютером.

Меню під помаранчевою круглою кнопкою з трьома смужками
Кнопка «Відвідати школу» і значки зв’язку одразу на першому екрані
Картки напрямів ідуть одна під одною, мітки лишаються на фото
Планшет: у шапці меню й кнопка «Зв’язатись з нами», під текстом кнопка й значки зв’язку