Siyah Beyaz: Odaklanmak İçin Geliştirilmiş Bir Tasarım Sistemi

Her OLUWA ürününü tamamen siyah beyaz olarak üretiyoruz. Marka mavisi yok, turkuaz vurgu yok, tost bildirimine sinen "başarı yeşili" yok. Minimalist siyah beyaz tasarım sistemi, terminal için bir nostalji değildir ve aldandığımız bir ruh hali panosu değildir. Kararlarımızı daha hızlı, arayüzlerimizi daha okunaklı ve erişilebilirlik temel çizgimizi varsayılan olarak daha yüksek hale getiren, çalışan bir kısıtlamadır. Bu yüzden monokromu seçtik, vazgeçtiklerimiz ve yarın benimseyebileceğiniz belirteçler ve kurallar.

Neden rengi bilerek kaldırdık?

Renk, arayüz tasarımında en çok suiistimal edilen değişkendir. Eklemek ucuz, yönetmek ise pahalıdır. Bir palete sahip olduğunuz anda, her öğe sizin renk tonlarınızdan biri için rekabet eder ve "bu ne renk olmalı" sorusu, haftada yüzlerce kez, genellikle tutarsız bir şekilde yanıtladığınız bir soru haline gelir.

Yıkıcı bir düğme kırmızıdır. Ancak hata durumu, zorunlu alan işaretçisi, bildirim rozeti ve uygulamayı kullanmayı bırakan kullanıcılar için grafik serisi de öyle. Kırmızı artık beş şey ifade ediyor, yani hiçbir şey ifade etmiyor.

Rengin kaldırılması, tüm karar sınıfını ortadan kaldırır. Önemini belirtmek için bir renk tonuna ulaşamadığınızda, bunu aslında anlam taşıyan araçlarla belirtirsiniz: konum, boyut, ağırlık ve boşluk. Bu araçlar daha dürüst. Bir başlık, birisi onu mora boyadığı için değil, büyük olduğu ve etrafında boşluk olacak şekilde üstte durduğu için önemli olarak algılanır.

Çıkarılan sonuç: eğer bir hiyerarşi problemini çözmek için renk kullanıyorsanız, bir renk probleminiz değil, bir hiyerarşi probleminiz vardır. Tek renkli, bunun üzerine kağıt koymanıza izin vermez.

Renksiz hiyerarşi: üç kaldıraç

Renk tonu ortadan kalktığında tüm işi üç kol yapar.

Tür ölçeği. Sürekli bir boyut geçişi değil, net sıçramalar içeren modüler bir ölçek kullanıyoruz. Çok yakın duran adımlar gürültü olarak okunur; gözün kesin bir sıralamaya ihtiyacı vardır. Çalışma ölçeğimiz kabaca 12/14/16/20/28/40/64 pikseldir. Gövde metni 16. sırada, ikincil meta veriler 14. sırada yer alır ve 20'nin üzerindeki her şey yapısaldır. Eğer iki şeyin önem açısından farklı olması gerekiyorsa, farklı adımlar atılır, asla grinin iki tonunda aynı adım atılmaz.

Ağırlık ve kasa. Tek bir yazı tipiyle ve renk olmadan ağırlık birincil sinyal haline gelir. En fazla üç ağırlık kullanırız: normal, orta ve gerçek vurgu için ayrılmış tek kalın. Harf aralıklarının izlendiği büyük harf, bir dizeyi renk tonu olmadan bir kategori veya kaş olarak işaretleyerek "etiket rengi" işini yapar.

Boşluk. Boşluk, tek renkli bir düzenin yük taşıyan duvarıdır. Yakınlık grupları ile ilgili şeyler; mesafe onları ayırır. Kripto emirleri uygulamamız MadaiOps'de, emir bileti tamamen buna dayanır: fiyat, boyut ve yanlar sıkı bir şekilde gruplandırılmışken, onaylama eylemi kasıtlı bir boşlukla bir kenara itilir, böylece bir girişin yanında asla kalın parmaklı olamaz. Kırmızı "tehlike" stiline gerek yok. Boşluk korumayı sağlar.

Kontrast bir sistemdir, bir his değil

Siyah beyazın tuzağı, yalnızca iki değere sahip olduğunuzu düşünmektir. Tam bir gri tonlamalı rampanız var ve disiplin onu sınırlamaktır. Küçük, sabit bir dizi adım tanımlarız ve rampa dışı grileri yasaklarız. İşte aslında gönderdiğimiz rampa:

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

Altı değer. Bu, tüm sistemin artı karanlık modun tersidir. İnceleme sırasında uyguladığımız kural: rampada olmayan hiçbir gri bulunmayabilir. Birisi "kenarlık biraz ağır geldi" diye bir #8a8a8a'nin gözünü damlattığı anda sistem çürümeye başlar. Kapalı bir değerler kümesi, tek renkli bir kullanıcı arayüzünün çamurlu aynılığa sürüklenmesini engelleyen şeydir.

Metin 4,5:1 oranında temizler, yapı ise 3:1 oranında temizler

Yüzeydeki her metin eşleştirmesi, gönderilmeden önce WCAG kontrast oranlarına göre kontrol edilir. --paper üzerindeki --ink-500, gövde metni için 4,5:1 eşiğini rahatlıkla aşarak 5,7:1 civarına iniyor. --ink-300 metin olarak başarısız olur ve bu nedenle yalnızca 3:1 metin dışı eşiğin geçerli olduğu kenarlıklar ve bölücüler için izin verilir. Kuralın, tokenin yalnızca değerine değil, izin verilen kullanımlarına da kodlanması, onu kalıcı kılan şeydir.

Erişilebilirlik payı

Monokromun sessizce kazandığı yer burasıdır. Yaklaşık on iki erkekten birinde bir tür renk görme eksikliği var ve anlam taşımak için kırmızıya karşı yeşile dayanan herhangi bir arayüz, kullanıcıların anlamlı bir kısmı için okunaksız. O duvara asla çarpmadık çünkü başlangıçta renk tonunun anlamını asla kodlamadık. Durumlarımız şekil, etiket, ağırlık ve konum açısından farklılık gösterir.

Bu disiplin her yerde daha sağlıklı bir modeli zorunlu kılar: asla tek bir kanalın tek başına anlam taşımasına izin vermeyin. Sistemimizdeki devre dışı bırakılmış bir düğme sadece daha hafif değildir. Kenarlığını kaybeder ve etiketi --ink-300'ye düşer, böylece durum gri tonlamalı bir ekranda, parlak güneş ışığında ve renk körü bir kullanıcı için aynı şekilde hayatta kalır. Günlük tutma uygulamamız Youp, ruh hali girişlerini olağan kırmızıdan yeşile duygu gradyanı yerine ikonografi ve etiket metniyle işaretler, böylece duygusal tarih, birçok insanın göremediği bir spektruma dayanmadan okunur.

Hassas bir marka paleti ile tarayıcının kendi erişilebilirlik geçersiz kılmalarıyla hiçbir zaman mücadele etmediğiniz için, yüksek kontrast ve zorlanmış renk desteğine de neredeyse ücretsiz olarak sahip oluyorsunuz.

Kısıtlama kararları nasıl hızlandırır?

Az önem verilen fayda hızdır. Bir palet, kombinatoryal bir patlamadır: Her yeni bileşen, her renk tonuna ve her duruma göre çoğalır. Tek renkli bunu çökertir. Renk kararı verilmesine gerek kalmadan, bir bileşenin tasarımı; yazı adımına, ağırlığa, aralığa ve kenarlık için hangi gri tonlamalı belirtece indirgenir. Bu, saniyeler içinde verebileceğiniz ve incelemede beğeni tartışması yerine kuralla savunabileceğiniz bir karardır.

O da birleşiyor. Jeton kümesi küçük ve kapalı olduğundan, bileşenler tahmin edilebilir bir şekilde oluşur: bir kart, bir tablo sırası ve bir modelin tümü aynı altı griden ve aynı yedi tip adımdan oluşur, dolayısıyla herhangi bir koordinasyon olmaksızın ilişkili görünürler. Yeni yüzeyler, bunun için pazarlık yapmak yerine tutarlılığı miras alır. Birkaç ürün sunan küçük bir stüdyo için, bu paylaşılan alt tabaka, bir aile gibi hissettiren dört uygulama ile dört satıcı gibi hissettiren dört uygulama arasındaki farktır.

Takas gerçektir ve adlandırmaya değer. Tek renkli, daha az ham ifade aralığına sahiptir ve bazı kategoriler gerçekten renge ihtiyaç duyar: birçok seriyle veri görselleştirme, fiziksel bir renkle eşlenen her şey, sıcaklıktan ödün veren marka anları. Aksini iddia etmiyoruz. Bizim duruşumuz, rengin kazanılmış ve nadir olması, belirli bir iş için kasıtlı olarak tanıtılması gerektiği, asla hiyerarşinin varsayılan aracı olmaması yönündedir. Ona uzandığımızda sert bir şekilde iniyor çünkü etrafındaki her şey sessiz.

Yarın uygulayabileceğiniz kurallar

Her şeyi yeniden kurmadan bunu denemek istiyorsanız:

Gri rampanızı kapatın. Beş veya altı değer seçin, bunlara ad verin ve kod incelemesinde rampanın dışındaki her şeyi yasaklayın. Bu tek kural işin çoğunu halleder.
Tek tip ölçek yapın ve yalnızca onun adımlarını kullanın. Rastgele yazı tipi boyutları yoktur. Sürekli yeni bir boyuta ihtiyacınız varsa ölçek yanlıştır; Ölçeği düzeltin, tek seferlik eklemeyin.
İzin verilen kullanımları belirteçlere kodlayın. --ink-300 yalnızca onaltılık bir değer değil, "yalnızca kenarlıklar"dır. Mühendislerin okuyacağı yerde belgeleyin.
İkinci bir kanal için anlam taşıyan her sinyali denetleyin. Rengin kaldırılması durumu belirsiz hale getirecekse, belirsiz hale gelmeyene kadar şekil, etiket veya konum ekleyin.
Boşlukları bir bileşen olarak değerlendirin. Belirteçlere adlandırılmış boşluklar verin ve başka yerlerde renkleri savunduğunuz gibi bunları da inceleme sırasında savunun.

Kapanış düşüncesi

Siyah-beyaz çalışmak tahammül edebileceğimiz bir sınırlama değil; netleştiren bir mercektir. En kolay değişkeni çıkardığınızda yapısal olanların (ritim, orantı, kontrast, boşluk) saklanacak hiçbir yeri kalmaz. Arayüzün ya gerçek bir hiyerarşisi vardır ya da yoktur ve bunu hemen anlarsınız. Bu dürüstlük bizim için herhangi bir paletten daha değerlidir.