Встречайте новый дизайн (версия 1.0)

Здравствуйте, дорогие друзья.

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

Данный пост будет коротким, сейчас я покажу то, что было до, и что стало после. Это будет некое сравнение старой и новой версии дизайна. Скажу сразу, что данное оформление еще не в конечном варианте, именно поэтому в названии статьи в скобках указано "версия 1.0".

Если дизайн у вас не обновился, то почистите кэш вашего браузера! Если не сработало, то и КУКИ придется почистить. Если же не хотите этого делать, то просто зайдите с другого браузера.

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

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

Хочу заметить, что дизайн делался не со своего старого шаблона. С ним получилось бы больше мороки. Сейчас стоит совершено новый шаблон (платный), стоимость которого 3500 рублей на момент его покупки. Обязательно сделаю о нем обзор. Есть за что похвалить, но и поругать имеется за что. Намучился с ним достаточно, как от верстки, так и до самого дизайна.

Итак, давайте теперь рассмотрим скриншоты дизайнов ДО и ПОСЛЕ.

Главная страница

Было:

Стало:

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

Сама же шапка, как и планировалось, стала мизерной. Это плюс.

Также новой "изюминкой" в дизайне стало добавление иконок Fontawesome к каждому элементу сайта (пункты в меню, рубриках, возле заголовков верстки - похожие записи, комментарии). Они еще не в полном своем составе, но это дело лишь времени, скоро все добавлю.

к содержанию ↑

Было:

Стало:

к содержанию ↑

Страница записи

Было:

Стало:

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

к содержанию ↑

После текста

Было:

Рейтинг был не таким. Тут я просто уже экспериментировал и он получился таким. Но суть особо это не меняет.

Стало:

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

Очень лаконично оформился блок с рейтингом и соц. кнопками. Это мне очень нравится.

к содержанию ↑

Комментарии

Было:

Стало:

Также изменилась и форма комментариев. Дизайн показывать не буду, посмотрите сами.

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

к содержанию ↑

Проблемы, которые возникли

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

к содержанию ↑

Заголовки и содержание

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

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

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

к содержанию ↑

Рамки к изображениям

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

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

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

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

к содержанию ↑

Функционал

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

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

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

Были заменены некоторые коды на плагины и работа стала более приятной. Незачем прописывать какие-то коды и шорт-коды через текстовый редактор записи. Теперь это делается кнопками.

к содержанию ↑

Заключение

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

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

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

До скорой, ребята.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 22
  • Дизайн понравился. Просто и со вкусом.

    • Благодарю) Приятно слышать, что не только мне нравится)

      • Константин если не секрет какие технологии были использованы,,,

        • Не секрет, знать бы конкретно о чем вы спрашиваете.

  • Мне понравилась новая одёжка для блога! Да и старый шаблон тоже был хорош.
    Шапка минимальна - тоже нравится. Немного скучно в сайдбаре. Можно туда немного виджетов с полезностями добавить.

    • Да, сайдбар пока неполный. Этот как раз входит в доработки дизайна. Нужно оформить блоки, как доделаю, так сразу и размещу. Спасибо за отзыв)

  • мне понравился
    с ув.Хмелёв

  • Не заметил разницы, видимо не сильно обращал внимание на оформление :|

    • В статье даны сравнительные скриншоты старого и нового оформления.

  • Ну что сказать, на первый взгляд различия не сильно бросаются в глаза. А видно сразу становится после нескольких переходов по верхнему меню. Это большой плюс, то что рубрики оказались сверху, это очень удобно! Место в сайтбаре всегда не хватает и то, что теперь там освободилось столько места тоже большой плюс. Дизайн действительно нужно смотреть после чистки куков, все встает на свои места. А главное все летает и ориентироваться на блоге очень удобно. Адаптация на высоте. Респект Константин, так держать. Желаю твоему блогу успехов и хорошего продвижения. А с мелочами справишься. )

    • Да, различия бросаются не сильно, и это факт, но если смотреть в целом, то дизайн преобразился. Если смотреть нас скриншоты, то различий практически и нет, просто все привелось в порядочный вид, убралось все лишнее. Сильные изменения коснулись именно шапки.

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

  • Очень рад за вас, Константин!

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

    Успехов, жду новых дополнений и материалов.

    До связи!

    • Спасибо за оценку) Будем работать дальше. Сейчас уже нацелен публиковать новые материалы.

  • В целом понравилось.На мой взгляд при следующей модернизации сайта надо фон сделать с какой нибудь информацией.

    • Можно подробнее про фон с информацией?

  • Константин, все очень понравилось, блог стал интереснее, особенно понравилось статичное меню блога! Буду наблюдать далее за ходом шлифовки блога! Кстати по загрузке блога посмотрел , загрузка составила 2.93 сек... Ну думаю это все подправится и настроится!

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

  • Очень круто, в современном стиле

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

    • Да, обязательно сделаю в ближайшее время.

  • Как по мне, так оба варианта хорошие были.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *