Оновлення сайту ІБСЕД

Ми почали спілкування з ІБСЕД ще наприкінці 2024 року. Узгодили структуру сайту та бюджет, проте у клієнта на той момент не було в штаті людини, яка б могла приділяти час сайту. Тому проєкт відклали на пів року. Робота над сайтом закипіла, коли на посаду комунікаційниці ІБСЕД прийшла Євгенія Генова.

Завдання клієнтаПлатформаВізуальні рішенняЗавантаження файлівМобільна версіяВідеоінструкціяНаповнення сайту контентом301 редиректи РезультатВідгук

Завдання клієнта

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

Платформа

Сайт був зроблений 2006 року з використанням CMS Drupal, тому дизайн викликав легкі нотки ностальгії. Він точно віджив своє та заслуговував на оновлення. Крім того, команда ІБСЕД скаржилася, що з адмінкою дуже важко працювати. 

• 1
• 2
• 3
• 4

Попередній сайт ІБСЕД

Я розказала про переваги та можливості Weblium – сучасний дизайн, легке редагування, швидку публікацію новин через модуль "Блог" та інші, – і клієнт узгодив роботу з цією платформою. 

Візуальні рішення 

Я створювала дизайн згідно з брендбуком ІБСЕД. Але на відміну від попереднього сайту, де використовувалася така ж айдентика, додала більше повітря та світлих тонів. 
Клієнт не мав власних фото, тому щоб дизайн був цікавим, але стриманим (це все ж таки серйозна організація), я обіграла графічний елемент з логотипа. Він є в надзаголовках і на фоні деяких блоків. 

Використання елементів логотипа в дизайні сайту

А з лого в 3D на першому екрані – взагалі окрема історія. Схожа картинка була в брендбуці, але висхідного файлу ми не мали. Щоб створити цей символ, я спочатку погралася з плагінами у Figma, а потім згадала що моя племінниця знається на 3D, і замовила відмальовку у неї. Сімейний бізнес :)

3D-елемент логотипу на першому екрані

Завантаження файлів

ІБСЕД має велику базу навчальних посібників і звітів бюджетного моніторингу. Це pdf-файли, які користувачі можуть завантажити з сайту. Зазвичай для цього треба викладати їх на зовнішній файлообмінник, наприклад, Гугл Драйв.
Але на Вебліумі все набагато зручніше – файл можна завантажити в адмінку, прямо на сервери Вебліума. Зовнішні ресурси для цього не потрібні. 
Крім того, я ще увімкнула відстеження аналітики по кожному файлу. Мене про це не просили, і можливо, така інформація ніколи не знадобиться. Але раптом за рік чи два команда ІБСЕД захоче подивитися, які документи мають найбільший попит серед користувачів? Це буде легко зробити – Google Analitycs покаже, скільки разів був завантажений кожен з файлів. 

Налаштування відправки події в Google Analitycs

Мобільна версія

Після затвердження десктопної версії я фіналізувала мобільну. Порівняно з попереднім сайтом (нагадаю, зробленим 19 років тому), новий сайт має кращу адаптивність і легше сприймається користувачем з будь-якого пристрою. 

Мобільна версія: попередній сайт vs новий сайт

Відеоінструкція

Як завжди перед здачею роботи клієнту, я зняла відеоінструкцію, де показала, як працювати з сайтом ІБСЕД – як редагувати тексти, додавати нові проєкти, документи, новини, тендери, вакансії тощо. До кожного розділу додала таймкоди, щоб можна було легко знайти потрібне питання. 

• 1
• 2

Відеоінструкція з редагування сайту ІБСЕД з таймкодами

Наповнення сайту контентом

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

27 сторінок новин, доданих клієнтом самостійно

301 редиректи

Як тільки Євгенія закінчила наповнення сайту контентом, я відключила домен від попереднього сайту та привʼязала його до сайту на Вебліумі. Але перед цим зібрала всі посилання (а їх було, на хвилиночку, 857!) та прописала для кожного з них редирект 301.
Це потрібно для того, щоб користувачі, які зберегли собі лінки зі старого сайту, при переході на них потрапляли не на помилку 404, а на відповідну сторінку з нового сайту. Ну і Гугл таке шанобливе ставлення до посилань також любить і враховує це при ранжуванні результатів видачі. 

Файл Redirect Mass Import

Результат

Ознайомитися з сайтом ви можете за адресою https://ibser.org.ua

Оновлення сайту з перенесенням на Вебліум зайняло 1 місяць, половина з цього часу – це коментарі та узгодження з боку клієнта, решта – моя робота над сайтом.
На сайті є стрічка новин і база документів. Він має адаптивний дизайн, тобто коректно виглядає і на компʼютері, і на планшеті, і на смартфоні. Аналітика по сайту відстежується через Google Analitycs, а позиції в пошуку – через Google Search Console. Всі посилання з попереднього сайту ведуть на відповідні сторінки нового сайту.

Відгук клієнтки

У мене є значний досвід у роботі з різними платформами та сайтами громадських організацій і медіа, але, якщо чесно, я ще ніколи не отримувала від розробників/ць відеоінструкцій про роботу з адмінкою. І була від того в захваті. Тетяна передбачила навіть більше, ніж я би могла спитати або попросити.
Також ідеально було дотримано графік робіт, враховано всі наші побажання та зроблено дуже сучасний дизайн попри те, що нам потрібно було дотримуватися нашого tone of voice, тобто ділового, строгого, що пасує аналітичній організації, що займається питаннями бюджетування.
Зручна й адмінка Weblium – загалом з нею може впоратися й початківець, тому це хороший варіант, особливо для ГО, де часто люди працюють на волонтерських засадах або ж без значного досвіду.
Це була крута спільна робота!

Якщо ви хочете оновити ваш поточний сайт або створити новий, буду рада допомогти

Я не лише перенесу сайт на Вебліум, а й порекомендую, як покращити дизайн, структуру та тексти. Результат роботи зі мною – новий сайт з усіма налаштуваннями, яким ви зможете легко керувати самостійно.