Bir sistemin renkleri, aralıkları, yazı boyutları ve süreleri bir yerde bir kez tanımlanmalı ve her yerden oraya başvurulmalıdır. Bu modül belirtecin ne olduğunu, ham, anlamsal ve bileşen belirteçlerini, belirteçle tema kurmayı, belirteçleri adlandırmayı ve onları tasarım aracından koda aktarmayı anlatır.
Bu modülün sonunda
- Bir sistemin renk ve aralık kararlarını ham ve anlamsal belirteçlere ayırır.
- Bir belirteç adlandırma kuralı yazar ve bir temayı belirteçlerle üretir.
Dersler
- M02-D01Belirteç nedirProgramda
Tasarım kararlarını adlandırılmış değerler olarak saklamanın tasarım ile kod arasında ortak bir kaynak kurmasını açıklar.
Dayanak: Meslek kaynağı: W3C Design Tokens Community Group, biçim taslağı (sürüm yazımda doğrulanır)
- M02-D02Ham, anlamsal ve bileşenProgramda
Bir rengin ham değerini, anlamını («hata rengi») ve bir bileşendeki kullanımını («düğme arka planı») ayrı katmanlarda tanımlamayı gösterir.
Dayanak: Meslek kaynağı: W3C Design Tokens Community Group biçim taslağı; belirteç katmanları (kaynak yazımda seçilir)
- M02-D03Belirteçle temaProgramda
Anlamsal belirteçlerin açık, karanlık ve yüksek kontrast temalarını aynı bileşenlerle üretmeyi nasıl mümkün kıldığını gösterir; tek ekran tarafı için Arayüz Tasarımı akademisini gösterir.
Dayanak: Standart: W3C, WCAG 2.2 (2023); Arayüz Tasarımı akademisine bağlantı
- M02-D04AdlandırmaProgramda
Belirteçleri herkesin anlayacağı, büyümeye dayanacak bir adlandırma kuralıyla adlandırmayı gösterir.
Dayanak: Belirteç adlandırma (kaynak yazımda seçilir)
- M02-D05Belirteçleri koda aktarmakProgramda
Belirteçlerin tek bir dosyadan web, iOS ve Android için koda nasıl dönüştürüldüğünü ilk bakışta açıklar.
Dayanak: Meslek kaynağı: W3C Design Tokens Community Group biçim taslağı; belirteç dönüştürme (kaynak yazımda seçilir)