Конкурсная работа ► LiveStreet Evolution™

Представляю Вам конкурсную работу LiveStreet Evolution. Вначале хотел сделать за 3-4 дня шаблон максимально похожий на существующую тему, но улучшенный, так как посчитал что вариант LiveStreet Sweet слишком отошел от оригинала. Однако в процессе работы идеи так и сыпались в мою голову, поэтому тема получила много новых идей, при этом сохранив «свое лицо». Работа кипела 3 недели.

шаблон LiveStreet Evolution


Вначале немного о преимуществах темы:

Люди

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

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

Почему «Метки» нужно убрать?

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

Информация о топике


Метки

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

Лучший комментарий


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

Функции топика


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

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

2) Добавлена аккуратная ссылка «Поделиться», куда можно спрятать социальные сервисы и не портить дизайн.

3) Также думаю будет интересно иметь статистику просмотров страницы. В остальном все стандартно.

Популярное


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

Внутренние страницы:


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

О блоге


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

Строго по теме


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

Кнопка «Создать»


В настоящий момент при нажатии на «создать», открывается страница, где мы выбираем что хотим создать, там же находяться черновики. Признаюсь честно, когда я был новичком в LS я долго искал, где же эти черновики… вобщем я предлагаю сделать такое меню, которое открывается при наджатии на «Создать», и пользователь выбирает что хочет сделать, очень наглядным образом. Тут же и черновики. Если у пользователя нет каких-то прав, то неактивные ссылки просто не отображаются и не путают.

Цветовые схемы

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

Профиль

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



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

Основной шаблон

Главная

Главная с развернутой кнопкой «Создать»

Топик

Профиль

Цветовые схемы

Белая (чистая)

Синяя

Красная

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

avatar
класс!!! +1
avatar
Респект!
avatar
Спасибо
avatar
Зачет!)
avatar
Хорошая работа, очень понравилась идея с кнопкой создать и блоком людей в сайдбаре. Также отлично, что закладки на личной странице вынесены под аватар, а не находятся в основном подменю.
avatar
Спасибо что оценили.
avatar
Молодцы что выжимаете побольше из стандартных функций движка в шаблоне.
Так все классно аж пративно)) А если серьезно, то интересное решение улучшить стандартный шаблон — минимализм и острые уголки. Строгий минимализм!
avatar
Оч. круто. На мой взгляд лучше заменить слово «Создать» на «Написать»
avatar
или Добавить
avatar
Дельное предложение, сделаю «Добавить», а «создать блог» заменю на «блог»
avatar
Неплохо, но прямой эфир нечитаемый практически. Еще не приглянулось поле поиска, ну и топики все-таки как-то отделить нужно друг от друга (имхо)

Плюсую в надежде на доработки!
avatar
Доработки будут. Но поиск низачто не изменю, это крутой поиск и после верстки это будет заметно. Работать будет как на apple.com
Прямой эфир действительно еще нужно доработать, есть несколько вариантов.
avatar
поиск норм, не меняй
avatar
Заплюсовать не могу, но: Очень понравился шаблон!
avatar
Шаблон действительно особенный. Автор молодца!!!
avatar
Дело привычки конечно, но с первого взгляда, рейтинг и имя пользователя сливаются в графе автора, в топиках и комментариях.
avatar
Особенно если ник будет начинаться с цифр, можно запутаться.
avatar
Дельное замечание, спасибо, исправлю.
avatar
Очень классно получилось!
  • guf_
  • 0
avatar
круто замутил)) респект..))
avatar
Дорабатывать для себя придется, но всё равно круто
avatar
Очень прикольно. Я бы себе поставил =)
avatar
Я бы точно поставил!
avatar
ну на стандартный шаблон очень похож. Ребята, ну что здесь такого прям классного???
avatar
Ну например если бы это был новый шаблон, было бы сразу видно что вы недавно в сообществе, возможно не поняли сути системы и у вас низкий рейтинг.

Понимаю что если бы сделали например что-то такое crea.dream-theme.com/ было бы креативно, НО! это будет не LS, а в этой теме очень много предложений.
avatar
Вы знаете, все аккуратненько и нормальненько, но. Это прошлый век.
Как пользоваться этим дизайнов на планшете? Вы подумали?
В свете развития и популярности планшетов и смартфонов, с точки зрения юзабилити данный дизайн не подходит
avatar
Поясните пожалуйста более детально, почему не подходит для планшетов.
avatar
Я не говорю не подходит.
Я говорю с точки зрения юзабилити неудобно. Вы попробуйте мужским пальцем попасть на мелкие ссылки.
P.S. Как подсказка. Интерфейс metro (WP7, W8). Что называется — ищите там. На мой взгляд — там с юзабилити всё в порядке (на планшетах)

А так как черз год у каждого второго он будет (кто пользуется и-нетом) — то сами понимаете какой интерфейс должен быть.

Дизайн — это вторичное. Главное юзабилити в первую очередь. Дизайнер — это технолог с хорошим вкусом.
avatar
В планшете можно увеличить любую часть дисплея… mail.ru, vesti.ru, vkontakte.ru… что-то не похоже что ими нереально пользоваться через планшет мужскими пальцами. Я согласен что могут быть какие-то моменты, поэтому прошу конкретики.
avatar
Ну ёт. Можно! Но удобно ли постоянно увеличивать?
Конкретика. Я написал: изучаем интерфейс wp7, w8.
Лучшие берем. Не спешите с ответом и ухмылками, просто подумайте.
P.S. подумайте информерами и блоками ;)
avatar
Хотите квадратные плитки на главной?
avatar
Всё надо делать с умом ;)
avatar
не знаю что у вас за пальцы и планшет, но мне очень удобен даже такой древний шаблон как new в 0.4.2 на планшетном Safari
avatar
Да причем здесь пальцы. И меренье писю… ми.
Идея и стратегию юзабилити. Да и windows 7- м на планншете можно пользоваться. Но все признают, что их продажи по сравнению с Android и iOS платформами горзадо меньше. Поэтому MS и разработала в спешном порядке Windows 8, где добавила интерфейс metro, заточенный именно под планшеты и смартфоны.

Ну что вы мыслите как-то бедно и сиюминутно. Перед тем как нажать «ответить» подумайте хорошо и проанализируйте.
avatar
возможно в один прекрасный солнечный день (а может это будет морозный, злой день) и кто то, великий! напишет модуль адоптации на планшетники, айфоны, андройды, и т.д.
avatar
Действительно, поясните что именно не подойдет для планшета? Нужен шрифт 18 px и иконки размером с логотип?

Буду благодарен конкретным указаниям по «узким» местам
avatar
Планшеты никогда не заменят настольный пк, пока еще не изобрели более удобного управления чем клавиатура и мышь. Для планшетов нужно отдельный шаблон для лайвстрит делать, поскольку подгоняя его под юзабилити планшетов сильно уменьшим функционал и удобность на пк. Лайвстрит является движком для сетей — где основной контент — текст и коментаирии (много печати), с довольно сложной системой структурирования информации. Упрощая все это дело, потеряешь большую часть функционала в плане удобности пользования.

З.Ы. Говорю как человек уже месяц ломающий голову как упростить лайвстрит на своем сайте и сохранить функционал, где основной контент — люди далекие от инета и сразу вообще не понимают куда они попали и что тут за куча пунктов в меню.
avatar
Хорошо, но кнопки + и — должны быть более «яркими»
avatar
Спасибо, подумаю что можно сделать
avatar
Классно, если такой шаблон будет по default, можно просто уже ставить сайт и не думать пока о дизайне, круто. Мне нравиться, строго и красиво. А еще по секрету зеленый цвет один из моих любимых цветов. КРУТО!
avatar
за помощь новичкам — молодец. очень разумно.
и важно
avatar
Очень классный дизайн! Все на своем месте, очень удобно, ничего лишнего! Молодцы! Полностью согласен с viktorkamen — можно просто ставить на сайт и не думать о дизайне!
  • Umka
  • 0
avatar
Что с поддержкой?
Интересует отказ от IE вплоть до 8 версии включительно (то есть, поддержка начиная с 9 версии). Чтобы не пришлось чистить код от тонны грязных хаков.
Ещё интересны особенности вёрстки. table/div/HTML5?
avatar
какая вёрстка, це ж дизайн :)
avatar
Печально.
avatar
я давно уже не видел верстальщиков на таблицах. не-не, показывать их мне не надо. мне так спокойней если я не знаю об их существовании.
avatar
Я вот сейчас пилю интернет-магазин на HostCMS, так там вообще чёрт ногу сломит: в CSS есть хаки для IE6, а в DOM встречаются и HTML5-элементы, и таблицы где попало, и div.clear.
avatar
круто!
avatar
спасибо!
avatar
Может отойти от стандартной пагинации в пользу бесконечной прокрутки топиков?
avatar
Модная конечно вещь, но есть пару моментов:
1) Для seo говорят не хорошо
2) при нажатии «получить еще топики» подгружаются топики, скрол браузера смещается вверх и приходиться его ловить мышкой… меня лично это сильно раздражает, может я не один такой
3) как дать ссылку на нужную мне страницу?

PS недавно яндекс делал такое у себя в поиске, фишка прожила не больше недели… я полагаю неспроста.

PPS это хорошо для картинок (например google поиск картинок)
avatar
1. Все что дальше страницы все равно закрывают.

3. Более того, если вы бекспейсом возвращаетесь из топика в список попадает опять в самое начала и приходится сто раз тыкать.
avatar
1. Все что дальше страницы все равно закрывают.
т.е.?
avatar
это можно сделать с использованием pushState
avatar
Будучи на РИФе подошел к сотруднику Яндекса с вопросом, почему поисковик отказался от подобной функции.
Конкретно он сам этим не занимается, но все же ответил следующее:
1. Вариант был рабочий, но в силу специфики поисковый выдачи+возможностей размещения рекламы он не совсем подошел.
2. В нашем случае он не видит каких то явных препятствий для реализации. Стрелку перевел на твиттер, мол у них так работает и ниче нормально.
3.Про ссылку на страницы тож сказал все возможно и начал рассказывать убористым техническим сленгом, что я ничего и не понял.
avatar
Думаю такой пагинатор можно реализовать с помощью отдельного плагина, а дефолтный шаблон должен оставлять выбор, тем более в таком спорном вопросе.
комментарий был удален
комментарий был удален
avatar
улыбнуло увидев свой аватар и ник на скришотах:)
avatar
понравился дизайн, жаль нету демо версии
avatar
Хм… что то мне подсказывает, что этот шаблон будет «бороться» за первое место! :)
avatar
Сайдаб зачетный!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.