Изменение дизайна на блоге onjee

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

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

Редизайн блога о веб дизайне

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

Чтобы не сеять хаос и панику в структуру статьи все нововведения буду расписывать относительно блоков.

Горизонтальное меню

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

Блок контента

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

блог про веб дизайн - контент

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

Случайные записи

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

Блог по веб дизайну - случайные посты

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

Шапка блога

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

Блог о веб дизайне - шапка

Процесс рисования шапки я описывать не буду, ибо долго, но скажу, что делалась она не только в фотошопе но еще и в 3d max – хвала создателям этих чудесных программ.

Сайдбар

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

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

Футер

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

Редизайн футера на блоге веб дизайнера

В первом блоке выводятся статьи из категории ВЕБ ДИЗАЙН, что, я думаю, логично. Во втором блоке выводятся популярные записи в виде тизеров, но уже за все время существования блога. В третьем блоке выводятся социальные кнопки, благодаря которым вы можете следить за тем, как обновляется веб дизайнерский блог. В четвертом и последнем блоке выводятся коопирайты и счетчики подписчиков, фоловеров, и посетителей.

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

Подписка и похожие записи

Помимо сайдбара, предложение о подписке выводится и в конце каждого поста.

Блог о веб дизайне - редизайн подписки

Получилось довольно круто. Хотелось бы сказать спасибо Михаилу Шакину за предоставленные скрипты.

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

Комментарии

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

Комментарии на блоге по веб дизайну

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

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

Автор ТОха

Отблагодари автора за хорошую статью:

Подпишись на обновления блога:

Комментарии: 42

  • 17.07.2011

    18:06

    onjee

    Тестовый комментарий:)

    Ответить
  • 17.07.2011

    19:00

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

    Ответить
  • 17.07.2011

    19:30

    о, я нашел подобный шаблончик как хотел.. нужно будет его испытать

    Ответить
  • 17.07.2011

    19:48

    onjee

    Спасибо :) Я рад что понравилось. Стоимость услуг зависит от фронта работ. Тебе могу и за бесплатно — смотря что ты хочешь…

    Ответить
  • 17.07.2011

    19:51

    можешь мне на мыло написать? p.s. эти комменты можно будет удалить)

    Ответить
  • 17.07.2011

    19:55

    onjee

    Да не, пусть для истории останутся :) Внукам покажешь…

    Ответить
  • 18.07.2011

    05:26

    Саш{ОК}

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

    Ответить
  • 18.07.2011

    09:31

    true-coder

    Вот это красотень! Браво!

    Ответить
  • 18.07.2011

    11:34

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

    Ответить
  • 18.07.2011

    12:46

    onjee

    САШ{ОК} — спасибо, но попрошу не обижать мою гусеницу — червем. Дизайн естественно не продам.

    GRIIGO — рад что понравился. Могу, но смотря в чем. Попробуйте мне написать здесь.

    Ответить
  • 18.07.2011

    16:55

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

    Ответить
  • 18.07.2011

    19:54

    нибуя себе!!! красотища блин))) ваще молодчик! всё таки не зря юлог твой умер (шучу!) но этот дизайн прям крутотошечка

    Ответить
  • 18.07.2011

    20:01

    кстати, я ссылочку на тебя кинул в блок «Друзья» у себя на блоге)

    Ответить
  • 18.07.2011

    20:18

    onjee

    Вася — здравствуйте. Да, вы совершенно правы. И контактная форма и карта сайты выполнены без плагинов. Думаю, что скоро напишу по шагам, как я реализовал это, но вы гораздо быстрее сможете найти в интернете :)

    rubas — я тоже думаю что не зря:) Ну ссылка с твоего блога вовсе не обязательна, я на тебя поставил в качестве признательности :)

    Ответить
  • 18.07.2011

    22:08

    adiodas

    Дизайн блога — офигенный! Тоже очень хочу научиться создавать красивые темы

    Ответить
  • 18.07.2011

    22:58

    onjee

    ADIODAS — рад, что вам понравилось! А в чем проблема делать такие же и даже лучше? Изучить фотошоп сейчас вообще не проблема…

    Ответить
  • 19.07.2011

    09:39

    Ммм… Ну что тут сказать?!) От всей души поздравляю с шикарным дизайном. Да и реализация отличная. Не удержался и протестировал твой блог через gtmetrix. Результаты впечатляют. Можно еще добавить кэш браузера в htaccess, тогда все будет летать как пуля.

    P.S. Завидую белой завистью ;)

    Ответить
  • 19.07.2011

    11:20

    onjee

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

    Ответить
  • 19.07.2011

    12:29

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

    Ответить
  • 19.07.2011

    12:32

    onjee

    BORISDORIS — ды как бы я в курсе. Я чуть позже напишу статью про оптимизацию изображений в фотошопе.

    А какие изображения ты имеешь ввиду? Если в посте, то я ужал максимально…  Если про шапку и кнопки — то да, их еще не оптимизировал…

    Ответить
  • 19.07.2011

    12:35

    Антон, постоянные. Те, которые подгружаются шаблоном

    Ответить
  • 19.07.2011

    12:37

    onjee

    BORISDORIS — а, ну их еще  не оптимизировал ;) Чуть позже. Сейчас много мелочей, более важных…

    Ответить
  • 19.07.2011

    12:39

    Да, конечно, все сделаешь. Главное есть приличный скелет, я мясо нарастет :)

    Ответить
  • 19.07.2011

    12:48

    onjee

    BORISDORIS надо еще разобраться с seo. А то шаблон то красивый, но толку от него, если люди его не увидят:)

    Ответить
  • 19.07.2011

    13:13

    блог стал супер, ты огромный молодец, постарался на славу!!!

    Ответить
  • 19.07.2011

    13:38

    onjee

    ДАНИИЛ — спасибо. Да врмени убил много.  А почему ссылка в твоем профиле не работает?

    Ответить
  • 22.07.2011

    11:18

    всмысле не работает? ссылка на http://blog-for-life.ru/ ? ты вроде бы первый, кто такое говорит)

    Ответить
  • 22.07.2011

    12:06

    onjee

    ДАНИИЛ — добрый день.  Не работает — всмысле страница при загрузке выдает ошибку. Я пробовал с разных компьютеров — ошибка одна и та же.

    http://imglink.ru/show-image.php?id=9e92982702972914c8a949493d96b8dc

    Ответить
  • 22.07.2011

    13:08

    попробуй с другого браузера может, у многих норм всё, странно вообще

    Ответить
  • 22.07.2011

    14:02

    смотри, что мне в поддержке на этот счёт:
    shneider-host (14:00:51 22/07/2011)
    я думаю тут дело в том, что еще домен недопривязался до конца

    Ответить
  • 22.07.2011

    14:19

    onjee

    ДАНИИЛ — с других браузеров то же самое. Когда я  регестрировал домен, у меня была похожая ситуация (ну я имею  в виду, что сайт тоже не грузился). Прописал ДНС сервера от гугла — все помогло….  

    Ответить
  • 23.07.2011

    13:22

    а зачем ещё днс от гугла прописывать? мне в хостинг провайдер ответил, что это прекрепление домена ещё идёт, оно мол до 72-х часов прет, у каждого оператора интернета мол отдельно, хз может врёт, может нет, ну дня через 4 я тебе напишу, щёлкнишь тогда посмотрим загрузит или нет, хорошо?

    Ответить
  • 04.08.2011

    15:34

    Класс!
    Дух захватывает! Когда-нибудь, обязательно обращусь! Особенно шапка, то что в конце поста, и футер !

    Ответить
  • 05.08.2011

    14:14

    Тяп-ляп

    @Влад: Спасибо.. Рад что понравилось) Я старался!

    Ответить
  • 05.08.2011

    20:56

    У меня несколько иные проблемы… мой сайт сделан на движке ворд-пресс hippoguide.ru, и неожиданно возникла проблема с кнопками социалок… не отображаются и все тут! Ни контакт, ни гугл плюсзон, хотя код везде поставлен.
    Как вообще правильно поставить кнопки социалок ( например «мне нравится» и «поделиться новостью»)?

    Если создадите отдельную тему об этом, думаю получите доп. трафик)))

    Ответить
  • 05.08.2011

    22:05

    onjee

    @Hipp: http://shakin.ru/other/social-buttons.html — вот хорошая статья на эту тему…

    На счет того, что не отображаются кнопки — закосячили где то с CSS

    Ответить
  • 09.10.2011

    16:16

    Очень понравился диз, светлый и приятный, одним словом супер. Я смотрю вам нравятся текстурки?)

    Кстати, заметила что трекбэк не оформлен. Прочитала и другие посты, впечатления типа: Ооо, Вау! Вообщем попробую сделать в фотошопе))) 

    Успехов.

    Ответить
  • 10.10.2011

    09:25

    Тяп-ляп

    @Инканта: Спасибо) Но я дизайн скоро видоизменю… Рад что понравились статьи…

    Ответить
  • 16.10.2011

    13:30

    Светозар

    Очень интересная задумка! Мне понравился особенно футер, да и идея размещения логотипа тоже очень интересная !

    Ответить
  • 01.05.2012

    12:19

    Я думаю, что шапку нужно как-то подчеркнуть… Ну не видно ее! 

    Ответить
  • 01.05.2012

    12:20

    Поверьте мне! Не даром же мне уже 8 год в художке мозг е*ут!

    Ответить

Трэкбэк

  1. РСН

Комментирование: