Розроблення дизайну розділу блогу/новин сайту
Блог та новинний розділ — типові компоненти, які легко зіпсувати. Типові помилки: перевантажена карта публікації, нечитаний шрифт в тілі статті, відсутність ієрархії між назвою, описом та датою. Мета дизайну — забезпечити швидке сканування списку і зручне читання окремого матеріалу.
Структура розділу
Список (публікації): карти з такими елементами — обкладинка (thumbnail), категорія/тег, заголовок, короткий опис (150–200 символів), автор, дата, час читання. Час читання обчислюється з кількості слів (середня швидкість: 200 слів на хвилину).
Сторінка статті: заголовок з обкладинкою чи без, заголовок H1, метадані, тіло матеріалу, блок "читайте також", форма коментарів або CTA.
Типографія тіла матеріалу
Основний текст: font-size: 17–18px, line-height: 1.65–1.75, ширина рядка 65–75 символів (max-width: 700–740px). Для кирилічних шрифтів міжбуквений інтервал (letter-spacing) краще залишити 0 або мінімальним — на відміну від латиниці.
Внутрішні заголовки (H2, H3) повинні візуально відрізнятися від заголовка сторінки: менший розмір, інша вага (font-weight: 600 vs 700), верхня маржа в два рази більша за нижню.
Сітка списку
Три поширені варіанти:
- Газетна сітка — одна обрана стаття велика, інші в дві-три колонки
- Сітка карт — рівні карти в 2–3 колонки (Pinterest-like без masonry для новин)
- Список з обкладинкою — горизонтальні карти, підходить для формату новин з щільним потоком матеріалів
Часовий графік
Дизайн списку + сторінки статті для Figma (desktop + mobile): 2–3 робочих дні. Включаючи прототипування станів (hover, активні теги, пагінація): 3–4 дні.