css-live.ru

[Verder]

В этой теме Максим попросил помощи по дизайну своего блога - http://forum.htmlbook.ru/index.php?showtopic=32217

Мы много с ним "воевали", но человек он хороший, как и профессионал очень высокого уровня.

Решил помочь.

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

Все строго, лаконично, любимый оранжевый также используется

http://freeway-design.ru/files/css-live/main.png

Прошу понять, что макет сделан очень быстро и, повторяю, является черновиком.

Update (контрастный вариант):

Update - http://freeway-design.ru/files/css-live/main2.png

Edited January 29, 2012 by Verder

[Svatov]

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

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

Edited January 29, 2012 by Svatov

[lexxcode]

Прошу понять, что макет сделан очень быстро и, повторяю, является черновиком.

хах, та чтоб у дизайнеров финальные версии, хотя бы такие были)))

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

[Verder]

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

Раскидать блоки в соответствии с традиционным блогом не проблема.

[Shugich]

Что-то в этом есть, но ещё нужно допиливать.

Для начала: i.divstudio.ru/_ph/1/14230670.png

Ещё чуть позже напишу.

[Verder]

Что-то в этом есть, но ещё нужно допиливать.

Для начала: i.divstudio.ru/_ph/1/14230670.png

Ещё чуть позже напишу.

...Прошу понять, что макет сделан очень быстро и, повторяю, является черновиком...

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

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

Если я сейчас сдвину элементы по твоим рулерам, то макет посыпется.

Edited January 29, 2012 by Verder

[sytrus]

Хороший дизайн, мне нравится, только диаграмма внизу не в тему, имхо.

А если уж совсем придираться, то сайдбар я бы справа разместил, а не слева + информативности бы в него добавил, присущей блогам.

[psywalker]

Verder, Спасибо, дружище.

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

Поэтому от себя добавлю вопрос:

Братва, отпишите пожалуйста от лица обычных пользователей, было бы вам приятно заходить на такой блог и читать на нём инфу?

p.s. приветствуется жёсткая критика, по существу.

[buddah]

Я бы оставил шапку со старого дизайна (или допилил её), и соединил с этим дизайном. А то шапка сейчас ассоциируется с банком или консалтинговой компанией. Слишком серьезно, что-ли. Мне игривости не хватает)) А бложик ведь должен быть уютным.

[psywalker]

Я бы оставил шапку со старого дизайна (или допилил её), и соединил с этим дизайном. А то шапка сейчас ассоциируется с банком или консалтинговой компанией. Слишком серьезно, что-ли. Мне игривости не хватает)) А бложик ведь должен быть уютным.

Да, я вот тоже так подумал, кстати)

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

А вот это хреново(

Понравилось, что главная навигация на своей, отдельной строке. Мечтал об этом в новом дизе

[Shugich]

Исходя из этой моей фразы, думаю, можно понять, что «допиливание» подразумевается по умолчанию

Ну я просто подсказываю. Ты же выложил в оценку, а не просто поглазеть.

Если я сейчас сдвину элементы по твоим рулерам, то макет посыпется.

Не посыпется.

[psywalker]

Исходя из этой моей фразы, думаю, можно понять, что «допиливание» подразумевается по умолчанию

Ну я просто подсказываю. Ты же выложил в оценку, а не просто поглазеть.

Да, если можно, выскажи всё по существу. И вообще, как тебе диз для блога? Тебе бы понравилось находиться на таком?

[Cranky]

Макс, как и и просил только по делу. В целом прикольно, но есть моменты, перечисляю в порядке как на глаза попадались:

1. Слоган меня напугал ))) Почему нужно верстать целый мир? Это страшно )))

2. Пиктограмма "работы и примеры" в верхнем меню отдает занудством конца девяностых. Почему папка с мышкой? Может было бы лучше листки с распечатками кода или там разметкой страницы. Хотя могу ошибаться.

3. Заголовки постов очень мелкие, мой мозг не сразу догнал что это не простые ссылки в посте.

4. Календарь. Макс, зачем тебе календарь? ))

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

Edited January 29, 2012 by Cranky

[Arinden]

Хороший макет. Такой лёгкий, ненавязчивый. Мне нравится подбор цветовой гаммы и общая концепция. Некоторые решения, такие как иконки браузеров и процентная диаграмма, вызывают восторг. Вы молодец!

Возможно, я бы поэксперементировал со следующим:

- Хедер сделать немного уже по высоте, возможно, равным высоте главного меню.

- Иконку поиска вынес за пределы поля ввода, горизонтально отразил и сделал в стиле иконка "ключика" возле логина.

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

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

- У блога есть категории, если я правильно понял, это CSS и JavaScript. Но глядя на топик не ясно где именно он расположен. А теги не самый лучший вариант для их классификации. Поэтому имело бы смысл ненавязчиво приписывать в какой категории относится тот или иной пост, опять же выделяя их цветом. Скажем CSS - зелёная категория, JS - красная, HTML - синяя. Что нибудь в это роде.

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

- Есть сортировка по популярности но у статей нет рейтингов, скажем 4,5 или 4 полные и пол звёзды, как показатель её популярности. Аналогично с Просмотрами. Отсортировал и не понял, сверху 0 просмотров или 100500. Ещё можно добавить стрелочки ^ и вниз, как индикация текущей сортировки.

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

- Информация о количестве записей на странице бесполезная. Если возможно было бы здорово увидеть возможность выбора записей на страницу, 5, 10, 20, 50. Но в этом нет особой необходимости.

- Подписка на новости ни с чем не ассоциируется. Если стереть текст внутри инпут бокса - неизвестно вообще что это. Хочется хоть чуть-чуть оформить.

- Мои друзья и коллеги. Я когда это прочитал, сразу ощутил то, что я читаю персональный блог какого-то, неизвестного мне человека. И мне пришла в голову мысль облокотить фотографию автора, небольшую, но "профессиональную" на логотип CSS-LIVE в хедере.

- Отзывы клиентов. Хочется видеть не один, а три отзыва сразу.

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

- Диаграмма чудесная. Но треугольник, видимый от нижнего деления, мне хочется скрыть.

- Может быть в стиле блога, возле категорий в сайдбаре писать в скобках количество имеющихся топиков. Приходит новый посетитель, видит на главной топики и уходит. Приходит посетитель, видит три категории CSS (1152) JS (546) HTML (854) и добавляет в избранное.

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

- В футере наверно лучше сместить копирайты налево, а после | вместо кнопки разместить каунтеры.

- Иконка карандаша, возможно, будет лучше без рамки и белого бэк фона вообще.

P.S. Я не обращаю внимание на заголовки кнопок, названия меню и прочий текст - это совершенно отдельная тема. Я понимаю, что это макет.

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

Edited January 29, 2012 by Arinden

[colors]

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

Все строго, лаконично, любимый оранжевый также используется

http://freeway-design.ru/files/css-live/main.png

Всё нормально. Подчеркивание только убрал бы. Слева и наверху, где итак ясно. Мусор только небольшой образовывается.

И ширина великовата, за 1000. Но это всё так, по мелочам.

Шрифт css-live хороший. Ближе к будущему. Интересно что за шрифт?

Edited January 29, 2012 by colors

[Verder]

Если уходить к старой контрастной шапке, то и другие элементы надо делать контрастней.

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

Блоки с текстом сделаю с бордером или более контрастные. Согласен, сейчас они плохо выделяются.

По иконкам буду думать, пока положил эти, чтобы была понятна мысль и как это будет выглядеть.

[Shugich]

Тебе бы понравилось находиться на таком?

Если там будет интересно, то почему бы и нет.

Так. Ещё несколько моментов:

• Не сильно понимаю смысл карты мира в шапке и диаграммы в подвале.
  
• В меню дыры меня смущают немного.
  
• Довольно много ссылок получается на страницу «Связь и заказ вёрстки» — одна в меню и две в подвале.
  
• Поле «Подписка на новости» не очень. Не сильно понятно что с ним делать.
  
• «Отзывы клиентов» нужно переименовать в «Случайный отзыв» (или как-то так). Там ведь только один отзыв.
  
• Зачем у каждого поста две ссылки на комментарирование? А, вообще, пишите уже для людей:
  Запись добавлена 29 февраля 2012 года в рубрику «CSS». К ней оставили 5 комментариев.
  
• Заголовок раздела не очень. Его бы побольше, а то так только совсем немного места в хлебных крошках и всё. Заголовки постов, кстати, смущают тоже.
  
• Не вижу смысла указывать количество записей на странице.
  
• Забыли про возможность подписываться по RSS.
  
• Код уже научились делать без горизонтальной прокрутке и с подсвеченным синтаксисом.
  

И ещё вопрос. Как себя будет вести псевдо-ссылка «Вход для пользователей»?

Есть сортировка по популярности но у статей нет рейтингов

Популярнее те статьи, которые больше всего читают. Рейтинги всякие не нужны.

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

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

[psywalker]

Verder, Я очень надеюсь, что ты приветствуешь цель - довести макет до ума. Если так, то на данный момент море критики, думаю стоит прислушаться к большей части.

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

[Verder]

Verder, Я очень надеюсь, что ты приветствуешь цель - довести макет до ума. Если так, то на данный момент море критики, думаю стоит прислушаться к большей части.

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

Цель приветствую.

Критики на самом деле немного, касается мелочей, что на стадии первого макета вполне естественно.

Сейчас сделаю правки и выложу обновленный вариант.

[psywalker]

Verder, Я очень надеюсь, что ты приветствуешь цель - довести макет до ума. Если так, то на данный момент море критики, думаю стоит прислушаться к большей части.

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

Цель приветствую.

Критики на самом деле немного, касается мелочей, что на стадии первого макета вполне естественно.

Сейчас сделаю правки и выложу обновленный вариант.

Ага, здорово. Жду с нетерпением!

[colors]

Подчеркивание только убрал бы. Слева и наверху, где итак ясно. Мусор только образовывается.

http://itmages.ru/image/view/408057/1afc0bca

Edited January 29, 2012 by colors

[mishka]

Легко, красиво, чисто.

Осталось только заполнить качественной инфой.

И еще там где "примеры и работы" кошелек там не вяжется.

Ой, это типа портфель , а я его принял именно как кошелек.

[paracelso]

Ставлю плюс

[buddah]

Если уходить к старой контрастной шапке, то и другие элементы надо делать контрастней.

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

Нет, конечно без изменений не получится. Скажу что нравится в старой шапке:

-"пиксельный" шрифт, особенно на букве И. Можно подобрать другой похожий. Веет технологичностью и гиковостью.

-названия меню в стиле css свойств. См. п.1. Имхо, гиковым должен быть этот блок, потому что Макс сам полный гик (в хорошем смысле этого слова). Это вообще, считаю, нужно сохранить обязательно. Так же можно это тэлемент еще повторить где-то. К примеру .комментариев {5}

-ярлычок рсс. Хотя этого много уже.

-лого psywalker уже прижилось к Максу.

Мы забываем, что диз блога должен отображать не просто красивую картинку, но в большей степени САМОГО АВТОРА.

Сейчас же, повторюсь, карта мира в шапке привносит ассоциации с каким-то серьёзным заведением. Как-будто кто-то стебётся. А все должно быть честно.

[Verder]

Update - http://freeway-design.ru/files/css-live/main2.png

Принял к сведению отзывы, сделал контрастнее, читается лучше и старая тема прослеживается.

Иконки пока не менял, времени не было.

Edited January 29, 2012 by Verder