Монохромный интерфейс - дерзкое решение?

При разработке одной бесплатной системы для управления задачами и документами в компании или в команде было решено попробовать необычный подход к пользовательскому интерфейсу. Во-первых, тему по-умолчанию сделали темной (dark mode). Но это не самое вызывающее решение в данном проекте. В приложении есть всего четыре темы оформления пользовательского интерфейса, две из которых — монохромные. Хотя, если быть совершенно честным, они монохромные не на 100% (а где-то на 95: ) Но это не принципиально. В этой публикации мне хотелось бы рассказать как проект дошел до такого и что из этого вышло.

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

И так, что же привело к такому решению?

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

Однако в данном проекте было решено пойти еще дальше. Почему тема должна быть с оттенками серого? Мне кажется монохромная еще лучше в этом смысле.

Особенности создания монохромного дизайна

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

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

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

На этом все. Спасибо всем кто прочитал эту заметку.

Если хотите посмотреть приложение вживую, то заходите на сайт EDM Project, там есть ссылка на демо-версию. Можете также посетить и страничку проекта здесь на vc. ru.

33
4 комментария

Вы украли идею у Грустнограмма?

1
Ответить

Нет, идея пришла на ум независимо от чего-то иного:)

Ответить

Рано спрашивать, но есть уже какие-нибудь результаты? Что говорят пользователи?
Тоже подумывали сделать аналогичный интерфейс для одной торговой площадки

Ответить

Да, спрашивать рано, пока видимо слишком мало пользователей.

Ответить