Разработка дизайна блога/новостного раздела сайта
Блог и новостной раздел — типовые, но легко испорченные компоненты сайта. Основные ошибки: перегруженная карточка публикации, нечитаемая типографика в теле статьи, отсутствие иерархии между заголовком, анонсом и датой. Цель дизайна — обеспечить быстрое сканирование списка и комфортное чтение отдельного материала.
Структура раздела
Листинг (список публикаций): карточки со следующими элементами — обложка (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), отступ сверху вдвое больше, чем снизу.
Сетка листинга
Три распространённых варианта:
- Газетная сетка — один featured-материал крупно, остальные в две-три колонки
- Карточная сетка — равные карточки в 2–3 колонки (Pinterest-like без masonry для новостей)
- Список с обложкой — горизонтальные карточки, подходит для новостного формата с плотным потоком материалов
Сроки
Дизайн листинга + страницы статьи для Figma (desktop + mobile): 2–3 рабочих дня. Включая прототипирование состояний (hover, active тегов, пагинация): 3–4 дня.