Швидка розробка сайту на WordPress з нуля для івенту народного мистецтва

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

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

День 1: Структура та дизайн веб-сайту

Оскільки замовник прийняв рішення про розробку в останній момент, не було ні дизайну, ні структури сайту. Таким чином, в перший день алгоритм дій нашої компанії, що займається створенням сайтів на WordPress, складався з таких кроків.

Продумування структури сайту WordPress

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

Створення кастомних полів

Загальна кількість учасників фестивалю перевищила 100, і для кожного з них необхідно було створити поле з інформацією про самого учасника. Тож ми розгорнули WordPress і почали створювати кастомні поля.

Контент і дизайн

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

День 2: Наповнення контентом і перші прототипи дизайну

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

Тим часом дизайнер придумав основну айдентику фестивалю та створив прототипи першої сторінки. Він уже почав продумувати остаточні типові варіанти оформлення сторінок. Потім узгодили прототипи та додали 15 учасників.

День 3: комп’ютерна версія та макет сайту

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

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

День 4: Поступове наближення до фіналу

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

День 5: домашня сторінка, домен, хостинг та інші завдання

На п’ятий день розробки сайту WordPress з нуля головна сторінка була готова. Крім того, було підібрано оптимальний домен і хостинг, які б забезпечили високу продуктивність і безпеку сайту.

Тим часом контент-команда мала складніше завдання. Для заповнення картки учасника необхідно було переглянути відео на кожного другого кандидата. Це вкрало час, якого і так було мало. Проте, завдяки професійному підходу, контент-команда впоралася вчасно.

День 6: Тестування та налаштування аналітики

Після розробки сайту WordPress прискореними темпами ми перейшли до тестування сторінок. Ми перевірили швидкість завантаження, основні параметри Core Web Vitals — Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS) та інші моменти. Крім того, було перевірено працездатність сайту.

Контент-команда поступово завершувала роботу над наповненням сайту. Паралельно налаштовувалася аналітика, і замовник уже з нетерпінням чекав релізу. Веб-сайт був готовий до вивантаження на сервер.

День 7: останні штрихи

Після тижня копіткої роботи команда з розробки контенту завершила свою роботу, дизайнер отримав графічні матеріали, на які він раніше очікував, а ми отримали від клієнта дозвіл на запуск. Світло! Камера! Екшн!

Коротко про технічні характеристики

Найважливішим в цьому проєкті була швидкість його запуску. Проте кожен розроблений нами сайт WordPress має свої технічні особливості. У цьому проєкті реалізована нескінченна прокрутка учасників. Контент завантажується, коли користувач прокручує сторінку. Також було введено кастомні типи публікацій і кастомні поля. При розробці ми враховували особливості сайту та його призначення, щоб він повністю відображав мету клієнта.

Кілька слів про оптимізацію

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

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

  • чистій темі;
  • мобільному дизайну;
  • правильній організації CSS;
  • правильним розмірам зображення;
  • відкладеному завантаженню.

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