Оформление блога. Как настроить шаблон? (часть 1)

Приступая к оформлению своего блога необходимо выделить две стадии: художественное оформление и функциональное оформление.

Художественное - это то, как блог будет выглядеть, а функциональное - это то, какие разделы и функциональные элементы он будет иметь.

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

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



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

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

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

Что касается сочетания цветов и шрифтов текста, то на этот счет существует целая наука, что следует и чего не следует делать.

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

Любой блог должен иметь зону контента (содержания) и зону служебных элементов.

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

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

Таким образом хорошим компромиссом будет, если вы расположите ленту контента посередине, а слева и/или справа сделаете сайдбары.

Сколько колонок должно быть у блога?

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

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

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

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

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

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

Теперь давайте подробнее рассмотрим зону служебных элементов. Что относится к служебным элементам?

Во-первых, это страницы блога. Чем отличаются страницы от ленты контента?

Контент состоит из сообщений (постов), которые постоянно обновляются: старые уходят в архив, новые появляются в ленте новостей. Таким образом, сообщения - это динамический контент блога.

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

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

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

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

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

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

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

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

Нижний сайдбар называется нижним колонтитулом.

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

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

Итак, начали:

1.  Заходим в аккаунт Blogger и кликаем на оранжевый значок рядом с названием нашего блога: Создать новое сообщение.

2. Когда форма для создания нового сообщения открылась, создаем тестовое сообщение. Пишем заголовок: Тестовое сообщение, далее в поле текста - Тестовое сообщение. И создаем тестовый ярлык (метку). Напишите какое-нибудь ключевое слово к вашей теме.

Затем кликните: Публикация.

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

3.  Мы снова попадаем в аккаунт Blogger. Кликаем на уже знакомый нам значок рядом с заголовком нашего блога и в открывшемся меню выбираем: Шаблон.

4. На открывшейся вкладке кликаем на оранжевую кнопку: Настроить.

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

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

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

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

Итак, выбираем пока любой шаблон и переходим на вкладку: Дизайн в левом меню.

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

Рядом даны варианты нижнего колонтитула.

 7.  Выбираем нужный нам тип дизайна и колонтитула, кликаем в правом верхнем углу на оранжевую кнопку: Применить к блогу и затем переходим по ссылке: Назад к Blogger.

 8. Попав снова в аккаунт Blogger, переходим по ссылке: Дизайн в левом меню и оказываемся на макете дизайна нашего блога. Здесь нам надо выполнить следующие действия.

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

В открывшейся вкладке надо выбрать гаджет: Текст и кликнуть на плюсик около него.

Далее мы создаем тестовый гаджет точно так же, как мы создавали тестовое сообщение, и кликаем: Сохранить.

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

 9.  Выбираем в левом меню: Шаблон и возвращаемся в настройки шаблона.

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

Возможности настроек могут быть разными в зависимости от выбранного шаблона. Давайте рассмотрим наиболее общие для всех шаблонов.

 10.  Выбрав шаблон, устанавливаем регулировку ширины.

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

 11.  Установив регулировку ширины, начинаем заниматься внешним фоном блога. Кликаем сначала на: Фон, а затем на значок у: Фоновое изображение.

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

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

Если вы будете загружать собственный фон, то имейте в виду, что размер фонового изображения должен быть не больше 300 КБ и 1800 пикселей в ширину и 1600 пикселей в высоту.

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

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

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

Рядом с Фоновым изображением вы можете видеть еще несколько палитр: Основной цвет темы и Предлагаемые темы.

Палитра Основной цвет темы - это то, что предлагают вам дизайнеры Google в соответствии с тем шаблоном и фоновым изображением, которые вы выбрали.

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

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

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

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

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

Ниже окошечка: Обзор появится ваша картинка и слева четыре вида палитр: светлая, средняя, темная и полная.

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

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

 12. Загрузив фоновое изображение, переходим по ссылке: Дополнительно в левом меню.

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

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

Если же вы решили использовать свою собственную палитру, то надо делать следующее.

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

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

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

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

Для заголовков вы можете выбрать: Arial, Georgia, Times New Roman, Trebuchet, Verdana, Impact, Courier

Для текста лучшими шрифтами для восприятия считаются: Arial  и Verdana.

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

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

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

И еще в этой части мы рассмотрим с вами вопрос логотипа блога, или, как его называют шапки.

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

Лого делается шириной в ширину блога, а высотой не более 250 пикселей.

Лого лучше всего подготовить в фотошопе. У кого нет фотошопа, можете воспользоваться моей статьей:

"Как создать картинку с текстом. Бесплатная программа для создания картинок Paint"

Есть еще один неплохой вариант. Компания Adobe предлагает к бесплатному использованию версию программы фотошоп: PhSp_CS2.

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

Скачать эту программу вы можете здесь.

Серийный номер для ее активации: 1045-1412-5685-1654-6343-1431

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

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

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

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

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


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

Ваше имя: * Ваш e-mail: * В тренинге участвуют: слушателей

Забрать статью на свою страницу: