Пользователь
24 июля 2012 в 13:30

Разное → Как я делал дизайн для «клона Хабра»

Synio . LiveStreet


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

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

Что такое хороший дизайн?



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





Задача


Любой проект, на мой взгляд, стоит начинать с формирования задачи проекта.

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




Анализ


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

Конечно же, если вернуться в историю создания LiveStreet CMS, то первым, на кого следует обратить свое внимание, был и остается Хабрахабр, поскольку именно функционал Хабра был в основании этого движка.
Но за три с половиной года (а к тому моменту именно столько времени исполнилось Лайвстриту), различия в функционале уже были значительными.

Найти фишки


Кроме Хабра, были и другие блого-социальные и новостные сайты, опыт которых я принялся изучать.
К примеру «Look At Me», «Афиша», «DOU», «ЖЖ», «Ридус» и другие (в общей сложности порядка 15). Я брал листок бумаги и искал наиболее удачные решения в функционале.




Совместная работа


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

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

Поэтому для удаленной коммуникации мы использовали три основных инструмента: GMail (и в частности GTalk) — для кратких дискуссий, Worksection — в нем велась основная работа, обсуждение заданий и промежуточных результатов, и конечно же Skype— для долгих дебатов и «оффтопичных» тем (куда ж без них).

GMail Worksection Skype


Плюсы

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

Минусы

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




Новое в дизайне базового шаблона


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

Synio


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

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

Synio . LiveStreet


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

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

D. Выделение «топикстартера»
В комментариях ник автора топика выделен подчеркиванием, чтобы его было легче отличать от других участников беседы

Synio . LiveStreet


E. Удобный поиск и сортировки пользователей
В разделе «Люди» появилась возможность быстрого поиска по нику пользователя. А также сортировки по алфавиту, силе и рейтингу. А также возможность отображения пользователей, находящихся сейчас на сайте.

Synio . LiveStreet


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

G. Быстрый поиск по меткам
Блок с метками дополнился возможностью переключаться между общими и своими тегами. А также в нем появился поиск с подсказками.

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

Synio Добавить картинку


I. Загрузка фотографии

Отдельного внимания заслуживает загрузка фотографии. В одном компактном блоке реализуются возможности загрузить фотографию в топик с компьютера или из интернета, или же просто разместить её, указав прямую ссылку.

Synio


J. Разные аватарки
К несомненным «красивостям», которые хотелось реализовать, относятся различающиеся аватарки для прекрасного и сильного полов. Теперь, если пользователь не загрузил свою фотографию, но указал пол, можно будет отличать его по гендерному признаку и на фотографии.




Резюмируя


Всего для проекта нарисовано более 35 экранов и около 50 различных иконок и пиктограмм.

Synio . Иконки


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

В целом, работать над этим проектом, в одной команде со столь талантливыми людьми как ort и deniart, оказалось увлекательным и приятным занятием.

P.S.


Для тех, кто еще не видел, как новый дизайн выглядит в жизни — эта ссылка для вас.
Если же у кого-то есть вопросы о дизайне шаблонов на LiveStreet — спрашивайте, я постараюсь ответить.
Алексей Попов @AlekseyPopov
карма
46,2
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разное

Комментарии (33)

  • +8
    Ребята, вы молодцы.
    Дизайн отличный, мне понравился, а если еще и в связки с плагином Synio Flow, то лучше и не придумать.
    Процветания вам.
    • +3
      Спасибо!
      • 0
        Мигающая стрелка над словом модули нагло рушит такой хорошо дизайн)
  • +2
    Не смотря на то, что и функционал и идеи были взяты с различных ресурсов — проект мне понравился тем, что он достаточно гармоничен и аккуратен. Меня правда в последнее время привлекает «закрепленная» верхняя панель(меню), но это дело двух минут, да к тому же я смотрю шаблонов уже немало появилось.
    Прямо захотелось для одного проекта купить домен .org и прикрутить туда ЭТО, так как сейчас блоги у меня ведут на самом сайте и сколько я все это пилил вспоминать страшно… а тут… :)
    Еще хорошо то, что она opensource.
    В общем успехов в развитии!
    • +1
      Я бы сказал, часть идей были позаимствованы, а часть родилась в наших светлых головах — и это, как мне кажется самый правильный путь для любого, кто что-то создает.

      Спасибо за теплые слова! Лайвстрит действительно удобная платформа, которую уже используют несколько сотен различных ресурсов.
      • +2
        Согласен! Хоть многие разработчики плюются на подобное, но мне кажется, что «не нужно изобретать велосипед»
        Думаю использовать Вашу платформу Я буду в ближайшем времени…
  • +4
    Чрезмерное увлечение box-shadow ведёт к тормозам.

    А так — ничего.
  • +1
    Я думаю, стоит сделать ссылки в шапке (которые на чёрном фоне) сделать кликабельными на всей высоте плашки.
  • +1
    О, 1.0 вышла оказывается, а рассылки не было. Буду тестить :)
  • +6
    Очень здорово!
    А вот при поиске различий между мужской и женской аватаркой — подвис. Слишком незаметны различия. Может сделать более явные? Например, прически?
  • +4
    Шаблон настолько красивый, удобный и функциональный, что я огромным удовольствием на него перешел со своего бутстрапного кустарного самопала.
  • +2
    не понял про разные аватарки — они ж вроде одинаковые? или я чего-то не вижу? прошу объяснить, где тот самый гендерный пиптик
    • 0
      Проще увидеть, когда они не рядом стоят. Попереключай закладки в браузере — мальчик / девочка
    • +1
      Разная толщина шеи, ширина челюсти, плечи.

      Или же там деление на «Мальчик» и «Эльф 80-го уровня», да.
      • +3
        Все-равно, как по мне, так задача недовыполнена. Глядя на аватарку девочки, нельзя однозначно сказать, что она девочка. Вот если бы бант на ней был, или косички. Я понимаю, что это стереотип, но все же.
        • 0
          Я думаю, в таком деле, как различение аватарок по полу, использование стереотипа — хорошая идея.
  • –10
    imageАртемий Лебедев посмотрел бы на букву «Ё» неодобрительно.
    • +1
      Эта иллюстрация на основе реального комментария. Но, думаю, Артемий Лебедевь вряд ли бы особо переживал на сей счет. Мне кажется, он слишком занятой человек, чтобы реагировать на то, использует ли кто-то букву «ё» в комментариях.
      • +6
        Да и букву Ё не особо парит, что про нее думает Артемий.
    • +4
      ещё :D
  • 0
    Серьезный рывок по сравнению со старой версией, мои поздравления! Я думаю такими темпами можно перерости в самый удобный движок с классным и чистым дизайном. Удачи.
  • +3
    Спасибо за отличный дизайн!
    С тобой всегда здорово работать :)
  • 0
    Отличный дизайн!
    Вот только иконка очков мне показалась не очень удачной. Ни с первого раза у меня получилось понять, что там. Думалось что, нечто зачеркнутое.
  • –10
    вот такие клоносоздавальщики делают клоны европейских машин и называют их Ладами…
  • –1
    Раз 100 промелькнуло ключевое слово дизайн, но в шаблоне только шаблон.
    Короче можете обижаться, но это просто хороший шаблон минимал.
  • +1
    Спойлер
    Немного не по теме дизайна будет сказано, но сейчас вот решил пощупать CMS и заметил существенный недочет — отсутствие файла robots.txt, что есть нехорошо
  • +1
    Все хорошо. Но есть, ИМХО, ложка дегтя — полностью меняя дизайн, отказываясь от поддержки mootools, и переверстывая все шаблоны, но при этом сохраняя верность Smarty, имело смысл сделать еще один очень важный принципиальный шаг — максимально задействовать механизм наследования шаблонов. Уж не знаю, не подумали об этом или просто не решились, но на мой взгляд это серьезное упущение.
  • +1
    Дизайн отличный, выложите еще исходники PSD для полного счастья.
    Многие делают свои проекты именно на этом шаблоне с отрисовкой дополнительных страниц.
  • 0
    Достаточно давно присматриваюсь к LiveStreet, всё чешутся руки «а взять и поставить», не смотря на то, что приличное время занимаюсь разработками на базе платформы WordPress Multisite. Наконец-то, вроде бы как, наклёвывается интересная задача.

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

    Отсюда вопрос. В LiveStreet можно ли сделать так, чтобы некий пост можно было опубликовать только для определённой группы людей? Скажем публикуем только для приволжских компаний новость — её видят только те люди, которые работают в определённых компаниях, которые находятся в группе (так скажем, с терминологией разберёмся позже) «приволжские компании»? Вообще можно ли будет построить подобные конструкции без особого хирургического вмешательства в код?
  • –1
    Отличный в основном дизайн.
    Но его портит одна довольно значительная имхо проблема связанная с комментами.
    Мне кажется что ошибочно разделять аватар и имя пользователя изначально. Это один блок информации и должен быть явно различим как таковой. Но даже если посчитать это утверждение ошибочным и разделить его — все равно остается проблема выравнивания:

    Визуально никнейм более связан с нижним комментарием из-за выравнивания по почти незаметной рамке комментария. Если и разделять имя и аватар — то по крайней мере однозначно привязывая имя к тексту комментария — и выравнивание здесь должно быть именно по тексту, а не по его рамке.
    Повторюсь — имхо изначально ошибочно разделять аватар и имя. Решение на хабре — намного более удобное и понятное для пользователя.
    • –1
      Сорри, хотел проиллюстрировать, но картинка пропадает из комментария. Вот линк — 6g6.eu/sih0-livestreetcms.png
  • 0
    добавьте всплывающую подсказку к звездочке (добавить в избранное) под топиком.

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