Как сделать дизайн блога и не обосраться

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

Как сделать дизайн блога и не обосраться

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

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

Кроме того, стоит заметить, что эта статья не попытка кого-либо «обосрать». Я абсолютно ровно отношусь к авторам упомянутых ниже блогов.

Разграничение понятий

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

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

Вот 3 ошибки, которые стоит избегать любой ценой.

Засилье псевдо-полезного контента.

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

Давайте посмотрим скриншоты.

optimakomp

optimakomp.ru

devaka

devaka.ru

video.4ra

video.4ra.biz

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

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

Несколько простых рекомендаций

  1. Избавьтесь от лишней информации. Пользователи до бесконечности ленивы. Никто не обратит внимание на ваш сайдбар высотой 3 000 px.
  2. Правильно форматируйте контент. Заголовки, списки, цитаты, изображения — отлично разбавят и дополнят текст.
  3. Расставьте приоритеты. Основной контент нужно сделать более заметным и привлекательным, а второстепенный — отодвинуть на задний план.

Обман пользователей

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

Давайте посмотрим скриншоты.

vovka

vovka.su

isif-life

isif-life.ru

vkusno-i-prosto

vkusno-i-prosto.ru

С первого взгляда — все отлично. Но это не так. Из 3 кнопок на первом скриншоте кликабельна только 1. Из 6 ссылок на втором — кликабельны 2. Смешались в кучу кони, люди — отличная характеристика для третьего скриншота.

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

Несколько простых рекомендаций

  1. Не делайте так никогда

Переизбыток рекламных площадей

Я ненавижу термин — продажный блоггер. Тот кто его придумал безнадежный #&$дюк. Но ведь все должно быть в меру, не так ли?

Давайте посмотрим скриншоты.

terehoff

terehoff.com

rutwitter

rutwitter.com

isif-life

isif-life.ru

В первом случае каждая страница блога содержит 12 сверкающих баннеров, во втором всего 4 (в первом экране), а в третьем их около 14, я сбился при подсчете. Неужели это единственный способ разбогатеть?

Несколько простых рекомендаций

  1. Попробуйте продать 1 баннер за 50$, а не 5 по 10. Это не только увеличит конверсию для конкретного рекламодателя, но и сделает дизайн намного чище.
  2. Импотенция мозга — плохое качество. Комбинируйте разные способы рекламы.

Бонус. Уродская косметика

Безусловно у всех людей разные вкусы. И я никого не осуждаю. Но б#9.

Давайте посмотрим скриншоты.

liter-rm

liter-rm.ru

int-net-partner

int-net-partner.ru

palap

palap.ru

Трудно описать словами эмоции от таких говно-дизайнов. Гораздо лучше с этим справляется лицо вот этого пацана.

Помогите мне!

И ладно бы выглядело круто, как у Terehoff или Seo-aspirant. Так нет же.

Несколько простых рекомендаций

  1. Попробуйте полистать CSS галереи, Dribbble или Behance, чтобы определиться с текущими трендами.
  2. Найдите хорошего дизайнера и попросите его совет.
  3. Если все еще хочется — найдите хорошего иллюстратора, но только после консультации с дизайнером.

В заключение

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

Исходите из реальных потребностей посетителей и тогда все будет хорошо :)

Буду благодарен за ретвит этой записи.

Антон 28 января 2015 / 08:41

Да дорого баннеры не покупают, вот и приходится ими все завешивать(

Ответить
    Антон 28 января 2015 / 10:56

    Значит хреново продают.

    Ответить
Александра Вовк 28 января 2015 / 11:15

Антон, если в этом самом рейтинге популярных блогов копнуть значительно глубже — рыдать хочется…

Ответить
Иван 28 января 2015 / 11:24

Спасибо за статью! А на мой сайт глянешь? Интересно мнение профессионала

Ответить
Дмитрий 28 января 2015 / 11:34

Всё чётко, сам наблюдал вышеперечисленные сайты и охреневал, а нафига вообще делать такие дизайны? А ведь они к тому же ещё и дорогущие!

Ответить
Сергей 28 января 2015 / 14:07

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

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

Ответить
    Антон 28 января 2015 / 14:44

    По-моему я на личности не переходил и свою позицию в начале статьи обозначил. К Александру у меня никаких вопросов небыло и нет.

    Ответить
Александр 01 февраля 2015 / 12:00

Привет, Антон! У меня такой вопрос. Как ты сделал кнопки соц. сетей сверху и снизу статьи. Хотелось бы поточнее узнать как ты их выводишь без скрипта. Расскажи пожалуйста!

Ответить
    Антон 01 февраля 2015 / 22:30

    Привет Александр. Кнопки внизу — сервис, кнопки вверху — скрипт.

    Ответить
Алексей 02 февраля 2015 / 14:53

Привет, извини конечно, но этот дизайн твоего блога очень плох…
Нашел я твой блог случайно, но с того как я его увидел, я просто был в удивлении… Дизайн был очень хорош

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

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

Шапка стала хуже (но это наверное дело привычки…)
Было более привычно когда меню было непосредственно в «контентной» части, когда к каждому посту было описание, а не просто картинки как сейчас

Ответить
    Антон 02 февраля 2015 / 17:33

    Привет Алексей, прости что разочаровал.

    Смею предположить, что «унылость» моего дизайна — исключительно субъективное мнение, которое вряд ли основывается на какой-либо статистике. По поводу размера шрифта — я подумаю, спасибо. По поводу анонсов — описание явно лишнее и особо погоды не делало. При разработке дизайна я, в первую очередь, учитывал пользовательский опыт и «юзабилити». Если ты приглядишься, заметишь много новых фишек, которые упрощают жизнь, как простым читателям, так и более активным юзерам.

    Ответить
      Алексей 02 февраля 2015 / 20:23

      Ты не думай что я пытаюсь тут всё «обгадить»:), нет, я просто высказываю своё мнение.

      А вот размер шрифта, это да, действительно не очень комфортно читать.

      Ну и почаще пиши новые статьи:) Всегда интересно почитать, даже если тема не интересует:)

      Ответить
        Антон 02 февраля 2015 / 22:01

        Твое мнение очень важно для меня, спасибо.

Владимир Вовк 14 февраля 2015 / 22:47

Зря затронули блог Борисова, теперь Вас будут ненавидеть все Бабушки стран СНГ :)

Ответить
Владимир Вовк 14 февраля 2015 / 23:06

Хех, почитал комменты. Похоже бабушки и Борисов — это уже аксиома

Ответить
Анастасия Шарапова 17 февраля 2015 / 11:53

Спасибо за статью!!! Так хвалят дизайн, который делают ребята из isif-life.ru. Такое впечатление, что лучше просто нет и не бывает. А сколько он стоит?! Уму не постижимо… Я полностью с вами согласна! Мне понравилась ваша статья!

Ответить
Ivanovskij 26 февраля 2015 / 17:43

Здравствуйте Антон!
Было бы круто увидеть вашу подборку о классных дизайнах блогов в сети. А то 2 блога в сравнении очень мало :(

Ответить
Алексей Щукин 21 мая 2015 / 13:57

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

Ответить
    Антон 06 июня 2015 / 14:34

    Думаю, что от 14 до 18

    Ответить
mikhail 07 июля 2015 / 14:18

Тем, кто сильно начинающий — лучше вообще купить какой-нибудь шаблон для wp за 40 баксов на темфоресте, и будет счастье.

Ответить
Николай 20 июля 2015 / 17:20

Но а дизайн твоего блога, судя по всему, — образцовый… )))

Ответить
    Антон 21 июля 2015 / 12:26

    Судя по всему — да!

    Ответить
Васет 07 августа 2015 / 12:49

int-net-partner.ru — в целом не плохой блог, и рекламы мало, и картинка в шапке со смыслом:)

Ответить
Иван 14 августа 2015 / 20:40

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

Ответить
Иван 14 августа 2015 / 20:42

Совсем забыл дать ссылку в предыдущем посте: goaltender.ru

Ответить
Евгенич 18 сентября 2015 / 13:51

«всё что ни делается, всё ради пользователя» ну так вот «ЭТО» клиент и хочет) а вообще обидно, когда делаешь сайт по всем правилам, в тренде…а клиент, «нет, хочу воооот так» и на выходе получается такое, что в портфолио и под пистолетом не поставишь

Ответить
    Антон 18 сентября 2015 / 20:27

    Все приходит с опытом.

    Ответить