Редизайн Варвашеня.ру





Редизайн Варвашеня.ру

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

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

Пойдем с "шапки" и вниз.

1. Главное меню (может и не главное, впрочем, но меню). Когда я его вижу, каждый раз у меня возникает ассоциация с google ads. :) Очень в их стиле. Ну и забито, задавлено заголовком и социальными кнопками.
Редизайн Варвашеня.ру

2. Виджеты "поделиться" (см. скриншот вверху). Конечно, они расположены на самом видном месте в данном случае и не заметить их практически невозможно. Но, думаю, для них всегда можно найти лучшее место :) Опять таки, то что снежинка — это иконка RSS я узнал случайно, когда подвел курсор и посмотрел на УРЛ.

3. Дублирование контента (новое на сайте). На скриншоте видно, что этот процесс имеет место быть. Весь новый контент помимо центральной части повторяется зачем-то в аккордеоне в правом сайдбаре. ЗЫ: то, что это аккордеон я узнал случайно :)

4. "Зажатая" контентная часть. Слева и справа подпирают сайдбары, глаза разбегаются. Центральная часть узкая, не хватает "воздуха".

На внутренней странице пропадает правый сайдбар и читать становится приятнее.
5. Поле "Тема" считаю вообще не нужно. Скриншот. Никогда его не заполняю. Зачем оно в комментарии, если тут важна сама мысль? :)

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

Редизайн Варвашеня.ру - главная страницаРедизайн Варвашеня.ру  - внутренняя страница

Теперь пойдем точно так же сверху-вниз по макетам с комментариями.

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





В шапке мы имеем Димину физиономию, и текстовый блочок оформленный в виде табов. При клике на "кто я" отображается тот текст, что вы видите. При клике на "сайт" сменяется инфа на описание сайта.
Справа гигантский плюс. Кто угадает что там? Туда перекочевали все социальные виджеты, что до этого засоряли страницу. Нажимаем на крестик и вуаля — открывается маленькая панель с иконками:
Редизайн Варвашеня.ру

Под шапкой имеются вкладки (они же табы). Раньше это было оформлено в виде аккордеона в правом сайдбаре, но я выкинул из него "новое на сайте" и разместил по центру сразу под "шапкой".
Тут есть интересная кнопочка:
Редизайн Варвашеня.ру
При клике на "Показать еще" аяксом подгружаюстя еще 4 новости. Как альтернатива, можно перейти на полный список страниц данной категории.

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

Гипножаба отвоевала себе место и теперь смотрит на всех посетителей из-под меню.

Контентная часть достаточно стандартная. В ней есть только одна фича — рейтинг статей.
Редизайн Варвашеня.ру
Я долго думал как его обыграть: и звездочками, и прогресбаром, и просто числами. Но вот пришло на ум такое решение в виде кругового сегмента, который заполняется в соответствии со средним баллом за статью.

Внутренняя страница

Тут тоже все стандартно. Я постарался нарисовать все возможные виды разметки: заголовки H1-H6, ненумерованные списки, таблицы, фотографии, прикрепленные к статье.
Нововведения затронули только комментарии и форму комментариев.
Комментарии Димы отличаются от остальных. Во-первых они не подписываются (зачем, если автор один), а вместо подписи используется "мордологотип" :)
Редизайн Варвашеня.ру

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

Заключение

Вот вроде бы и все. Сегодня 13 января, 19:45. Ну, еще есть сутки. Пущай, подарок под елкой полежит :) Свое пожелание Диме я написал на макете, так что тут дублироваться не буду :) А так всех приглашаю к обсуждению дизайна сайта в комментарии.





Комментарии

C помощью какого модуля реализовано меню в левом сайтбаре?

В чьем сайдбаре?

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

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
Дизайн
13
01 '13 — 19:46:33