Нарисовали дизайн новой темы Street Spirit (бесплатной)

UPD. Шаблон обновлен до версии 0.3.


Недавно к трудовому коллективу веб-студии stfalcon.com присоединился очень хороший дизайнер Олег Уласюк. В основном он работает :), а в промежутках читает умные книжки и рисует красивые дизайны для opensource движков.

Первым был дизайн для темы Wordpress (сейчас заканчиваем верстку и скоро анонсирую), а второй работой стал дизайн новой темы Street Spirit для LiveStreet, которым я и хочу похвастаться :).

UPD. В комментариях задают вопросы о стоимости. Это будет бесплатный скин.

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


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

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



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

Голосование за топики решили сделать в виде текстовых ссылок «это интересно» и «не интересно», чтобы все пользователи четко понимали, что это и для чего. Соответственно в меню пункт «Хорошие» переименовали на «Интересные».

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


Топик

Так как LiveStreet используется в качестве движка для сообществ, то интеграция с популярными соц. сетями должна быть по умолчанию. Для этого в панель под топиком вынесли кнопки публикации/лайка в вКонтакте/facebook/twitter.



В дефолтных темах некоторые элементы управления довольно маленькие, например, кнопки рейтинга или анкор на комментарий. Решено было их увеличить, чтобы кликать было удобно даже на мобильных устройствах и планшетах :).

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

Профиль пользователя

Изменения на странице профиля в основном косметические. Иконкам добавления в друзья и написания письма добавили подписи для большего удобства.



Остальные страницы

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

Восторги, идеи и конструктивная критика приветствуется!

Пишите все в комментариях ;). Дельные замечания мы учтем, а хорошие идеи постараемся достойно реализовать. После того как все устаканится дизайн уйдет на верстку.

144 комментария

avatar
Мне понравилась тема. А как в ней выглядит кнопка подписывания на блог? В дефолтной она микроскопическая и неявная.

Если вы переименовали часть терминов, может быть, вы переименуете ещё и блоги в «разделы»? Пользователям, далёким от нюансов Лайвстрита, очень сложно разбираться с дефолтной терминологией. Я уверен, что дизайны для ЛС должны решать в первую очередь задачу лёгкого понимания всех возможностей сайта.

Дискасс, посоны.
avatar
кнопка вступления большая и заметная
design.dev.stfalcon.com/lstheme-1/blog-posts.html
design.dev.stfalcon.com/lstheme-1/blogs.html
avatar
А, вижу. Ну ок тогда.
avatar
Если вы переименовали часть терминов, может быть, вы переименуете ещё и блоги в «разделы»?
мысль хорошая
avatar
Благодарю.
avatar
Если вы переименовали часть терминов, может быть, вы переименуете ещё и блоги в «разделы»?
мне тоже пришла эта мысль в голову ;) только в своем шаблоне я переименовал в «Категории»
avatar
Ага, с категориями хорошее решение. Я недавно где-то увидел ещё «сообщества». На мой взгляд, лучший вариант.
avatar
Ещё: отличная мысль с социальными кнопками. Но приведённые в дизайне гораздо менее популярны, чем лайкалки. Потому что последние требуют только одного клика — на них чаще нажимают. А стандартные лайкалки ФБ и ВК явно не влезут в место, отведённое для социальных кнопок в дизайне.

Ещё одна мысль: всё-таки суть социальности — в рейтингах. Я считаю, что плюсовалка-минусовалка должна быть более заметной и крупной. Как и рейтинг поста. Например, им место около заголовка. И крупно.

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

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

Ещё одна мысль: всё-таки суть социальности — в рейтингах. Я считаю, что плюсовалка-минусовалка должна быть более заметной и крупной. Как и рейтинг поста. Например, им место около заголовка. И крупно.
не понял. нарисуйте :)

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

Этот дизайн мне показался очень интересным своей чистотой и детализацией. Но мне кажется, что он сейчас является скорее перерисованным дефолтным.
да. была задача сделать похожим на дефолтный, чтобы сверстать под html стандартной темы. тогда будет меньше проблем с совместимостью.
avatar
Ну заметная плюсовалка — здесь, например: digg.com/. На здоровье.
avatar
Ещё одна мысль: всё-таки суть социальности — в рейтингах. Я считаю, что плюсовалка-минусовалка должна быть более заметной и крупной. Как и рейтинг поста. Например, им место около заголовка. И крупно.
не во всех ситуациях это хорошо. голосуют обычно после прочтения (по крайней мере, адекватно), но мысль интересная

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

Этот дизайн мне показался очень интересным своей чистотой и детализацией. Но мне кажется, что он сейчас является скорее перерисованным дефолтным.
целились на универсальность и совместимость
avatar
Лайкают, плюсуют как раз, ещё не начав читать. 90% расшариваемого в соцсетях расшарившие сами не читали или не дочитали. Были исследования.

Что касается имени автора, то лично я бы писал его у заголовка, а под постом добавлял ещё и информацию о нём. Здесь ничего нового, вполне устоявшаяся система: socialmediatoday.com/brandonsutton/287409/facebook-not-social-media.

На мой взгляд, вообще идеально было бы лайкалки, плюсовалки и имя автора ставить и сверху, и снизу. Для разных типов читателей. Тогда будет максимальная социализация. Я уверен, что проекты на Лайвстрите умирают как раз из-за того, что у него в дефолтном шаблоне слишком бледная, нерешительная социальность. Такой подход нередко мигрирует и на остальные шаблоны.
avatar
+1. сам часто не читаю полностью перед тем как лайкнуть
avatar
а де скачать красоту то мона?
avatar
а смысл сейчас качать :)? сверстаем, оформим в тему, тогда и качать.
avatar
будем ждать! удачи
avatar
Отлично! Но над логотипом, все же, стоит ещё поработать.
avatar
это заглушка по сути. над логотипом работать нужно конкретным сайтам.
avatar
Ну хотя бы одно оформление для всех :) Вон у шаблона developer интересная плашка справа от названия.
avatar
можете кусочек скриншота приложить? я уже не припомню какая там плашка :). спасибо
avatar
Вот как-то так :)

avatar
И что она даёт?
avatar
думаю там можно написать какой-то слоган короткий. например на лого «Cookorama.Net» и в плашке «Готовим вместе!»
avatar
moreover, мои комментарии адресованы не вам.

stfalcon, ну не обязательно логотип как у developer делать, но что-нибудь интересное все-таки нужно. А так, отличный будущий шаблон. С удовольствием поставлю на свой сайт :)
avatar
Ну вроде же это каждый сам для своего сайта делает.
avatar
профилю — да, а вот остальное не очень впечатлило.
прямой эфир! что это за лента? по вертикали черезчур много места занимает. там должно быть много комментов и они не должны занимать по экрана.

«кнопки» голосования за пост… мне лично не нравится. сделать юниформ — как и в коментах — ручки.
avatar
а кто сказал, что там должно быть много комментов :)?
avatar
это логично, чтобы там отображался список последних комментариев, чтобы одним оком окинуть что происходит на сайте. Особенно густо заселенном.

это мое мнение.
avatar
давай обсудим :)

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

вобщем мне нравится мысль отображать в прямом эфире аватарки )
avatar
Хозяин — барин.
avatar
Под заголовком есть же переключатель на комментарии.
Насчет количества — вопрос спорный.
avatar
Весьма удачный дизайн на мой взгляд, желаю удачи с превращением дизайна в шаблон. Тоже понравился очень профиль.
avatar
спасибо ;)
avatar
где дизайн?
в чем уникальность?
че там отрисовывать?:))))

много букв не понятно зачем не читал, интересно будет продаваться? или будет сделана просто как реклама студии?
avatar
дизайн на скриншотах. тема будет фришной. я помоему не писал о продаже )
ps. по вашему в посте много рекламы :)?
avatar
hoti, я вижу вы предлагали свои услуги по созданию дизайна и верстке livestreet.ru/blog/7668.html
а можно увидеть примеры ваших уникальных работ?
avatar
Это детская зависть, Вы у него клиентов отбиваете.
avatar
в "." но таких клиентов которые тут обитают не жалко:)
avatar
Тут обитают довольно неплохие клиенты, которые готовы платить.
avatar
думаю, что у плохих исполнителей все клиенты «плохие» :)
avatar
Логичная закономерность :)
avatar
как самокритично, хоть в чем то вы написали верно…
avatar
Вы про танцора? :D
avatar
1) нравится/не нравится для топиков — либо везде лишь слово либо везде значки со словами. clip2net.com/s/15hsh
или значек показывает выбор юзера за тот или иной топик?
2) аналогично для комментариев clip2net.com/s/15hth
3) как ваши переделки скажуться на совместимости с плагинами ??
4) сабж будет за $ или как реклама?
avatar
1) спорно. доверяюсь дизайнеру :)
2) аналогично 1)
3) думаю, что все будет ок. т.к. верстать будем под html скина new или default стараясь по максимуму сохранить структуру.
4) дописал в топике о том, что шаблон будет бесплатным.
avatar
стараясь по максимуму сохранить структуру.
хоть кто-то изначально задумался о совместимости, а то сделают шаблоны, а потом плагины «виноваты».
avatar
аналогично для комментариев
для комментариев оба значка появляются при наведении, остается один после голосования
avatar
даёшь на jquery!
плз ;)
avatar
когда вижу такие комменты хочется сразу взять и спросить «а плагины вы тогда сами писать будете?..». Сегодня большая часть плагинов, которые активно используют ЖС, на шаблонах вроде инфинити просто не запускаются.
avatar
если не будет шаблонов на jquery то и мотивации разработчикам не будет.
Основной список плагинов, необходимых для нормальной работы отлично себя показывает и на jquery шаблоне, подумаешь перестала висеть вверху страницу лычка админки Оо
avatar
будет видно. возможно, что и так и так будет
avatar
Хороший фейслифтинг шаблона new
avatar
отличный шаблон
avatar
Пока еще не шаблон, а только дизайн.
avatar
Отличный дизайн :)
avatar
Может есть смысл поработать над шапкой? Как вариант форму поиска и данные пользователя перенести в самый верх
avatar
Чуть ниже логотип сайта и разделы сайта (БЛОГИ ЛЮДИ О ПРОЕКТЕ СКАЧАТЬ РАБОТА МОДУЛИ). Ниже панелька блогов (коллективные, персональные, топ)

В представленной stfalcon версии ни к селу, ни к городу получается логотип.
avatar
ну почему. справа от логотипа можно достаточно комфортно разместить баннер или блок контекстной рекламы
avatar
А раздел «ЛЮДИ» без изменение? Лично мне, а может и не только мне, очень нравится вот так:
avatar
Это из шаблона Infinity?
avatar
Да, скрин из этого шаблона. Но не мало сайтов, не имеющих никакого отношения к LS, имеют подобную форму.
avatar
Ну мне тоже нравится такая реализация раздела «Люди». Может автор топика обратит внимание.
avatar
да и не только. мы такое и на социал вешали :)
avatar
извините, «мне нравится» — не аргумент
avatar
Воспринимайте это как идею по изменению стандартного раздела «Люди».
avatar
Так делать позволено только тематическим сайтам, где на аву ставят фото, а не говнокартинку.

Да и выглядит оно убого.
avatar
Можно вопрос: а почему только 3 кнопки соЦиалок? А ЖЖ и майл.ру? ИХ добавить никак нельзя?
avatar
по дефолту будет 3ри самые популярные, а так добавлять можно что угодно.
avatar
очень круто, молодцы
прям уже жду не дождусь шаблона в действии )
avatar
спасибо ;)
avatar
столько плюсующих работу — поразительно! Словно никому этот шаблон из комментирующих ненужен.
avatar
Это еще хорошо, мой шаблон заминусовали ;)
Хотя работа действительно неплохая, удачи ребят. Плюсанул бы но рейтинг не позволяет :(
avatar
и ваш шаблончик мне понравился. Любой труд должен быть вознаграждён! И если не звонкой монетой, то добрым словом, плюсиком и поддержкой ;)
avatar
Спасибо :)
avatar
Я бы с радостью плюсанул Лора, кабы это «счастье» (возможность) голосовать, мне вернули. )) +++++ это все что я могу.
avatar
парадокс ситуации в том, что кто-то ещё умудряется минусовать :)
avatar
Если бы еще аргументировали почему минусуют, а так :(
avatar
да вроде так понятно.

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

остается или неприязнь или зависть.
avatar
Дату выхода шаблона назвать можете?
avatar
на верстку и доводку до ума требуется примерно 3-4 недели. я вот думаю есть смысл дожидаться релиза LS 0.5 или нет.
avatar
Конечно есть смысл дождаться, чтобы шаблон полностью был адаптирован под актуальную версию.
avatar
лучше под 0.5
будет хороший подарок нашему любимому сайту
avatar
Возможно переезд сайта работающего продолжительное время на предыдущих версиях на 0.5 окажется не таким уж простым занятием. Может получиться, что шаблон в этом случае останется долгое время не востребованным.
avatar
а много различий между 0.4.2 и 0.5 ?? Было бы идеально для обехи версий ;)
Не все сразу рынутся переходить на 0.5.
avatar
есть «немного» :). можно посмотреть diff
avatar
Отличная работа и сам готов поставить этот диз на несколько сайтов!
Вместо лайков может бы поставили маленькие кнопки поделиться от яндекса? Плюс в том что если стоит Яндекс Метрика можно отслеживать клики по кнопкам.
С прямым эфиром надо серьезно поработать так как по вертикали он реально большой
Когда примерный выход в свет данного шаблона? Платный или бесплатный будет? Для какой версии ЛС будет?
avatar
что за «маленькие кнопочки поделиться от яндекса», можно пруф? в принципе вы всегда можете это поменять у себя на сайте.

Платный или бесплатный будет?
я думаю вы невнимательно читали :). я даже в заголовке об этом написал.
Когда примерный выход в свет данного шаблона? Для какой версии ЛС будет?
livestreet.ru/blog/addons/8054.html#comment118841
avatar
Да ссори проглядел слово бесплатный просто не кидаюсь на халяву и не вижу этого слово, а диз. сразу зацепил вот и отписал
avatar
Вот кнопки: http://api.yandex.ru/share/ (только иконки или иконки и меню)
Я то поменять могу без проблем просто это вам рекомендация была…
avatar
рад, что диз понравился ;)
avatar
Очень хорошие макеты. Отдельный плюс за улучшение юзабильности плюсования/минусования с учетом целей этого. Думаю на сайтах с таким дизайном и контент будет фильтроваться автоматически качественнее.

Большое спасибо авторам!
avatar
Очень красивый дизайн. Есть желание поставить его на свой сайт.
Я бы на вашем месте сделал бы его под 0.4.2, т.к. ждать 0.5 еще довольно долго и не все пользователи сразу на него перейдут, многие будут дожидаться стабильной версии.
Желаю дальнейших успехов.
avatar
А в чем проблема сделать под 0.4.2, а с выходом нового релиза доработать под 0.5. И все будут счастливы!
avatar
Скорее всего потому, что не получиться просто доработать, а придется его заново делать, т.к. нынешний шаблон «new» с мутулзом, а в 0,5-й версии будет последняя поддержка мутулза, и вроде как в ней будет еще и «new» на основе шаблона developer-jquery.
Вот и получается, если делать с оглядкой на будущее, т.е. как подоснову использовать new-jquery, то два раза шаблон делать надо, а не просто дорабатывать.

У меня, по крайней мере, такое видение ситуации и такие же проблемы — есть отрисованный дизайн, но пока не спешу чего-либо делать, жду чего в итоге будет.
avatar
Да, переходить сразу на 0.5 смысла не вижу, без касяков никога ничего не происходит… Посему лучше бы было для предыдущей версии сделать, а после обкати переходить уже на «поллитра»!
avatar
все упирается в ресурсы. пока думаю, но в целом склоняюсь к 0.5.
avatar
В плане продвижения и популяризации новой версии движка (которая не известно когда еще выйдет) это хорошо. Но для тех, кто повязан на плагинах для 0.4.2(как я) это хренова.
avatar
Отличный шаблон. Очень хотелось бы увидеть версию для 0.4.2 как можно скорее, чтобы приступить к работе. Я думаю, что до выхода пятерки вы сто раз успеете обновить шаблон, а за рабочую версию под четверку вам все спасибо скажут.
avatar
Если учтут хотя бы часть моих пожеланий обязательно сделаю донейт.
avatar
+1
avatar
Я зарегалась на этом сайте только ради вашей темы, очень уж понравилась!!! Скорее бы она появилась, прошу ВАС — сделайте релиз для 0.4.2 как можно скорее!!! Мы тут все вам задонатим по кто сколько сможет!!!
avatar
+1
avatar
Добавьте пожалуйста еще под топик кнопочку от Google+ рядом с имеющимися.
avatar
Хорошо. По многочисленным просьбам сверстаем под 0.4.2
avatar
УРА!!! БУДЕМ ЖДАТЬ!!! Спасибо огромное, что отозвались на многочисленные просьбы, и на мою в частности тоже!!!
avatar
Спасибо, ждем!
avatar
Так релиз же вышел, под 0.5 не будет шаблона?
avatar
серьезно вышел :)? будет и под 0.5
avatar
Ну понятно же что я имел ввиду. Тестируется пока… ждать то недолго.
avatar
Где??? Дайте ссылку, что ли, в подтверждение, или в опровержение.
avatar
Дизайн очень сочный, понравилось. Когда релиз?
  • wifi
  • 0
avatar
Ну раз вышел 0.5, то можно под 0.4 не делать.
avatar
Уже вышла 0.5 версия? Ссылку на скачивание скиньте пожалуйста.
avatar
Ссылки пока нет, в стадии тестирования еще.
avatar
Комментарий выше был иронией.
avatar
Супер!
Жду его для версии 0.5
avatar
ну хоть выложите исходник PSD а мы уж верстанем
avatar
Какие планы в данный момент по шаблону? Может что-то изменилось… месяц прошел с анонса.
avatar
начали верстать под 0.5
avatar
А когда же появится новый шаблон?
avatar
ждем-с
avatar
С нетерпением жду для версии 0.5 jquery. Дизайн просто супер!)
avatar
Так как LiveStreet используется в качестве движка для сообществ, то интеграция с популярными соц. сетями должна быть по умолчанию. Для этого в панель под топиком вынесли кнопки публикации/лайка в вКонтакте/facebook/twitter.
Думаю стоит добавить кнопку Google+
avatar
шаблон очень классный! но есть вопрос который волнует )

меню сайта в данном наброске дизайна = 6 разделам ( Топики Блоги Люди О проекте Скачать Модули )
добавим сюда еще Активность, Контакты, Видео, Каталог, Галерея и т.д.
как быть в данном случае?
avatar
как идет работа с версткой???
avatar
2all, работа идет. это займет не один день и не неделю. когда будет готово я напишу анонс. просьба не писать мне в личку и здесь одни и те же вопросы «а когда». это напрягает
avatar
Красивая Идея! Но под 0.5 было бы здорово!!!
avatar
первым будет под 0.5
avatar
Ухх ты, громадное спасибо! Да к стати, реквизиты после релиза выложите, на пиво скину обязательно. )))
avatar
Крутейший шаблон! Очень ждем!
avatar
долго уже ждем-с
avatar
Да, и я вот все жду:) Все в ожидании чуда!!! :) Поддержим разработчиков, давайте ребята, вы молодцы! Дерзайте! Мы ждем хоть под 0,5!
avatar
типо такого если можно)
avatar
кака
avatar
Поиск слишком большой, к тому же на LS он не очень работает и его бы поменьше… кому надо не промажет )
А на освободившемся месте влезли бы другие разделы меню. Зняю уже позно. просто высказался.
avatar
Забыл добавить. Дизайн на пятерку. Молодцы.
avatar
Дизайн очень красивый и вкусный!
С нетерпением жду полностью сверстанной и доведенной до ума темы под LS 0.5. Сразу же буду ставить на свой новый сайт, который только-только запускаю + конечно же, скину посильный donate автору :)

Есть один вопрос к разработчикам: будет ли тема совместима с плагинами или же пока стоит подождать и не ставить, например, что-либо из платных расширений?

Примерных сроков появления пока, по всей видимости, спрашивать не стоит?
avatar
В дополнение хочется внести свои 5 копеек по внешнему виду. На самом деле, все очень нравится, но поисковая строка кажется какой-то огромной. Как вариант, либо сделать ее меньше, либо вообще перенести в header туда, где расположен логотип, в правый верхний угол. Так как при наличии большого числа дополнительных модулей, места для ссылок на них вообще не останется. И страшно даже представить, как может расползтись панель навигации по разделам в таком случае :)
avatar
дельная мысль
avatar
Интересный шаблон. Попробовал поставить, но ошибка:

Fatal error: Smarty error: [in header.tpl line 52]: syntax error: unrecognized tag 'json' (Smarty_Compiler.class.php, line 590) in /var/www/engine/lib/external/Smarty-2.6.19/libs/Smarty.class.php on line 1092

Версия движка: 0.4.2
avatar
ну так для 0,5 версии
avatar
Упс. Сорри. А под 4.2 нет?
avatar
как видите, нет. переделывать под мутулз уже немного нелогично.
Автор топика запретил добавлять комментарии