Новый дизайн на MFB

147

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

Что нового?

Да практически все. От прошлой темы остались лишь мои личные разработки, которые мало претерпели видоизменений и фигурируют в том же обличии, что и прежде. Из таких можно отметить форму обратной связи (по-прежнему в левом нижнем углу), блок поделиться в соцсети(в конце каждой статьи), формы подписки(под статьей и левый блок при просмотре записи), и пожалуй всё. А теперь рассмотрим более детально все остальные фичи. Хотелось бы услышать мнения всех по поводу новой темы, так что милости прошу в комментарии ;)

Дизайн до и после

Фон

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

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

Это, пожалуй, самый главный сок, ради которого был изменен дизайн. Идея прошлого дизайна была уникальной, так как рисовал её из головы на бумаге, потом олицетворял «своё добро» в редакторе и переносил в html. Но в итоге мне этот дизайн очень приелся и показался скучным. Кроме того, всё казалось каким-то детским шаблоном, хотелось серьезности и строгости. Не знаю, удалось ли мне её достигнуть с точки зрения читателя, но я результатом доволен.

Шапка

Итак, в верхней части у нас шапка с удобным навигационным меню. Наведите на меню «Автор» или «Услуги», и слева направо всплывает изображение, характеризующее данный раздел. В верхней правой части расположено меню с моими услугами и основными страницами сайта. Ниже можно воспользоваться поиском по сайту и ссылки на RSS-ленту и в социальную сеть Google+. При наведении на эти значки можно увидеть интересный анимационный эффект, попробуйте сами(не работает в IE).

Основная часть

Верхний блок отображает три последних записи из дневника, которые сопровождаются изображением. За ним следует блок, который выводит записи по определенным рубрикам, что считаю очень удобным. Таким образом, пользователь может сам выбирать рубрику и понравившуюся новость. Следующий блок – это текст авторского приветствия и лента с официального аккаунта MFB в Twitter. Ну а нижний блок «здесь еще и общаются» выводит последние комментарии на сайте, которые помещены в удобную навигационную карусель.

Подвал

Нижняя часть получилась очень строгой и обычной. Не хочется сюда лепить никаких фотографий и никаких градиентов, всё в черном(моём любимом) цвете. Черный, красный и белый – по-моему, это стиль. Хотя это мнение субъективное, но на этом фоне расположились все рубрики, список услуг и блок About.

Кнопка наверх

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

Отдельная страница

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

Панель вкладок

Вывод комментариев

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

Эффект вывода комментариев

По поводу оригинальности

Уж больно смотреть в сети на повторяющиеся блоги. Мне очень грустно от того, что люди повторяются один за другим. Я не спорю, что мой дизайн тоже похож на «один из» очень известных и много посещаемых проектов(не буду говорить какой), но я его создавал своими руками. Он был реализован так, потому что мне действительно это нравится. По моему убеждению, именно таким и должен быть дизайн, строгим, функциональным и понятным! Что же делают другие блоггеры:

Клоны дизайна

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

Друзья, хватит плодить пародии, ищите свои идеи, и не позволяйте другим губить ваш блог!



не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

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

связаться

Вместе с этим советую почитать:

Оставьте комментарий

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

комментариев: 1
  • Наталья Stoprocentov

    При работе с сайтами всегда обращаю внимание на внешнее оформление. Этот сайт отвечает всем моим требованиям: изысканный внешне, функциональность рубрик — на высшем уровне + всегда в курсе новостей!

    Ответить
показать все


Как вам новый дизайн сайта?

Курс Бери и Зарабатывай!

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

Узнать больше!

Курс по соц. сетям