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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

– заголовок;

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

– списки;

– цитаты;

– фактоиды;

– примечания.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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