Чорно-біле: система дизайну, створена для фокусування

Ми створюємо кожен продукт OLUWA у суворому чорно-білому кольорі. Жодного фірмового синього кольору, жодного акценту бірюзового кольору, жодного «зеленого успіху», що прокрадається в сповіщенні. Мінімалістична чорно-біла система дизайну — це не ностальгія за терміналом і не мудборд, який ми захопили. Це робоче обмеження, яке робить наші рішення швидшими, наші інтерфейси більш розбірливими, а нашу базову доступність вищою за замовчуванням. Ось чому ми вибрали монохром, те, від чого ми відмовилися, а також маркери та правила, які ви можете прийняти завтра.

Чому ми навмисно прибрали колір

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

Руйнівна кнопка червоного кольору. Але також і стан помилки, і маркер обов’язкових полів, і значок сповіщень, і ряд діаграм для користувачів, які відмовилися. Червоний тепер означає п’ять речей, тобто нічого не означає.

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

Висновок: якщо ви використовуєте колір для вирішення проблеми ієрархії, у вас є проблема ієрархії, а не проблема кольору. Монохромний відмовляється дозволяти вам закривати його.

Ієрархія без кольору: три важелі

Без відтінку, всю роботу виконують три важелі.

Шкала типів. Ми використовуємо модульну шкалу з чіткими стрибками, а не безперервним градієнтом розмірів. Кроки, розташовані занадто близько, сприймаються як шум; око потребує однозначного рангу. Наш робочий масштаб становить приблизно 12/14/16/20/28/40/64 пікселів. Основний текст знаходиться на 16, вторинні метадані на 14, а все вище 20 є структурним. Якщо дві речі повинні відчувати себе різними за важливістю, вони отримують різні кроки, ніколи не той самий крок у двох відтінках сірого.

Вага та регістр. З одним шрифтом і без кольору вага стає основним сигналом. Ми використовуємо щонайбільше три ваги: звичайний, середній і один жирний, зарезервований для справжнього виділення. Верхній регістр із відстеженим міжлітерним інтервалом виконує функцію «кольору мітки», позначаючи рядок як категорію або брову без відтінку.

Пробіл. Пробіл – це несуча стіна монохромного макета. Близькі групи пов’язаних речей; їх розділяє відстань. У MadaiOps, нашому додатку для крипто-замовлень, квиток замовлення повністю залежить від цього: ціна, розмір і сторона щільно згруповані, тоді як дія підтвердження відсувається навмисним проміжком, щоб його ніколи не можна було помітити поруч із введенням. Немає необхідності в укладанні червоного «небезпеки». Відстань виконує охорону.

Контраст – це система, а не атмосфера

Пастка з чорним і білим - це думка, що у вас є лише дві цінності. У вас є повна рампа в градаціях сірого, і дисципліна полягає в тому, щоб її стримувати. Ми визначаємо невеликий фіксований набір кроків і забороняємо сірі відтінки. Ось пандус, який ми фактично доставляємо:

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

Шість значень. Це вся система, плюс її інверсія для темного режиму. Правило, яке ми перевіряємо: не може існувати жодного сірого, що не на рампі. У той момент, коли хтось кидає піпеткою #8a8a8a, тому що «рамка відчувається важким дотиком», система починає гнити. Замкнутий набір значень — це те, що не дає монохромному інтерфейсу користувача зануритися в брудну однаковість.

Очищення тексту 4,5:1, структура — 3:1

Кожне поєднання тексту на поверхні перевіряється на коефіцієнт контрастності WCAG перед надсиланням. --ink-500 на --paper досягає приблизно 5,7:1, що значно перевищує порогове значення 4,5:1 для основного тексту. --ink-300 не працює як текст і, отже, дозволяється тільки для меж і роздільників, де застосовується порогове значення 3:1 для нетексту. Кодування правила в дозволених варіантах використання маркера, а не лише його значення, ось що робить його дотриманням.

Дивіденд доступності

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

Ця дисципліна змушує скрізь дотримуватися більш здорової моделі: ніколи не дозволяйте одному каналу нести значення окремо. Вимкнена кнопка в нашій системі не просто легша. Він втрачає межі, а його мітка зменшується до --ink-300, тому стан зберігається на екрані у градаціях сірого, при яскравому сонячному світлі та для користувача з дальтоніком однаково. Youp, наша програма для ведення журналу, позначає записи про настрій іконографією та текстом мітки, а не звичайним градієнтом настрою від червоного до зеленого, тому емоційна історія читається без опори на спектр, який багато людей не бачать.

Ви також отримуєте підтримку високої контрастності та примусових кольорів, близьку до безкоштовної, тому що ви ніколи не боролися з власними обмеженнями доступності браузера за допомогою делікатної палітри бренду.

Як обмеження прискорюють прийняття рішень

Недооціненою перевагою є швидкість. Палітра — це комбінаторний вибух: кожен новий компонент множиться проти кожного відтінку та кожного стану. Монохромність руйнує це. Не приймаючи рішення щодо кольору, дизайн компонента зводиться до кроку введення, ваги, інтервалу та маркера відтінків сірого для рамки. Це рішення, яке ви можете прийняти за лічені секунди та захистити в огляді за допомогою правила, а не смакового аргументу.

Це також сполуки. Оскільки набір токенів крихітний і закритий, компоненти складаються передбачувано: картка, рядок таблиці та модальний — усі вони складаються з тих самих шести сірих і тих самих семи кроків типу, тому вони виглядають пов’язаними без жодної координації. Нові поверхні успадковують узгодженість замість того, щоб погоджувати її. Для невеликої студії, яка постачає кілька продуктів, цей спільний субстрат – це різниця між чотирма програмами, які виглядають як одна сім’я, і чотирма програмами, які виглядають як чотири постачальники.

Компроміс реальний і вартий назви. Монохромний колір має менший діапазон виразності, а деякі категорії справді потребують кольору: візуалізація даних із багатьма серіями, будь-що, що відображається на фізичному кольорі, моменти бренду, які обмінюються теплотою. Ми не претендуємо на протилежне. Наша позиція полягає в тому, що колір має бути заслуженим і рідкісним, запровадженим навмисно для конкретної роботи, а не як важіль за замовчуванням для ієрархії. Коли ми все-таки тягнемося до нього, він важко приземляється саме тому, що навколо нього тихо.

Правила, які ви можете прийняти завтра

Якщо ви хочете спробувати це без перебудови всього:

Закрийте свою сіру рамку. Виберіть п’ять-шість значень, назвіть їх і забороніть усе з рампи під час перевірки коду. Це єдине правило виконує більшу частину роботи.
Створіть масштаб одного типу та використовуйте лише його кроки. Жодних довільних розмірів шрифту. Якщо вам постійно потрібен новий розмір, масштаб неправильний; виправте масштаб, не додавайте одноразове.
Кодуйте дозволені варіанти використання в токени. --ink-300 — це «лише межі», а не просто шістнадцяткове значення. Задокументуйте це там, де його прочитають інженери.
Перевірте кожен сигнал, що несе значення, для другого каналу. Якщо видалення кольору зробить стан неоднозначним, додайте форму, мітку або положення, доки це не станеться.
Розглядайте пробіли як компоненти. Додайте пробіли з іменами токенів і захищайте їх під час перегляду так само, як ви захищаєте кольори в інших місцях.

Заключна думка

Чорно-біла робота не є обмеженням, яке ми терпимо; це лінза, яка прояснює. Викресліть найлегшу змінну, а структурним, ритму, пропорції, контрасту, простору, нікуди сховатися. Інтерфейс або має справжню ієрархію, або її немає, і ви відразу дізнаєтеся про це. Ця чесність для нас коштує більше, ніж будь-яка палітра.