Редизайн новинного порталу «Перший»: стрічка, нативна реклама, контент від читачів

«Перший» змінював підхід до подачі інформації — і сайт мав змінитися разом із редакційною моделлю. Ми перепроєктували стрічку новин, зібрали дизайн-систему з блоків, вбудували рекламу в структуру сторінки та розвинули UGC-механіку, на якій тримається проєкт.

Клієнт

«Перший» — канал соціальних новин

Галузь

регіональне медіа

Послуги

розробка новинних сайтів, аудит швидкості сайту

Сайт клієнта

pershyj.com

Задача: перезапустити подачу новин, не зламавши те, що працює

Редизайн новинного порталу — це завжди робота з живим організмом. Сайт не можна зупинити: редакція публікує щодня, архів індексується роками, аудиторія має звички.

Перед нами стояло три обмеження:

1. Не втратити пошуковий трафік. У регіонального медіа архів — це десятки тисяч сторінок, які приводять органіку. Зміна URL-структури без коректних редиректів коштує місяців відновлення позицій.
2. Не зламати звички читача. Аудиторія приходить за стрічкою. Нова візуальна мова не мала ускладнити головний сценарій — «зайшов, побачив, що сталося».
3. Не перетворити сайт на конструктор-кашу. Редакція публікує матеріали різних форматів щодня. Дизайн мав витримувати це без участі дизайнера в кожній публікації.

Проєкт ми вели під внутрішньою назвою Reborn — це був не косметичний рефреш, а повний перезапуск фронтенду поверх наявної редакційної бази.

Стрічка новин і візуальна ієрархія

Головна сторінка відкривається традиційною стрічкою — рішення свідоме. У новинному медіа читач приходить із конкретним наміром, і будь-який «журнальний» лендінг між ним і новиною знижує глибину перегляду.

Ключова робота була не в самій стрічці, а в ієрархії всередині неї. Читач має за секунду відрізнити головну подію дня від другорядної — без заголовків «Головне» і без пояснень. Це вирішується розміром, простором і ритмом, а не написами.

Для редакції це означає інструмент керування увагою: підняти матеріал у пріоритеті — одна дія в адмінці, а не верстка сторінки.

Дизайн-система: словник блоків замість набору сторінок

У процесі редизайну ми повністю переосмислили графічну мову проєкту і зібрали словник блоків — набір елементів, з яких редакція складає нові комбінації, як із конструктора.

• новий формат матеріалу не потребує дизайнера і розробника;
• сайт не «розповзається» візуально в міру зростання кількості рубрик;
• спецпроєкти й рекламні розділи збираються з тих самих компонентів.

Ефект видно за часом життя рішення: сайт працює на цій дизайн-системі з моменту релізу, а редакція за цей час додала десятки нових рубрик і форматів — від «Розслідувань» і «Інтерв'ю» до тематичних проєктів на кшталт «Бізнесмени у тренді» та «Перший на кухні». Жоден із них не потребував окремої верстки.

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

Монетизація: реклама всередині структури, а не поверх неї

Реклама — основний дохід регіонального медіа і водночас головна причина, чому читач ставить блокувальник.

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

Технічно сайт поєднує два джерела доходу — програматик через Google AdSense і прямі продажі редакції: банерні позиції, корпоративні блоги, спецпроєкти й розділ «Довідник». Для регіонального медіа саме прямі продажі дають маржу, тому інвентар під них проєктувався окремо, а не за залишковим принципом.

UGC: читач як співавтор картини дня

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

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

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

Технології та продуктивність

• Бекенд: Laravel
• Фронтенд: jQuery, Bootstrap, Slick, lightGallery
• Push-повідомлення: OneSignal — власний канал доставки новин, незалежний від алгоритмів соцмереж
• Реклама: Google AdSense + прямий інвентар
• Інфраструктура: статика й медіа з окремого хоста, Cloudflare перед сайтом — знімає піки в дні великих новин
• Архів: перенесений повністю зі збереженням URL-структури

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

Результат

• Сайт входить у ТОП-5 новинних ресурсів Волині за аудиторією і показує стабільну динаміку зростання
• Дизайн-система працює без редизайну з моменту релізу — редакція нарощувала рубрики й формати без залучення розробника
• Push-канал і UGC дали медіа два джерела трафіку, незалежні від алгоритмів соцмереж
• Архів перенесено без втрати пошукових позицій

Що ми виносимо з роботи з медіа

«Перший» — один із проєктів, на яких ми будували експертизу в розробці новинних сайтів і медіаплатформ. Серед наших клієнтів у цьому сегменті — Forbes Ukraine, ТСН, Hromadske, UNITED24.

Кожен такий проєкт упирався в одні й ті самі задачі: швидка стрічка, керована редакцією ієрархія, монетизація без шкоди для читача, збереження архіву при міграції. Тому частину цих рішень ми зібрали в окремий продукт — Published!, CMS для новинних видань із вбудованими SEO, пейволом, багатомовністю та AI-інструментами для редакції.

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

Часті питання

Яку CMS обрати для новинного видання?

Для нового медіа зі стандартними потребами — готове рішення на кшталт Published! або Ghost: швидший запуск і нижча вартість володіння. Кастомна розробка виправдана, коли є нетипова модель: UGC, складна монетизація, інтеграції з внутрішніми системами редакції.

Чи можна зробити редизайн без втрати позицій у пошуку?

Так, якщо зберегти URL-структуру або налаштувати 301-редиректи для кожної сторінки архіву, перенести мікророзмітку і не міняти структуру заголовків. Просідання на 2–4 тижні після релізу — нормальне явище, повне відновлення зазвичай займає до двох місяців.

Що робити з архівом на десятки тисяч матеріалів?

Переносити повністю. Архів регіонального медіа — це довгий хвіст органічного трафіку, який роками приводить читачів за конкретними подіями, прізвищами й адресами. Обрізання архіву заради «чистого старту» — найдорожча помилка при редизайні.

Чи зможе редакція самостійно змінювати головну сторінку?

Так. Керування пріоритетом матеріалів, блоками та рубриками ми віддаємо в адмінку — щоденна робота редакції не має залежати від розробника.

Як монетизувати новинний сайт крім банерної реклами?

Робочі моделі для регіонального медіа — прямі продажі рекламного інвентарю, корпоративні блоги й спецпроєкти, платні розділи-довідники, push-розсилки. Для видань із лояльним ядром аудиторії додається пейвол і членські програми — цей сценарій ми закриваємо через Published!.

Плануєте запуск медіа або редизайн новинного порталу?