Блестящие идеи и тенденции для виджетов Feature Post
Для ведения успешного интернет-журнала требуется солидная аудитория и много качественного письма. Но макет журнала также играет решающую роль в привлечении посетителей. Одним из методов является создание виджет избранных постов в верхней части главной страницы. Это демонстрирует самые последние популярные статьи, чтобы в идеале продвинуть читателей на сайт..
В этом посте я хотел бы рассказать о методах дизайна, которые можно использовать для создания успешного виджета избранных постов. Хотя этот виджет часто лучше всего подходит для макета в стиле журнала, вы также можете применить его к небольшим блогам или веб-сайтам с динамическим контентом..
Типографский контраст
Большинство публикуемых сообщений опираются на миниатюры, чтобы привлечь внимание. Это часто принимает форму фонового изображения, привязанного к заголовку каждой статьи..
Эта техника выглядит фантастически, но это трудно создать заметный контраст между типографикой и динамическим фоновым рисунком. Изучая другие журналы, вы можете выбрать тонкие приемы, чтобы улучшить читабельность..
The Next Web - большой онлайн-журнал с виджетом заметных постов на главной странице. Каждый эскиз отличается по размеру, но все они используют темные градиенты для улучшения контраста.
Заголовки статей размещаются внизу миниатюрных блоков поверх темных градиентов. светлый текст легко потреблять на темном фоне, все же это не покрывает целое изображение также.
Современные достижения в CSS3 позволяют разработчикам воссоздать эти эффекты с легкостью. Фиксированные градиенты идеально подходят, если вы можете получить их течь естественно поверх каждого эскиза И еще хвастаться достаточно изображения привлечь внимание.
Немного другая техника используется на домашней странице Digital Trends. Этот пост виджет использует высококонтрастные сплошные фоны за текстом, чтобы каждый заголовок был четким и ярким.
Разница здесь в том, что каждый цвет фона на 100% сплошной. Вы не можете увидеть всю миниатюру фото так маленькие порции теряются из виду. Но текст хорошо читается, что может быть так же привлекательно для посетителей, которые впервые попадают на домашнюю страницу Digital Trends..
Найти правильное количество контраста сложно. Некоторые сайты, такие как TechCrunch, пытаются разместить текст рядом с миниатюрой, чтобы полностью устранить эту проблему..
Но если вам нравится стиль оформления текста заголовка поверх эскиза, вы захотите рассмотреть, как контрастные факторы в уравнении.
Спорадические размеры изображения
Значение рекомендуемого виджета поста заключается в содержание функции в верхней части страницы. Асимметрия - это отличный способ привлечь внимание к чему-то, и в этом случае асимметричные размеры миниатюр отлично работают.
Взять, к примеру, домашнюю страницу ZDNet. В их избранном виджете самая большая статья слева использует самый широкий эскиз изображения, чтобы занять больше места и, надеюсь, привлечь больше внимания. Другие показанные миниатюры делятся на меньшие размеры с меньшими заголовками.
Обратите внимание на то, как эта структура сетки естественным образом направляет взгляд на страницу. Взгляд каждого посетителя имеет тенденцию падать в одну конкретную область, затем перемещаться между каждым эскизом, пока что-то не выпрыгнет.
Также ZDNet размещает темный градиент поверх каждого миниатюрного изображения построить типографский контраст для более удобочитаемого текста. По сути, это один из лучших проектов виджетов постов, которые я когда-либо видел.
Очень похожий стиль дизайна можно найти на домашней странице CNET. Самая большая миниатюра занимает свое место слева, так как большинство посетителей читают слева направо.
При разработке собственного виджета поста не обязательно следовать этой же методике. Вы можете использовать любой размер миниатюры, если они слипаются и образуют единую сетку..
Пользовательские Стили Миниатюр
Выбор дизайна широко варьируется от макета к макету, поэтому не существует единого идеального решения. Избранные виджеты постов, безусловно, более сложны в дизайне, поэтому они требуют изучения и терпения, чтобы вписаться в пользовательский макет.
Стиль каждого эскиза влияет на вид всего виджета для вашей аудитории. Возьмем, к примеру, рекомендуемый стиль виджета, найденный на грани.
У каждого эскиза есть красочный градиент сверху фотографии. Это повышает контрастность и улучшает читабельность, но также добавляет определенную привлекательность веб-сайту..
Некоторым людям не нравится этот стиль, потому что они считают его безвкусным или непривлекательным. Но это также довольно популярно среди читателей Verge, и другие дизайнеры подражают этому стилю.
Но цвета и необычные приемы - не единственный фактор, который нужно учитывать. Сетки и размеры миниатюр также должны быть тщательно выбраны, так как они помогают определить общий стиль виджета публикаций..
Возможно, одним из лучших примеров является дизайн Mashable, который прошел через многие этапы за эти годы. В настоящее время Mashable считается основным источником новостей, поэтому большое количество сообщений попадает на домашнюю страницу для удобного просмотра..
Некоторые сообщения используют маленькие квадратные миниатюры, в то время как их главная таблица лидеров фиксирует большой полноразмерный баннер с миниатюрами к статье. Это должно потребовать дополнительной работы от редактора, чтобы гарантировать, что все сообщения имеют свои соответствующие фотографии в правильных размерах.
Но сразу после посадки на сайт вы заметите, что это выдает чувство доверия. Этот стиль воспринимается как мейнстрим и может использоваться практически любым типом онлайн-журналов, чтобы завоевать доверие читателей. Единственная проблема - написание достаточного количества контента для заполнения страницы.!
Многопостовые виджеты
Некоторые избранные виджеты сообщений отображают статьи в виде статическая сетка. Это часто самый популярный выбор, потому что это может быть сделан отзывчивым и хорошо сочетается в любой макет.
Другие виджеты полагаются на динамические взаимодействия, такие как слайд-шоу. Возьмем, к примеру, домашнюю страницу Vanity Fair с их популярным почтовым блоком в верхней части страницы. Только один пост отображается за раз, но новые статьи отображаются при наведении на определенный заголовок.
Как миниатюра, так и заголовок автоматически обновляются с помощью простого всплывающего окна. Следует отметить, что это может быть очень запутанным для пользователей Интернета, которые не знакомы с этой техникой динамического наведения.
Но с положительной стороны эта техника будет сэкономить место на странице, скрывая лишний контент.
Постарайтесь не считать избранные виджеты постами черно-белыми. Это просто разделы страниц, используемые для показа самых интересных или популярных статей. Техника (ы), с помощью которой вы выполняете эту задачу, всегда могут быть открыты для обсуждения.
Сложный журнал использует полный показ слайдов для своего виджета. Каждый пост имеет миниатюру и нижний градиент для типографского контраста..
Но вместо того, чтобы размещать каждый эскиз рядом, статьи поток динамически через окно слайд-шоу. Навигация может быть установлена автоматически или управляться ссылками со стрелками. Этот дизайн экономит много места и дает пользователю больше желания взаимодействовать со страницей.
Заворачивать
Там нет правильного или неправильного дизайна, когда дело доходит до показа постов. Все они имеют много общих черт, но каждый журнал использует свой собственный стиль для организации показанного контента..
Я надеюсь, что этот пост предлагает практические советы по разработке собственного виджета для заметок. Если вы чувствуете, что застряли, просто посмотрите на другие журналы для вдохновения. Найдите черты, которые вам нравятся, и выясните, как их воспроизвести, чтобы они вписались в ваш собственный дизайн журнала..
