Что и как оцениваем

Сравнение по критериям

Опция 1

Итог. Лучшая основа: недочёты исправляются в макете без смены структуры.

Что хорошо

• Компактное горизонтальное меню разделов: текст статьи начинается сразу под ним.
• Баннер лояльности занимает меньше места, чем в Опции 3, и оставляет место для блока отелей рядом с текстом.
• У блока отелей есть подзаголовок, который связывает его с темой статьи («Отели Accor рядом с рынками и набережной»), и цены «от».

Комментарий. По баннеру и блоку с отелями в Figma есть комментарии Даши и Максима — нужно их согласование.

Комментарий. Заголовок блока с отелями — не больше 32 символов. Иначе блок не поместится по высоте экрана: он закреплён и прокручивается вместе с текстом.

Что мешает

• Меню в одну строку рассчитано на 6–7 коротких пунктов. В макете не видно, что будет при длинных названиях разделов или большем их числе: нужно правило на переполнение.
• На мобильном такое меню в одну строку не поместится: нужен горизонтальный скролл или выпадающий список.
• Кнопка «Все отели …» серая — заметна слабее жёлтой кнопки из Опции 2.
• Заголовок стоит на фото. Читается он только за счёт сильного затемнения всей обложки, а подзаголовок мелкий и теряется на пёстром фоне. Под каждую статью придётся подбирать фото, на котором текст нормально читается.

Комментарий. Состояния меню будут проработаны после выбора опции.

Комментарий. Подзаголовок на обложке увеличим.

Опция 2

Итог. Как основа уступает Опции 1: первый экран перегружен оглавлением. Подразделы в навигации и жёлтую кнопку стоит забрать.

Что хорошо

• Полноценное «Содержание» с подразделами — удобно читателю и полезно для поиска.
• Блок отелей с ценой и жёлтой кнопкой «Все отели …» — понятный путь к бронированию.
• «Поделиться» стоит рядом с оценкой статьи — там, где читатель уже дочитал.

Что мешает

• Оглавление на 3 пункта занимает около 330 px и уводит первый абзац за первый экран. При 6–7 разделах с подразделами оно станет ещё выше.
• Вторая карточка отеля обрезана краем блока: непонятно, листается ли он.
• Заголовок стоит на фото, как в Опции 1: читаемость зависит от подбора обложки и сильного затемнения.

Комментарий. Обрезанная карточка — привычный для пользователя паттерн: если что-то обрезано, значит, это прокручивается. Чтобы было понятнее, можем добавить контролы.

Опция 3

Итог. Как основа не подходит: нет навигации и нет блока отелей рядом с текстом. Но заголовок над обложкой читается при любом фото — это решение стоит забрать.

Что хорошо

• Заголовок и подзаголовок стоят над фото на белом фоне — читаются при любой обложке.
• Кнопки «Поделиться» и «В избранное» рядом с заголовком.

Что мешает

• Нет оглавления: в длинной статье нельзя перейти к нужному разделу.
• Баннер лояльности крупный и занимает всё место в правой колонке рядом с текстом.
• Блока отелей рядом с текстом нет: отели показаны только внизу страницы, после статьи.

Комментарий. Оглавление в Опции 3 есть — ссылка на макет на слайде 3.

Комментарий. Отели внизу страницы — так на одном экране помещается больше отелей. Насколько мы понимаем, баннер программы лояльности будет на странице всегда, а блок отелей — по ситуации. Поэтому визуально эти блоки лучше разнести. Если держать их вместе, баннер придётся сделать маленьким, чтобы оставить место под карточки отелей, и в статьях без отелей такой маленький баннер будет смотреться плохо.

Общее для всех вариантов

GEO: что шаблон даёт для цитирования нейросетями

Нейросети цитируют фрагмент, когда он прямо отвечает на запрос и содержит проверяемые факты. Блоки шаблона почти одинаковы во всех опциях, различается навигация. Качество текста по примерной статье не оцениваем.

Чего не хватает в шаблоне

Как докрутить Опцию 1

1. Меню разделов: закрепить при прокрутке, подсвечивать текущий раздел и добавить подразделы, как в «Содержании» Опции 2. Показать, как меню выглядит при длинных названиях разделов и на мобильном.
2. Обложка: заложить затемнение-градиент только в зоне заголовка, чтобы текст читался на любом фото. Запасной вариант — заголовок над обложкой, как в Опции 3.
   Комментарий. Решение с градиентом неочевидное: подобрать фото, на котором текст сверху читается с градиентом, намного сложнее, чем с общим затемнением. Советуем оставить затемнение.
   Комментарий. Советуем оставить один вариант отображения заголовка во всех статьях, чтобы при просмотре разных статей пользователя не сбивал разный вид.
3. Подзаголовок под H1: 2–3 предложения с главным выводом статьи, а не анонс.
   Комментарий. Можете показать пример такого подзаголовка?
4. Добавить блок FAQ.
5. Добавить блок автора: имя, роль, фото.
6. Добавить стиль таблицы в тексте статьи.
7. Правая колонка: показать, что с ней происходит при прокрутке — закрепляется или блок отелей повторяется в середине текста. Кнопку «Все отели …» сделать жёлтой, как в Опции 2.
   Комментарий. По правой колонке нужно обсуждение с Дашей и Максимом.

Итоговая структура страницы · 1–7

Основа — Опция 1 с решениями из Опций 2 и 3 и блоками, которых нет ни в одной опции. Блоки идут сверху вниз.

Итоговая структура страницы · 8–13

Сравнение по критериям

Опция 1

Итог. Понятный список, но первый экран занят декоративной обложкой. Как основа уступает Опции 2; подзаголовок и единый вид карточек стоит забрать.

Что хорошо

• Вкладки рубрик в одну строку, выбранная рубрика хорошо видна.
• Все карточки одного вида: фото, под ним рубрика, время чтения и заголовок. Список легко просматривать.
• Подзаголовок под заголовком блога объясняет, что есть в разделе, — готовое место под вводный текст.

Что мешает

• Обложка-фото высотой около 660 px не ведёт ни к одной статье и сдвигает карточки к нижнему краю первого экрана.
• Заголовок блога стоит на фото: читаемость зависит от обложки.
• Под списком — стрелки и полоски, как у карусели: не видно номера страницы и сколько страниц всего.
• Нет фильтра внутри рубрики.
• Когда выбрана рубрика, одинаковая метка рубрики на всех карточках ничего не добавляет. На странице рубрики полезнее показывать теги, как в Опции 2.

Комментарий. Пагинацию добавим.

Комментарий. По механике фильтрации нужно согласование с Дашей и Максимом.

Опция 2

Итог. Лучшая основа: это рабочий список статей с фильтрами, недочёты исправляются в макете без смены структуры.

Что хорошо

• Компактный верх: заголовок, рубрики и теги не уводят карточки за первый экран.
• Число статей у каждой рубрики — видно, где больше материалов.
• Теги сужают выбор внутри рубрики.
• Хлебные крошки на белом фоне читаются при любой картинке.

Что мешает

• Выбранные теги отличаются от остальных только розовой рамкой — это слабо заметно. Нет кнопки «Сбросить». Показать, как сочетаются несколько тегов и что видит читатель, если статей по ним нет.
• Числа у рубрик мелкие и бледные, у выбранной рубрики — светло-розовые на белом.
• Первая карточка с текстом на фото отличается по виду, но не по размеру: непонятно, чем она выделена. Читаемость текста на ней зависит от фото.
• Переход к другим статьям — стрелки и полоски без номеров страниц.
• Нет места под вводный текст раздела.

Комментарий. Визуал карточки повторяет уже согласованный визуал на главной странице. Так можно выделять нужные статьи по всей странице.

Опция 3

Итог. Это главная журнала, а не список статей: без отдельной страницы рубрики она не работает. Как основа не подходит, крупную карточку из «Новых статей» стоит забрать.

Что хорошо

• Обложка ведёт к конкретной статье, у неё заметная кнопка «Читать статью».
• Рубрики с картинками заметнее простых вкладок.
• Блок «Новые статьи» — одна крупная карточка и три компактные: много статей на небольшой площади.
• Подборки по рубрикам со ссылкой «Смотреть все» показывают, что есть в каждом разделе.

Что мешает

• Первый экран целиком занят одной статьёй, список статей начинается за ним.
• Нет общего списка, фильтра и перехода по страницам: больше трёх статей рубрики видно только по «Смотреть все». Для этой ссылки нужен отдельный шаблон страницы рубрики — в макетах его нет.
• Не видно заголовка самого блога: крупный текст на обложке — название статьи.
• Два вида карточек в каждой подборке: первая — с текстом на фото, остальные — с текстом под фото.
• Страница растёт с каждой новой рубрикой: на каждую — ещё одна подборка.

Комментарий. Общий список есть: он открывается по клику на рубрику или по кнопке «Смотреть все». Механика описана в Figma — смотреть макет ↗

Комментарий. Два вида карточек повторяют визуал главной страницы.

Общее для всех вариантов

Как докрутить Опцию 2

1. Вводный текст: под заголовком добавить вводный текст раздела, как подзаголовок в Опции 1. Заголовок — название блога или рубрики, а не слоган.
2. Страница рубрики: показать заголовок, вводный текст, крошки «Главная → Блог → Рубрика».
3. Теги: выбранные выделить заметнее, добавить кнопку «Сбросить» и показать экран, когда по выбранным тегам статей нет.
4. Рубрики: числа у рубрик сделать контрастнее.
5. Карточки одного вида — текст под фото, как в Опции 1. Если нужно выделить статью — крупная карточка, как в «Новых статьях» Опции 3.
6. Дата публикации в карточке.
7. Переход по страницам: вместо стрелок и полосок — номера страниц или кнопка «Показать ещё» с номерами страниц под ней.
8. Мобильная версия вкладок и тегов.

Итоговая структура страницы

Основа — Опция 2 с решениями из Опций 1 и 3 и блоками, которых нет ни в одной опции. Блоки идут сверху вниз.