Обновленный дизайн TJ и темная тема от Анны Гласс и Zoibana.
Редизайн — вещь сложная и отнимает много труда и времени. Комитет на своем веку успел несколько раз кардинально изменить облик и структуру сайта, но идеала все нет и нет. Мы взяли инициативу в свои мозолистые руки и сделали новую версию дизайна интерфейса TJ. Примерно за месяц.
Мы сделали пять основных страниц: ленту, страницы поста и комментариев, профиль пользователя и личный профиль. А также свой вариант темной темы, которую мы заслужили и которая давно не дает всем покоя.
Мы расскажем про изменения, которые внесли, покажем как будут реализованы отдельные идеи, которые невозможно рассмотреть в статике и дадим схемы с использованными цветами и расшифровками.
Мы хотели бы сказать спасибо Никите, который первым подал идею с созданием нового интерфейса, пригорев после очередного редизайна. В комментариях, обсуждая правки, ты предложил мне попробовать доделать самой, дал доступ к своему артборду в Figma и он стал отправной точкой. В процессе ко мне присоединился Zoibana. Мы поменяли очень многое, но именно с этого все началось, спасибо.
Интерфейс
Основой стал минимализм. Плоский дизайн интерфейсов (flat) последние годы постоянно двигается в сторону максимального упрощения деталей. Типографика в текущем дизайне TJ является неким производным швейцарского (интернационального) стиля (выключка налево, ассиметрия в оформлении заголовков, макетов и текстовых блоков, рубленые шрифты), ставшего одной из главных составляющих flat-дизайна. Но в графическом оформлении остальных элементов это не имеет продолжения и вместо упрощения, мы видим очень много лишнего.
То что было актуально в нулевых, сейчас выглядит неуместно. Мы убрали тени, рамки и другие элементы, которые утяжеляют нынешний интерфейс. Упростили оформление всех плашек и дополнительных блоков. Разбили элементы интерфейса на смысловые группы, продумали взаимодействие, подобрали для них соответствующие цвета и использовали цветовое кодирование.
Встречайте!
Навбар, колонки подсайтов и прямого эфира, юзер-меню
Навбар
В качестве фонового цвета навбара мы выбрали наиболее приятный оттенок, стараясь не отходить от фирменного, мягко выражаясь, «цвета испуганного персика», который используется для акцентов последнее время на TJ. Это было чуть ли не самым сложным этапом из всей работы. Если бы мы делали тему или фирменный стиль с нуля, я бы посоветовала не связываться с таким цветом вовсе.
Считается, что бежевые, персиковые, кремовые и другие нежные теплые цвета — это всегда беспроигрышные варианты оформления чего угодно. Скорее наоборот — это одни из самых сложных и капризных цветов. Они либо слишком бледные (их видно не на всех мониторах в приятном глазу оттенке), либо становятся грязными при усилении интенсивности, либо перестают быть мягкими и напрягают глаза. Также их визуально делают грязнее сочетания с оттенками серого и черным (в отличие от холодных цветов), а белый использовать проблематично — он на их фоне пропадает.
Поиск
Поле поиска стало компактнее, чище. По умолчанию поиск свернут, не загромождает и не утяжеляет навбар, постоянно находящийся перед глазами, фоновым цветом плашки.
Подсайты и прямой эфир
В левой колонке подсайтов коренным образом ничего не изменилось, кроме визуального оформления. Основные изменения коснулись колонки прямого эфира.
Ее по-прежнему можно свернуть, а красный индикатор продолжает раздражать и обозначать активность ленты прямого эфира.
Однако к привычным положительным и отрицательным оценкам добавилось цветное кодирование для уведомлений об ответах на ваши комментарии и для уведомлений о новых комментариях к вашим собственным статьям. Таким образом групп уведомлений стало четыре.
Юзер-меню
Выпадающее меню пользователя мы сделали более функциональным:
- теперь вы можете полюбоваться своим рейтингом всего в один клик;
- черновики теперь призывно подсвечиваются, соблазняя дописать давно заброшенные материалы;
- закладки показывают общее количество сохраненных постов и комментов
Страница материала и комментарии
Выделить важное
В центральной колонке в материале появился переключатель «Выделить важное», который позволяет оставить в материале самую суть и мякотку, скрыв всю незначительную часть. Будет актуально и в лонгридах, и в новостных заметках, где необходимо обозначить фабулу.
При включении переключателя важная часть остается обычным цветом текста статьи, а весь остальной текст уходит на второй план, становится максимально бледным, при этом не исчезает полностью и при большом желании (и хорошем зрении) его все еще можно прочесть.
Мы считаем, что для тех у кого со зрением не очень, разумно будет создать специальные контрастные темы: основная и темная. Потому что высокая контрастность доставляет неудобство пользователям у которых нет таких проблем.
Для работы этого функционала автор материала должен разметить текст новым инструментом «важное» в редакторе. Этот переключатель в материале появляется только при наличии разметки в тексте материала.
Комментарии к материалу
Блок с последним материалом из подсайта
Сейчас в конце некоторых статей выводится блок с последним материалом из текущего подсайта и он часто сбивает с толку. Кажется, что это ссылка по теме поста или какой-то дополнительный материал, имеющий отношение к текущему посту, хотя это не так.
Чтобы избавиться от этого, мы вынесли этот блок под статью, отбили его цветом и фоном, а также добавили ему краткий подзаголовок «Читайте также», который снимет сомнения в принадлежности ссылки к текущему посту.
Плашки комментариев
Мы упростили оформление всех плашек на странице, убрав рамки и оставив только цветные блоки. Новые комментарии подсвечиваются бледно-персиковым цветом.
Личный профиль и профили других пользователей
Мы причесали существующий дизайн профиля пользователя, убрав лишние и дублирующие элементы и вкладки.
Кнопки соцсетей
Например, кнопки социальных сетей, ранее сиротливо прятавшиеся в отдельной вкладке «Информация», теперь гордо размещаются на основной панели пользователя. Тем более, что сейчас у пользователей, вошедших на сайт через Google, эта вкладка была пустая. Теперь нет необходимости в ее наличии.
Вкладки личного профиля
Вкладка «Подписчики» полностью дублировала функционал блока с аватарками и количеством подписчиков в карточке профиля. Поэтому мы посчитали наличие отдельной вкладки «подписчики» в профиле избыточным.
Вкладка «Уведомления» тоже пропала. В раздел со всеми уведомлениями при большом желании можно попасть из выпадающего меню колокольчика.
Вкладку «Черновики» мы решили оставить в качестве укора и лишнего напоминания о вашей прокрастинации.
В результате из профиля пропала эта наимерзотнейшая горизонтальная прокрутка с инородными стрелочками прокрутки по краям.
Цветовая схема
Черного цвета в схеме нет. Ахроматические цвета лучше не использовать при создании интерфейсов (разве что для незначительных акцентов), заменяя их на близкие аналоги, имеющие цветовой тон.
Одним из самых важных цветов в основной теме был синий цвет
D (061E43). С разной степенью прозрачности этот цвет используется для основного текста, для второстепенных ссылок, для иконок и других элементов. Даже те элементы, которые визуально кажутся серыми, являются производными от базового синего.
Темная тема
Основное мы рассказали на примере основной темы, так что для темной мы просто показываем артборды и цветовую схеу. Были бы рады запихнуть их в галерею, но пан Пшеряев так сделал сайт, что с десктопа не увеличиваются по нажатию картинки из галереи, поэтому мы даем фул.
Цветовая схема
Немного отличается в реализации от основной, в ней есть пара дополнительных цветов, но принцип тот же самый.
Лента и юзер-меню
Страница материала и комментарии
Личный профиль и профили других пользователей
Донаты пихать сюда.
Комментарий недоступен
Да. Все затевалось ради этой гифки для тебя
Ничеси, вы молоды. Очень достойно все сделано.
имхо, есть хорошие (и отличные) и не очень моменты.
например, поиск спрятать за клик? зачем? в шапке достаточно места, чтобы была строка, как сделано сейчас.
другое дело, как этот поиск работает :)
Комментарий недоступен
и ещё "сменить ник"
Удаляются не нахуй, а впесду
@Zoibana @Квадрат Глассевича
А локально её можно как-нибудь накатить? Или это пока только демо, чтобы попинать понятно кого?
предлагаю пока просто накатить
Только вот в некоторых местах контрастность слишком уж низкая.
Но общий зачёт — 99.99/100
Пока просто картинки
Нахуя его сворачивать, если вместо него остаётся пустое место? Поиграться в свистелки перделки захотелось? А другим придётся на один клик больше делать чтоб найти чтонибудь
Выделить важноеДля работы этого функционала автор материала должен разметить текст новым инструментом
Никто не будет этой хуйнёй заниматься конечно же
Темная темаПросто не нужна. Ещё одна свистелка перделка.
И опять же нет ни /r/all ни возможности пометку о какомто пользователе сделать напротив его ника, ни посмотреть историю общения с ним. Важных фич нет, зато свистелок дохуя, ещё marquee вставьте куданибудь
Зачем делать на один клик больше? Кликнул на иконку поиска, строка развернулась и в ней уже курсор мигает, бери да печатай.
при такой реализации обычно сразу проставляют курсор, это просто не показано
Никто не будет этой хуйнёй заниматься конечно жетаки да
И опять же нет ни /r/allопять свою персонифицированную хотелку выставляешь как общепризнанную? А мне вот лучше бы темную тему (нормальную)
ни возможности пометку о каком-то пользователе сделать напротив его ника, ни посмотреть историю общения с ним.чтобы тебе траллировать легче было? Изволь уж как-нить выводить лицемирианцев на чистую воду без вспомогательных инструментов
Комментарий недоступен
Пометки о пользователе - самая большая свистоперделка из списка
ох бля. сорян, но тут практически к каждому пункту есть претензии
вообще конечно было бы интересно послушать мнение продакта в комитете
Комментарий недоступен
Призыв Зоибаны сработал!
Прежде всего хочу заметить, что нам с Владом прекрасно идут фотографии на болотах!
Денис, что с сайтом? Постоянные 503 ошибки.
Комментарий недоступен
TJ Einsteins at their best.
Я в теме о редизайне и тут и на VC как только мог спорил относительно идеи о том, что ПЭ убирается, а хуйня слева — нет.
Это же логично, что управление прямым эфиром находится в другом блоке.
Анна Гласс, ты супер! Зоибана - просто Батя.
Батя в здании!
Пиздец вы крутые, обожаю обоих
Определенно лучше, чем сейчас, но если бы это принесли мне, то доебался бы до половины изменений (Аня прости не ешь меня). Навскидку до:
нечитаемого и цветного текста (ну объективно, какой желтый текст на белом фоне и текстовые гирлянды в 2к19?)
излишка размеров шрифта
позиционирования элементов
тезиса про аж две специальные контрастные темы
...
В текущем макете две главные проблемы. Его трехколоночность при полной бесполезности #прямосейчас левой колонки (которцю Цыпломен обещал заполнить НОВЫМ ФУНКЦИОНАЛОМ) и следующие из нее проблемсы с повисанием контента в центре на больших разрешениях, нехваткой места на маленьких и позиционным распидориванием. И ужасная реализация отдельных блоков и фич (тот, кто сделал блок лучшие комментарии, не приближайся больше к веб-разработке, пожалуйста). И если со вторым ваша реализация частично справляется, то что делать с первым?
Тем не менее, господа с основы, обратите внимание как минимум на реализацию:
странички профиля
юзерменю
последние материалы из подсайта и лучшие комментарии (эти блоки в текущем просто кричат "переделай меня")
Я тебе в чате написала, отвечу еще и тут, чтобы было понятно почему да как. Цветные гирлянды - редко будут встречаться вместе, они на артбордах только для примера. Да, мне самой нравится идея с цветными блоками и у нас было пару вариантов, но они для демонстрации выглядят плохо, а вот если делать на сайт можно было бы и позаморачиваться.
Но то как сейчас реализовано это - очень грязные сочетания.
Насчет цвета - в статье про это есть, любые пастельные тона таких оттенков почти сразу идут лучше на фиг. Это колхоз. Но если бы мы подобрали другой хороший цвет, даже бьющийся с фирменным стилем начался бы вой что мы нарушили концепцию, мы не стали отходить.
Привет. Спасибо за системно сформулированные идеи. Я в отъезде до понедельника, после этого обещаю детально разобрать вашу концепцию (хорошие и плохие идеи как их вижу я), поделиться своими мыслями и рассказать, о чем мы внутри себя никак не можем договориться.
Вы расисты?
Зачем весь черный цвет выкинули?
на ресурсах ИД комитет нельзя про негров
Комментарий недоступен
На моем мониторе, он вообще другой оттенок имеет.
Ну и про то, что цвета можно и нужно подгонять, я надеюсь ты в курсе.
Комментарий недоступен
При чем тут дизайнер? Все дизайнерские решения апрувит продакт.
а выделять важное вручную будут авторы, или вы запилите очень умную нейросеть?
"Для работы этого функционала автор материала должен разметить текст новым инструментом «важное» в редакторе. Этот переключатель в материале появляется только при наличии разметки в тексте материала".
Комментарий недоступен
Вот это прям нужная вещь, @Denis Shiryaev возьмите на реализацию, текущий вариант действительно сбивает с толку.
лол
Комментарий недоступен
Сейчас бы CSSочку
Всё заебательски, но не кажется ли вам, что "Главное" — это слишком? По сути в статье остаётся всё то же самое, лишь меняется цвет некоторых словосочетаний/слов, по которым всё равно пробегаешь глазами. Хз, выглядит это громоздко, особенно, когда рядом ссылка/цитата/врезка/подзаголовок.
А ещё, чисто от меня: жёлтый на жёлтом (жёлтый на испуганном персике) это воще не айс.
Смотря насколько большой будет статья, тут пример на короткой статье просто, там это не нужно
заголовки будут больше не нужны из-за "главного"
А где кнопка применить я не понел
Выделить важное дрочь какая-то.
Во-первых: дополнительная нагрузка на автора.
Во-вторых: предположу, что это может существенно сократить проведенное время пользователем на странице, что плохо скажется на статистике.
В-третьих: вы сами давно читали тексты целиком? Пользователи сканируют тексты, а не читают их. Любой читающий человек сам может быстро сориентироваться и выделить для себя главное, отбросив воду.
Выделить важное - это как один из допинструментов редактора. Он не обязательный. Как есть сейчас выделение маркером, жирным и курсивом.
Выделит - хорошо, появится переключатель. Не выделит - тоже хорошо.
Никто не говорит, что это пиздец гениальное решение, которое решит все проблемы.
Это МОЖЕТ БЫТЬ ПОЛЕЗНО в отдельных материалах. На основе этого можно построить какую-то текстовую игру или шутку.
А все вцепились в это как будто это принудительная анальная кара авторов материалов
Оуу, мама, я в теливизоре 🤗 Рад что мой бомбеж послужил отправной точкой в борьбе за нормальный вид сайта! Вы прям молодцы что заморочились, чувствуется что накипело)) ! Те кто говорит про нынешний дизайн TJ - "все по гайдлайнам Human Interface" (ШТО блять?!) и "все круто, ничего менять не надо" - просто безглазые кретины. Сейчас сайт выглядит несовременно (все эти рамки вокруг кнопок, безумные тенюшки и т.д.) и его точно нужно менять. Короче, респектулечки за борьбу, мы - правы!))
PS: я кстати завтра улетаю в Берлин, на Red Dot Design Awards 🤘🏿
те кто так говорят, не в курсе про что говорят, всего лишь
PS: я кстати завтра улетаю в Берлин, на Red Dot Design Awards 🤘🏿покажи там коллегам наш дизайн, спроси что плохо, а что хорошо и покажи оригинал) напиши че сказали постом)
Дизайн комментировать не буду, но автору желаю поскорее научиться принимать и работать с критикой :)
Прокомментируйте, интересно же) Не оч понятно, где мы не приняли аргументированную критику.
Уважаемые камрады,
Прошу прощения, но я ниасилил этот longread. Правильно ли я понимаю, что к приложениям «Комитета» он никакого отношения не имеет? Ибо я, из-за многолетнего неимения ББ, юзаю только и исключительно приложения. 🤔
Пользуясь казусом, замечу, что считаю приложения «Комитета» и в особенности текстовой редактор приложений **недосягаемо** лучшим в своём жанре. Временами мне хочется написать хоть что-то, лишь бы ещё разок поюзать этот редактор. 😁👍👏
—
Только десктоп Под пк.
Что хотел сказать автор? Какие цели ставили создавая макеты? Соответствует ли образ вашего концепта с идеями сайта? Ок, выкрутили флэт на максималки, понизили контрастность (очень не хорошо), придумали пару улучшений, и что? Это какое то бинго для дизайнеров "минимализм", "стало чище". Может перестать использовать избитые клише? В общем ничего сильно не поменялось, как упражнение на тему - "я бы сделал так" зачет, в остальном неее.
ты просто не правильно трактуешь увиденное с точки зрения событийности.
подсказка в названии. Тебе кажется,что они предлагают редизайн того что есть.
А на самом деле, они показывают как нужно было сделать редизайн еще тогда..
Все верно. Буду рада если расскажешь какие цели ставили при создании нынешнего интерфейса, как они реализованы и что хотел сказать автор.
Делать интерфейс уже готового продукта, в котором уже все решено и минимально можно отходить от заданной концепции - это как раз и есть то, что вышло. Был бы новый сайт, можно было бы посмотреть какие цели и как реализовано. Но я бы туда не только сетку такую не взяла наверное, но и цвета, и еще целую кучу деталей.
Ну насчет просто "перекрасили" тут уже говорили, но очевидно же что это не так) Хотя этому и уделено много внимания.
Какие цели преследуют поисковики, переделывая свои страницы так, чтобы они не выглядели как в 2009?
я TJ в рот ебал. Раньше оплачивал, чето в защиту Навального сказал - меня забанили, потом запретили плюсовать-минусовать комментарии. Приложение удаляю. Цыплухин ты крысой был ей и остался да и вся ваша шайка. Адьос.
А мобильное приложение когда затемним?)
На этой неделе по идее
а могли бы вы завернуть это в юзерстайл для Stylish или плагин для Grasemonkey?
Охуеть, что происходит, респект таким пацанам
Аня красотка, Зоибана - молодец.
Комментарий недоступен
Сейчас постепенно вводится поддержка этого. В том числе и для сайтов
Комментарий недоступен
Тебя кто-то заставляет их использовать?
на первый взгляд симпатично, но как вы пришли к такому цветовому решению в хедере -загадка..если только подчеркнуть токсичность ресурса.
за отделение "читать так же" -респект.
функцию выделить важное не понял совсем.
Цветные надписи сбоку-очень спорно
Предложенный вариант безусловно стильнее, но нет какого-то концептуального решения, которое заставило бы комитет это реализовывать.
А так-то молодцы конечно. надеюсь что-то из ваших трудов все таки возьмут в работу.
Фирменный цвет тж очень сильно ограничивает палитру возможных цветовых сочетаний. С этим цветом стиранных трусов сочетается либо чёрный, либо белый, либо что-то родственное с этим персиком с низким давлением.
Белый не видно для текста, чёрный слишком контрастный. Серый превращается на этом фоне в говно. Желтый - компромисс.
Сорян за глупые вопросы, но как этот редизайн поставить себе?
Очень понравилась темная тема и в целом идеология flat, спасибо за труды:)
Эх, пока никак, но нужно спросить @Zoibana сможем ли мы придумать как это сделать уже в более практичном варианте, чтобы поставить)
Вот что бывает когда рандомные чуваки делают дизайн, вместо того чтобы этим занимались дизайнеры.
Вот что бывает когда рандомные ноунейм чуваки приходят в комменты и без аргументов просто обсирают авторов.
Осталось найти того, кто это сверстает.
А на чем там фронт написан, кто-нибудь знает?
Да, сверстать это не картинки в фотошопе смалявать ))))))))))))))
❤️
Уточните пожалуйста: вы выложили лонгрид с колористическими квадратами Малевича и PNG размером 3652 x 2357, на которой ноутбук не занимает и половины размера, но где тот самый тумблер (не грета), который включает тему?
Или надо будет custom CSS заводить?
Как и везде : в настройках. Можно включить только светлую, только темную или по расписанию
Слишком мультяшно что ли. Много пестрых цветов, отвлекающих от контента. Как есть - почти идеально.
Правая колонка такая пестрая только потому что нужно было для примера показать все типы уведомлений. В реальной жизни там одновременно будет не больше 1-2 доп цветов
Да сдалась эта темная тема на пеке. На телефоне сделайте лучше.
Комментарий недоступен
Он есть там в раскладке, жёлтым я бы его не назвала, но да, он неудачный, как и сама идея таких цветов. Вот с нуля я делала темную тему, а то что с основной, без изменения требований к тому чтобы там присутствовал теплый пастельный цвет, ничего лучшего сделать нельзя, попробуй сам, убедишься)
В идеале нужно вообще эту идею убрать, но учитывать то что есть сейчас тоже пришлось.
Make TJ great again
Комментарий недоступен
Спасибо)
- цвет шапки сейчас не норм и у нас не идеально, я бы вообще его выкинула и сделала кардинально другой, но мы придерживались того, что тут есть, чтобы не было вопросов про фирменные цвета и их тотальную замену
- согласна, там можно улучшить тонкими линиями и сделать не так воздушно
- радуга в ленте для демонстрации всех уведомлений, в реальности она такая выпадет раз в жизни наверное) вообще мне нравится идея с цветными блоками под текстом, с нее мы и начали, но на сером и рядом с пастельными тонами - это выглядит очень тяжело, когда мы свели все в одну схему, чтобы показать все цвета - это выглядело еще более цветасто чем сейчас, но то как это сделано в данный момент на тж - еще хуже, цвета просто грязными становятся. а так я - за цветные блоки
- текст можно делать темнее, на моем мониторе он почти черный, но лучше из основного цвета темнее, чем просто черный
- темная тема с нуля, поэтому и хороша) в ней не надо было учитывать весь мусор с цветами и фирмстилями
Почти единственный тут аргументированный комментарий с конструктивной критикой. Спасибо
Комментарий недоступен
Там есть ссылка которая разворачивает весь список.
А приложение - как всегда глючное говно
Приложение да, глючное, но нет, не 💩.
Я не знаю даже **сильно отдалённо** столь же годные приложения в этом жанре как приложения «Комитета». Ну а глюки… глюки это неизбежные белезни роста. Но можно перестать развиваться, устранить все глюки и забронзоветь 🏚. 🤷🏼♂️
—
Ты в бете поди, да?
Комментарий недоступен
Анимации там кастрированные. Так конечно автофокус на инпуте есть