Офтоп
Анна Гласс
4904

Редизайн здорового человека

Обновленный дизайн TJ и темная тема от Анны Гласс и Zoibana.

В закладки

Редизайн — вещь сложная и отнимает много труда и времени. Комитет на своем веку успел несколько раз кардинально изменить облик и структуру сайта, но идеала все нет и нет. Мы взяли инициативу в свои мозолистые руки и сделали новую версию дизайна интерфейса TJ. Примерно за месяц.

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

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

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

Интерфейс

Основой стал минимализм. Плоский дизайн интерфейсов (flat) последние годы постоянно двигается в сторону максимального упрощения деталей. Типографика в текущем дизайне TJ является неким производным швейцарского (интернационального) стиля (выключка налево, ассиметрия в оформлении заголовков, макетов и текстовых блоков, рубленые шрифты), ставшего одной из главных составляющих flat-дизайна. Но в графическом оформлении остальных элементов это не имеет продолжения и вместо упрощения, мы видим очень много лишнего.

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

Встречайте!

Навбар, колонки подсайтов и прямого эфира, юзер-меню

Навбар

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

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

Поиск

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

Подсайты и прямой эфир

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

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

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

Юзер-меню

Выпадающее меню пользователя мы сделали более функциональным:

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

Страница материала и комментарии

Выделить важное

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

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

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

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

Комментарии к материалу

Блок с последним материалом из подсайта

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

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

Плашки комментариев

Мы упростили оформление всех плашек на странице, убрав рамки и оставив только цветные блоки. Новые комментарии подсвечиваются бледно-персиковым цветом.

Личный профиль и профили других пользователей

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

Кнопки соцсетей

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

Вкладки личного профиля

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

Вкладка «Уведомления» тоже пропала. В раздел со всеми уведомлениями при большом желании можно попасть из выпадающего меню колокольчика.

Вкладку «Черновики» мы решили оставить в качестве укора и лишнего напоминания о вашей прокрастинации.

В результате из профиля пропала эта наимерзотнейшая горизонтальная прокрутка с инородными стрелочками прокрутки по краям.

Цветовая схема

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

Одним из самых важных цветов в основной теме был синий цвет
D (061E43). С разной степенью прозрачности этот цвет используется для основного текста, для второстепенных ссылок, для иконок и других элементов. Даже те элементы, которые визуально кажутся серыми, являются производными от базового синего.

Темная тема

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

Цветовая схема

Немного отличается в реализации от основной, в ней есть пара дополнительных цветов, но принцип тот же самый.

Лента и юзер-меню

Страница материала и комментарии

Личный профиль и профили других пользователей

Донаты пихать сюда.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы рассказать свою историю.

Написать
{ "author_name": "Анна Гласс", "author_type": "self", "tags": [], "comments": 276, "likes": 158, "favorites": 60, "is_advertisement": false, "subsite_label": "flood", "id": 123132, "is_wide": true, "is_ugc": true, "date": "Tue, 29 Oct 2019 18:36:31 +0300", "is_special": false }
Объявление на TJ
Музыка
Новые альбомы, клипы, концерты, истории о музыкантах, а также эксперименты читателей TJ.
Подписаться
Подписан
Отписаться
0
{ "id": 123132, "author_id": 111689, "diff_limit": 1000, "urls": {"diff":"\/comments\/123132\/get","add":"\/comments\/123132\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/123132"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 214360, "last_count_and_date": null }
276 комментариев
Популярные
По порядку
Написать комментарий...
33

Комментарий удален по просьбе пользователя

Ответить
16

и ещё "сменить ник"

Ответить
0

Удаляются не нахуй, а впесду

Ответить
Обсуждаемое
Новости
В Германии арт-активисты извинились за установку колонны с «прахом жертв Холокоста» напротив Рейхстага
Они заявили, что проводили раскопки в 23 местах массовых убийств, чтобы собрать останки для инсталляции.
Новости
На Ставрополье 31 декабря решили объявить выходным днём после голосования в инстаграме губернатора
Жители края готовы отработать в субботу 28 декабря.
Новости
В Центральном парке Нью-Йорка демонтировали памятную табличку от «Наили» с признанием в любви к Костину
Эта табличка стала одним из доказательств в расследовании ФБК об отношениях главы ВТБ и журналистки «России 1».
Популярное за три дня
Новости
Егору Жукову дали три года условно. Студента ВШЭ признали виновным в экстремизме из-за четырёх видео на YouTube
Приговор по одному из самых резонансных дел года вынесли под скандирование протестующих у здания суда.
Путешествия
Миллениалы экономят в Японии
Это о 30 днях в прекрасной Японии. Я буду пытаться донести до вас, насколько необычная, комфортная и не дорогая эта страна. Все будет не максимально, но пожалуй даже излишне подробно, чтобы не забыть лучшие деньки своей жизни.
Разборы
Фанаты «Зенита», «Динамо», «Локомотива» и «Арсенала» покинули трибуны. В знак протеста из-за задержаний «спартаковцев»
Уникальная акция, объединившая болельщиков разных клубов.

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovy", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byswn", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223677-0", "render_to": "inpage_VI-223677-0-130073047", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=cndo&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudv", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "ccydt", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvc" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "chfbk", "p2": "gnwc" } } } ]