Серія інтерфейсних (не)оновлень — «Хабрахабр joins darkside»

Сьогодні я представляю свою продуктову фантазію інтерфейсного оновлення «Хабрахабра». Я вирішив «вивернути навиворіт» Хабр і запропонувати програмістам, яких тут більшість, залишатися у своїй робочої колірній гамі. Відтепер читайте Ваш улюблений ресурс, концептуально перейшов на темну сторону. Докладніше, як я докотився до цього, Ви зможете прочитати під катом.



В якості незалежного експерта з дизайну інтерфейсів для багатьох своїх клієнтів я часто виступаю і продуктовим дизайнером. Можливо трохи загадкова формулювання. Продукти? Дизайнер? «Дизайн сиру і ковбаси чи що робиш?» Немає. Говорячи простою мовою, продуктовий дизайнер придумує загальний зовнішній вигляд продукту, виходячи з цілей бізнесу або конкретної аудиторії ресурсу. Останнє — це як раз по темі даної статті про Хабр і мій колірний концепт.

Складно посперечатися з зручністю читання чорного на білому, але якщо продуктова лінійка для девелоперів виконана навпаки, то це неспроста. Побіжно вивчивши серію продуктів, в яких пишеться код, я помітив деякі закономірності використання кольорів. Нижче я просто візьму і «натягну» Darcul'на наш з Вами улюблений ресурс, а Ви розкажете як воно взагалі :)

Мені сподобалася ось така гама з intellij IDEA:



Глянув також на Python, Microsoft Visual Studio і т. п. Скрізь плюс-мінус однаковий підхід.

Шапка
Логотип швиденько вивертається навиворіт. Далі підтягую рівні в Фотошопі, щоб він став «біліше». Міняю режим накладення і вуаля. Fira sans вже був встановлений в моїй системі:



Тяга до улучшизму так і змушує зробити команду більш помітною і закликає до написання поста:



Але я ж не можу вважати себе розумнішими розробників Хабра, тому залишаю все в поточному ключі. Ми і так всі прекрасно запам'ятали вже, куди перекочувала ця кнопка. Збережу окантовочку, прокладу невеликий фончик:



Таби
Підчіплюю сірий колір вкладок з середовища java-програмування (скрін вище). Фон для неактивних вкладок — аналогічно. В оригінальній гамі Хабра помітно, що для посилань «Цікаві, все підряд, ...» використовується відтінок ненасиченого синього, але я поки витримую всі в ч/б:



Хаби
Щоб блок сильно не забирав на себе увагу, застосовую той же фон, що і у неактивних табах. Помітив, що в Microsoft Visual Studio використовується блакитний, колір активних елементів. Застосовую цей колір лінків, зробивши його трохи світліше:



Автори
Аналогічна суть. Сорян тим, кого «обрізав», якщо ви ще тут. Де-то там вже край екрану. М'ятна зелень для топ-3 вкладників була підчіплюючи з java-середовища:



Основний контейнер
Це, мабуть, єдине нововведення: впроваджено трохи більш темний фон для блоку з постами. Аналогічно тому, як код пишеться в більш темному блоці майже у всіх програмістських продуктах. Лінки вже мають свій колір, рейтинг пофарбований тим же, що і внесок у «Авторів». Хаби — нехай будуть фіолетовими. З турботою про Ваших очах — текст має не білий колір #FFFFFF, а світло-сірий #CDCDCD. Я додав бічних відступів, щоб посади занурилися всередину контейнера:



Загальний вигляд
Знаю-знаю. Втомив Вас цими шматками. Ось, що вийшло в результаті:


А якщо бомбоне?
Ймовірність колосальна! Тому робимо десь в шапці інструмент перемикання з темної теми в дефолтну:



У чому взагалі потенційний профіт цієї затії? Якщо затрималися на роботі до вечора, а за вікном стемніло — просто клацнули на переключалку в темну тему. Сидіть собі і читайте при світлі настільної лампи. Насолоджуйтесь!

Я звичайно багато питань не охопив: низ відкритого посту, коментарі, форми, профіль і т. п… Торкнуся, якщо концепція виявиться життєздатною.

Пс: трошки backstage, або «як пікселем потрапити в точку»:



Ппс: друзі, я не є членом команди Хабра. даний пост — це набір фантазій незалежного дизайнера інтерфейсів, не більше того… Але якщо ми всі дружно попросимо ;)

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.