Пока пара энтузиастов взялась за конвертацию моих идей в готовый пресет для Stylish, у меня возникло мотивирующее чувство продолжить. Сегодня уйдём в глубь поста, посмотрим как мы сможем улучшить визуальное восприятие древовидных комментов, кое-где сбалансируем стили. Вобщем случилось то, чего я опасался больше всего — тяга к улучшизму обуздала меня и я кое-где подправил не только цвета. Так как интерес к теме darcula для Хабра был ощутим, я позволю себе катиться дальше с “вывороткой” цвета.
![](https://habrastorage.org/r/w780q1/files/ff0/a47/007/ff0a470079204d85839e1171907c7960.jpg)
Напомню, что в предыдущем посте я вывернул наизнанку Главную и если кто-то хочет присоединиться к энтузиастам и конвертировать PSD > Stylish, то исходник выложил на г.драйве (сорри за беспорядок в слоях, но обычно я прилежный)
Кстати, пробу уже можете снять. Камрад bano-notit просто молодчинка, схватил пипетку в руки и прямо с png-шек начал выцеплять весь окрас. Скачайте посмотрите этоn пресет для Stylish. Конечно могут быть неточности, ведь дальше главной он пошёл по своей инициативе разукрашивать. Тут я понял, что надо продолжать начатое дело, чтобы он не сбился с пути.
Действительно, на даркуле гораздо сильнее могут забирать на себя внимания картинки с белым фоном. Хорошее решение предложил камрад Rondo в комментах: всем изображениям уменьшать opacity (я рекомендовал бы до 70% / 0.7), а по onhover восстанавливать до 100%. Круто и эффективно!
Идею вновь подхватывает bano-notit, предлагая делать эффекты более плавными через css путём:
Вообще заботушка о юзерах!
Итак — разворот. Посмотрим, что тут у нас темненького:
![](https://habrastorage.org/r/w1560/files/73f/3ae/b9e/73f3aeb9e8104bc6add8ec6aab5d7ced.png)
Ничего необычного тут: линки, цвет кармы и рейтинг у нас уже были определены в первом посте. В блоке ниже лишь позволил себе убрать разделители, добавил ему 1px бордер, который визуально немного усилил очертания. В тот же цвет окрашивается выделенная область блока.
![](https://habrastorage.org/r/w1560/files/1de/07b/9d3/1de07b9d3bf34004a526dde6f3d5d0b7.png)
Вроде бы нужно просто сделать копи-паст. Но нет. Почему-то в оригинале на Хабре разная размерность и интенсивность шрифта как для заголовков “карма” и “рейтинг”, так и для их значений. Решил сохранить, вдруг Хабр что-то понял, а я — еще нет!
![](https://habrastorage.org/r/w1560/files/cb6/86d/eaf/cb686deafbea494b99b53716ccde877d.png)
С ними всё тоже самое как и с Хабами на главной. Убрались только куда-то полосочки (не мной!). Это всё какие-то хитрые стили Хабра, меня не спрашивайте. Я лишь только по аналогии с кармой использовал аналогичный цвет для количества комментариев к постам.
![](https://habrastorage.org/r/w1560/files/eca/c71/cc9/ecac71cc905949eeb560ce0e33e7cabb.png)
Базируется на аналогичной гаммой что и вышеупомянутый блок, располагающийся справа. Цвет плашки с фильтрами отображения взят из основных табов с главной страницы.
![](https://habrastorage.org/r/w1560/files/1a9/72a/7a4/1a972a7a40034ad0b3e9982aa1b730b5.png)
Странно, что у Хабра в оригинале тут какой-то уже нцатый стиль шрифта и не от мира сего. Предлагаю “натянуть” сюда аналогичный всем заголовкам font-face. Ведь это и есть заголовок…
![](https://habrastorage.org/r/w1560/files/26b/76e/05c/26b76e05c6624dea823683f0d14e2440.png)
Пытаюсь оптимизировать UX тут. Мне кажется, что если чуть “углубить” ступеньки древовидности комментов, то визуально иерархия будет лучше читаться. Поэтому я выровнял тело коммента и “ответить” не по уровню аватарки, а по уровню никнейма. Попробуйте это прочувствовать в самом низу, когда я покажу картинку целиком.
![](https://habrastorage.org/r/w1560/files/19c/bc7/ec1/19cbc7ec169b484f8f67f413e5fff8d2.png)
И без меня знаете, какие порой жаркие перепалки случаются в комментах аж до нцатого уровня. Тут я опять пытаюсь чуть-чуть оптимизировать user experience, проведя border-left для контейнера с ответами (да, я оказывается умею инспектить элементы в Хроме :). Мне кажется это +N к скорости осознания визуального порядка. Специально усложнил себе задачу, показав версию с пестрейшими аватарками. Хотя если гасить прозрачность аватарок до alpha=0.7 как и все изображения в darcul’e, то возможно и +2N…
![](https://habrastorage.org/r/w1560/files/3f2/e28/303/3f2e28303ba247e2bdd40ff7dff21c7b.png)
Вообще конечно все эти иконостасы невнятные надо сменить на материальные, но было ленно. Извините. Зато было не ленно применить к кнопкам аналогичный стиль как и для кнопки написания поста наверху. В оригинале стили этих кнопок отличаются. Это для меня немного странно.
Один в один с “Самое читаемое”. Ладно, ведь утомил небось фрагментами отдельными… Вот смотрите “простыню” целиком:
![](https://habrastorage.org/r/w1560/files/df5/b4c/8a9/df5b4c8a9c084eeb979e537a8750eeb7.png)
Желающие скачать PSD могут проследовать на г.диск
![](https://habrastorage.org/files/ff0/a47/007/ff0a470079204d85839e1171907c7960.jpg)
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
Напомню, что в предыдущем посте я вывернул наизнанку Главную и если кто-то хочет присоединиться к энтузиастам и конвертировать PSD > Stylish, то исходник выложил на г.драйве (сорри за беспорядок в слоях, но обычно я прилежный)
Кстати, пробу уже можете снять. Камрад bano-notit просто молодчинка, схватил пипетку в руки и прямо с png-шек начал выцеплять весь окрас. Скачайте посмотрите этоn пресет для Stylish. Конечно могут быть неточности, ведь дальше главной он пошёл по своей инициативе разукрашивать. Тут я понял, что надо продолжать начатое дело, чтобы он не сбился с пути.
Действительно, на даркуле гораздо сильнее могут забирать на себя внимания картинки с белым фоном. Хорошее решение предложил камрад Rondo в комментах: всем изображениям уменьшать opacity (я рекомендовал бы до 70% / 0.7), а по onhover восстанавливать до 100%. Круто и эффективно!
Идею вновь подхватывает bano-notit, предлагая делать эффекты более плавными через css путём:
.img {opacity: .1; transition: all 1s ease-out;}
Вообще заботушка о юзерах!
Итак — разворот. Посмотрим, что тут у нас темненького:
Автор поста
![](https://habrastorage.org/files/73f/3ae/b9e/73f3aeb9e8104bc6add8ec6aab5d7ced.png)
Ничего необычного тут: линки, цвет кармы и рейтинг у нас уже были определены в первом посте. В блоке ниже лишь позволил себе убрать разделители, добавил ему 1px бордер, который визуально немного усилил очертания. В тот же цвет окрашивается выделенная область блока.
Автор поста снизу
![](https://habrastorage.org/files/1de/07b/9d3/1de07b9d3bf34004a526dde6f3d5d0b7.png)
Вроде бы нужно просто сделать копи-паст. Но нет. Почему-то в оригинале на Хабре разная размерность и интенсивность шрифта как для заголовков “карма” и “рейтинг”, так и для их значений. Решил сохранить, вдруг Хабр что-то понял, а я — еще нет!
Похожие публикации
![](https://habrastorage.org/files/cb6/86d/eaf/cb686deafbea494b99b53716ccde877d.png)
С ними всё тоже самое как и с Хабами на главной. Убрались только куда-то полосочки (не мной!). Это всё какие-то хитрые стили Хабра, меня не спрашивайте. Я лишь только по аналогии с кармой использовал аналогичный цвет для количества комментариев к постам.
Самое читаемое
![](https://habrastorage.org/files/eca/c71/cc9/ecac71cc905949eeb560ce0e33e7cabb.png)
Базируется на аналогичной гаммой что и вышеупомянутый блок, располагающийся справа. Цвет плашки с фильтрами отображения взят из основных табов с главной страницы.
Заголовок комментариев
![](https://habrastorage.org/files/1a9/72a/7a4/1a972a7a40034ad0b3e9982aa1b730b5.png)
Странно, что у Хабра в оригинале тут какой-то уже нцатый стиль шрифта и не от мира сего. Предлагаю “натянуть” сюда аналогичный всем заголовкам font-face. Ведь это и есть заголовок…
Комментарии
![](https://habrastorage.org/files/26b/76e/05c/26b76e05c6624dea823683f0d14e2440.png)
Пытаюсь оптимизировать UX тут. Мне кажется, что если чуть “углубить” ступеньки древовидности комментов, то визуально иерархия будет лучше читаться. Поэтому я выровнял тело коммента и “ответить” не по уровню аватарки, а по уровню никнейма. Попробуйте это прочувствовать в самом низу, когда я покажу картинку целиком.
Иерархия
![](https://habrastorage.org/files/19c/bc7/ec1/19cbc7ec169b484f8f67f413e5fff8d2.png)
И без меня знаете, какие порой жаркие перепалки случаются в комментах аж до нцатого уровня. Тут я опять пытаюсь чуть-чуть оптимизировать user experience, проведя border-left для контейнера с ответами (да, я оказывается умею инспектить элементы в Хроме :). Мне кажется это +N к скорости осознания визуального порядка. Специально усложнил себе задачу, показав версию с пестрейшими аватарками. Хотя если гасить прозрачность аватарок до alpha=0.7 как и все изображения в darcul’e, то возможно и +2N…
Textarea снизу
![](https://habrastorage.org/files/3f2/e28/303/3f2e28303ba247e2bdd40ff7dff21c7b.png)
Вообще конечно все эти иконостасы невнятные надо сменить на материальные, но было ленно. Извините. Зато было не ленно применить к кнопкам аналогичный стиль как и для кнопки написания поста наверху. В оригинале стили этих кнопок отличаются. Это для меня немного странно.
Интересные публикации
Один в один с “Самое читаемое”. Ладно, ведь утомил небось фрагментами отдельными… Вот смотрите “простыню” целиком:
![](https://habrastorage.org/files/df5/b4c/8a9/df5b4c8a9c084eeb979e537a8750eeb7.png)
Желающие скачать PSD могут проследовать на г.диск