Дизайн и обустройство наших блогодомиков

Всем привет!

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

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

1. Выбор дизайна блога. 

Или, говоря языком скрапера, стиль. Блоггер предоставляет огромный ассортимент дизайнов, и сложно не потеряться в этом море. Конечно же, это прежде всего дело вкуса, но я бы советовала для начала остановиться на простом и незатейливом дизайне. Таком себе "чисто и просто". Сейчас я постараюсь привести некоторые доводы в его пользу.

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

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

-- Еще один довод относится опять к фотографиям. Простой дизайн не будет отвлекать от главного - просмотра фотографий ваших работ.

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

2. Структура блога. 

Или, говоря по-нашему, скетч :). Сколько же колонок лучше и как их лучше расположить? Думаю, многие задавались этим вопросом. С одной стороны, хочется побольше "впихнуть", с другой, где найти на все место? Про контент самих колонок я поговорю чуть ниже, а сейчас остановлюсь на их количестве и расположении.

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

Где расположить боковую колонку, справа или слева - большого значения не имеет. Мы читаем все слева направо. Если боковая колонка слева, то на нее прежде всего упадет взгляд читателя, если же она справа, то читатель сначала "увидит" пост. Вам решать, чем вы хотите прежде всего привлечь.

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

В интернете существует молчаливое соглашение о том, что профессиональный сайт должен корректно отображаться при экранном разрешении 640x480. Ну, сейчас такое разрешение уже немного устаревшее :). Так как же быть? Чтобы не очень широко и не очень узко?

Я остановила свой выбор на 1000 px для рабочей области (колонка поста и одна боковая). Посмотрев Гугл-аналитику своего сайта, я определила, что только около 4% моих читателей будут не полностью видеть правую колонку, но и они колонку с постом увидят полностью.

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

И когда с размером рабочей области определились, осталось выбрать, какой же ширины будет основная колонка и какой - боковая. Где-то 3/4 и 1/4 смотрится достаточно гармонично (можно 4/5 и 1/5). Основная колонка при этом достаточно широка, чтобы вмещать много информации, но и боковая не очень узкая (не становится растянутой колбасой, со словами, переносимыми на другую строчку на каждом слоге).

Но все-таки, не всегда то, что хочешь, может поместиться в одной колонке не растягивая ее на 12 км. Лично я для себя решила сделать 2 боковых колонки, но обе с одной стороны (ага, вот после того, как распалялась про то, что надо одну :)). Разница между двумя по бокам и двумя с одной стороы есть. В самую крайнюю я поместила, так сказать, информацию, более важную мне, чем читателям (ссылки на онлайн-классы, в которых я записана, мои любимые магазины, победы в ЧБ). Т.е., читатели, у которых экран небольшой, возможно, ее даже и не видят. Получается, она как бы и есть, но при этом не "жрет" место на мониторе, и то, что там находится, не входит в список того, что я бы хотела, чтобы мои читатели видели в первую очередь.

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

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

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

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

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

При добавлении контента на боковые панели (особенно это касается гаджетов сторонних сайтов), обращайте внимание, насколько они вписываются в дизайн вашего блога (обычно предлагается на выбор несколько вариантов гаджета). И еще следите, насколько они ВЛЕЗАЮТ в колонку. Вылезший за границу гаджет, который налезает на текст соседней колонки, смотрится ужасно и делает общий вид блога неопрятным. Или нелепо перенесенное слово. Например - "Я НА ОДНОКЛАССНИКА Х" (вот это отдельно стоящее Х у русскоязычного человека вообще вызывает ненужные ассоциации :))).

4. Навигация.

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

-- Вешайте ярлыки на ваши посты (теги). И показывайте эти ярлыки в конце поста. И обязательно надо иметь список ярлыков на панели. Старайтесь быть лаконичней и четче. Не стоит делать ярлыки "винтажная открытка". Кроме того, что эта фраза занимает кучу драгоценного места на боковой панели, такой ярлык достаточно ограничен. Лучше сделать 2: "винтаж" и "открытка". В этом случае ярлык "винтаж" можно навесить и на странички, и на объекты. И человек, которого интересует, например, винтаж, пройдя по этому ярлыку, найдет не только открытки, но и странички, и объекты. Также те, кого интересуют открытки, найдут не только винтажные открытки. Такая структура - это, в принципе, не то, чтобы общепринятое правило, это, можно сказать, мое личное мнение, сформировавшееся в результате моих путешествий по многочисленным блогам. Возможно, вам кажется удобной другая структура. Это не так уж важно. Важно то, что ярлыки НАДО иметь. Но и переусердствовать с ними тоже не стоит. Список из сотни ярлыков достаточно сложно "обработать". Этот инструмент полезен тем, что позволяет БЫСТРО найти интересующую информацию. Если список ярлыков приходится читать часами, то его смысл теряет свое значение. К сожалению, блоггер не предоставляет возможности иметь древовидный список ярлыков (будем надеяться, что это только пока :)). Организовать линейную структуру сложнее.

-- Верхнее меню. Не игнорируйте этот удобный инструмент блоггера. Там можно с успехом разместить ту информацию, которую вы бы хотели иметь "под рукой". Грамотно организованное меню может сделать ваш блог больше похожим на сайт, а не на блог :). Помните, что там можно размещать не только странички, но и ссылки на какие-то элементы блога (например, какой-то конкретный пост, или группу постов под ярлыком).

-- Поиск. Еще один очень удобный инструмент, позволяющий читателям быстро найти в вашем блоге интересующую их информацию. Существует, кстати, 2 варианта. Стандартный для блоггера, который выдает список постов в вашем же блоге. И Google Custom Search, который выдает результаты в гугле. Вот так например.

-- Архив блога. Еще один гаджет, который ну очень желательно иметь. Думаю, не стоит объяснять его назначение и ценность :).

-- Ссылки в постах. Не ленитесь давать ссылки в своих постах. Вместо того, чтобы писать "в моем предыдущем посте" дайте ссылку на этот пост. Если вам лень потратить минуту на то, чтобы дать эту ссылку, не стоит ожидатт, что читатель не поленится сделать кучу телодвижений, чтобы этот пост найти.

5. Хочется отдельно остановиться на фотографиях.

Я не буду писать про качество, про фотографирование днем и проч. Не у всех есть дорогие навороченные фотоаппараты. Не у всех есть возможность сфотографировать работу с 12 утра до 2-х часов дня (лично я в этом время в основном НЕ дома, поэтому в моем блоге все чаще и чаще появляются работы, снятые на улицах Нью-Йорка :))). Не все мастера фотошопа (и не все имеют возможность его купить). Про качественные нормативы фотографий и так все знают, про это много написано и сейчас не об этом.

Я бы хотела сделать акцент на РАЗМЕРЕ фото. Фотографии - это можно сказать САМОЕ главное, что вообще есть в нашем блоге. На них прежде всего приходят читатели посмотреть, и именно ради них мы зачастую вообще заводим блоги. Я бы настоятельно рекомендовала делать фотографии побольше. Настолько большие, насколько вам позволят ширина основной колонки с постом. Если фотография маленькая, а еще и на самом фото работа занимает только половину места, а вторая половина - красочный фон, то работу рассмотреть достаточно сложно. Кроме как открыть в новом окне. Что, согласитесь, не очень удобно. А иногда это ничего и не дает (потому, что изначально загружены фотографии маленькие).

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

Ну, и если есть какие-то детали, которые стоят внимания, выложите их отдельными фотографиями.

6. Контент колонок.

Как же много хочется туда "запихнуть", и как мало для этого места :). В 4 пункте я уже написала о тех инструментах, которые по моему мнению обязательно должны быть в колонке - архив блога, список ярлыков, поиск по блогу. Что же еще?

-- Ну, прежде всего это конечно ваша личная информация. Она делает блог более личным :). Фотография (или аватар), кто вы, откуда. Многие из нас проходят в блогосфере под кодовыми именами, но все-таки хотелось бы знать как зовут человека, в блоге которого находишься и как к нему обращаться. Если у вас ник - hahaha, и в профиле написано - "беру от жизни все", то по этой информации сложно определить с кем вообще дело имеешь :). Может, я старомодна, но мне как-то хочется к человеку по имени обратиться. Или хотя бы пол знать (что тоже не всегда прозрачно :)). Кто-то, конечно, скрывает эту информацию умышленно, каждый имеет на это право. Но кто-то, возможно, просто про это не подумал.

-- Если вам много чего есть про себя сказать, то в колонку вынести можно только "краткое содержание", а уже развернуться по полной, например, создав страницу "About myself" в меню блога. Таким образом, можно немного съэкономить место.

-- Гаджет ПЧ. Про него, наверное, никто не забывает :). Вот только имейте в виду, что сейчас этот гаджет работает только внутри блоггера. Для пользователей других сетей можно предложить подписку по email, RSS, сервис feedburner. 

-- Конфетки :) Ну, без них никуда, конечно. Картинка на боковой панели - обязательное уловие всех конфеток и никуда их не уберешь :). А вот периодически прореживать, удаляя те, которые закончились еще в прошлом веке, было бы не лишним.

-- Победы в конкурсах. Вот не знаю насколько кому-то из читателей они интересны :), но они важны хозяину блога. Особенно в самом начале. Что может сравниться с трепетом, когда выставляешь себе на боковую панель свой первый победный баннер? :) Но постепенно побед становится больше, уже нет того трепета. Потом начинаешь забывать забирать баннеры и даже проверять выиграла где-то или нет. А баннеров так много, что они превращают колонку в длинную колбасу. Вот это, мне кажется, тот момент, когда их пора переносить на отдельную страницу "Мои достижения" и разгрузить свою боковую панель :).

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

-- Гаджет - "блоги, на которые подписана". Вот я его вообще не понимаю :). Он занимает кучу места, не всегда корректно обновляет новые сообщения. Да и вообще, если читаешь больше 10 блогов - как там можно что-то понять? Зачем иметь у себя в панели огромный линейный поток блогов, который занимает ресурсы при загрузки страницы (привет читателям, у которых не безлимит!) если есть Google Reader, который больше приспособлен для чтения лент? В Ридере есть возможность рассортировать ленты по категориям, видно непрочитанные сообщения. Так же в нем можно читать ленты не только блоггера, но и ЖЖ и других сетей. И ты ды, и ты пы.

7. Для тех, кто не уснул, пройдусь еще по нескольким элементам :).

-- Музыка. Конечно, понятно желание слушать у себя с блоге музыку, или рассказать всему миру, что ты слушаешь. Но все-таки блог не то место, где надо это делать. Во-первых, если "гулять" по блогу, то после перехода на другую страницу все начинается сначала. Наличие музыки сказывается на скорости и трафике (опять привет читателям с отсутствующим безлимитом). Ну и .. Если я хочу послушать музыку - я включаю музыку. Но если я пришла посмотреть и ПОЧИТАТЬ пост, то она меня только отвлекает. Хотите поделиться тем, что вам нравится с читателями? Напишите пост со вставленным в него плеером (по умолчанию на паузе).

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

-- Реклама. Это дама раздражает, наверное, всех :). Меня лично - нет. Зарабатывать деньги (ну, или пытаться это делать) не зазорно. Независимо от того, 10 у тебя читателей или 10 тысяч. И если это не 10 всплывающих окон с голыми тетками и айфонами, а скромная область где-то в уголочке блога (не мешающая читать пост), то почему бы и нет?

ЗЫ: Все вышесказанное - не таблица умножения для дизайна блогов с единственным правильным решением. В конце концов, есть еще один немаловажный фактор: "мой блог - что хочу, то и делаю" :). Но, возможно, кому-то после прочтения статьи "захочется" как-то по-другому "сделать". А тот, кто в поиске своего дизайна, возможно, почерпнет для себя что-то полезное.

Удачи всем!

Света - izolda