Блестящие идеи и тенденции для виджетов “Feature Post”

Для ведения успешного интернет-журнала требуется солидная аудитория и много качественного письма. Но макет журнала также играет решающую роль в привлечении посетителей. Один из методов – создать виджет избранных постов в верхней части главной страницы. Это демонстрирует самые последние популярные статьи, чтобы в идеале продвигать читателей дальше на сайт.

В этом посте я хотел бы рассказать о методах дизайна, которые можно использовать для создания успешного виджета избранных постов. Хотя этот виджет часто лучше всего подходит для макета в стиле журнала, вы также можете применить его к небольшим блогам или сайтам с динамическим контентом.

Типографский контраст

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

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

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

Современные достижения в CSS3 позволяют разработчикам воссоздать эти эффекты с легкостью. Фиксированные градиенты идеальны, если вы можете заставить их плавно течь поверх каждого эскиза и при этом демонстрировать достаточно изображения, чтобы привлечь внимание.
Немного другая техника используется на домашней странице Цифровые Тенденции, Этот виджет сообщений использует высококонтрастные сплошные фоны за текстом, чтобы сделать каждый заголовок четким и ярким.

Разница здесь в том, что каждый цвет фона на 100% сплошной. Вы не можете видеть всю миниатюру фотографии, поэтому маленькие части теряются из виду. Но текст четко читается, что может быть так же привлекательно для посетителей, которые впервые попадают на домашнюю страницу Digital Trends.

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

Но если вам нравится стиль оформления текста заголовка поверх миниатюры, вы захотите рассмотреть, как контрастность влияет на уравнение.

Спорадические размеры изображения

Ценность виджета избранных постов состоит в том, чтобы размещать контент в верхней части страницы. Асимметрия – это отличный способ привлечь внимание к чему-то, и в этом случае асимметричные размеры миниатюр отлично работают.

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

Кроме того, ZDNet размещает темный градиент поверх каждого эскиза изображения, чтобы создать типографский контраст для более удобочитаемого текста. По сути, это один из лучших пост-виджетов, который я когда-либо видел.

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

Пользовательские Стили Миниатюр

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

Стиль каждого эскиза влияет на вид всего виджета для вашей аудитории. Возьмем, к примеру, рекомендуемый стиль виджета, найденный на Грани,
У каждого эскиза есть красочный градиент сверху фотографии. Это повышает контрастность и улучшает читабельность, но также добавляет определенную привлекательность веб-сайту.

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

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

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

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

Но сразу после входа на сайт вы заметите, что он вызывает чувство доверия. Этот стиль кажется очень распространенным и может использоваться почти любым типом онлайн-журнала, чтобы завоевать доверие читателей. Единственная проблема – написание достаточного количества контента для заполнения страницы!

Многопостовые виджеты

Некоторые популярные пост-виджеты отображают статьи в статической сетке. Это часто самый популярный выбор, потому что он может быть адаптивным и хорошо вписывается в любой макет.

Другие виджеты полагаются на динамические взаимодействия, такие как слайд-шоу. Возьмите, например, домашнюю страницу Ярмарка Тщеславия с их показанным почтовым блоком в верхней части страницы. Только один пост отображается за раз, но новые статьи отображаются при наведении на определенный заголовок.
Как миниатюра, так и заголовок автоматически обновляются с помощью простого всплывающего окна. Следует отметить, что это может быть очень запутанным для пользователей Интернета, которые не знакомы с этой техникой динамического наведения.

Но с другой стороны, эта техника сэкономит место на странице, скрывая лишний контент.

Старайтесь не считать избранные виджеты постами черно-белыми. Это просто разделы страницы, используемые для показа самых интересных или популярных статей. Техника (ы), с помощью которой вы выполняете эту задачу, всегда могут быть открыты для обсуждения.
Комплексный журнал использует полный показ слайдов для своего виджета. Каждый пост имеет миниатюру и нижний градиент для типографского контраста.

Но вместо того, чтобы размещать каждый эскиз рядом друг с другом, статьи динамически перемещаются через окно слайд-шоу. Навигация может быть установлена ​​автоматически или управляться ссылками со стрелками. Этот дизайн экономит много места и дает пользователю больше желания взаимодействовать со страницей.

Заворачивать

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

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