- Рік
- 2025
- Платформи
- Адаптивний вебсайт (WordPress), показаний на телефоні й на комп’ютері, і локальний бекофіс (PHP)
- Що ми зробили
- Продуктовий дизайн, UX/UI та розробка
- Результати
- Понад 55 тис. відвідувачів на місяць і понад 600 тис. переглядів сторінок менш ніж за рік після запуску
Бриф
musica.com.pt — це незалежна цифрова газета про португальську та міжнародну музику, зроблена музикантами для музикантів і для всіх, хто живе музикою. Завдання було дати їй сайт, гідний цього: новини щодня, але й архів артистів, мапа залів та афіша, якою справді можна користуватися на телефоні, по дорозі на концерт.
Сайт збирає в одному місці п’ять речей, які зазвичай живуть окремо: новини за рубриками (португальська музика, міжнародна музика, прем’єри, альбоми, концерти, фестивалі, інтерв’ю, театр, мистецтво й продакшн), артистів, майданчики, афішу концертів і фестивалів по всій країні та академію практичних посібників. І пов’язує їх між собою: артист веде до статей про нього, майданчик — до подій, які там відбулися.
Редакційна лінія відкрита й без платних стін: сайт живе з реклами та підтримки читачів (звідси блок підтримки та рекламні місця, які видно на сторінках) і має сторінки, присвячені прозорості, як-от редакційний статут, вихідні дані та політика використання ШІ.
За сайтом стоїть Redação — приватний бекофіс, де прес-релізи, сторінки й нотатки стають чернетками у WordPress, а ШІ структурує поля, але ніколи не пише статтю (це правило політики використання ШІ газети).
Для кого
-
01
Читачі, які стежать за португальською музикою
Хочуть знати, що вийшло, що попереду і що кажуть гурти, у читанні, яке зручне на телефоні.
-
02
Хто шукає, куди піти цього тижня
Хоче фільтрувати афішу за містом, типом події й датою та швидко потрапити до потрібного залу.
-
03
Музиканти, продюсери й промоутери
Шукають практичні посібники, новини про обладнання й програми та видимість для своєї роботи.
-
04
Хто редагує газету
Отримує прес-релізи з різних джерел і має їх сортувати, дотримуватися ембарго, опрацьовувати зображення та готувати чернетки, не втрачаючи редакційного контролю.
01 / 07
Головна сторінка: газета на комп’ютері, світла й темна
На комп’ютері головна відкривається тонкою смугою з датою та соцмережами, логотипом і навігацією за рубриками (португальська музика, міжнародна музика, концерти й фестивалі, продакшн і театр), із пошуком, розсилкою, кнопкою теми та повним меню. Головна новина займає більшу частину ширини, з великою фотографією, заголовком, коротким описом, автором, датою й часом читання, а поруч — друга історія та чітко позначене рекламне місце.
Та сама сторінка існує у світлій і темній темі, а кнопка в шапці перемикає між ними (за замовчуванням сайт іде за системним налаштуванням). Темна замінює паперовий фон теплою фарбою, залишає фотографії як є й використовує світліший червоний для міток.
02 / 07
На телефоні: газета в одну колонку
На телефоні шапка стискається до найважливішого: дата й соцмережі в тонкій смузі, логотип і чотири кнопки (пошук, розсилка, тема й меню). Головна читається в одну колонку, з великою головною новиною і, для кожної статті, рубрикою, фотографією, заголовком, коротким описом, автором, датою й часом читання.
Між ними є блоки з власною ідентичністю. Концерт у фокусі, наприклад, отримує зелену картку з фотографією, рубрикою й датою, заголовком і посиланням, щоб побачити всі концерти.
03 / 07
Статті: читати, підтримувати й пізнавати того, хто пише
Сторінка статті починається із заголовка великими літерами і продовжується текстом великим кеглем, із важливими іменами жирним і зображеннями (як-от обкладинка альбому) на всю ширину, щоб зручно читати на телефоні. Над заголовком є навігаційний ланцюжок і рубрика, під ним — автор, дата й час читання, нижче текст отримує підзаголовки та вбудоване відео, а в кінці — пов’язані статті. Кнопка додає musica.com.pt як бажане джерело в Google.
У кінці статті блок запрошує читача підтримати газету трьома способами (щомісячна підтримка, разова підтримка або просто читання, що теж дуже цінне), а одразу за ним іде картка того, хто писав, з фотографією, посадою, короткою біографією та посиланням на всі статті цієї людини.
04 / 07
Підтримка газети та реклама
Газета не має платних стін: вона живе з реклами та підтримки читачів, і це помітно. На головній є темний блок, який пояснює це двома реченнями й пропонує два шляхи — Patreon (щомісячна підтримка) і Buy Me a Coffee (разова підтримка), — поруч із посиланнями на Instagram і Facebook, а наприкінці кожної статті ця ідея повторюється власним блоком.
Реклама завжди має позначене місце, із написом Реклама і пунктирною рамкою, щоб її ніколи не сплутали з новинами (на головній у версії для комп’ютера, наприклад, вона стоїть поруч із головною новиною), а для рекламодавців є сторінка, що пояснює формати.
05 / 07
Афіша концертів і фестивалів
На головній блок найближчих концертів показує місяць і кількість подій, а в кожному рядку — дату, мініатюру з типом, назву, зал і місто та артистів, із входом до повної афіші.
Повна афіша збирає концерти, фестивалі й театр з усієї країни, згруповані за місяцями, з кнопкою, щоб відкрити кожну подію. Фільтри дають змогу вибрати місто (з кількістю подій у кожному), тип події й дату, а ще є пошук за артистом чи майданчиком.
Кожне місто має свою сторінку, минулі події зберігаються в архіві, а сторінка має структуровані дані про події та часті запитання, щоб допомогти пошуковим системам. На телефоні фільтри й список вміщаються в одну колонку.
06 / 07
Артисти, майданчики й Академія: архів
Кожна подія афіші веде до архіву з власними сторінками. Сторінка артистів — це покажчик артистів і гуртів, кожен зі своїми жанрами (рок, фаду, хіп-хоп, електроніка, джаз та інші), а профіль кожного збирає статті, які газета опублікувала про нього, зі структурованими даними (MusicGroup), щоб пошукові системи розуміли, хто є хто. Сторінка майданчиків перелічує зали, театри, аудиторії та простори країни, від материка до островів, з адресою, сайтом, кнопками мапи та подіями, які там відбулися, пов’язаними з афішею.
Академія збирає практичні посібники для артистів, промоутерів і продюсерів, із рівнем і часом читання, а Viseu ao Centro — це серія про музичну сцену Візеу, де базується газета: репортажі, зали, музичні школи й афіша регіону Центр.
07 / 07
Redação: бекофіс і ШІ, що не пише
За сайтом стоїть Redação — власний інструмент, яким команда користується щодня. Він приватний, тому на зображеннях його не показано. Він збирає в одній вхідній скриньці прес-релізи, що надходять поштою, сторінки й дописи, надіслані з браузера, статті зі стрічок і нотатки, вставлені вручну, розуміє ембарго та заплановану публікацію, опрацьовує зображення (обрізання за розмірами сайту й збільшення роздільності на локальній відеокарті) і створює чернетку або заплановану публікацію у WordPress, зі збереженням, SEO та поширенням в одному місці.
ШІ вбудований у кожен крок, але лише там, де допомагає, і ніколи не для написання статті. Він читає прес-реліз і заповнює поля (заголовок, короткий опис, рубрику, мітки й ембарго, останнє лише якщо текст про це говорить), причому рубрика й мітки обмежені значеннями, які вже є у WordPress; перекладає і, за запитом, формує підпис для Instagram, хештеги та уривок для розсилки; пропонує терміни та приклад абзацу для SEO; і покращує малі фотографії. Він може працювати в хмарі або на локальній моделі, на вибір для кожного аналізу, і все проходить людську перевірку.
Чернетка, що потрапляє до WordPress, — це каркас (короткий опис, факти, джерела й попередження про ембарго), а не готовий до публікації текст: це та сама лінія, що й у політиці використання ШІ газети.
Папір, фарба й червоний
Сайт має дві теми, світлу й темну: він іде за системним налаштуванням і має кнопку для перемикання. Світла нагадує друковану газету, з паперовим фоном і майже чорним друком тексту; темна інвертує їх у теплий фон кольору фарби й текст кольору паперу, зі світлішим червоним, щоб зберегти контраст. Кути прямі, а блоки розділяють лінійки завтовшки від 1 до 3 px. Червоний — єдиний акцентний колір, зелений з’являється лише для позитивних станів, заголовки набрано Big Shoulders вагою 800, здебільшого великими літерами, а основний текст — Work Sans. Redação використовує ці кольори й шрифти, у світлому й темному режимі, як один зі своїх виглядів (є й інший, синій і округлий).
musica.com.pt (світла)
- Поверхні
-
#F3F2F2#E9E7E6#DEDBDA - Текст
-
#1C1A19 - Червоний
-
#FF141A#CC0D12#C11212 - Успіх
-
#0D6B34#0A5228
musica.com.pt (темна)
- Поверхні
-
#151312#211E1D#2B2726 - Текст
-
#F5F2F0 - Червоний
-
#FF3D42#FF7377#C11212 - Успіх
-
#3DDC84#63E8A4
За екраном
Що потрібно, щоб газета з такою кількістю зображень і типів вмісту добре працювала на телефоні, а редакція, яка її наповнює, працювала швидко.
-
Тема та плагіни на замовлення
Сайт — це власна тема WordPress із п’ятьма плагінами, зробленими для неї: реклама, афіша концертів, розсилка, пов’язані статті та пошук.
-
Артисти, майданчики й події пов’язані
Артисти, майданчики й події — це окремі типи вмісту, пов’язані зі статтями: сторінка артиста збирає статті про нього, а сторінка майданчика перелічує події, які там відбулися.
-
Структуровані дані на кожній сторінці
Кожен тип сторінки говорить мовою пошукових систем: статті як NewsArticle, артисти як MusicGroup, майданчики як MusicVenue, афіша зі списком подій і частими запитаннями, а навігаційний ланцюжок — скрізь.
-
Легкий і читабельний
Змінні шрифти (Big Shoulders і Work Sans), які віддає сам сайт, кеш на сервері та Cloudflare попереду, щоб сторінка, повна зображень, не обтяжувала телефон.
-
Локальний інструмент, пов’язаний із WordPress
Redação — це застосунок PHP із базою даних SQLite, що працює на власному комп’ютері редакції, поза сайтом, і спілкується з WordPress через його API, щоб створювати чернетки та заплановані дописи. Окремий сервіс на Python робить аналіз SEO.
-
ШІ, що структурує й ніколи не пише
Аналіз працює в хмарі або на локальній моделі, на вибір для кожного елемента, і заповнює поля лише значеннями, які вже є у WordPress. Переклад і тексти для соцмереж — це явні запити, а не автоматичні дії, а статтю завжди пишуть люди.
-
Зображення, опрацьовані на самому комп’ютері
Обрізання використовує справжні розміри сайту, а збільшення роздільності працює на локальній відеокарті (з моделями Real-ESRGAN і ATD), тож фотографії не залишають комп’ютер. Оригінали ніколи не змінюються.
Що ми зробили
Ми спроєктували й побудували газету від початку до кінця: UX/UI та дизайн-систему, тему та плагіни на замовлення, структуру SEO зі структурованими даними та арт-дирекцію від візуальної айдентики. І ми створили Redação — бекофіс, що веде прес-реліз до чернетки у WordPress, з ШІ та автоматизацією, які структурують, але не пишуть.
FAQ
Питання та відповіді.
-
Незалежна цифрова газета про португальську та міжнародну музику, зроблена музикантами для музикантів, з новинами, артистами, майданчиками та афішею концертів і фестивалів по всій країні.
-
Ні. ШІ лише структурує те, що вже є (заголовок, короткий опис, рубрику й мітки), а перевірка завжди людська. Статтю пишуть люди, а чернетка, що потрапляє до WordPress, — це каркас, а не готовий до публікації текст.
-
Бекофіс газети: власний інструмент, що збирає прес-релізи, сторінки, стрічки й нотатки в одній вхідній скриньці, розуміє ембарго, готує зображення та створює чернетку або заплановану публікацію у WordPress.
-
Так. Розкажи, що маєш на увазі, і ми скажемо, як би до цього підійшли, від дизайну до розробки. Напиши нам кнопкою «Обговорити схожий проєкт» угорі та нижче на цій сторінці.
-
З розмови, щоб зрозуміти мету, хто користуватиметься продуктом і що вже існує. З цього виходить чіткий обсяг, і ми рухаємося етапами, з результатами, які можна побачити й прокоментувати по дорозі.