Blogging Tips / Дизайн блога / Part 1

by - September 12, 2016

"Встречают по одёжке..." Всем нам знакомая истина, которая применима во всех сферах жизни. Это также относится и к блогу. Заходя на страничку, вы в первую очередь обращаете внимание на её оформление. И если вас "зацепило", то дальше мы переходим к его содержанию и решаем: оставаться или нет. Поэтому для меня всегда было важным сделать блог максимально приятным для глаз.


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

Есть несколько моментов, на которые (по моему мнению) стоит обращать большее внимание:

1. цвет блога 
2. величина картинок 
3. расположение блоков

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

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


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

Эту проблему можно решить так:
  1. Заходим Шаблон > Настроить > Дополнительно > Добавить CSS
  2. В находящемся сверху справа окошке прописываем следующее:

    .post-body img {
     height: auto; /*высота, обязательное значение*/
     width: 715px; /*ширина, любое нужное значение, можно в %*/
     }



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

1. название блога ("шапка" вверху страницы, которая производит первое и главное впечатление)
2. информация о вас (обычно располагается справа или слева от основного контента)
3. ссылки на ваши социальные сети
4. возможность подписаться на вас одним кликом, т.е. как минимум показать "Постоянных подписчиков" (очень часто данная возможность отсутствует, к сожалению)
5. навигация по блогу и основным категориям (может и отсутствовать, но всё-таки это позволяет найти людям ту информацию, которую они хотят почитать)

Во всём остальном - делайте всё на ваш вкус, ведь именно это и сделает ваш проект уникальным :)  Главное - любите то, что делаете!

Напишите, оказалась ли информация вам полезной. Есть ли у вас какие-то вопросы в плане дизайна? Особенно в вопросах кода. Буду рада на все вопросы ответить :)

Всем всего хорошего и до скорой встречи!

You May Also Like

9 коммент.

  1. О ширине картинок - не знала :) А как они в пост добавляются - в исходном размере или не имеет значения, все-равно растянутся?
    Очень полезно, жду продолжения) особенно про коды)

    ReplyDelete
    Replies
    1. Картинки добавляются как обычно и применяется "Исходный размер", а уже в посте они отображаются "строго" в той ширине, что ты и задала :) И лучше ставить исходный размер, потому что тогда картинка будет лучшего качества и не будет, скажем так, расплывчатой.

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

    ReplyDelete
  3. Мне очень нравится простой и чистый (если можно так сказать) дизайн блога. Без лишних картинок и ненужных блоков. Спасибо вам за полезную информацию, особенно про подписки в один клик. Нужно настроить их в ближайшее время в своем блоге :)

    ReplyDelete
  4. На счет фона полностью согласна, приятней читать черный текст на белом и оформление блога больше нравится в минималистическом стиле) про коды было бы интересно почитать да и про профессию веб-дизайнера тоже интересно узнать:)
    https://twinklelittlstar.wordpress.com/

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

    ReplyDelete
  6. Сразу захотелось наконец-то над дизайном поработать)
    Было бы интересно прочитать поподробнее про социальные кнопки (как сделать красивые) и прочее

    ♥♥♥Мой блог♥♥♥

    ReplyDelete
  7. я обязательно постараюсь что-нибудь написать по этому вопросу :)

    ReplyDelete
  8. Присоединяюсь к вопросу))) потому что я раньше тоже скачивала шаблон для блога типа того, что у тебя. Но когда устанавливала, не могла настроить никак социальные сети,картинки вертикальные были ужасного качества и прочие минусы ;(((

    ReplyDelete