Czerń i biel: system projektowy stworzony dla skupienia

Każdy produkt OLUWA budujemy w ścisłej czerni i bieli. Bez markowego niebieskiego, bez akcentowego turkusu, bez „zieleni sukcesu" wkradającej się do powiadomienia toast. Minimalistyczny czarno-biały system projektowy to nie nostalgia za terminalem ani moodboard, w którym się zakochaliśmy. To robocze ograniczenie, które przyspiesza nasze decyzje, czyni nasze interfejsy czytelniejszymi, a naszą bazową dostępność domyślnie wyższą. Oto dlaczego wybraliśmy monochromię, z czego zrezygnowaliśmy oraz tokeny i zasady, które mógłbyś przyjąć choćby jutro.

Dlaczego usunęliśmy kolor celowo

Kolor to najbardziej nadużywana zmienna w projektowaniu interfejsów. Tani w dodaniu, drogi w utrzymaniu w ryzach. W chwili, gdy masz paletę, każdy element rywalizuje o jeden z twoich odcieni, a „jaki kolor powinno to mieć" staje się pytaniem, na które odpowiadasz setki razy w tygodniu, zwykle niespójnie.

Przycisk niszczący jest czerwony. Ale czerwony jest też stan błędu, znacznik pola wymaganego, plakietka powiadomienia i seria wykresu dla utraconych użytkowników. Czerwień znaczy teraz pięć rzeczy, czyli nie znaczy nic.

Usunięcie koloru usuwa całą tę klasę decyzji. Gdy nie możesz sięgnąć po odcień, by zasygnalizować ważność, sygnalizujesz ją narzędziami, które faktycznie niosą znaczenie: pozycją, rozmiarem, grubością i przestrzenią. Te narzędzia są uczciwsze. Nagłówek czyta się jako ważny, bo jest duży i siedzi na górze z przestrzenią wokół, a nie dlatego, że ktoś pomalował go na fioletowo.

Wniosek: jeśli używasz koloru, by naprawić problem z hierarchią, masz problem z hierarchią, a nie z kolorem. Monochromia odmawia pozwolenia, byś go zaklejał.

Hierarchia bez koloru: trzy dźwignie

Gdy odcień znika ze stołu, całą pracę wykonują trzy dźwignie.

Skala typograficzna. Prowadzimy skalę modularną z wyraźnymi skokami, a nie ciągły gradient rozmiarów. Kroki, które siedzą zbyt blisko, czytają się jako szum; oko potrzebuje jednoznacznej rangi. Nasza robocza skala to z grubsza 12 / 14 / 16 / 20 / 28 / 40 / 64 px. Tekst główny siedzi na 16, drugorzędne metadane na 14, a wszystko powyżej 20 jest strukturalne. Jeśli dwie rzeczy mają wydawać się różne pod względem ważności, dostają różne kroki, nigdy ten sam krok w dwóch odcieniach szarości.

Grubość i wielkość liter. Przy jednym kroju i braku koloru grubość staje się głównym sygnałem. Używamy najwyżej trzech grubości: zwykłej, średniej i pojedynczej pogrubionej zarezerwowanej dla prawdziwego wyróżnienia. Wersaliki z rozstrzelonym odstępem między literami wykonują robotę „koloru etykiety", oznaczając ciąg jako kategorię lub nadtytuł bez najmniejszego odcienia.

Przestrzeń. Puste pole to nośna ściana monochromatycznego układu. Bliskość grupuje rzeczy powiązane; dystans je rozdziela. W MadaiOps, naszej aplikacji do zleceń kryptowalutowych, kwit zlecenia opiera się na tym całkowicie: cena, wielkość i strona siedzą ciasno zgrupowane, podczas gdy akcja potwierdzenia jest odepchnięta celową przestrzenią, tak by nigdy nie dało się jej trafić grubym palcem tuż obok pola wejściowego. Bez żadnego czerwonego stylowania „niebezpieczeństwa". To odstępy pełnią straż.

Kontrast to system, a nie klimat

Pułapka czerni i bieli polega na myśleniu, że masz tylko dwie wartości. Masz pełną skalę odcieni szarości, a dyscyplina tkwi w jej powściąganiu. Definiujemy mały, ustalony zestaw kroków i zakazujemy szarości spoza skali. Oto skala, którą faktycznie wdrażamy:

--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 */

Sześć wartości. To cały system, plus jego odwrotność dla trybu ciemnego. Zasada, którą egzekwujemy w przeglądzie: nie może istnieć żadna szarość, której nie ma na skali. W chwili, gdy ktoś pobiera pipetą #8a8a8a, bo „obramowanie wydało się odrobinę ciężkie", system zaczyna gnić. Zamknięty zbiór wartości jest tym, co chroni monochromatyczny interfejs przed dryfem w błotnistą jednostajność.

Tekst przekracza 4,5:1, struktura przekracza 3:1

Każde parowanie tekstu na tle jest sprawdzane względem współczynników kontrastu WCAG, zanim trafi na produkcję. --ink-500 na --paper ląduje w okolicach 5,7:1, wygodnie poza progiem 4,5:1 dla tekstu głównego. --ink-300 przepada jako tekst i dlatego dozwolony jest wyłącznie dla obramowań i separatorów, gdzie obowiązuje próg 3:1 dla elementów nietekstowych. Zakodowanie zasady w dozwolonych zastosowaniach tokena, a nie tylko w jego wartości, jest tym, co sprawia, że się utrzymuje.

Dywidenda dostępności

To tutaj monochromia po cichu wygrywa. Z grubsza jeden na dwunastu mężczyzn ma jakąś formę zaburzenia widzenia barw, a każdy interfejs, który opiera się na czerwieni kontra zieleni, by nieść znaczenie, jest nieczytelny dla znaczącego wycinka użytkowników. Nigdy nie uderzamy w tę ścianę, bo od początku nigdy nie kodowaliśmy znaczenia w odcieniu. Nasze stany rozróżniane są kształtem, etykietą, grubością i pozycją.

Ta dyscyplina wymusza zdrowszy wzorzec wszędzie: nigdy nie pozwól, by pojedynczy kanał niósł znaczenie samotnie. Wyłączony przycisk w naszym systemie nie jest po prostu jaśniejszy. Traci obramowanie, a jego etykieta spada do --ink-300, dzięki czemu stan przetrwa na ekranie w skali szarości, w jasnym słońcu i dla użytkownika z daltonizmem identycznie. Youp, nasza aplikacja do prowadzenia dziennika, oznacza wpisy nastroju ikonografią i tekstem etykiety zamiast zwyczajowego gradientu sentymentu od czerwieni do zieleni, dzięki czemu historia emocji czyta się bez polegania na spektrum, którego wielu ludzi nie widzi.

Wsparcie dla wysokiego kontrastu i wymuszonych kolorów dostajesz przy okazji niemal za darmo, bo nigdy nie walczyłeś z własnymi nadpisaniami dostępności przeglądarki delikatną paletą marki.

Jak ograniczenie przyspiesza decyzje

Niedocenianą korzyścią jest tempo. Paleta to eksplozja kombinatoryczna: każdy nowy komponent mnoży się przez każdy odcień i każdy stan. Monochromia to zwija. Bez decyzji o kolorze projekt komponentu redukuje się do kroku typograficznego, grubości, odstępów i tego, który token skali szarości dla obramowania. To decyzja, którą podejmiesz w sekundy i obronisz w przeglądzie zasadą, a nie sporem o gust.

To się też kumuluje. Ponieważ zbiór tokenów jest maleńki i zamknięty, komponenty komponują się przewidywalnie: karta, wiersz tabeli i okno modalne czerpią z tych samych sześciu szarości i tych samych siedmiu kroków typograficznych, więc wyglądają na spokrewnione bez żadnej koordynacji. Nowe powierzchnie dziedziczą spójność, zamiast o nią negocjować. Dla małego studia wdrażającego kilka produktów ten wspólny substrat to różnica między czterema aplikacjami, które wydają się jedną rodziną, a czterema aplikacjami, które wydają się czterema dostawcami.

Kompromis jest realny i wart nazwania. Monochromia ma mniejszy surowy zakres ekspresji, a niektóre kategorie autentycznie potrzebują koloru: wizualizacja danych z wieloma seriami, cokolwiek odwzorowującego fizyczny kolor, momenty marki grające na cieple. Nie udajemy inaczej. Nasze stanowisko jest takie, że kolor powinien być zasłużony i rzadki, wprowadzany celowo do konkretnego zadania, nigdy jako domyślna dźwignia hierarchii. Gdy już po niego sięgamy, ląduje mocno właśnie dlatego, że wszystko wokół jest ciche.

Zasady, które możesz przyjąć jutro

Jeśli chcesz spróbować tego bez przebudowywania wszystkiego:

• Zamknij swoją skalę szarości. Wybierz pięć lub sześć wartości, nazwij je i zakaż w przeglądzie kodu wszystkiego spoza skali. Ta jedna zasada wykonuje większość pracy.
• Zrób jedną skalę typograficzną i używaj wyłącznie jej kroków. Żadnych dowolnych rozmiarów czcionek. Jeśli wciąż potrzebujesz nowego rozmiaru, skala jest zła; napraw skalę, nie dodawaj jednorazowca.
• Zakoduj dozwolone zastosowania w tokenach. --ink-300 to „tylko obramowania", a nie po prostu wartość szesnastkowa. Udokumentuj to tam, gdzie inżynierowie będą czytać.
• Zaudytuj każdy sygnał niosący znaczenie pod kątem drugiego kanału. Jeśli usunięcie koloru uczyniłoby stan niejednoznacznym, dodawaj kształt, etykietę lub pozycję, aż przestanie.
• Traktuj puste pole jak komponent. Nadaj odstępom nazwane tokeny i broń ich w przeglądzie tak, jak gdzie indziej bronisz kolorów.

Myśl na koniec

Praca w czerni i bieli to nie ograniczenie, które tolerujemy; to soczewka, która wyostrza. Wyrzuć najłatwiejszą zmienną, a strukturalne — rytm, proporcja, kontrast, przestrzeń — nie mają się gdzie ukryć. Interfejs albo ma prawdziwą hierarchię, albo nie ma, a dowiadujesz się tego natychmiast. Ta uczciwość jest dla nas warta więcej niż jakakolwiek paleta.