Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

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

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

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

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

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

Опубликовано: 01.09.2018

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

Дмитрий Никотин о Корпоративном Блоггинге

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


Структура сайта для бизнеса. Часть 1 — штурм смыслов. Курс создание сайта для бизнеса.

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


Фильтрация, группировка и построение структуры сайта

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

1.  Help Scout

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

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

2. Sprout Social

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

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

3. Sigstr

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

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

4. InVision

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

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

5. Buffer App

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

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

6. Chase

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

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

7. Draft

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

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

8. Marketo

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

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

9. Hootsuite

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

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

10. Etsy

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

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

rss