Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Бизнес-хаки, Интерфейсы / UX

11 примеров карточного дизайна корпоративных блогов

6 марта 2018 Нет комментариев

В этой статье рассматриваются преимущества современного дизайна корпоративного блога с карточным интерфейсом. Контент необычайно важен при проведении маркетинговой кампании, поэтому корпоративному блогу часто отводят ключевую роль. Хорошо оформленный блог компании, в любом случае послужит фундаментом и дело не только в динамическом контенте или наборе SEO характеристик. User eXperience сегодня главная составляющая успеха в Сети. Современные пользовательские ожидания предполагают использование связно сгруппированных материалов, лаконично представляющих суть дела.

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

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

1. Help Scout

Пример 3-х колоночного корпоративного блога с броским дизайном в плоском стиле.

Примеры дизайна корпоративных блогов: карточный стиль с яркими Flat-иллюстрациями

Flat-иллюстрации ярко представляют материалы блога. При структуре дизайна с 3 колонками максимально охватывается взглядом прокручиваемый контент. Крупные карточки не отвлекают, а наоборот усиливают эффектность мультяшных картинок. Разметка постов тут дает текстам «дышать» и премиум контент не выглядит агрессивной рекламой.

2. Sprout Social

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

10 примеров эффективных корпоративных блогов: зеленый дизайн с карточками

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

Читайте также:  Сочетание цветов в веб-дизайне — зеленые сайты

3. Sigstr

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

Примеры корпоративных блогов: зеленый дизайн с карточками

Использование разъясняющих изображений, выражающих или дополняющих смысл заголовка, побуждает к прокрутке с целью ознакомления. Чего недостает, так это длины анонсов статей. Их хорошая читабельность объясняется правильно подобранной высотой строки. Растянутые строки создадут напряженность при чтении, слишком сжатые приведут к неразборчивости текcта в слитных кусках абзацев. Так, визуальная привлекательность высоты текстовых строк удерживает пользовательское внимание.

4. InVision

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

Примеры корпоративных блогов с карточным дизайном

Три-колонки и свободное пространство вокруг карточек – отличный способ обратить внимание посетителя сайта компании на блоговые статьиОригинальное решение в дизайне постов: при прокрутке всплывающая снизу панель с социальными кнопками и основным CTA-призывом.

5. Buffer App

В корпоративном блоге американской компании разработавшей сервис постинга в соцсетях, насчитывается более 900 разнотематичных статей.

Пример корпоративного блога с карточным дизайном

Разнообразие в применении дизайн-элементов помогает адаптировать контент для задач. Под блоговые посты заведено два типа лейаута: ориентированный на статьи-советы и использующий разметку в магазинном стиле с полноэкранным фотобэкграундом (под ТОПовые записи).

Читайте также:  57 самых красивых плоских дизайнов сайтов

6. Chase

На сайте американского банка, корпоративный блог сделан как надо – дизайн лаконичный и согласованный.

Корпоративный блог американского банка - пример хорошего дизайна в карточном стиле

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

7. Draft

Сайт японской компании по дизайну интерьера: популярная сейчас нестандартная разметка предусматривает пересечение контент-блоков и текстов с карточками.

Современный сайт японской компании с блогом, оформленным в карточном стиле - draft.co.jp

Веб-страницы оформлены в стиле самых модных современных трендов и привлекают микро-итерациями с эффектными переходами. Дизайн блога в виде карточек.

Читайте также:  Стили и элементы современного веб-дизайна

8. Marketo

Современный стильный блог компании по автоматизации маркетинга.

Современный корпоративный блог маркетинговой компании

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

9. Hootsuite

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

Современный корпоративный блог с привлекательным дизайном в карточном стиле

В постах они делятся нематериальными ценностями, которые трудно выразить словами. И тут, как нельзя кстати, применяются карточки. Карточный интерфейс – это прежде всего понятность и доступность. Расширяя горизонты социальных медиа, делая углубленные оценки при больших объемах, блог компании просто нуждается в эффективном UI. Демонстрируя минималистичный, эстетически привлекательный дизайн, Hootsuite применяет карточки и внутри постов, объединяя фото или видео с социальными иконками, значками и CTA-призывом.

10. Etsy

Etsy предлагает аж 8 уникальных блогов для привлечения внимания глобальной аудитории. От рассказа про пряничный домик, до шоппинг-историй или руководства онлайн-покупателя — понемногу каждому.

Etsy - современный корпоративный блог в карточном стиле

Типично, посты Etsy имеют высокий уровень вовлеченности, некоторые с сотнями комментариев. Компания регулярно пополняет блог соблазнительными фотографиями и арт-произведениями. Неудивительно, что визуальное оформление тут на высоте.

11. Slack

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

Slack – корпоративный мессенджер, альтернатива Skype и внутри-корпоративной электронной почте. Запоминается эффектным плоским дизайном, флэт-графикой и иллюстрациями. Блог компании на отдельном домене. Красиво сочетая плитки с карточками / плоский и материальный стиль дизайна / анимацию и hover-эффекты, корпоративный блог не выглядит скучным.

Читайте также:  Психология влияния цвета на конверсию сайта