@from2003
Web developer

Как лучше сделать вывод новостных материалов?

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

С форматом я определился на 100%, это будут квадратные блоки с картинкой, но вот как именно сделать лучше не знаю, есть 2 варианта.

Первый:

Тут картинки, при наведении на которые бэкграунд затемняется и появляется заголовок новости. Попробовать лайв версию можете тут https://bkhtn.ru/blocks/

4665eb8d7b7e33e48e8959ed14ea5688.jpg

Второй:

Тут тоже картинки, но уже затемненные, и сразу виден заголовок новости, а при наведении заголовок убирается, и Вы можете посмотреть картинку почти без затемнения. Лайв версия тут https://bkhtn.ru/blocks/index2.html

a9a3e14ca5ba834c2b1c609b30986789.jpg

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

Жду советов :)

Кстати забыл упомянуть, что версталось это всё в спешке и просто для того, чтобы посмотреть как это будет выглядеть, так что на некоторых браузерах flex боксы / анимация могут слетать.
  • Вопрос задан
  • 288 просмотров
Решения вопроса 2
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Первый вариант вообще неработоспособный: на тачевых устройствах :hover наступает только в момент тапа, т.е. посетители не увидят названий вообще.

Второй лучше, но не идеален. Все блоки одинаковые и если новостей много, то лента будет выглядеть слишком однородно, слишком скучно. Однородные ленты пользователи прокручивают быстрее и читают меньше, т.к. глазу не за что зацепиться.

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

Скрывать название новости при наведении тоже не очень. Если посетитель хочет рассмотреть картинку, пусть кликнет саму новость и рассмотрит картинку внутри.

Не знаю, о чем у вас будет сайт и какая там редакционная политика, но надо продумать дизайн новости без картинки.

И еще у вас крупная проблема — вы проектируете дизайн используя стоковые картинки и лорем ипсум. Это значит, что при наполнении сайта реальным контентом вылезут десятки проблем, о которых вы не задумались:
- название новости слишком длинное,
- название новости слишком короткое,
- название нуждается в пояснении,
- картинка слишком светлая — белый по светлому не контрастно,
- картинка слишком пёстрая — фон мешает читать текст,
- текст закрывает лицо человека на фотографии,
- у новости нет картинки
- и т.д.

Если у вас еще нет своих новостей, возьмите контент с чужого сайта и сделайте макет с реальными текстами и картинками. Это оголит возможные будущие проблемы. Макет будет выглядеть не так красиво, но зато дизайн будет более жизнеспособен.

Ссылки по теме:
artgorbunov.ru/bb/soviet/20160316
artgorbunov.ru/bb/soviet/20160127
artgorbunov.ru/bb/soviet/20160420
artgorbunov.ru/bb/soviet/20160427
Ответ написан
goandkill
@goandkill
live slow — die old
Заголовки должны быть сразу. В новостях они важнее картинок.

При ховере лучше не убирать заголовок, а добавить например к нему лид, типа того:
91149d2fd6c14484a47a836321651c71.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@zhainar
Гуглю за вас
Во втором варианте убирать текст не надо, можно сделать так:

6d5d21fa8f3d4032b74fb0067b3865ae.png

И слово опубликовано лишний мусор.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Платформа НТИ Москва
от 90 000 до 150 000 руб.
WebMoney Москва
от 100 000 руб.
Купи батон Ульяновск
от 45 000 до 90 000 руб.
19 апр. 2019, в 11:38
100 руб./за проект
19 апр. 2019, в 11:14
500 руб./за проект
19 апр. 2019, в 11:06
1500 руб./за проект