Раздел блог на сайте: Как должен выглядеть блог на сайте?

Раздел блог на сайте: Как должен выглядеть блог на сайте?

Как должен выглядеть блог на сайте?

Большинство сайтов имеет раздел вроде «Новостей», «Статей», иными словами подобие блога. Но многие ли блоги действительно цепляли вас, привлекали ваше внимание? Сегодня мы попытаемся разобраться, как и чем наполнить эту категорию на сайте, чтобы она была интересной.

 

 

 

10 идей о чем писать в блоге?

 

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

 

1. Обзоры товаров и услуг. Достоинства и недостатки, фото-, видеообзоры и многое другое.

 

 

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

 

 

3. Рекомендации и советы. Например, как создать свой сайт с подробным объяснением и пояснительными скриншотами.

 

 

 

 

 

 

4. Списки и подборки. 5 книг для успешного копирайтинга, 10 полезных сайтов по здоровому питанию и тренировкам.

 

 

5. Ваши рассуждения. Проанализируйте актуальное событие/товар/явление и выскажите свое мнение, вызовите аудиторию на дискуссию.

 

 

6. Ситуация из жизни. Расскажите что-нибудь интересное и забавное из практики, поделитесь поучительной историей.

 

 

 

 

 

 

7. Поделитесь важным для вас событием. Ваша компания организовала или посетила вебинар, крутое мероприятие или презентацию? Сообщите об этом!

 

 

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

 

 

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

 

 

 

 

 

 

10. Если у вас есть какая-то обширная тема, но не хватает конкретики, воспользуйтесь сервисом Wordstat. Введите вашу генеральную идею и найдите более конкретный запрос, который интересует аудиторию.

 

 

 

Структурирование блога

 

 

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

 

 

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

 

 

 

Вот несколько советов о том, как грамотно и корректно структурировать статьи в блоге:

 

1. Главная ваша задача – назвать категорию таким образом, чтобы она:

 

а) заинтересовала читателя;

 

б) сразу же давала посетителю понять, о чем здесь будет речь, чему посвящена рубрика.

 

 

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

 

 

3. Заранее продумайте, сколько статей и на какие темы хотя бы примерно вы будете писать. Если на одну тему всего 2-3 материала, то нет смысла выделять это в отдельную рубрику.

 

 

 

Каков он, дизайн успешного блога?

 

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

 

 

1. Комментарии

 

Если ваши статьи не очень-то часто комментируют, лучше тогда эту функцию вообще убрать. Тоскливо смотреть на достойный блог с интересными материалами, но без единого комментария.

 

 

2. Элемент паззла

 

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

 

 

 

 

 

 

3. Надписи и шрифты

 

Оптимальный вариант – это привычные шрифты, вроде Arial и Times New Roman. Кстати, чтобы посетители дольше «зависали» на вашем блоге, попробуйте увеличить шрифт. Избавляя посетителя от необходимости разглядывать мелкие детали и буквы, вы привлекаете его внимание и избавляете от чувства усталости.

 

 

4. Кнопки шеринга

 

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

 

 

 

 

 

 

5. Панель сбоку

 

Самый интересный контент должен располагаться именно сбоку, привычная сторона – правая. Обычно именно эта часть блога занимает пользователей больше всего, показывая, что они могут здесь для себя почерпнуть. Имейте в виду, что эта боковая панель не должна превышать 40% всей страницы.

 

 

6. Информация о вас

 

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

 

 

 

 

 

7. Изображения

 

Не забывайте добавлять к материалам картинки. Согласно многочисленным исследованиям, статью с изображениями дочитают до конца на 30% больше людей, чем просто скучную «простыню» текста.

 

 

8. Призыв оставить свой email-адрес

 

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

 

 

Несколько примеров того, как, не отпугнув, пополнить email-базу клиентов:

 

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

 

 

 

 

 

 

Примеры интересных блогов

 

 

1. Aviasales – все о путешествиях по России и зарубежным странам

 

 

 

 

 

Преимущества блога:

 

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

 

 

2. Texterra – все об интернет-маркетинге.

 

 

 

 

Преимущества блога:

 

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

 

 

 

3. Luck Cherie – блог салона красоты, в котором публикуется куча интересных и полезных статей на тему ухода за собой.

 

 

 

 

 

Преимущества блога:

 

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

 

 

Надеемся, что эти рекомендации помогут вам создать блог, интересный и привлекательный для читателей. Пробуйте, экспериментируйте, пишите. Уже готовы начать свой блог? Тогда создайте для него сайт всего в пару кликов.

 

 

 

> Создать сайт

 

 

Основные принципы дизайна блога на сайте

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

Зачем и кому нужен блог на сайте

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

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

Почему блог — хороший инструмент для повышения конверсии?

1. Размещая статьи от специалистов компании, вы тем самым показываете свою экспертность. Люди охотнее доверяют компании, если видят, что специалисты, которые оказывают им услуги, разбираются в теме. Больше об элементах, вызывающих доверие, мы рассказывали в этой статье.
2. С помощью блога можно заинтересовать клиента какой-либо услугой и создать «искусственный» спрос. У каждого блога есть постоянные читатели, которых может заинтересовать та или иная тема и они могут приобрести продукцию.
3. С помощью тематических статей можно привести клиентов на сайт. Блог — один из инструментов продвижения, который используется для привлечения трафика. Пользователь набирает нужный ему запрос в поисковой системе и может попасть на тематическую статью в блоге. Так у интернет-магазина или компании может появится новый клиент.

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

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

Принципы создания дизайна блога

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

Отличие от остальных страниц сайта

У блога, в отличие от других страниц сайта, есть своеобразная специфика:

1. Контент в блоге в основном — текстовый, поэтому нужно позаботиться о том, чтобы пользователю было удобно читать статьи и легко воспринимать информацию.
2. Так как в блоге обычно много статей, нужно продумать элементы навигации, чтобы пользователю было проще находить нужную информацию.
3. Несмотря на то, что в блоге преобладает текстовый контент, важно привлекать внимание пользователя и сделать дизайн запоминающимся.

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

Один из самых популярных блогов о путешествиях — блог компании AviaSales, которая занимается подбором и продажей авиабилетов. Главная страница сайта выглядит так:

На странице расположена простая форма, ресурс оформлен в синем и голубом цвете.

Чтобы стилистически отделить блог от остальных страниц сайта, было решено использовать большие изображения на фоне вместо синего цвета:

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

Темы для пользователей и поисковых систем

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

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

Оформление отдельных превью

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

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

Как лучше всего оформить превью, чтобы заинтересовать читателя?

1. Чтобы привлечь внимание лучше использовать интересные изображения и иллюстрации. В идеале — создавать иллюстрации самостоятельно, как делает Роман Чусовской в своем блоге о комиксах:

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

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

3. Подбирать размер превью нужно таким образом, чтобы у читателя был выбор между статьями и, в то же время, достаточно большой обзор конкретной статьи.

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

Элементы навигации

Еще один важный элемент в дизайне блога — навигация. Так как пользователи часто приходят в блог из поисковых систем, дизайнеру необходимо продумать навигацию на странице. Например, вот как устроена навигация в блоге контент-агентства «Текстерра»:

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

Сайдбар (боковая панель) играет в блоге особую роль. Именно здесь чаще всего размещают различные баннеры, призывы к действию и элементы навигации: список тем, поиск по тегам и прочее:

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

Типографика

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

Издательство МИФ в своем блоге уделяет большое значение типографике. Тексты поделены на абзацы, сама контентная часть расположена по центру. Размер кегля и межстрочного интервала удобен для чтения.

Форматирование текста

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

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

• подзаголовки выделяют другим шрифтом или кеглем;
• форматируют текст списками;
• добавляют в текст различные иллюстрации и инфографику;
• используется перелинковка, где расставляются ссылки на другие материалы для полного понимания статьи;
• «полотна» — текста разбивают на несколько абзацев и прочее.

В нашем блоге мы придерживаемся этого принципа.

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

Призыв к действию

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

• баннеры-изображения с ссылкой на акционные товары;
• формы для заявки;
• формы для подписки на рассылку;
• призыв оформить заказ в самом тексте статьи;
• всплывающие окна и прочее.

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

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

Фишки

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

Это можно назвать фишкой Т-Ж, поэтому по картинкам и уникальному шрифту сразу можно определить издание. Такой прием повышает узнаваемость бренда и запоминается пользователям.

Также некоторые блоги создают собственные рекомендательные системы на основе прочитанных пользователем материалах:

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

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

Кроме того, на всех статьях указано, сколько времени занимает чтение материала.

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

Уникальность

Безусловно, один из самых главных принципов создания дизайна блога и его контента — уникальность. Если каталог продукции или страница «Услуги» может быть похожа на ресурсы других компаний с похожими товарами или услугами, блог должен быть оригинальным и уникальным, так как все статьи — это демонстрация компетенций вас и ваших экспертов. Только с помощью уникальных материалов можно завоевать доверие клиентов, получить лояльную аудиторию и повысить конверсию сайта.

В нашем блоге каждую неделю размещаются уникальные статьи о веб-дизайне. Студия дизайна IDBI старается сделать блог максимально информативным и интересным. Также мы создаем дизайн блогов для наших клиентов: продумываем, как лучше разместить и оформить статьи, подбираем подходящую типографику и иллюстрации, вместе с клиентами продумываем, какие темы могут быть интересны пользователям. Наши работы можно посмотреть в разделе «Портфолио». Оставляйте заявку в специальной веб-форме и наши специалисты проконсультируют вас по всем возникшим вопросам по поводу дизайна сайтов, повышении конверсии вашего ресурса и не только.

17 лучших примеров красивого дизайна блога

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

Но как заставить людей влюбиться в ваш блог? (Помимо замечательного содержания, конечно.)

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

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

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

Красивые примеры блогов, которые вас вдохновят

1. Help Scout
2. Истории Майкрософт
3. Пандо
4. Дизайнерское молочко
5. Фубиз
6. Склад веб-дизайнеров
7. Машируемый
8. Брит + Ко
9. Теско Ливинг
10. Экипаж
11. Невинные напитки
12. 500px
13. Pixelgrade
14. БаркПост
15. Гудвилл Индастриз Интернэшнл
16. благотворительность:вода
17. Кексы Джонни

Бесплатный ресурс

77 блестящих примеров домашних страниц, блогов и целевых страниц

Расскажите нам немного о себе ниже, чтобы получить доступ сегодня:

17 вдохновляющих примеров красивого дизайна главной страницы блога

1. Help Scout

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

Что нам особенно нравится в этом блоге, так это использование избранных изображений для всех сообщений, включая баннер вверху, который выделяет недавнюю или особенно популярную запись. Эти значки расположены перед яркими блочными цветами, которые привлекают внимание читателей и сигнализируют о том, о чем пост. И это работает — все в дизайне этого блога говорит о том, что он «чистый» и «читабельный».

2. Microsoft Stories

Полное раскрытие: мы уже полностью изучили микросайт Microsoft Stories. Ничего не поделаешь — что может быть лучше, чем оживить бренд старой школы с помощью блога, который может похвастаться красивым, интерактивным и вдохновляющим фирменным контентом? Кроме того, квадратный макет этих историй напоминает логотип Microsoft, что обеспечивает ценную согласованность бренда.

Microsoft Stories также является ярким примером того, как бизнес-блог может стать основным активом для общего ребрендинга. В последние годы Microsoft работала над гуманизацией своего бренда, в основном в ответ на конкуренцию с Apple. У микросайта «Истории» есть простой слоган — «Посмотрите изнутри на людей, места и идеи, которые нас вдохновляют». Это, так сказать, более мягкая сторона Microsoft.

Когда вы пытаетесь передать определенное сообщение бренда, ваш блог может использоваться для его передачи — как в эстетическом, так и в содержательном плане.

3. Pando

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

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

4. Design Milk

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

Значки социальных сетей в верхней части являются приятным дополнением к общему виду сайта — их легко заметить, и они позволяют легко делиться контентом Design Milk. (А чтобы узнать больше о добавлении социальных кнопок в свой блог, прочтите этот пост.)

5. Fubiz

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

В верхней части главной страницы блога читатели могут пролистывать «выделенные» записи. Ниже находится Creativity Finder, где посетители могут выбрать выбранных персонажей — от «Любителя искусства» до «Фрилансера» — местоположение и тип контента, который они ищут. Оттуда читатели могут просматривать контент, специально предназначенный для них.

Мы тоже не можем не любить изображение заголовка. Он использует так называемую психологию «голубого разума», которая обнаружила, что вид открытой воды может естественным образом привлечь нас. Используя это в схеме дизайна, Fubiz может визуально привлекать посетителей к своему контенту.

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

6. Webdesigner Depot

При таком названии, как «Webdesigner Depot», неудивительно, что этот новостной сайт дизайна визуально привлекателен.

Что нам особенно нравится, так это то, как Webdesigner Depot включает значки социальных сетей в каждое отдельное сообщение. Хотя мы, конечно, предлагаем прочитать каждую часть, наличие этих ссылок поможет посетителям сразу же поделиться заголовком, который они считают интересным. И обратите внимание на эти стрелки навигации справа — еще никогда не было так легко прокручивать страницу вверх или вниз.

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

7. Mashable

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

Mashable разбивает свой контент на три заметных раздела на главной странице: новые сообщения перечислены слева в миниатюрах самого маленького размера. «Сообщения «Что растет» отображаются в центральной колонке в виде больших миниатюр, а сообщения «Что нового» показано справа, а также в виде больших эскизов. Этот трехсторонний подход к отображению контента может помочь читателям решить, какие новости для них важнее всего — привлекающие внимание главные новости или другие сообщения, которые в настоящее время находятся в тренде.

Кроме того, нам нравится, что количество репостов отображается в превью каждого поста — это отличная форма социального доказательства.

8. Brit + Co

На домашней странице Brit + Co написано «чисто», «тепло» и «приветливо». В нем нет беспорядка, что делает контент более удобоваримым, а макет чрезвычайно организован.

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

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

9. Tesco Living

Нам нравится красочный, последовательный дизайн Tesco Living, блог-сайта британской сети продуктовых магазинов Tesco.

Помните, как мы постоянно твердим о постоянстве бренда? Обратите внимание на ромбовидные узоры на верхнем баннере — они отражают те же элементы, что и на логотипе Tesco.

Tesco Living добилась великолепного баланса между простотой и смелостью. Макет крайне минималистичный, но не скучный. Теплые и приятные оттенки подчеркивают каждую категорию контента, а фотографии добавляют красок всему сайту. Это отличный пример того, как правильное изображение может создать привлекательный внешний вид по принципу «меньше значит больше», особенно если это соответствует общей концепции вашего бренда.

10. Crew

Crew Блог Backstage, созданный на платформе Crew для дизайнеров и разработчиков, отличается невероятно минималистичным, но при этом уникальным дизайном.

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

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

11. Innocent Drinks

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

Обратите внимание, что логотип, отображаемый в верхнем левом углу, простой, мультяшный и почти восхитительно детский. Это работает для Innocent Drinks (подсказка: детская невинность), и присутствие бренда поддерживается в блоге компании.

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

12. 500px

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

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

13. Уровень пикселей

Pixelgrade — это студия дизайна, которая создает потрясающие темы WordPress для всех видов творческих людей и малого бизнеса. Их страница блога отлично справляется с выделением одного из последних или популярных сообщений в блоге, а также с четким призывом к действию и коротким отрывком. Что мне больше всего нравится, так это то, что дизайн страницы на 100% соответствует их бренду и тому, как они общаются на других каналах, таких как Instagram, Facebook или Twitter. У вас не возникнет проблем с идентификацией их сообщений в блогах среди прочего контента, который вы можете встретить при прокрутке в социальных сетях.

14. BarkPost

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

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

Нам также нравится, что BarkPost привлекает внимание к своим дочерним компаниям, все из которых принадлежат портфелю брендов Bark & ​​Co. Но в то же время блог не продает собственные продукты — скорее, он служит информационным ресурсом как для родителей, так и для любителей собак.

15. Goodwill Industries International

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

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

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

16. благотворительность: вода

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

Недавно организация изменила дизайн своего блога, опубликовав длинный пост, посвященный ее 10-летнему юбилею. Используя эту возможность, чтобы поделиться своим влиянием за последнее десятилетие, благотворительная организация «Вода» сохранила упрощенный дизайн с лаконичным текстом и яркими изображениями с юбилейного мероприятия.

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

17. Johnny Cupcakes

Во избежание путаницы, Johnny Cupcakes на самом деле не делает кексы. Он делает одежду. Но компания проделала огромную работу, подчеркнув ассоциацию своего бренда с выпечкой — в ее блоге используется субдомен «кухня».

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

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

Ищете более красивый дизайн блога? Вот еще 15 отмеченных наградами примеров дизайна веб-сайтов.

Примечание редактора: этот пост был первоначально опубликован в 2013 году и обновлен для полноты.

12 красивых примеров оформления корпоративного блога, которые вдохновят вас

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

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

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

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

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

12 макетов блога, которые вдохновят вас на создание собственного

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

1. Impira

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

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

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

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

2. Atelier and Avenue 

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

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

Хотя они не так активно обновляют это, все темы соответствуют ценностям их агентства. Одним из их собственных преимуществ в помощи своим клиентам в электронной коммерции и улучшении их цифрового присутствия является то, что они избегают любых потенциальных конфликтов интересов. Рекомендуемый блог вверху «4 неприемлемых конфликта интересов «классических» консалтинговых компаний и агентств» объясняет, почему это проблема, и еще больше укрепляет аргументы в пользу их использования в качестве агентства.

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

3. Lambda School 

Не заставлять студентов платить за обучение до тех пор, пока они не найдут работу, — это бизнес-модель, которую приняли многие учебные заведения, связанные с технологиями. Lambda Schools выделяется как одна из наиболее известных, с курсами, которые помогают людям сделать карьеру в качестве веб-разработчиков или специалистов по данным.

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

 

Они называют свой блог «The Commons». Эта связь с общими ресурсами в кампусе колледжа, который функционирует как централизованное место для студенческих ресурсов, является идеальным названием для этого раздела их веб-сайта.

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

4. Решетка

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

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

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

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

5. Ноябрь Пять

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

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

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

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

6. Retrium

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

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

7. Luhhu

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

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

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

8. Dwellito

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

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

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

9. Freshpaint

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

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

10. Math4ma 

Имея докторскую степень по математике в CUNY Graduate Center и в настоящее время работает постдоком на основанной Google X, фабрике Moonshot, Тай-Даная Брэдли является опытным ученым и исследователем. В ее блоге рассказывается, над чем она работает, а также другой соответствующий контент, связанный с математикой.

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

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

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

11. Hello Sign

Нам всем приходилось подписывать документы электронной подписью, и HelloSign существует как еще одно приложение для этого.

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

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

12. Аарон Уорд

Аарон Уорд проводит обучение, помогая людям организовывать свои собственные онлайн-классы. Есть как бесплатный мастер-класс, так и платные варианты.

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