Дизайн темы Lugree

Хочу презентовать наш вариант нового дизайна для LiveStreet. Мы долго думали как его назвать :). Название Lugree получилось от названий основных цветов использованных в дизайне — blue и green.

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

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

Главная страница (для гостя)


Главная страница
  • Основные пункты меню выполнены в виде симпатичных вкладок. В полосу вкладок без проблем поместятся пункты, создаваемые дополнительными плагинами.
  • Кнопка «Войти» хорошо заметна в шапке.
  • Размеры шрифтов специально подобраны для удобного чтения. Например, размер шрифта заголовков топиков позволяет бегло пройтись по списку и ознакомится материалом.
  • Кнопка с количеством комментариев меняет цвет на синий, если к топику есть комментарии. Форма кнопки специально выполнена в форме «балуна» комментария. Количество новых комментариев для пользователя также выделено.
  • Прямой эфир стал более понятным для пользователя. Мы упустили некоторые детали, которые по нашему мнению не столь важны и попытались сохранить общую компактность блока.


Страница топика (для залогиненого пользователя)

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


Страница профиля (для залогиненого пользователя)

Страница профиля
  • Имя и логин объединили в одну строку
  • Рядом разместили кнопки «добавить в друзья» и «написать личное сообщение».
  • Показатели о рейтинга и силы будут логично смотреться рядом с аватаркой и сразу под именем пользователя.
  • Освободившаяся область справа идеально подошла для информации о дате регистрации и времени последнего посещения сайта.
  • Аватарки в списке друзей это одна из хороших идей, которые мы воплотили в теме «Street Spirit».


One more thing...

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

Вот несколько примеров того, как могут выглядеть сайты использующие шаблон «Lugree»:
Разные шапки

Восторги и замечания приветствуются ;)

Надеюсь вам понравился результаты нашей работы и этот дизайн станет основой для нового дефолтного шаблона LiveStreet.

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

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

avatar
Шапка выглядет перегруженной.
avatar
Мы с вами смотрим на одну и ту же страницу design.dev.stfalcon.com/lsthemes-21/lugree-topic-v3.html?
avatar
Я бы сказал не «перегружена», а «нерационально использующая пространство». Из-за того, что меню и блок пользователя разнесены по вертикали, образуются 2 дырки, с которыми не очень понятно что делать. Допустим, со временем вебмастер решит традиционно вставить баннер в шапку, вставит он по центру верху шапки или пониже справа — перекос увеличится. Для наглядности накидал скрин:
avatar
обязательно над этим подумаем. спасибо за конкеритку ;)!
avatar
еще лучше предусмотреть вверху место под баннер 728х90, а в боковой колонке под баннеры шириной 300 рх (например 300х250 и т.д.)
avatar
для дефолтного шаблона 300px в сайдбаре это очень много. т.к. он минимальная ширина ориентирована для 1024*768. вы сможете на своем сайте изменить ширину на нужную.
avatar
Поддерживаю, один из распространенных форматов банеар 250 на 400 — главное, чтобы он сбоку помещался. И место под банер сверху, да, было бы хорошо… чтобы его как-то обозначили просто.
avatar
Интересный шаблон. Очень оригинальное оформление.
Ps: Говорят же хорошие мысли носятся в воздухе. Я тоже планирую сделать визуальные выноски к своему варианту) Надеюсь успею его сделать в срок.
avatar
да, так и есть. И то что идея витает в воздузе очень радует, так как скорее всего такой шаблон и сделают. Для многих будет очень удобно…
avatar
Красота!
avatar
спасибо, от вас вдвойне приятно такое слышать :)
avatar
прекрасная темка
avatar
Чудесный дизайн! Очень нравится, больше чем «Street Spirit». Очень радуют кнопки социальности, шрифты и возможность загружать картинки! Недостает в ЛС только смайлов :) Это так сложно реализовывается, что их нет в стандартных шаблонах?
Надеюсь, Ваш дизайн победит!
avatar
спасибо за такой положительный отзыв!
ps. смайлы к сайту можно добавить установив плагин "QIP Smiles". а нарисовать что-то красивей полюбившихся всем колобков довольно сложно (:
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
avatar
Дополню — плашку зря переместили влево, так как прокрутка экрана находится справа, и слева плашка не логична, и я бы сказала — неудобна. И еще — добавьте хоть кто-то кнопку на этой плашке — отметить все комментарии прочтенными. А то порой просматриваю не пользуясь этой плашкой, а потом нужно нажимать на нее много раз и перескакивать с комментария на комментарий, чтобы обнулить…
avatar
чтобы обнулить, надо просто нажать на стрелку
avatar
Спасибо… ох… я не знала такой элементарной вещи…
avatar
девушке простительно )
avatar
вот здесь позвольте не согласится и отстоять реализацию дизайнера.

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

тут дело привычки. в принципе можно сделать этот параметр (влево/вправо) настраиваемым.
avatar
есть скрол, но я тяну мышку тоже… такие дела :) мышка у меня чаще справа, чем слева :)
avatar
"… профессор, а куда вы ложите бороду: под одеяло или над ним?.." старый бородатый анекдот

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

Но тут логичное и хорошее объяснение почему налево
avatar
Несмотря на нарушение правил конкурса (шаблон слишком уж похож, на мой взгляд, на публиковавшийся ранее «Street Spirit») это пока лучшее из предложенного на конкурс.
avatar
я бы не стал так категорически говорить о нарушениях. это новый дизайн и на мой взгляд он не противоречит правилам конкурса.
рад, что вам он понравился ;)
avatar
То, что он во многом повторяет ранее публиковавшийся шаблон — это объективный факт, остальное — это всего лишь моё личное мнение как человека, не имеющего отношения к организации конкурса. Нарушение носит формальный характер и я надеюсь, что при оценке работ оно не будет принято во внимание.
avatar
Мне больше напомнило популярный сайт об образовании в Украине —

удобное меню, можно сделать так, чтобы меню работала при наведении курсора
avatar
можно. только много лишних запросов будет
avatar
т.е. вместо того чтобы сразу кликнуть куда надо нужно навести мышку, подождать пока появится, а потом сделать клик?
avatar
совсем не похож… просто «рыба» таже, это не запрещено
avatar
возможно я и ошибся, это просто личное впечатление, а не упрёк разработчикам, которые тут поработали как следует
avatar
можно сравнить на живих примерах. design.dev.stfalcon.com/lstheme-1/posts-logout.html и design.dev.stfalcon.com/lsthemes-21/lugree-v3.html

я расположил их рядом на одном изображении (для наглядности)


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

При всё при этом я отдаю свою плюс этой работе.
avatar
Несмотря на нарушение правил конкурса
в правилах нет пункта о похожести, поэтому такие заявления делать не нужно, это может сбить с толку пользователей.
Здесь скорее не шаблон похож, а та же рука дизайнера. Например, я по шрифтам бы сразу определил, что это дело рук stfalcon
avatar
Не стоит понимать мой комментарий как негативную реакцию, это всего лишь личное впечатление схожести, которое, как можно убедиться, разделяется многими. В правилах есть пункт о ранее публиковавшихся шаблонах, но не было разъяснений о возможной степени схожести конкурсных работ с публично обнародованными шаблонами. Я рад, что на этот счёт получен комментарий от организатора конкурса, который разъясняет официальную позицию.

С одной стороны, это даёт всем пользователям ЛС надежду на то, что обсуждаемый шаблон может войти в призовую тройку и даже быть включённым в дистрибутив движка. С другой — даёт дополнительный стимул прочим авторам на переработку своих уже имеющихся шаблонов и выдвижение их на конкурс, что вне всякого сомнения также пойдёт на пользу конкурсу и сообществу в целом.
avatar
по мне так все шаблоны схожи т.к. структура одна
avatar
Слишком сложный для дефолтного шаблона. Шапка сбивает с толку. Но сделан очень качественно, на продажу бы его.
avatar
буду благодарен если вы распишете подробней, что именно получилось слишком сложно или сбивает с толку.
avatar
в чем сложность?
avatar
Тяжеловесно и расточительно к пространству. Где место под другие плагины, под доп пункты меню?
Слишком ярко, что сбивает с толку. А вообще напоминает эдакую пластмассовую веб 2.нольность. Но очень симпотично и с более близким приближением к минимализизму, а не раздувательству он бы отлично смотрелся как дефолтный.
avatar
я не согласен, но спорить наверное нет смысла. поверьте мне как разработчику плагинов, что есть место и под меню и под другие плагины. что касается яркости, то я доверяю дизайнеру. с минимализмом тоже все ок как по мне.
avatar
Естесственно спорить смысла нету. Если есть место то это отлично, потому как лично я и многие пользователи использую ноутбук для серфинга и работы в интернете.
avatar
Есть за что хвалить.
но вот можно и не до конца хвалить :)

Из замечаний:
— «Войти или Регистрация», как мне кажется, звучит плохо и несогласовано.

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

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

— людям нужно как-то присоединиться к блогу. Я не увидел где эта функция.

— баннер 240 по ширине не влезет в левую колонку.

Плюс мелочи
— представим что в комментарий набирает рейтинг ±1001. С одной стороны понятно что блок станет шире, но с другой стороны, не совсем понятно зачем тогда делать большой отступ для комментариев с рейтингом |r|<10?

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

— если в главном меню перевернуть треугольник под «Коллективные» вертикально будет красивее. Сейчас он указывает куда-то мимо.

Но в целом — весьма достойно.
  • LeX
  • +3
avatar
Lex, спасибо за замечания по существу. обязательно учтем и внесем правки.
avatar
я бы ещё предложил сделать форму поиска шириной с правую колонку — и композиционно будет прослеживаться рифма и больше места для ввода поискового запроса — удобно
avatar
задумано вот так:
Когда пользователь кликает на поле поиска, то оно плавно удлиняется для более удобного использования. Если убрать фокус с поля ввода, тогда оно сужается к прежним размерам.
avatar
в таком случае композиционно такой замысел ничем не подкреплён, получается фича ради фичи
avatar
— если в главном меню перевернуть треугольник под «Коллективные» вертикально будет красивее. Сейчас он указывает куда-то мимо.
вот это дельный совет, спасибо!
avatar
Пока что лучший шаблон из всего того, что представлено на конкурс!
avatar
спасибо, Дмитрий!
avatar
Сильно смахивает на спирит шаблон. Только фиксированный, и иконки добавлены.
avatar
т.е. мы срисовали сами у себя :)?
avatar
Это дело творческое. Когда музыкант выпускает альбом, там ведь все песни разные так? но почерк одинаковый, и мы почти всегда узнаем ту или иную группу, мотив, стиль. Так же и в художестве!
avatar
т.е. ваш предыдущий комментарий это не критика :)?
avatar
Если всеми любимая группа пишет рок, и у них миллионы поклонников, то они должны писать рок. То есть то, что люди хотят, если же они скажут, пошли вы, я буду теперь писать попсу, как вы думаете, поклонники останутся или разбегутся? так вот ув. Делайте шаблоны так, как вам советуют люди со стороны, (а не минусы ставьте) вы же их для нас делаете? зачем народу шаблон, который вам нравится, им надо который им нравится, и платный и бесплатный. Когда же речь идет исключительно для личных целей, тогда я согласна, можно бросаться минусами.
avatar
оО
avatar
Если закажу у вас розовый шаблон, надеюсь вы мне не подсуните синий. Потому что вам больше синий нравится. ;) По поводу макетов выше, мне понравилось, но смахивает на спирит!
avatar
теперь понял. спасибо ;).

ps. я рейтинг ваших комментариев не трогаю. сохраняйте спокойствие.
avatar
я честно говоря не понял к чему вы это написали.

вы можете уточнить что именно мы не учли из того, что нам советовали и что нужно было учесть при разработке этого дизайна?
avatar
Автор, спасибо вам за минус, я лишь высказала свое мнение, если вы не будете считаться с мнением людей, то ваши шаблоны перестанут иметь какой либо смысл…
avatar
ваша благодарность немного не по адресу т.к я ваш комментарий не минусовал livestreet.ru/uploads/images/00/17/28/2011/10/12/98a382.png
avatar
Кто же теперь верит скриншотам от мастеров фотошопа :)))
avatar
во первых у меня GIMP, во вторых мне есть чем заняться :)
avatar
ну это была ирония :)
avatar
Поддерживаю :) И это не только Женская солидарность!
avatar
да не похож он совсем, просто в макете используется один текст и картинки с того шаблона… вы не туда смотрите
avatar
сравнение дизайнов Lugree и Street Spirit
livestreet.ru/blog/contest_2011/8657.html#comment129458
avatar
Что больше всего разочаровывает, это то что авторы не стараются изменить представление информации в шаблоне. Как был блоговым так все и делают, изменяя лишь элементы, а фантазии немного применить?
Пример: turometr.ru
avatar
Что больше всего разочаровывает, это то что авторы не стараются изменить представление информации в шаблоне. Как был блоговым так все и делают, изменяя лишь элементы, а фантазии немного применить?
конкурс на скин для дефолтного шаблона. где именно по вашему проявляется наш недостаток фантазии?
Пример: turometr.ru
в данном контексте это неудачный пример т.к. турометр давно вышел за рамки дефолтного функционала LiveStreet
avatar
Оформите главную страницу по другому не в стиле 2-х колоночного варианта, вы делаете по сути все одно и тоже только краски разные и все.
avatar
ну нравится нам текущая 2-х колоночная структура :)

сделайте набросок той структуры, которая вам нравится и давайте обсудим её вместе с сообществом.
avatar
Например трёхколоночкую, как на каком-нибудь новостном сайте или LAM.

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

Изменить названия
коллективные блоги => сообщества
персональные блоги => дневники
avatar
Коллективный блог не является полноценным сообществом, а просто поменять названия каждый может самостоятельно. Трёхколоночная вёрстка предполагает значительные концептуальные изменения в представлении информации в шаблоне.

Если же говорить о конкурсной работе, то предложеный вариант более чем достойный, хоть и по своей природе он не может быть универсальным. Я считаю, что представленная работа цельная и самодостаточная и её вместе с замыслами авторов нужно принимать таким, как они есть.
avatar
в приведенных вами примерах плотность информации намного больше
посмотрите на wordpress, сайты на этом движке можно абсолютно разной сложности, но дефолтный шаблон — всё же классический блоговый вид
avatar
поддерживаю, вряд ли сообщество будет готово к резкой смене концепции в дефолтном шаблоне
avatar
Это даст понимание как стоить не стандартные сайты на LS. Посмотрите сколько сайтов сделано все одинаковые по структуре. Дефолтный шаблон по моему мнению должен показывать как можно построить страницы.
Сейчас имеем вопросы как добавить правую колонку и как туда выводить блоки, или вопросы как поставить блок по центру страницы и.т.д.
Я думаю что такой шаблон в котором даны примеры вывода информации с разных позиций должен наглядно показать аудитории как можно все построить. Вы же дальше шаблона что есть сейчас не уходите — только меняете цвета.
Сделайте как Lookatme.ru — наглядный пример!
avatar
Lookatme — хреновый пример. совсем не катит на дефолт любимого LS!
avatar
придётся очередной раз адаптировать все плагины каталога
avatar
ДЕФОЛТНЫЙ шаблон… обратите внимание, это очень важный критерий при создании дизайна.
avatar
Класс! Постоянно наблюдаю за ходом конкурса, и вот наконец-то первый серьезный шаблон. Мне он очень понравился.
Как правильно заметили выше, шаблон, как и текущий дефолтный, сконцентрирован на главной сути движка LS, и это правильно! Новые люди должны сходу понимать что это за движок и не путаться в выборе.
Разумеется для мало-мальски серьезного проекта в любом случае скин придется переделывать (как и функционал дорабатывать), но для нового дефолтного из всех представленных на данный момент я за этот! Спасибо авторам за труды:)
avatar
спасибо на добром слове ;)!
avatar
Мне очень нравится шаблон. Если бы можно было скачать и поставить, сразу бы поставила его :)
А то что шапку можно сменить — вообще прелесть.
avatar
если я не ошибаюсь шапка в данном случае легко меняется подменой картинки в background в css. можно вообще один раз прописать типа bg_top.jpg и потом даже в css не лазить, только файл подменять когда требуется «освежить»:)
avatar
Я бы себе его на сайт поставил, приятный, стильный :)
avatar
очень рад, что вам понравился дизайн ;)
avatar
Класс… хошу такой шаблон =(
avatar
Класс! Очень красиво и качественно!
avatar
Замечательный шаблон)
avatar
Шаблон очень понравился. Похоже многие будут сидеть на дефолтном, с разными шапками :D
  • Deia
  • +1
avatar
Лучшая работа из представленных, но мне не нравится ширина сайдбара, а может это просто привычка.
avatar
Думаю, это просто минимальный размер у кого маленькое разрешение монитора, при нормальном разрешении сайбар будет больше… это я так думаю )
avatar
Судя по этому комментарию и ответу на него, шаблон фиксированный.
avatar
там написана глупость, а вы из этого делаете какие-то выводы.
это дизайн, а не шаблон. макет дизайна разработан под минимальное разрешение экрана 1027*768.

на больших разрешениях сайдбар будет больше. даже если верстка будет тянуться не на всю ширину экрана.
avatar
Прошу прощения :)
avatar
вот вы верно думаете
avatar
Хороший шаблон, как и предыдущий
avatar
Интересно но есть одно но, а как же не правило юзабилити использовать не более 3 цветов в дизайне, иначе радуга получается какая то.
avatar
правила… правила )) тут вы смотрите, радуга есть? нет… радуги нет, все очень красиво
avatar
как вы считаете, сколько цветов использовано в дизайне этой страницы design.dev.stfalcon.com/lsthemes-21/lugree-v3.html?
avatar
это скорее рекомендация
avatar
Выпадающее меню не будет нормально работать на ipad в том виде функционала в котором он тут.
avatar
уточните пожалуйста о каком выпадающем меню идет речь. я на макете таких не наблюдаю
avatar
Это ответ был к livestreet.ru/blog/contest_2011/8657.html#comment129613, я так думаю
avatar
эта работа гораздо выйграшнее смотрится, чем стритспирит. очень сильная работа!
придется пару элементов у себя переделать чтобы не повторяться:)
  • hoti
  • +1
avatar
Хорошо, вот только табы в верхнем меню смотрятся как то непонятно, и даже в мыслях нет что в них что то не так, но чего то явно не хватает)
avatar
Я не буду говорить, что диз. крутой.
Могу сказать, что он точно имеет право на соревнование за шаблон по умолчанию.
Приятные шрифты. Грамотная цветовая гамма. Возможность доступна менять изображение в шапке.
Были учтены возможности ЛС из коробки.
Молодцы! Если вы и не выиграете я буду рад прикупить такой шаблон в каталоге.
avatar
Смена «шапок» очень понравилась. Можно еще сделать в дефолтных настройках темы чтобы можно было менять высоту шапки и вставлять туда баннеры со ссылками на спонсоров/покупателей баннеров.
avatar
Отличная идея! Поддерживаю!
avatar
Отличный дизайн. Насыщенно и в то же время ничего лишнего. Пока это единственная работа столь высокого уровня. Молодцы!
avatar
очень рад, что вам нравится :)
avatar
Я бы уменьшил закругление углов в главном меню. А то через чур «плюшево». Вполне хватит закругления как в табах Прямого эфира («Комментарии», «Публикации»).
avatar
спасибо за предложение, подумаем над этим.
avatar
Нет ничего лучше отзывчивых разработчиков!:)
avatar
Тема получилась приятная.
avatar
спасибо ;)
avatar
Хоть бы один из шаблонов конкурса дали поюзать:( А то одни скрины!
avatar
конкурс на дизайн для дефолтного шаблона. т.е. сначала делают дизайн, а потом шаблон.
avatar
Отлично выглядит! Успехов в Вашем творчестве! Буду следить за ходом работы
avatar
Макет почти стандартный, но настолько хорош и интуитивен, что приятно читается, элементы состоят в логических цепочках.
Уютно главное.

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

чуть выровнять мелкие сдвиги.
И от себя — сделайте кнопку «вступить в блог» — такую Ух! чтобы сразу стало понятно что она делает.
Тайтлы на добавление в избранное, написать письмо (к иконке) добавить.
я понимаю что это макет только, но занести в туду уже можно сейчас.
avatar
* контролы висят в воздухе
avatar
Полностью согласна, по всем пунктам! :)
avatar
спасибо за конкретный отзыв! обдумаем обязательно
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
комментарий был удален
avatar
ссылки на картинки не пашут…
  • hoti
  • 0
avatar
пашут
avatar
у меня 404
avatar
а его ещё себе поставить нельзя? :)
  • Miha
  • -1
avatar
Это пока что только дизайн. Многие ждут))
avatar
А уже можно скачать и использовать тему в работе??? Очень понравилась. Хочу ее использовать.
avatar
А ничего что это макет?
avatar
stfalcon , как продвигаются дела по разработке шаблона? Если, что я могу сделать предзаказ и первый встать в очередь по талонам. Очень жду данный шаб.
avatar
Ответ получил, тему создал — livestreet.ru/blog/paidorders/13513.html
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.