Анастасия Мартынова
Безгрешный маркетинг. Первая книга про inbound-продвижение и бескорыстную любовь к клиентам

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

Рубрики в сайдбаре и под первым экраном блога – одни из самых популярных вариантов размещения. Можете использовать один из них или придумать что-то свое. Главное – на этапе прототипа используйте слова подлиннее, тогда даже самые длинные названия рубрик не испортят внешний вид вашего блога. О том, как правильно называть рубрики, я расскажу в Грехе № 2.

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

Счетчик страниц (пагинация). Он должен быть внизу на каждой странице с каталогом статей. Главная страница – первая, на ней размещайте 6–10 текстов. Остальные материалы уйдут на вторую и следующие страницы блога.

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

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

Структура страницы рубрики

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

Стандартная структура этой страницы включает:

– шапку блога;

– заголовок с названием рубрики (дальше вы узнаете, как его правильно выбрать);

– небольшой текст-описание;

– каталог статей;

– сайдбар или его элементы;

– счетчик страниц.

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

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

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

Структура страницы статьи

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

– главной картинки;

– текста с картинками и подзаголовками;

– элементов сайдбара;

– комментариев;

– формы подписки;

– кнопок шеринга (поделиться статьей в соцсетях).

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

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

Длина строки должна занимать 60–70 % ширины страницы и вмещать 8-10 слов.

Расстояние между строчками (интерлиньяж) должно быть приятно глазу. Хорошее соотношение кегля и интерлиньяжа – 1 к 1,2–1,4. Не обязательно так углубляться, но если буква «у» притесняет букву, стоящую ниже, то интерлиньяж точно стоит увеличить.

Отступы между абзацами должны быть не меньше половины или целой строки основного текста.

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

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

– заголовок;

– подзаголовок;

– списки;

– цитаты;

– фактоиды;

– примечания^[2].

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

Чтобы дизайнер не забыл про эти элементы, выделите их при создании прототипа.

Создайте эскиз вашего первого прототипа

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

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

Вспомнили? Запишите их в таблицу.

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

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

Создаем прототип блога

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

Пришло время создавать собственный блог.

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

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

На следующих страницах вы можете нарисовать свои первые прототипы:

Прототип главной страницы блога

Прототип страницы рубрики блога

Прототип страницы статьи блога

Как передавать макет дизайнеру?

Прототипы – это не конечный вариант. Добавить красоты этим наброскам и превратить их в полноценные макеты блога должен дизайнер.

Если у вас в компании уже есть дизайнер, то задача легче некуда: объясните ему вашу задумку, расскажите, какие у блога цели и как он будет работать (вспоминаем про структуру «главная → рубрика → текст» и сценарии поведения пользователей). Напомните о корпоративных цветах и обратите внимание на элементы внутри текста (заголовок, подзаголовок и так далее). На работу дайте ему 7–10 дней. Если других проектов у него нет, то этого времени будет предостаточно.

Если в компании дизайнера нет, то найдите его на бирже фрилансеров – FL.ru, Freelance.ru или любой другой. Заплатить такому «сотруднику» придется только один раз – за конечный результат (никаких оформлений по ТК РФ и ежемесячных выплат).

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

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

Когда определитесь с исполнителем, составьте для него техническое задание (ТЗ). Что в нем должно быть?

– Расскажите о вашей компании. Чем вы занимаетесь? Кто ваша целевая аудитория? Как вы работаете?

– Опишите проект. Зачем вам нужен блог? Кто его будет читать? Как он будет работать, и как его будут просматривать пользователи?

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

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

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

– Обсудите формат, в котором дизайнер передаст вам макет.

Работать на фрилансе могут не только дизайнеры, но и технические сотрудники – верстальщики и программисты. Именно они понадобятся вам, когда макет блога будет готов.